:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-2: #edf6f1;
  --text: #17211f;
  --ink: #17211f;
  --muted: #5d6d68;
  --line: #d7e3df;
  --primary: #1f6f62;
  --primary-dark: #14564c;
  --accent: #2563eb;
  --accent-soft: #eaf2ff;
  --amber: #a16207;
  --amber-soft: #fff7e6;
  --ok: #15803d;
  --warn: #b45309;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

/* Accessibility preferences: a reversible, local-only senior-friendly presentation. */
.accessibility-settings {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid #cfe0da;
  border-radius: 24px;
  background: linear-gradient(145deg, #f7fcf9, #e8f4ef);
}

.accessibility-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.accessibility-settings-head h2,
.accessibility-settings-head p {
  margin: 0;
}

.accessibility-settings-head h2 {
  margin-top: 3px;
  font-size: 22px;
}

.accessibility-settings-head #accessibilityModeStatus {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.55;
}

.accessibility-badge {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 14px;
  color: #fff;
  background: var(--primary);
  font-size: 14px;
  font-weight: 800;
}

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

.accessibility-mode-picker button {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 13px;
  border: 2px solid #cbdad5;
  border-radius: 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.88);
  text-align: left;
}

.accessibility-mode-picker button.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31, 111, 98, 0.13);
  background: #fff;
}

.accessibility-mode-picker strong {
  font-size: 17px;
}

.accessibility-mode-picker small,
.accessibility-safety-note {
  color: var(--muted);
  line-height: 1.5;
}

.accessibility-extra-actions {
  display: grid;
  gap: 10px;
}

.accessibility-extra-actions .settings-row {
  border: 1px solid #d9e5e1;
  border-radius: 16px;
  background: #fff;
}

.accessibility-extra-actions .settings-row > span {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 3px;
}

.accessibility-extra-actions .settings-row > span small {
  color: var(--muted);
  line-height: 1.5;
  white-space: normal;
}

.accessibility-extra-actions .settings-row i {
  flex: 0 0 auto;
  align-self: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf5f2;
  white-space: nowrap;
}

.accessibility-extra-actions .settings-row.active i {
  color: var(--primary-dark);
  font-weight: 800;
}

.accessibility-safety-note {
  margin: 0;
  font-size: 13px;
}

html[data-accessibility-mode="senior"] body {
  font-size: 18px;
  line-height: 1.65;
}

html[data-accessibility-mode="senior"] :is(button, input, select, textarea) {
  font-size: 18px;
}

html[data-accessibility-mode="senior"] :is(.primary-button, .ghost-button, .icon-button, .settings-row, .tab-button) {
  min-height: 56px;
}

html[data-accessibility-mode="senior"] :is(.settings-row, .dose-card, .timeline-card, .profile-summary, .privacy-card) {
  border-width: 2px;
}

html[data-accessibility-mode="senior"] .settings-row {
  gap: 14px;
  padding: 16px;
}

html[data-accessibility-mode="senior"] .settings-row strong,
html[data-accessibility-mode="senior"] .settings-row > span:not(:has(small)) {
  font-size: 19px;
}

html[data-accessibility-mode="senior"] :is(.settings-row small, .eyebrow, .helper, .muted, .accessibility-safety-note) {
  font-size: 15px;
  line-height: 1.6;
}

html[data-accessibility-mode="senior"] :is(.section-title, .profile-summary h3, .privacy-card h3) {
  font-size: 26px;
  line-height: 1.35;
}

html[data-accessibility-mode="senior"] .tab-bar {
  min-height: 80px;
}

html[data-accessibility-mode="senior"] .tab-button {
  padding-block: 10px;
  font-size: 16px;
  font-weight: 800;
}

html[data-accessibility-mode="senior"] .accessibility-settings {
  border-color: #14564c;
}

html.high-contrast {
  --text: #07110f;
  --ink: #07110f;
  --muted: #34433f;
  --line: #8da49d;
  --primary: #0d6255;
  --primary-dark: #073f37;
}

html.high-contrast :focus-visible {
  outline: 4px solid #f4a100;
  outline-offset: 3px;
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (max-width: 420px) {
  html[data-accessibility-mode="senior"] .accessibility-mode-picker {
    grid-template-columns: 1fr;
  }

  html[data-accessibility-mode="senior"] .accessibility-mode-picker button {
    min-height: 70px;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Store-readiness polish: clearer consent, calmer touch feedback, safer sheets. */
button,
[role="button"],
input,
select,
textarea,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled) {
  transition: transform 120ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

button:not(:disabled):active {
  transform: scale(0.985);
}

.sheet-panel {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sheet-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.consent-sheet {
  max-width: 620px;
}

.consent-summary {
  display: grid;
  gap: 14px;
}

.consent-purpose-card {
  padding: 16px;
  border: 1px solid #c8ddd7;
  border-radius: 16px;
  background: #f0f8f5;
}

.consent-purpose-card strong {
  display: block;
  color: #123f38;
  font-size: 18px;
  line-height: 1.4;
}

.consent-purpose-card p {
  margin: 7px 0 0;
  color: #49635e;
  line-height: 1.65;
}

.consent-facts {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid #d7e4e0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.consent-facts > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid #e7efec;
}

.consent-facts > div:last-child {
  border-bottom: 0;
}

.consent-facts dt {
  color: #315851;
  font-weight: 800;
}

.consent-facts dd {
  margin: 0;
  color: #526763;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.consent-warning,
.feedback-privacy-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  color: #654b19;
  background: #fff7e8;
  border: 1px solid #edd7aa;
  line-height: 1.6;
}

.consent-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 16px 0;
  padding: 15px;
  border: 1px solid #bdd7d0;
  border-radius: 16px;
  background: #fff;
  color: #213a35;
  font-weight: 700;
  line-height: 1.6;
}

.consent-check input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: #176c60;
}

.consent-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 16px;
}

.consent-links button {
  min-height: 44px;
  padding: 0;
  border: 0;
  color: #176c60;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.consent-scope-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #dce7e4;
  border-radius: 13px;
  background: #fff;
}

.consent-scope-list b {
  min-width: 58px;
  color: #6c7774;
  font-size: 13px;
}

.consent-scope-list .granted {
  border-color: #b7d8cf;
  background: #edf8f4;
}

.consent-scope-list .granted b {
  color: #0f6b5d;
}

.free-launch-hero {
  background: linear-gradient(145deg, #155f54, #0e443d);
}

.feedback-privacy-note {
  margin-bottom: 16px;
}

@media (max-width: 420px) {
  .sheet-header-actions {
    gap: 6px;
  }

  .sheet-header-actions .compact-button {
    min-width: 58px;
    padding-inline: 10px;
  }

  .consent-facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .consent-check {
    padding: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.change-history-panel {
  max-height: min(82vh, 720px);
  overflow-y: auto;
}

.change-history-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.change-history-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line, #cbdad5);
  border-radius: 14px;
  background: var(--surface, #fff);
}

.change-history-entry strong,
.change-history-entry small {
  display: block;
}

.change-history-entry small {
  margin-top: 4px;
  color: var(--muted, #52645f);
}

.change-history-empty {
  padding: 24px 16px;
  border: 1px dashed var(--line, #cbdad5);
  border-radius: 14px;
  color: var(--muted, #52645f);
  text-align: center;
}

.app-lock-modal {
  z-index: 1200;
  background: #f3f7f5;
}

.app-lock-panel {
  width: min(88vw, 420px);
  margin: auto;
  padding: 34px 24px 28px;
  border-radius: 24px;
  text-align: center;
}

.app-lock-panel h2 {
  margin: 8px 0;
}

.app-lock-panel > p:not(.eyebrow) {
  margin: 0 0 22px;
  color: var(--muted, #52645f);
}

.app-lock-panel > small {
  display: block;
  margin-top: 14px;
  color: var(--muted, #52645f);
}

.app-lock-mark {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 20px;
  background: #ddefe9;
  color: #17695c;
  font-size: 24px;
  font-weight: 800;
}

body[data-app-locked="true"] .toast {
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}

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

button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.3);
  outline-offset: 2px;
}

.app-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 14px calc(88px + env(safe-area-inset-bottom));
}

.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 18px 16px;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 15px;
  opacity: 0.9;
}

h1 {
  margin: 0;
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1.18;
  letter-spacing: 0;
}

.course-range {
  margin: 8px 0 0;
  font-size: 17px;
  opacity: 0.95;
}

.header-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.update-button {
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
}

.update-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.update-button.success {
  background: #dff5e8;
  color: #176b52;
}

.update-button.error {
  background: #ffe7e4;
  color: #a43b2d;
}

.profile-chip {
  max-width: 142px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

.tabbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 8px 0;
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
}

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

.tab-button {
  flex: 1 0 72px;
  min-height: 54px;
  padding: 8px 4px;
  background: #e7efec;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.tab-button.active {
  background: var(--primary);
  color: #ffffff;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.section-title {
  margin: 20px 0 12px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
}

.eyebrow.dark {
  color: var(--primary-dark);
  opacity: 1;
}

.profile-overview,
.profile-summary {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.profile-overview h2,
.profile-summary h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.profile-overview p,
.profile-summary p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.profile-metrics,
.summary-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-metrics span,
.summary-tags span,
.file-label {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 900;
}

.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.module-card {
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  text-align: left;
}

.module-card span {
  display: block;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
}

.module-card strong {
  display: block;
  margin-top: 8px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.25;
}

.module-card:nth-child(2) strong {
  color: var(--accent);
}

.module-card:nth-child(3) strong {
  color: var(--amber);
}

.module-card:nth-child(4) strong {
  color: var(--danger);
}

.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.button-pair {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-card,
.notice,
.advice-box,
.warning-box,
.recheck-box,
.dose-card,
.slot-editor,
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ai-status {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.ai-status strong,
.ai-status span {
  display: block;
}

.ai-status strong {
  font-size: 21px;
  line-height: 1.2;
}

.ai-status span {
  color: var(--muted);
  font-weight: 800;
}

.ai-status.ok {
  border-color: rgba(21, 128, 61, 0.24);
  background: #f4fbf7;
}

.ai-status.warn {
  border-color: rgba(180, 83, 9, 0.3);
  background: #fff8ed;
}

.stat-card {
  min-height: 112px;
  padding: 16px;
}

.stat-card.wide {
  grid-column: 1 / -1;
}

.stat-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 16px;
}

.stat-card strong {
  display: block;
  font-size: 30px;
  line-height: 1.25;
  word-break: break-word;
}

.progress {
  width: 100%;
  height: 14px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe9e6;
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ok);
  transition: width 180ms ease;
}

.course-hero,
.next-dose-card,
.timeline-group,
.medicine-card,
.course-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.course-hero {
  padding: 16px;
  background: #173f38;
  color: #ffffff;
}

.course-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.course-hero h3,
.next-dose-card h3,
.timeline-group h3,
.medicine-card h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.course-hero p {
  margin: 6px 0 0;
  opacity: 0.92;
}

.course-score {
  width: 94px;
  min-height: 82px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
}

.course-score strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.course-score span {
  font-size: 15px;
  font-weight: 800;
}

.medicine-progress {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.2);
}

.course-flags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.course-flags span {
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 15px;
  font-weight: 900;
}

.next-dose-card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border-color: rgba(37, 99, 235, 0.25);
  background: #fbfdff;
}

.next-dose-card.missed {
  border-color: rgba(180, 83, 9, 0.4);
  background: #fff8ed;
}

.next-dose-card.done,
.next-dose-card.taken {
  border-color: rgba(21, 128, 61, 0.28);
  background: #f3fbf6;
}

.next-dose-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.next-dose-head p,
.next-dose-card p,
.medicine-card p {
  margin: 4px 0 0;
}

.dose-total {
  padding: 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
  font-weight: 900;
}

.next-dose-actions {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 8px;
}

.xl-action {
  min-height: 60px;
  font-size: 21px;
}

.med-timeline,
.medicine-cabinet {
  display: grid;
  gap: 12px;
}

.timeline-group {
  padding: 14px;
}

.timeline-group h3 {
  margin-bottom: 10px;
}

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

.timeline-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.timeline-item.taken {
  background: #f3fbf6;
}

.timeline-item.missed {
  background: #fff8ed;
  border-color: rgba(180, 83, 9, 0.35);
}

.timeline-time {
  color: var(--primary-dark);
  font-size: 24px;
  font-weight: 900;
}

.timeline-main {
  display: grid;
  gap: 2px;
}

.timeline-main strong {
  font-size: 19px;
}

.timeline-main span,
.timeline-main small {
  color: var(--muted);
  font-weight: 800;
}

.compact-button {
  min-height: 42px;
  padding: 8px 10px;
}

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

.course-day {
  min-height: 86px;
  display: grid;
  gap: 2px;
  padding: 8px;
  box-shadow: none;
}

.course-day strong,
.course-day em {
  font-style: normal;
  font-weight: 900;
}

.course-day span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.course-day.done {
  border-color: rgba(21, 128, 61, 0.3);
  background: #f3fbf6;
  color: var(--ok);
}

.course-day.today {
  border-color: rgba(37, 99, 235, 0.35);
  background: var(--accent-soft);
  color: var(--accent);
}

.course-day.missed {
  border-color: rgba(180, 83, 9, 0.35);
  background: var(--amber-soft);
  color: var(--warn);
}

.course-day.future {
  background: #f8faf9;
  color: var(--muted);
}

.medicine-card {
  padding: 14px;
}

.notice,
.advice-box,
.warning-box,
.recheck-box {
  margin: 12px 0;
  padding: 14px 16px;
}

.notice {
  background: var(--surface-2);
  color: var(--primary-dark);
  font-weight: 700;
}

.warning-box {
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 800;
}

.advice-box p,
.recheck-box p {
  margin: 0 0 10px;
}

.advice-box p:last-child,
.recheck-box p:last-child {
  margin-bottom: 0;
}

.brief-advice,
.daily-summary-lines {
  display: grid;
  gap: 8px;
}

.brief-advice strong {
  color: var(--primary-dark);
  font-size: 18px;
}

.brief-advice span,
.daily-summary-lines span {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f4f7f5;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
}

.date-line {
  font-size: 22px;
  font-weight: 800;
}

.muted {
  color: var(--muted);
}

.backup-hint {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.dose-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.dose-card {
  padding: 14px;
}

.dose-card.taken {
  border-color: rgba(21, 128, 61, 0.35);
}

.dose-card.missed {
  border-color: rgba(180, 83, 9, 0.45);
  background: #fff8ed;
}

.dose-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dose-time {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
}

.dose-label {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.status-pill {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e7efec;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.status-pill.taken {
  background: #dcfce7;
  color: var(--ok);
}

.status-pill.missed {
  background: #ffedd5;
  color: var(--warn);
}

.medicine-lines {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.medicine-lines p {
  margin: 0;
  word-break: break-word;
}

.med-list {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #f4fbf9;
}

.med-line {
  padding: 8px 10px;
  border-left: 4px solid var(--primary);
  background: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.dose-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.taken-time {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.primary-button,
.success-button,
.ghost-button,
.danger-button {
  padding: 10px 16px;
  font-weight: 800;
}

.primary-button {
  background: var(--primary);
  color: #ffffff;
}

.success-button {
  background: var(--ok);
  color: #ffffff;
}

.ghost-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--primary-dark);
}

.danger-button {
  border: 1px solid rgba(180, 35, 24, 0.25);
  background: var(--danger-soft);
  color: var(--danger);
}

.block {
  width: 100%;
  margin-top: 12px;
}

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

.meal-grid,
.diet-history {
  display: grid;
  gap: 12px;
}

.diet-simple-summary,
.meal-editor-card,
.diet-compact-row,
.meal-status-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.diet-simple-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
}

.diet-simple-summary h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.diet-simple-summary p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.meal-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.meal-status-card {
  min-height: 116px;
  padding: 14px;
  color: var(--text);
  text-align: left;
}

.meal-status-card.active {
  border-color: rgba(37, 99, 235, 0.45);
  background: var(--accent-soft);
}

.meal-status-card.done {
  border-color: rgba(21, 128, 61, 0.28);
}

.meal-status-card span,
.meal-status-card em {
  display: block;
}

.meal-status-card span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 900;
}

.meal-status-card strong {
  display: block;
  margin-top: 6px;
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1.2;
}

.meal-status-card em {
  margin-top: 6px;
  color: var(--muted);
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
}

.meal-editor-card {
  padding: 14px;
}

.meal-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.meal-editor-head h3 {
  margin: 0;
  font-size: 26px;
}

.meal-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.meal-workflow li {
  min-width: 0;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}

.meal-workflow b {
  display: grid;
  width: 28px;
  height: 28px;
  margin: 0 auto 5px;
  place-items: center;
  border-radius: 50%;
  background: #e5ece9;
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.meal-workflow span {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 800;
}

.meal-workflow li.active {
  border-color: #90bdb2;
  background: #f1f8f5;
  color: var(--primary-dark);
}

.meal-workflow li.done {
  border-color: #c5ded7;
  background: var(--surface-2);
  color: var(--primary-dark);
}

.meal-workflow li.active b,
.meal-workflow li.done b {
  background: var(--primary);
  color: #ffffff;
}

.meal-card,
.diet-record-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 14px;
}

.meal-title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.25;
}

.meal-photo-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.meal-photo-row.compact {
  grid-template-columns: minmax(190px, 1.2fr) minmax(150px, 0.8fr);
}

.meal-preview {
  width: 132px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #edf7f5;
  object-fit: cover;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.meal-preview-grid {
  width: 132px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #edf7f5;
  overflow: hidden;
}

.meal-preview-grid img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 6px;
  object-fit: cover;
}

.photo-more {
  display: grid;
  place-items: center;
  min-height: 0;
  border-radius: 6px;
  background: rgba(23, 107, 82, 0.12);
  color: var(--primary);
  font-weight: 900;
}

.meal-photo-row.compact .meal-preview,
.meal-photo-row.compact .meal-preview-grid {
  width: 100%;
  min-height: 150px;
  aspect-ratio: 4 / 3;
}

.meal-preview-carousel {
  width: 100%;
  min-width: 0;
}

.meal-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #edf7f5;
}

.meal-preview-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.meal-photo-counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(16, 45, 39, 0.72);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.meal-photo-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.photo-nav-button {
  min-height: 42px;
  padding: 8px 10px;
  font-size: 15px;
}

.meal-photo-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.meal-photo-tools .danger-link {
  min-height: 38px;
  padding: 7px 12px;
  color: #a3362d;
}

.meal-photo-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.meal-photo-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c8d7d2;
}

.meal-photo-dot.active {
  width: 26px;
  background: var(--primary);
}

.meal-file {
  position: relative;
  display: block;
  width: 100%;
  min-height: 54px;
}

.file-button {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  text-align: center;
  font-weight: 900;
  font: inherit;
}

.meal-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.meal-fields {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.meal-fields textarea,
.meal-fields input {
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.meal-fields textarea {
  min-height: 92px;
  resize: vertical;
}

.meal-calorie-field input {
  font-variant-numeric: tabular-nums;
}

.meal-ai-step {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.meal-ai-step small {
  color: var(--muted);
  font-size: 13px;
}

.meal-save-actions {
  position: sticky;
  z-index: 3;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 8px;
  margin-top: 12px;
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.meal-save-actions button {
  min-height: 56px;
}

.meal-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.meal-actions.simplified {
  grid-template-columns: 1fr 1fr 1.1fr;
}

.ai-button {
  background: #eaf2ff;
  color: #1d4ed8;
  border-color: #c7d2fe;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.meal-analysis {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--primary-dark);
  font-weight: 800;
}

.meal-draft-prompt,
.meal-draft-state {
  display: grid;
  gap: 3px;
}

.meal-draft-prompt span,
.meal-draft-state span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.meal-draft-prompt.ready,
.meal-draft-state.ready {
  color: #1d4ed8;
}

.meal-draft-prompt.loading {
  color: var(--primary-dark);
}

.meal-draft-state.edited {
  color: var(--amber);
}

.meal-draft-state.confirmed {
  color: var(--ok);
}

.meal-analysis p {
  margin: 0 0 6px;
}

.meal-analysis p:last-child {
  margin-bottom: 0;
}

.diet-record-top {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
}

.diet-compact-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  box-shadow: none;
}

.diet-compact-row h3,
.diet-compact-row p {
  margin: 0 0 4px;
}

.diet-compact-row p {
  color: var(--muted);
  font-weight: 700;
}

.diet-compact-row strong {
  color: var(--warn);
  font-size: 18px;
}

.diet-thumb {
  width: 96px;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  background: #edf7f5;
}

.diet-thumb.small {
  width: 64px;
}

.compact-section {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.compact-section summary {
  min-height: 56px;
  padding: 16px;
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.compact-section > :not(summary) {
  margin: 0 12px 12px;
}

.check-list.compact {
  gap: 8px;
}

.check-list.compact .check-item {
  min-height: 48px;
  font-size: 18px;
}

.diet-record-card h3,
.diet-record-card p {
  margin: 0 0 6px;
}

.file-card {
  display: grid;
  gap: 10px;
}

.record-advice {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.record-advice span {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 15px;
  font-weight: 900;
}

.calorie-line {
  color: var(--warn);
  font-size: 20px;
  font-weight: 900;
}

.check-item {
  min-height: 58px;
  padding: 14px 16px 14px 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 21px;
  font-weight: 800;
  position: relative;
}

.check-item::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
}

.settings-form {
  display: grid;
  gap: 12px;
}

.field,
.slot-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.field input,
.field select,
.field textarea,
.slot-field input,
.slot-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.slot-field textarea {
  min-height: 78px;
  resize: vertical;
}

.slot-settings {
  display: grid;
  gap: 10px;
}

.slot-editor {
  padding: 14px;
}

.slot-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 190px);
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.check-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
  min-height: 52px;
  color: var(--text);
  font-size: 21px;
  font-weight: 900;
}

.check-row input {
  width: 24px;
  height: 24px;
  accent-color: var(--primary);
}

.slot-name {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-weight: 900;
}

.delete-slot {
  width: 100%;
  margin-top: 10px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--surface);
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 16px;
}

.empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 10;
  width: min(calc(100% - 28px), 560px);
  padding: 12px 16px;
  border-radius: 8px;
  background: #17211f;
  color: #ffffff;
  box-shadow: var(--shadow);
  text-align: center;
  font-weight: 800;
  transform: translate(-50%, 120%);
  transition: transform 180ms ease;
}

.toast.show {
  transform: translate(-50%, 0);
}

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

.sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: end;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
}

.sheet-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  max-height: min(86vh, 760px);
  margin: 0 auto;
  padding: 14px;
  border-radius: 8px 8px 0 0;
  background: var(--bg);
  box-shadow: 0 -16px 44px rgba(15, 23, 42, 0.2);
  overflow-y: auto;
}

.sheet-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.sheet-header h2 {
  margin: 0;
  font-size: 22px;
}

.ai-chat-fab {
  position: fixed;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 9;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow);
  font-size: 18px;
  font-weight: 900;
}

.ai-chat-panel {
  display: grid;
  gap: 10px;
}

.dose-detail-panel {
  max-height: min(82vh, 720px);
}

.dose-detail-card {
  display: grid;
  gap: 12px;
}

.dose-detail-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.dose-detail-top h3,
.dose-detail-top p {
  margin: 0;
}

.dose-detail-top h3 {
  margin-top: 4px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.18;
}

.dose-detail-top p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}

.dose-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dose-detail-meta article {
  min-height: 82px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
}

.dose-detail-meta span,
.dose-detail-meta strong {
  display: block;
}

.dose-detail-meta span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.dose-detail-meta strong {
  margin-top: 6px;
  color: var(--primary);
  font-size: 20px;
  line-height: 1.2;
}

.dose-detail-section {
  display: grid;
  gap: 8px;
}

.dose-detail-section > strong,
.dose-detail-note strong {
  color: var(--primary-dark);
}

.dose-detail-note {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--text);
  font-weight: 800;
}

.dose-detail-note.taken {
  background: #f4fbf7;
  color: var(--ok);
}

.dose-detail-note.warn {
  background: var(--danger-soft);
  color: var(--danger);
}

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

.dose-detail-actions button:first-child {
  grid-column: 1 / -1;
}

.ai-chat-messages {
  display: grid;
  gap: 8px;
  max-height: 48vh;
  overflow-y: auto;
}

.ai-chat-message {
  width: fit-content;
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.ai-chat-message.user {
  justify-self: end;
  background: var(--primary);
  color: #ffffff;
}

.ai-chat-message.assistant,
.ai-chat-message.safety {
  justify-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
}

.ai-chat-message.safety {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 750;
}

.ai-chat-message-content {
  display: block;
}

.ai-generated-label {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 7px;
  padding: 3px 7px;
  border: 1px solid rgba(23, 107, 82, 0.22);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.ai-service-filing {
  max-width: min(58vw, 360px);
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#healthConsentManageActions {
  display: grid;
  gap: 10px;
}

#healthConsentManageActions[hidden] {
  display: none;
}

.ai-quick-questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ai-quick-questions button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 107, 82, 0.22);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 15px;
  font-weight: 800;
}

.ai-chat-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.ai-chat-input-row textarea {
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: none;
}

@media (max-width: 520px) {
  body {
    font-size: 17px;
  }

  .app-shell {
    padding-inline: 10px;
  }

  .tabbar {
    gap: 4px;
  }

  .tab-button {
    min-height: 52px;
    font-size: 15px;
  }

  .stat-card strong {
    font-size: 26px;
  }

  .slot-header {
    grid-template-columns: 1fr;
  }

  .dose-actions {
    grid-template-columns: 1fr;
  }

  .meal-photo-row,
  .diet-record-top {
    grid-template-columns: 1fr;
  }

  .meal-photo-row.compact {
    grid-template-columns: 1fr;
  }

  .meal-preview,
  .meal-preview-grid,
  .diet-thumb {
    width: 100%;
    max-height: 220px;
  }

  .meal-preview-stage {
    max-height: 220px;
  }

  .meal-photo-row.compact .meal-preview,
  .meal-photo-row.compact .meal-preview-grid,
  .meal-photo-row.compact .meal-preview-carousel,
  .diet-thumb.small {
    width: 100%;
  }

  .meal-actions {
    grid-template-columns: 1fr;
  }

  .meal-actions.simplified,
  .meal-save-actions,
  .meal-status-grid,
  .diet-simple-summary,
  .diet-compact-row {
    grid-template-columns: 1fr;
  }

  .ai-chat-input-row {
    grid-template-columns: 1fr;
  }

  .ai-quick-questions {
    grid-template-columns: 1fr 1fr;
  }

  .ai-chat-fab {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .module-grid,
  .two-column,
  .home-clean-grid,
  .home-quick-actions,
  .plan-create-actions {
    grid-template-columns: 1fr;
  }

  .course-hero-top,
  .next-dose-head {
    grid-template-columns: 1fr;
  }

  .next-dose-head {
    display: grid;
  }

  .course-score {
    width: 100%;
    min-height: 66px;
  }

  .next-dose-actions {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .timeline-item .status-pill,
  .timeline-item .compact-button {
    grid-column: 1 / -1;
  }

  .course-calendar {
    grid-template-columns: repeat(2, 1fr);
  }

  .app-header {
    grid-template-columns: 1fr;
  }

  .header-actions {
    justify-items: stretch;
  }

  .update-button {
    width: 100%;
  }

  .profile-chip {
    max-width: none;
    text-align: left;
  }
}

/* 2026-07 mobile polish: shared design system and component overrides */
:root {
  --page-bg: #f2f6f4;
  --card-bg: #ffffff;
  --brand: #145f54;
  --brand-strong: #0d4d45;
  --brand-soft: #e5f1ed;
  --success: #287a55;
  --success-soft: #eaf5ef;
  --warning: #9b6a18;
  --warning-soft: #fff7e8;
  --danger: #b23b3b;
  --danger-soft: #fff0ef;
  --text-primary: #17211e;
  --text-secondary: #64716d;
  --border-color: #dbe5e1;
  --radius-main: 20px;
  --radius-card: 16px;
  --radius-control: 12px;
  --shadow-soft: 0 8px 24px rgba(21, 54, 47, 0.07);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --press-duration: 120ms;
  --state-duration: 210ms;
  --sheet-duration: 260ms;
  --page-duration: 190ms;
  --bg: var(--page-bg);
  --surface: var(--card-bg);
  --surface-2: var(--brand-soft);
  --text: var(--text-primary);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-color);
  --primary: var(--brand);
  --primary-dark: var(--brand-strong);
  --primary-soft: var(--brand-soft);
  --ok: var(--success);
  --warn: var(--warning);
  --danger: var(--danger);
  --shadow: var(--shadow-soft);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

html {
  background: var(--page-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  background: var(--page-bg);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.55;
  overscroll-behavior-y: none;
}

body.sheet-open {
  overflow: hidden;
  touch-action: none;
}

button,
input,
select,
textarea {
  letter-spacing: 0;
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--press-duration) ease, background-color var(--state-duration) ease, border-color var(--state-duration) ease, color var(--state-duration) ease, opacity var(--state-duration) ease;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  cursor: wait;
  opacity: 0.62;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(20, 95, 84, 0.28);
  outline-offset: 3px;
}

time,
.dose-time,
.home-course-meta,
.status-badge,
.status-pill,
.course-score,
.diet-report-grid strong,
.diet-summary-metrics strong {
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell {
  width: min(100%, 760px);
  padding: calc(env(safe-area-inset-top) + var(--space-2)) var(--space-4) calc(92px + env(safe-area-inset-bottom));
}

.app-header {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 0 var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

.app-header h1 {
  max-width: 18ch;
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1.25;
}

.app-header .eyebrow,
.course-range {
  color: var(--text-secondary);
  opacity: 1;
}

.app-header .eyebrow {
  font-size: 13px;
  font-weight: 700;
}

.course-range {
  margin-top: var(--space-1);
  font-size: 14px;
  font-weight: 600;
}

.save-status {
  margin: var(--space-1) 0 0;
  color: var(--success);
  font-size: 13px;
  font-weight: 700;
}

.save-status.error {
  color: var(--danger);
}

.header-actions {
  gap: var(--space-2);
}

.update-button,
.profile-chip {
  min-height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--brand);
  box-shadow: none;
  font-size: 14px;
}

.connection-status {
  position: sticky;
  top: 8px;
  z-index: 12;
  margin: 0 0 var(--space-3);
  padding: 9px 12px;
  border: 1px solid #ead7ad;
  border-radius: var(--radius-control);
  background: var(--warning-soft);
  color: #755016;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.storage-recovery-notice {
  margin: 0 0 var(--space-4);
  border-color: #d49a3a;
  background: #fff8e9;
  color: #5d4214;
}

.storage-recovery-notice > div:first-child {
  display: grid;
  gap: 4px;
}

.storage-recovery-notice p {
  margin: 0;
  line-height: 1.55;
}

.storage-recovery-notice .button-pair {
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.storage-recovery-notice .button-pair > button {
  min-width: min(100%, 132px);
}

.tabbar {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 30;
  width: min(100%, 760px);
  min-height: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 24px rgba(21, 54, 47, 0.07);
  overflow: visible;
  contain: layout paint;
}

.tab-button {
  position: relative;
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-rows: 24px auto;
  place-items: center;
  gap: 2px;
  padding: 5px 2px;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}

.tab-button.active {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.tab-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-dot {
  position: absolute;
  top: 6px;
  right: calc(50% - 17px);
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--danger);
}

.tab-panel.active {
  display: block;
  animation: page-fade var(--page-duration) ease-out both;
}

.section-title {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1.3;
}

.section-row {
  gap: var(--space-3);
  align-items: center;
}

.primary-button,
.success-button,
.secondary-button,
.ghost-button,
.danger-button,
.file-button,
.hero-primary,
.hero-secondary {
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 780;
}

.primary-button,
.success-button {
  background: var(--brand);
  color: #fff;
}

.secondary-button,
.ghost-button,
.file-button {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--brand-strong);
}

.danger-button {
  background: var(--danger-soft);
  color: var(--danger);
}

.icon-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
  color: var(--brand);
  font-size: 23px;
  line-height: 1;
}

.home-hero-card {
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: 20px;
  border: 0;
  border-radius: var(--radius-main);
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.home-hero-card.missed {
  background: #6c5540;
}

.home-hero-card.taken {
  background: var(--success);
}

.home-hero-card.onboarding {
  padding: var(--space-6);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
}

.home-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.home-course-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #f5fffb;
  font-size: 13px;
  font-weight: 750;
}

.home-hero-main h2 {
  margin-top: var(--space-1);
  font-size: 28px;
}

.home-hero-main span {
  margin-top: var(--space-2);
  color: #fff;
  font-size: 16px;
}

.home-hero-main em,
.home-hero-main small {
  color: #dceee9;
  font-size: 14px;
}

.hero-med-line {
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.11);
}

.hero-med-line strong {
  font-size: 17px;
}

.home-hero-actions {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.home-hero-actions > :first-child {
  grid-column: 1 / -1;
}

.home-hero-actions.stacked > :first-child {
  grid-column: auto;
}

.hero-primary {
  background: #fff;
  color: var(--brand-strong);
}

.home-hero-card.onboarding .hero-primary {
  background: var(--brand);
  color: #fff;
}

.hero-secondary {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.home-hero-card.onboarding .hero-secondary {
  border-color: var(--border-color);
  background: var(--card-bg);
  color: var(--brand);
}

.home-alert-link {
  border-radius: var(--radius-control);
}

.home-action-plan {
  gap: var(--space-6);
  margin: 0;
  padding: 0;
}

.home-attention,
.home-quick-section,
.home-timeline-section {
  margin: 0 0 var(--space-6);
}

.home-attention .section-title,
.home-quick-section .section-title,
.home-timeline-section .section-title {
  margin-top: 0;
}

.inline-notice {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-weight: 700;
}

.inline-notice.ok {
  border-color: #cce2d7;
  background: var(--success-soft);
  color: #245d45;
}

.inline-notice.warn {
  border-color: #ecd8ad;
  background: var(--warning-soft);
  color: #765116;
}

.home-quick-actions {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.quick-record-button,
.recent-meal-row {
  min-width: 0;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--text-primary);
  text-align: left;
}

.quick-record-button strong,
.quick-record-button span,
.recent-meal-row span,
.recent-meal-row strong,
.recent-meal-row em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.quick-record-button strong,
.recent-meal-row strong {
  font-size: 17px;
}

.quick-record-button span,
.recent-meal-row span,
.recent-meal-row em {
  color: var(--text-secondary);
  font-size: 14px;
  font-style: normal;
}

.home-timeline {
  position: relative;
  display: grid;
  gap: var(--space-2);
}

.home-timeline-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 44px;
  gap: var(--space-2);
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-color);
}

.home-timeline-item time {
  color: var(--brand-strong);
  font-weight: 800;
}

.home-timeline-main {
  min-width: 0;
  min-height: 48px;
  display: grid;
  align-content: center;
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.home-timeline-main strong,
.home-timeline-main span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-timeline-main span {
  color: var(--text-secondary);
  font-size: 13px;
}

.status-badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2f0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-badge.taken,
.status-pill.taken {
  background: var(--success-soft);
  color: var(--success);
}

.status-badge.missed,
.status-pill.missed {
  background: var(--danger-soft);
  color: var(--danger);
}

.timeline-check {
  border-radius: 999px;
}

.timeline-check.done {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.segmented-control {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-control);
  background: #e8efec;
}

.segmented-control > button,
.segmented-control label {
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.segmented-control > button.active,
.segmented-control label:has(input:checked) {
  background: var(--card-bg);
  color: var(--brand-strong);
  box-shadow: 0 1px 4px rgba(20, 60, 51, 0.09);
}

.segmented-control label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.medicine-segments,
.record-filters {
  margin-bottom: var(--space-4);
}

.record-filters {
  overflow-x: auto;
  grid-auto-columns: minmax(58px, 1fr);
}

.course-hero,
.next-dose-card,
.medicine-insight-card,
.timeline-group,
.active-plan-card,
.plan-detail-card,
.plan-folder-card,
.medicine-card,
.course-day,
.diet-report-card,
.daily-summary-card,
.diet-simple-summary,
.meal-status-card,
.meal-editor-card,
.profile-summary,
.weight-card,
.slot-editor,
.settings-group,
.privacy-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: none;
}

.course-hero {
  border: 0;
  background: var(--brand);
}

.diet-capture-card {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  background: var(--card-bg);
}

.diet-capture-card h3,
.diet-capture-card p {
  margin: 0;
}

.diet-capture-card h3 {
  font-size: 22px;
}

.diet-capture-card p:not(.eyebrow) {
  margin-top: var(--space-1);
  color: var(--text-secondary);
}

.diet-capture-actions,
.diet-summary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.large-action {
  min-height: 56px;
}

.diet-summary-actions {
  margin-bottom: var(--space-3);
}

.recent-meal-row {
  width: 100%;
  min-height: 84px;
  margin-bottom: var(--space-3);
}

.meal-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.meal-status-card {
  min-height: 112px;
  padding: 12px;
}

.meal-status-card span,
.meal-status-card strong,
.meal-status-card em {
  overflow-wrap: anywhere;
}

.meal-photo-hint,
.meal-confirm-field small {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.meal-preview-stage,
.meal-preview {
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: var(--radius-control);
  overflow: hidden;
}

.meal-preview-stage img,
.diet-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.more-menu {
  position: relative;
}

.more-menu > summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
  color: var(--brand);
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}

.more-menu > summary::-webkit-details-marker {
  display: none;
}

.more-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  width: 190px;
  display: grid;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.more-menu-popover button {
  min-height: 44px;
  padding: 8px 10px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.record-timeline {
  display: grid;
  gap: 0;
}

.record-timeline-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
}

.record-type-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 850;
}

.record-timeline-item time,
.record-timeline-item strong,
.record-timeline-item p {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
}

.record-timeline-item time {
  color: var(--text-secondary);
  font-size: 12px;
}

.record-timeline-item strong {
  margin-top: 2px;
  font-size: 16px;
}

.record-timeline-item p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 14px;
}

.privacy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-3);
  padding: var(--space-4);
}

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

.privacy-card h3 {
  font-size: 18px;
}

.privacy-card p:not(.eyebrow) {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 13px;
}

.settings-group {
  margin: 0 0 var(--space-3);
  overflow: clip;
}

details.settings-group > summary,
.settings-list > h2 {
  min-height: 54px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 13px 16px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.settings-list-form,
.technical-settings-body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: none;
}

.migration-notice {
  align-items: stretch;
  flex-direction: column;
  margin: 14px 0;
}

.migration-notice p {
  margin: 8px 0 12px;
}

.migration-notice .button-pair {
  width: 100%;
}

.migration-notice .button-pair > button {
  flex: 1 1 160px;
}

.compliance-info-list {
  padding: 4px 18px 16px;
}

.compliance-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.compliance-facts > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.5fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line, #dce5e1);
}

.compliance-facts dt {
  color: var(--muted, #61736e);
}

.compliance-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.compliance-facts a {
  color: var(--primary, #176b60);
}

.compliance-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.migration-import-summary {
  margin: 12px 0;
  padding: 0 16px;
  border: 1px solid var(--line, #dce5e1);
  border-radius: 16px;
}

@media (max-width: 420px) {
  .compliance-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .compliance-facts dd { text-align: left; }
  .compliance-links { grid-template-columns: 1fr; }
}

.settings-row {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.settings-row i {
  color: var(--text-secondary);
  font-size: 13px;
  font-style: normal;
}

.danger-row,
.danger-row i {
  color: var(--danger);
}

.field input,
.field textarea,
.field select,
.slot-field input,
.slot-field textarea {
  min-width: 0;
  border-color: var(--border-color);
  border-radius: var(--radius-control);
  background: #fbfdfc;
}

.sheet-modal {
  z-index: 60;
}

.sheet-backdrop {
  background: rgba(10, 24, 21, 0.42);
  animation: backdrop-in var(--sheet-duration) ease-out both;
}

.sheet-panel {
  width: min(100%, 760px);
  max-height: min(88dvh, 780px);
  padding: var(--space-4);
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--card-bg);
  box-shadow: 0 -16px 42px rgba(15, 43, 37, 0.18);
  animation: sheet-in var(--sheet-duration) cubic-bezier(0.22, 0.72, 0.28, 1) both;
  overscroll-behavior: contain;
}

.compact-sheet {
  max-height: min(84dvh, 700px);
}

.sheet-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto var(--space-3);
  border-radius: 999px;
  background: #cbd5d1;
}

.sheet-header {
  margin-bottom: var(--space-4);
}

.sheet-header h2 {
  font-size: 22px;
}

.sheet-form {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

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

.field-group legend {
  margin-bottom: var(--space-2);
  font-weight: 750;
}

.two-options {
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: initial;
}

.check-control {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: #fbfdfc;
  font-weight: 700;
}

.check-control input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

.snooze-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.snooze-options button {
  min-height: 52px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
  color: var(--brand-strong);
  font-weight: 780;
}

.custom-snooze-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
  margin-top: var(--space-3);
}

.toast {
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 80;
  width: min(calc(100% - 32px), 520px);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 11px 14px;
  border-radius: var(--radius-control);
  background: #17211e;
  box-shadow: 0 10px 28px rgba(10, 26, 22, 0.2);
  text-align: left;
}

.toast button {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #dff1eb;
  color: var(--brand-strong);
  font-weight: 850;
}

body.sheet-open .toast {
  bottom: calc(168px + env(safe-area-inset-bottom));
}

#mealEditorModal .sheet-header {
  position: sticky;
  top: calc(var(--space-4) * -1);
  z-index: 6;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--text-secondary);
  text-align: center;
}

.empty-state h2,
.empty-state h3,
.empty-state p,
.empty-state strong,
.empty-state span {
  margin: 0;
}

.empty-state h2,
.empty-state h3,
.empty-state strong {
  color: var(--text-primary);
}

.empty-state-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 28px;
  font-weight: 500;
}

.page-empty-state {
  min-height: 220px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

.empty-state.compact {
  min-height: 110px;
  padding: var(--space-4);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-card);
}

.loading-skeleton:empty {
  min-height: 340px;
  background: linear-gradient(90deg, #e8efec 25%, #f5f8f7 50%, #e8efec 75%);
  background-size: 220% 100%;
  animation: skeleton 1.4s linear infinite;
}

.primary-button.loading::after {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 999px;
  vertical-align: -3px;
  animation: spin 700ms linear infinite;
}

.home-hero-card.recently-saved {
  animation: saved-flash 620ms ease-out both;
}

@keyframes page-fade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

@keyframes sheet-in {
  from { transform: translateY(24px); opacity: 0.7; }
  to { transform: none; opacity: 1; }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes skeleton {
  to { background-position: -220% 0; }
}

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

@keyframes saved-flash {
  0%, 100% { box-shadow: var(--shadow-soft); }
  45% { box-shadow: 0 0 0 5px rgba(74, 157, 115, 0.18); }
}

@media (max-width: 520px) {
  .app-shell {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app-header h1 {
    max-width: 14ch;
    font-size: 22px;
  }

  .profile-chip {
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-hero-card {
    padding: var(--space-4);
  }

  .home-hero-main h2 {
    font-size: 25px;
  }

  .home-quick-actions,
  .diet-capture-actions,
  .diet-summary-actions {
    grid-template-columns: 1fr 1fr;
  }

  .home-timeline-item {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
  }

  .home-timeline-item .status-badge {
    display: none;
  }

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

  .meal-status-card {
    min-height: 118px;
    padding: 10px;
  }

  .meal-status-card span {
    font-size: 15px;
  }

  .meal-status-card strong {
    font-size: 17px;
  }

  .meal-status-card em {
    font-size: 12px;
  }

  .record-filters {
    margin-right: calc(var(--space-3) * -1);
    padding-right: var(--space-3);
  }

  .privacy-card {
    grid-template-columns: 1fr;
  }

  .privacy-card .primary-button {
    width: 100%;
  }

  .sheet-panel {
    padding: var(--space-4) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 370px) {
  .app-header {
    grid-template-columns: 1fr;
  }

  .header-actions {
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
  }

  .home-course-meta span {
    font-size: 12px;
  }

  .home-quick-actions,
  .diet-capture-actions,
  .diet-summary-actions {
    grid-template-columns: 1fr;
  }

  .home-hero-actions {
    grid-template-columns: 1fr;
  }

  .home-hero-actions > :first-child {
    grid-column: auto;
  }

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

.membership-hero.free-launch-hero {
  color: #fff;
  background: linear-gradient(145deg, #176c60, #103f39);
  border-color: transparent;
}

.membership-hero.free-launch-hero h3,
.membership-hero.free-launch-hero p,
.membership-hero.free-launch-hero .membership-recommendation {
  color: #fff;
}

.membership-hero.free-launch-hero .membership-recommendation {
  background: rgba(255, 255, 255, 0.92);
  color: #155f54;
}

.sheet-panel.consent-sheet {
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 860px);
  overflow: hidden;
}

.consent-sheet .consent-summary {
  flex: 1 1 auto;
  min-height: 170px;
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.consent-sheet .consent-check,
.consent-sheet .consent-links,
.consent-sheet > .button-pair,
.consent-sheet > .danger-button {
  flex: 0 0 auto;
}

@media (max-height: 700px) {
  .consent-sheet .consent-check {
    margin-block: 10px;
    font-size: 14px;
  }

  .consent-sheet .consent-links {
    margin-bottom: 10px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .sheet-panel.consent-sheet {
    max-height: calc(100dvh - 12px);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
  }

  .consent-sheet .sheet-handle {
    display: none;
  }

  .consent-sheet .sheet-header {
    margin-bottom: 8px;
  }

  .consent-sheet .consent-summary {
    min-height: 0;
    gap: 8px;
  }

  .consent-sheet .consent-check {
    margin-block: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
  }

  .consent-sheet .consent-links {
    margin-bottom: 6px;
  }

  .consent-sheet .consent-links button,
  .consent-sheet > .button-pair button {
    min-height: 40px;
  }
}

.record-filter-panel {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(130px, 1fr);
  gap: 10px;
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--border-color);
  background: transparent;
}

.record-filter-shell {
  margin: 12px 0 18px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

.record-filter-shell > summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.record-filter-shell > summary::-webkit-details-marker {
  display: none;
}

.record-filter-shell > summary::after {
  content: "筛";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 850;
}

.record-filter-shell > summary > span {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 12px;
}

.record-filter-panel .compact-field {
  gap: 4px;
}

.record-filter-panel .compact-field > span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.record-filter-panel input,
.record-filter-panel select {
  min-height: 44px;
}

.measurement-fieldset {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
}

.measurement-fieldset legend {
  padding: 0 4px;
  color: var(--text-secondary);
  font-weight: 750;
}

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

.measurement-grid .field small {
  color: var(--text-secondary);
  font-size: 12px;
}

@media (max-width: 620px) {
  .records-summary-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .record-filter-panel {
    grid-template-columns: 1fr 1fr;
  }

  .record-filter-panel .compact-field:first-child {
    grid-column: 1 / -1;
  }

  .measurement-grid.three-values {
    grid-template-columns: 1fr 1fr;
  }

  .measurement-grid.three-values .field:last-child {
    grid-column: 1 / -1;
  }
}

.plan-source-first {
  padding: 12px;
  border: 1px solid rgba(31, 111, 98, 0.28);
  border-radius: var(--radius-control);
  background: var(--brand-soft);
}

.plan-source-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.plan-source-choice-grid button {
  min-width: 0;
  min-height: 48px;
  padding-inline: 8px;
}

@media (max-width: 430px) {
  .plan-source-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan-metadata-fields {
  padding: 10px 12px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
}

.plan-metadata-fields summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--brand-strong);
  font-weight: 750;
  cursor: pointer;
}

.plan-metadata-fields[open] summary {
  margin-bottom: 10px;
}

/* Membership, entitlement and AI credit surfaces */
.membership-settings .settings-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: left;
}

.settings-subheading {
  margin: 16px 0 4px;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.membership-settings .settings-row strong {
  color: var(--text-primary);
  font-size: 16px;
}

.membership-settings .settings-row small {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: normal;
}

.membership-settings .settings-row i {
  flex: 0 0 auto;
  max-width: 112px;
  color: var(--brand);
  font-style: normal;
  text-align: right;
  overflow-wrap: anywhere;
}

.ai-credit-summary {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--surface-muted);
  color: var(--text-primary);
  text-align: left;
}

.ai-credit-summary span {
  color: var(--text-secondary);
  font-size: 14px;
}

.ai-credit-summary strong {
  color: var(--brand);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.ai-credit-summary.empty strong {
  color: var(--warning);
}

.membership-panel {
  max-height: min(94dvh, 900px);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
}

.membership-sheet-header {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
}

.membership-content {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-4);
}

.membership-hero {
  display: grid;
  gap: var(--space-3);
  padding: 4px 2px 0;
}

.membership-recommendation {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 760;
}

.membership-hero h3,
.membership-section h3 {
  margin: 0;
  color: var(--text-primary);
  letter-spacing: 0;
}

.membership-hero h3 {
  font-size: 25px;
  line-height: 1.24;
}

.membership-hero p,
.membership-section p,
.membership-disclosures p {
  margin: 0;
  color: var(--text-secondary);
}

.membership-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.membership-price strong {
  color: var(--brand-strong);
  font-size: 32px;
  line-height: 1;
}

.membership-price span {
  color: var(--text-secondary);
  font-size: 14px;
}

.membership-channel-note,
.membership-help {
  font-size: 13px;
}

.membership-status-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
  overflow: hidden;
}

.membership-status-card > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 12px;
  border-right: 1px solid var(--border-color);
}

.membership-status-card > div:last-child {
  border-right: 0;
}

.membership-status-card span,
.credit-grid span {
  color: var(--text-secondary);
  font-size: 12px;
}

.membership-status-card strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.membership-section {
  display: grid;
  gap: var(--space-3);
}

.activation-code-section {
  padding: var(--space-4);
  border: 1px solid rgba(20, 95, 84, 0.24);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(231, 246, 240, 0.76), rgba(255, 255, 255, 0.96));
}

.activation-code-section.active {
  border-color: rgba(31, 132, 92, 0.32);
  background: var(--success-soft);
}

.activation-code-section.active .section-row strong {
  color: var(--success);
  font-size: 13px;
}

.activation-code-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.activation-code-form input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
  color: var(--text-primary);
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.activation-code-form input:focus-visible {
  border-color: var(--brand);
  outline: 3px solid rgba(20, 95, 84, 0.14);
}

.activation-code-message {
  min-height: 18px;
  color: var(--text-secondary);
  font-size: 13px;
}

.activation-code-message.error {
  color: var(--danger);
}

.activation-code-message.success {
  color: var(--success);
}

.membership-section .section-row {
  margin: 0;
}

.credit-total {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.credit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.credit-grid > div {
  display: grid;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--border-color);
  background: var(--card-bg);
  text-align: center;
}

.credit-grid > div:last-child {
  border-right: 0;
}

.credit-grid strong {
  color: var(--text-primary);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.membership-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
}

.membership-benefits span {
  position: relative;
  min-width: 0;
  padding-left: 24px;
  color: var(--text-primary);
  font-size: 15px;
}

.membership-benefits span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  content: "✓";
  font-size: 12px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}

.ai-package-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
}

.ai-package-card.featured {
  border-color: rgba(20, 95, 84, 0.42);
  background: var(--brand-soft);
}

.ai-package-card > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.ai-package-card > div:first-child {
  display: grid;
  gap: 1px;
}

.ai-package-card span {
  color: var(--text-secondary);
  font-size: 12px;
}

.ai-package-card b {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ai-package-more,
.credit-ledger {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.credit-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.credit-ledger-row > span {
  display: grid;
  min-width: 0;
}

.credit-ledger-row small {
  color: var(--text-secondary);
  font-size: 12px;
}

.credit-ledger-row b {
  font-variant-numeric: tabular-nums;
}

.credit-ledger-row b.positive {
  color: var(--success);
}

.membership-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.membership-secondary-actions > :only-child {
  grid-column: 1 / -1;
}

.membership-disclosures {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
  font-size: 13px;
}

.membership-disclosures strong {
  color: var(--brand-strong);
}

.ai-credit-result {
  margin-top: var(--space-3);
  padding: 9px 10px;
  border-radius: var(--radius-control);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ai-upgrade-hint {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.ai-upgrade-hint > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 520px) {
  .membership-sheet-header {
    margin-right: calc(var(--space-3) * -1);
    margin-left: calc(var(--space-3) * -1);
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .membership-status-card {
    grid-template-columns: 1fr;
  }

  .membership-status-card > div {
    grid-template-columns: 88px minmax(0, 1fr);
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }

  .membership-status-card > div:last-child {
    border-bottom: 0;
  }

  .membership-benefits {
    grid-template-columns: 1fr;
  }

  .ai-package-card {
    align-items: flex-start;
  }

  .ai-package-card > div:last-child {
    flex-direction: column;
    align-items: flex-end;
  }
}

@media (max-width: 370px) {
  .credit-grid {
    grid-template-columns: 1fr;
  }

  .credit-grid > div {
    grid-template-columns: 1fr auto;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
  }

  .credit-grid > div:last-child {
    border-bottom: 0;
  }

  .membership-price {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 通用医嘱计划 */
.onboarding-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.onboarding-action-grid > button {
  min-width: 0;
  min-height: 52px;
  white-space: normal;
}

.home-empty-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.home-empty-links button {
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 750;
}

.home-hero-main.care-task-jump {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.home-hero-main.care-task-jump:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.72);
  outline-offset: 5px;
  border-radius: var(--radius-control);
}

.task-kind-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  margin-right: 8px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  line-height: 1;
}

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

.plan-create-steps span {
  min-width: 0;
  padding: 8px 6px;
  border-bottom: 2px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.plan-create-steps span.active {
  border-color: var(--brand);
  color: var(--brand);
}

.plan-photo-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.plan-photo-preview {
  width: 100%;
  min-height: 112px;
  aspect-ratio: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.plan-source-file {
  width: 94px;
  min-width: 94px;
  height: 94px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--card-bg);
}

.plan-source-file img {
  width: 100%;
  height: 68px;
  object-fit: cover;
}

.plan-source-file b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 68px;
  background: var(--brand-soft);
  color: var(--brand);
}

.plan-source-file em {
  width: 100%;
  padding: 4px 6px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-file {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.secondary-file {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--brand);
}

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

.review-item-heading strong {
  color: var(--text-primary);
  font-size: 18px;
}

.review-item-heading span {
  color: var(--text-secondary);
  font-size: 13px;
}

.review-source,
.care-task-source {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--page-bg);
}

.review-source summary,
.care-task-source summary {
  color: var(--brand);
  font-weight: 750;
  cursor: pointer;
}

.review-source p,
.care-task-source p,
.care-task-source blockquote {
  margin: 8px 0 0;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.care-task-source blockquote {
  padding-left: 10px;
  border-left: 3px solid var(--brand-soft);
}

.review-item-actions {
  display: grid;
  gap: 8px;
}

.care-task-summary {
  display: grid;
  gap: 10px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
}

.care-task-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.care-task-summary span,
.care-task-summary p {
  color: var(--text-secondary);
}

.care-task-medications {
  display: grid;
  gap: 8px;
  margin-bottom: var(--space-4);
}

.care-task-medications p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
}

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

.generic-task-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.generic-task-list article > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
}

.generic-task-list p,
.generic-task-list em {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.record-filters {
  overflow-x: auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70px, auto);
  scrollbar-width: none;
}

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

@media (max-width: 390px) {
  .onboarding-action-grid,
  .plan-create-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero-main h2 {
    font-size: 25px;
    overflow-wrap: anywhere;
  }

  .care-task-summary div,
  .care-task-medications p {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Privacy-first caregiver sharing and read-only Health Connect controls. */
.caregiver-settings,
.health-connect-settings {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--card-bg);
}

.caregiver-settings-head,
.health-connect-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.caregiver-settings-head h2,
.caregiver-settings-head p,
.health-connect-head h2,
.health-connect-head p,
.caregiver-settings > p,
.health-connect-settings > p {
  margin: 0;
}

.caregiver-settings-head h2,
.health-connect-head h2 {
  font-size: 20px;
}

.caregiver-settings-head > span,
.health-connect-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.health-connect-mark {
  background: #315e9b;
  font-size: 12px;
}

.caregiver-settings-head #caregiverStatusText,
.health-connect-head #healthConnectStatusText,
.caregiver-settings > p,
.health-connect-settings > p {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

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

.caregiver-fields label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}

.caregiver-fields input {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--page-bg);
}

.caregiver-share-scope {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
}

.caregiver-share-scope legend {
  padding: 0 5px;
  color: var(--text-secondary);
  font-size: 12px;
}

.caregiver-share-scope label {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.caregiver-share-scope input {
  width: 20px;
  height: 20px;
}

.caregiver-actions,
.health-connect-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.health-connect-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.health-connect-facts span {
  display: grid;
  gap: 2px;
  padding: 9px 5px;
  border-radius: 10px;
  background: #eef3fa;
  text-align: center;
}

.health-connect-facts b {
  color: #274f84;
  font-size: 13px;
}

.health-connect-facts small {
  color: var(--text-secondary);
  font-size: 10px;
}

.health-connect-actions .primary-button {
  grid-column: 1 / -1;
}

.caregiver-disable-button {
  grid-column: 1 / -1;
}

html[data-accessibility-mode="senior"] :is(.caregiver-settings-head #caregiverStatusText, .health-connect-head #healthConnectStatusText, .caregiver-settings > p, .health-connect-settings > p, .caregiver-fields label, .caregiver-share-scope legend) {
  font-size: 15px;
}

@media (max-width: 390px) {
  .caregiver-fields,
  .caregiver-actions,
  .health-connect-actions {
    grid-template-columns: 1fr;
  }

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

  .health-connect-actions .primary-button {
    grid-column: auto;
  }
}

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

.membership-status-card > div:nth-child(2) {
  border-right: 0;
}

.membership-status-card > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--border-color);
}

.membership-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.membership-legal-links button {
  min-height: 36px;
  padding: 0;
  background: transparent;
  color: var(--brand-strong);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.plan-task-module {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.plan-task-module + .plan-task-module {
  margin-top: 18px;
}

.measurement-trend-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 1fr);
  gap: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.measurement-trend-list span {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--surface-muted);
  font-variant-numeric: tabular-nums;
}

.measurement-trend-list small {
  color: var(--text-secondary);
}

.demo-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #d6a54a;
  border-radius: var(--radius-control);
  background: var(--warning-soft);
  color: var(--text-primary);
}

.demo-mode-banner div {
  display: grid;
  gap: 2px;
}

.demo-mode-banner span {
  color: var(--text-secondary);
  font-size: 13px;
}

.app-document-content {
  display: grid;
  gap: 12px;
  color: var(--text-primary);
}

.app-document-content p {
  margin: 0;
}

.confirm-dialog-panel {
  max-width: 520px;
}

.confirm-dialog-panel > p {
  margin: 0 0 18px;
  color: var(--text-secondary);
}

.app-info-settings .technical-settings {
  margin: 8px 0 0;
  border-top: 1px solid var(--border-color);
}

@media (max-width: 520px) {
  .membership-status-card {
    grid-template-columns: 1fr;
  }

  .membership-status-card > div:nth-child(2) {
    border-right: 0;
  }

  .membership-status-card > div:nth-child(-n + 3) {
    border-bottom: 1px solid var(--border-color);
  }

  .demo-mode-banner {
    align-items: stretch;
    flex-direction: column;
  }
}

/* V2 mobile polish: calmer layout, clearer hierarchy, bottom navigation. */
:root {
  --bg: #f6f8f7;
  --surface: #ffffff;
  --surface-2: #e4f4ec;
  --text: #172b25;
  --muted: #60706b;
  --line: #dde7e3;
  --primary: #176b52;
  --primary-dark: #12523f;
  --accent: #1d5e9e;
  --accent-soft: #e8f1ff;
  --amber: #8a5a00;
  --amber-soft: #fff1d6;
  --ok: #176b52;
  --warn: #a65f00;
  --danger: #a43b2d;
  --danger-soft: #ffe7e4;
  --shadow: 0 10px 26px rgba(22, 61, 52, 0.08);
}

body {
  background: var(--bg);
  color: var(--text);
}

.app-shell {
  width: min(100%, 430px);
  padding: max(10px, env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom));
}

.app-header {
  margin: 0 0 6px;
  padding: 14px 4px 8px;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.app-header h1 {
  color: var(--text);
  font-size: 28px;
}

.app-header .eyebrow,
.course-range {
  color: var(--muted);
  opacity: 1;
}

.course-range {
  font-size: 15px;
  line-height: 1.45;
}

.header-actions {
  align-self: start;
  grid-template-columns: auto;
}

.update-button,
.profile-chip {
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--primary);
  box-shadow: none;
}

.update-button {
  min-height: 38px;
  padding: 7px 13px;
  font-size: 15px;
}

.profile-chip {
  max-width: 132px;
  padding: 7px 10px;
  font-size: 15px;
}

.tabbar {
  position: fixed;
  top: auto;
  right: auto;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 20;
  width: min(calc(100% - 24px), 406px);
  transform: translateX(-50%);
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(22, 61, 52, 0.14);
}

.tab-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.tab-button.active {
  background: var(--surface-2);
  color: var(--primary);
}

.section-title {
  margin: 18px 0 10px;
  font-size: 22px;
}

.section-title.tight {
  margin-top: 0;
}

.section-row {
  flex-wrap: wrap;
}

.section-row .button-pair {
  flex: 1 1 100%;
  justify-content: flex-start;
}

.button-pair .ghost-button {
  flex: 1 1 94px;
}

.profile-overview,
.profile-summary,
.module-card,
.stat-card,
.notice,
.advice-box,
.warning-box,
.recheck-box,
.dose-card,
.slot-editor,
.table-wrap,
.course-hero,
.next-dose-card,
.timeline-group,
.medicine-card,
.course-day,
.meal-card,
.diet-record-card,
.diet-simple-summary,
.meal-status-card,
.compact-section,
.home-action-plan,
.medicine-insight-card,
.diet-plate-card,
.sheet-panel {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.profile-overview {
  margin: 6px 0 12px;
  padding: 14px;
}

.profile-overview h2 {
  font-size: 22px;
}

.home-hero-card {
  display: grid;
  gap: 14px;
  margin: 10px 0 14px;
  padding: 18px;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.home-hero-card.missed {
  background: #9a4f00;
}

.home-hero-card.taken {
  background: #16643d;
}

.home-hero-main p,
.home-hero-main h2,
.home-hero-main span,
.home-hero-main em {
  display: block;
  margin: 0;
}

.home-hero-main p {
  color: #d9f0e7;
  font-size: 15px;
  font-weight: 800;
}

.home-hero-main h2 {
  margin-top: 6px;
  font-size: 29px;
  line-height: 1.18;
}

.home-hero-main span {
  margin-top: 10px;
  color: #f1fff8;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}

.home-hero-main em {
  margin-top: 7px;
  color: #d9f0e7;
  font-size: 14px;
  font-style: normal;
}

.home-hero-main small,
.tap-hint {
  display: block;
  margin-top: 9px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  opacity: 0.9;
}

.home-hero-medicines {
  display: grid;
  gap: 8px;
}

.hero-med-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.13);
}

.hero-med-line strong,
.hero-med-line span {
  display: block;
}

.hero-med-line strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
}

.hero-med-line span {
  color: #f0fff8;
  font-size: 15px;
  font-weight: 900;
  text-align: right;
}

.hero-med-more {
  color: #d9f0e7;
  font-size: 14px;
  font-weight: 900;
}

.dose-jump-target,
.interactive-dose-card {
  cursor: pointer;
}

.dose-jump-target:focus-visible,
.interactive-dose-card:focus-visible {
  outline: 3px solid rgba(242, 184, 75, 0.8);
  outline-offset: 3px;
}

.interactive-dose-card:active,
.dose-jump-target:active {
  transform: translateY(1px);
}

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

.home-hero-actions.stacked {
  grid-template-columns: 1fr;
}

.hero-primary,
.hero-secondary {
  min-height: 50px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}

.hero-primary {
  background: #f2b84b;
  color: #2e2613;
}

.hero-secondary {
  border: 1px solid #b7d8cc;
  background: #ffffff;
  color: var(--primary);
}

.missed-button,
.hero-missed {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid #d89b45;
  border-radius: var(--radius-control, 8px);
  background: #fff5e6;
  color: #8a4500;
  font-size: 16px;
  font-weight: 850;
}

.hero-missed {
  min-height: 50px;
  font-size: 18px;
}

.missed-button:focus-visible,
.hero-missed:focus-visible {
  outline: 3px solid rgba(216, 155, 69, 0.38);
  outline-offset: 2px;
}

.timeline-actions,
.dose-resolution-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.timeline-actions .compact-button {
  min-width: 58px;
}

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

@media (max-width: 720px) {
  .timeline-actions {
    grid-column: 1 / -1;
  }

  .dose-resolution-actions,
  .next-dose-actions {
    grid-template-columns: 1fr 1fr;
  }
}

.home-alert-link {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.home-action-plan,
.medicine-insight-card,
.diet-plate-card {
  display: grid;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 14px;
}

.home-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-clean-grid article {
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.home-clean-grid article.warn {
  border-color: rgba(180, 83, 9, 0.36);
  background: #fff8ed;
}

.home-clean-grid span,
.home-clean-grid strong,
.home-clean-grid small {
  display: block;
}

.home-clean-grid span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.home-clean-grid strong {
  margin-top: 6px;
  color: var(--primary-dark);
  font-size: 23px;
  line-height: 1.18;
  word-break: break-word;
}

.home-clean-grid small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

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

.home-quick-actions .ghost-button {
  min-height: 52px;
}

.home-action-plan {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-score-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(23, 107, 82, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, #f7fcfa 0%, #eef8f4 100%);
  box-shadow: var(--shadow);
}

.home-score-card.warn {
  border-color: rgba(180, 83, 9, 0.32);
  background: linear-gradient(135deg, #fffaf2 0%, #fff2dc 100%);
}

.home-score-card.ok {
  border-color: rgba(21, 128, 61, 0.28);
  background: linear-gradient(135deg, #f3fbf6 0%, #e7f7ee 100%);
}

.home-score-main {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.home-score-main h2,
.home-score-main p {
  margin: 0;
}

.home-score-main h2 {
  margin-top: 4px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
}

.home-score-main p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 800;
}

.home-score-ring {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 999px;
  background: #ffffff;
  border: 7px solid var(--primary);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(23, 107, 82, 0.1);
}

.home-score-card.warn .home-score-ring {
  border-color: #b45309;
  color: #9a4f00;
}

.home-score-card.ok .home-score-ring {
  border-color: #15803d;
  color: #16643d;
}

.home-score-ring strong,
.home-score-ring span {
  display: block;
  line-height: 1;
}

.home-score-ring strong {
  font-size: 27px;
  font-weight: 900;
}

.home-score-ring span {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 900;
}

.home-score-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-score-tags span {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.home-next-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.home-next-step span {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.home-action-head,
.medicine-insight-head,
.plate-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.home-action-head h2,
.medicine-insight-head h3,
.plate-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.home-action-head span {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 15px;
  font-weight: 900;
}

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

.home-action-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.home-action-item.ok {
  border-color: rgba(21, 128, 61, 0.28);
  background: #f4fbf7;
}

.home-action-item.warn {
  border-color: rgba(180, 83, 9, 0.34);
  background: #fff8ed;
}

.home-action-item strong,
.home-action-item span {
  display: block;
}

.home-action-item strong {
  color: var(--ink);
  font-size: 18px;
}

.home-action-item span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.home-action-item .compact-button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.summary-grid {
  gap: 10px;
}

.stat-card {
  min-height: 82px;
  padding: 14px;
}

.stat-card strong {
  color: var(--accent);
  font-size: 26px;
}

.stat-card.wide strong {
  font-size: 22px;
}

.module-grid {
  gap: 10px;
}

.module-card {
  min-height: 96px;
  padding: 13px;
}

.module-card span {
  font-size: 15px;
}

.module-card strong {
  font-size: 18px;
}

.primary-button,
.success-button,
.ghost-button,
.danger-button {
  min-height: 48px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 900;
}

.primary-button,
.success-button {
  background: var(--primary);
}

.ghost-button {
  background: #ffffff;
}

.course-hero {
  background: var(--primary);
}

.course-score {
  background: rgba(255, 255, 255, 0.15);
}

.next-dose-card {
  margin-top: 10px;
}

.next-dose-actions {
  grid-template-columns: 1fr 1fr;
}

.next-dose-actions .ghost-button:last-child {
  grid-column: 1 / -1;
}

.medicine-insight-head p,
.plate-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.trend-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.trend-day {
  min-height: 104px;
  display: grid;
  grid-template-rows: minmax(24px, 1fr) auto auto;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  text-align: center;
}

.trend-day > span {
  width: 100%;
  min-height: 8px;
  align-self: end;
  border-radius: 8px 8px 3px 3px;
  background: #b8c5bf;
}

.trend-day.done > span,
.trend-day.today > span {
  background: var(--primary);
}

.trend-day.missed > span {
  background: #c47a18;
}

.trend-day strong,
.trend-day em {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.trend-day.today strong {
  color: var(--primary);
}

.timeline-item,
.dose-card {
  border-radius: 8px;
}

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

.plate-grid article {
  min-height: 88px;
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.plate-grid article.ok {
  border-color: rgba(21, 128, 61, 0.28);
  background: #f4fbf7;
}

.plate-grid article.warn {
  border-color: rgba(180, 83, 9, 0.34);
  background: #fff8ed;
}

.plate-grid strong,
.plate-grid span {
  display: block;
}

.plate-grid strong {
  color: var(--primary-dark);
  font-size: 18px;
}

.plate-grid span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.diet-simple-summary {
  padding: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.meal-status-grid {
  display: grid;
  gap: 10px;
}

.meal-status-card {
  min-height: 116px;
  padding: 14px;
  text-align: left;
}

.meal-status-card span {
  font-size: 19px;
}

.meal-status-card strong {
  font-size: 22px;
}

.meal-status-card em {
  font-size: 15px;
  line-height: 1.4;
}

.meal-status-card.active,
.meal-status-card.done {
  border-color: rgba(23, 107, 82, 0.28);
}

.sheet-panel {
  width: min(100%, 430px);
}

.ai-chat-fab {
  right: max(14px, calc(50vw - 201px));
  bottom: calc(102px + env(safe-area-inset-bottom));
  width: 54px;
  height: 54px;
  border-radius: 8px;
  font-size: 16px;
}

@media (max-width: 520px) {
  .app-shell {
    padding-inline: 12px;
  }

  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .header-actions {
    justify-items: end;
  }

  .update-button {
    width: auto;
  }

  .profile-chip {
    max-width: 120px;
    text-align: center;
  }

  .next-dose-actions,
  .home-hero-actions {
    grid-template-columns: 1fr 1fr;
  }

  .tab-button {
    flex-basis: 0;
    font-size: 14px;
  }

  .tab-button[data-tab="missed"],
  .tab-button[data-tab="settings"] {
    display: none;
  }
}

/* Multi-plan health file system */
:root {
  --primary-soft: #e4f4ec;
  --primary-strong: #12523f;
  --folder: #f4c86a;
  --folder-soft: #fff7df;
}

.active-plan-card,
.plan-detail-card,
.plan-folder-card,
.diet-report-card,
.daily-summary-card,
.weight-card,
.weight-row,
.plan-ai-result {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.active-plan-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 10px 0 12px;
  padding: 14px;
}

.active-plan-card h3,
.plan-detail-card h3,
.diet-report-card h3,
.daily-summary-card h3,
.weight-card h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.active-plan-card p,
.plan-detail-card p,
.diet-report-card p,
.daily-summary-card p,
.weight-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.plan-detail-card,
.diet-report-card {
  display: grid;
  gap: 14px;
  margin: 12px 0;
  padding: 14px;
}

.plan-detail-head,
.diet-report-head,
.plan-subsection-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.plan-detail-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.plan-detail-actions button {
  min-width: 118px;
}

.plan-stat-grid,
.diet-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

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

.plan-stat-grid article,
.diet-report-grid article {
  min-height: 86px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
}

.plan-stat-grid span,
.diet-report-grid span,
.plan-stat-grid small,
.diet-report-grid small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.plan-stat-grid strong,
.diet-report-grid strong {
  display: block;
  margin: 4px 0;
  color: var(--primary);
  font-size: 24px;
  line-height: 1.1;
}

.diet-report-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.diet-summary-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #f7fcfa;
}

.diet-summary-hero h3,
.diet-summary-hero p {
  margin: 0;
}

.diet-summary-hero h3 {
  margin-top: 4px;
  color: var(--primary-dark);
  font-size: 23px;
  line-height: 1.18;
}

.diet-summary-hero p:not(.eyebrow) {
  margin-top: 5px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}

.diet-summary-hero.warn {
  background: #fff8ed;
}

.diet-summary-hero.warn h3 {
  color: var(--warn);
}

.diet-summary-hero.low {
  background: #f7f8ef;
}

.diet-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.diet-summary-metrics article {
  min-width: 0;
  min-height: 68px;
  padding: 9px;
  background: var(--surface);
}

.diet-summary-metrics span,
.diet-summary-metrics strong,
.diet-summary-metrics small {
  display: block;
  min-width: 0;
}

.diet-summary-metrics span,
.diet-summary-metrics small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

.diet-summary-metrics strong {
  margin: 4px 0;
  color: var(--primary);
  font-size: 21px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.diet-next-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: #fbfdfc;
}

.diet-next-step strong {
  color: var(--primary-dark);
  font-size: 17px;
}

.diet-next-step span {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.plan-alert-line {
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef8f4;
  color: var(--primary-dark);
  font-weight: 900;
}

.plan-alert-line.warn {
  background: var(--amber-soft);
  color: var(--warn);
}

.plan-subsection {
  display: grid;
  gap: 10px;
}

.plan-subsection h4 {
  margin: 0;
  font-size: 19px;
}

.plan-time-axis {
  display: grid;
  gap: 8px;
}

.plan-time-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.plan-time-item.taken {
  border-color: rgba(21, 128, 61, 0.28);
  background: #f4fbf7;
}

.plan-time-item.missed {
  border-color: rgba(180, 83, 9, 0.36);
  background: #fff8ed;
}

.plan-time-clock {
  color: var(--primary);
  font-size: 20px;
  font-weight: 900;
}

.plan-time-item strong,
.plan-time-item span,
.plan-time-item small {
  display: block;
}

.plan-time-item small {
  color: var(--muted);
  font-weight: 800;
}

.plan-medicine-chip-grid,
.diet-structure-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-medicine-chip-grid article {
  flex: 1 1 150px;
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.plan-medicine-chip-grid strong,
.plan-medicine-chip-grid span,
.plan-medicine-chip-grid small {
  display: block;
}

.plan-medicine-chip-grid strong {
  color: var(--primary-dark);
  font-size: 18px;
}

.plan-medicine-chip-grid span,
.plan-medicine-chip-grid small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.diet-structure-tags span {
  padding: 8px 10px;
  border-radius: 8px;
  background: #edf1ef;
  color: var(--muted);
  font-weight: 900;
}

.diet-structure-tags span.ok {
  background: #dcfce7;
  color: var(--ok);
}

.plan-folder-grid {
  display: grid;
  gap: 12px;
}

.plan-folder-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.plan-folder-card.active {
  border-color: rgba(23, 107, 82, 0.35);
  background: #f7fcfa;
}

.plan-folder-card.add {
  width: 100%;
  min-height: 108px;
  grid-template-columns: 58px minmax(0, 1fr);
  text-align: left;
  color: var(--text);
}

.plan-folder-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.plan-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--folder-soft);
  color: #7a5200;
  font-size: 24px;
  font-weight: 900;
}

.plan-icon.large {
  width: 58px;
  height: 58px;
  background: var(--primary-soft);
  color: var(--primary);
}

.plan-folder-card strong,
.plan-folder-card em,
.plan-folder-card small {
  display: block;
  font-style: normal;
}

.plan-folder-card strong {
  font-size: 21px;
  line-height: 1.2;
}

.plan-folder-card em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.plan-folder-card small {
  margin-top: 2px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
}

.plan-folder-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.add-plan-fab {
  position: fixed;
  right: max(14px, calc(50vw - 201px));
  bottom: calc(164px + env(safe-area-inset-bottom));
  z-index: 9;
  width: 58px;
  height: 58px;
  min-height: 58px;
  border-radius: 8px;
  background: #f2b84b;
  color: #2e2613;
  box-shadow: var(--shadow);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.add-plan-fab[hidden] {
  display: none;
}

.plan-create-panel {
  display: grid;
  gap: 10px;
}

.plan-create-body {
  display: grid;
  gap: 12px;
}

.plan-photo-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.plan-photo-preview {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f7fbfa;
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  overflow: hidden;
}

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

.plan-ai-result {
  padding: 12px;
  color: var(--primary-dark);
  font-weight: 800;
}

.plan-ai-result p,
.plan-ai-result ul {
  margin: 0 0 8px;
}

.plan-ai-result li {
  margin: 0 0 8px;
}

.plan-confirm-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(31, 111, 98, 0.24);
  border-radius: 8px;
  background: #f7fcfa;
}

.plan-confirm-panel[hidden] {
  display: none;
}

.plan-confirm-head {
  display: grid;
  gap: 4px;
}

.plan-confirm-head strong {
  color: var(--primary-dark);
  font-size: 22px;
  line-height: 1.2;
}

.plan-confirm-head span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

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

.plan-review-item {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.confirm-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 900;
}

.confirm-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.final-confirm {
  align-items: flex-start;
  padding: 12px;
  border-radius: 8px;
  background: #fff8ed;
  color: #8a4b08;
}

.plan-create-actions {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10px;
}

.daily-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 14px;
}

.daily-summary-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

.daily-ai-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.daily-ai-head h3,
.daily-ai-head p {
  margin: 0;
}

.daily-ai-head h3 {
  margin-top: 4px;
  font-size: 21px;
}

.daily-ai-head p {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.weight-panel {
  margin-top: 18px;
}

.weight-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.weight-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  align-items: end;
}

.compact-field input {
  min-height: 50px;
}

.weight-history {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.weight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  box-shadow: none;
}

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

.weight-row span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.weight-row b {
  color: var(--accent);
  font-size: 20px;
}

@media (max-width: 520px) {
  .active-plan-card,
  .plan-folder-card,
  .daily-summary-card,
  .weight-main,
  .weight-row {
    grid-template-columns: 1fr;
  }

  .plan-detail-head,
  .diet-report-head,
  .plan-subsection-head,
  .home-action-head,
  .medicine-insight-head,
  .plate-head,
  .diet-summary-hero,
  .daily-ai-head {
    grid-template-columns: 1fr;
  }

  .daily-ai-head .ai-button {
    width: 100%;
  }

  .diet-summary-hero .ai-button {
    justify-self: start;
  }

  .plan-stat-grid,
  .diet-report-grid,
  .plate-grid {
    grid-template-columns: 1fr 1fr;
  }

  .diet-summary-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .diet-summary-metrics article {
    padding: 9px 8px;
  }

  .diet-summary-metrics strong {
    font-size: 20px;
  }

  .diet-summary-metrics span,
  .diet-summary-metrics small {
    font-size: 12px;
  }

  .diet-next-step {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .home-score-main {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .home-score-ring {
    width: 72px;
    height: 72px;
    border-width: 6px;
  }

  .home-score-ring strong {
    font-size: 23px;
  }

  .home-score-main h2 {
    font-size: 22px;
  }

  .home-score-tags,
  .home-next-step {
    grid-template-columns: 1fr;
  }

  .hero-med-line {
    grid-template-columns: 1fr;
  }

  .hero-med-line span {
    text-align: left;
  }

  .home-next-step .compact-button {
    width: 100%;
    min-height: 46px;
  }

  .home-action-item {
    grid-template-columns: 1fr;
  }

  .home-action-item .compact-button {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  .dose-detail-top,
  .dose-detail-actions {
    grid-template-columns: 1fr;
  }

  .dose-detail-actions button:first-child {
    grid-column: auto;
  }

  .trend-bars {
    grid-template-columns: repeat(7, minmax(34px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .plan-time-item {
    grid-template-columns: 1fr;
  }

  .plan-time-item .status-pill,
  .plan-time-item .compact-button {
    width: 100%;
  }

  .plan-folder-main,
  .plan-folder-card.add,
  .plan-photo-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .plan-folder-actions {
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
  }

  .daily-summary-card > button,
  .active-plan-card > button {
    width: 100%;
  }

  .add-plan-fab {
    right: max(78px, calc(50vw - 137px));
    bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .ai-chat-fab {
    right: max(12px, calc(50vw - 203px));
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

/* Final cascade guard: keep the shared mobile design system authoritative. */
:root {
  --bg: var(--page-bg);
  --surface: var(--card-bg);
  --surface-2: var(--brand-soft);
  --text: var(--text-primary);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-color);
  --primary: var(--brand);
  --primary-dark: var(--brand-strong);
  --primary-soft: var(--brand-soft);
  --ok: var(--success);
  --warn: var(--warning);
  --danger: var(--danger);
  --shadow: var(--shadow-soft);
}

body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-size: 16px;
}

.app-shell {
  width: min(100%, 760px);
  padding: calc(env(safe-area-inset-top) + var(--space-2)) var(--space-4) calc(92px + env(safe-area-inset-bottom));
}

.app-header {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 0 var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

.app-header h1 {
  color: var(--text-primary);
  font-size: 24px;
}

.app-header .eyebrow,
.course-range {
  color: var(--text-secondary);
  opacity: 1;
}

.course-range {
  font-size: 14px;
}

.header-actions {
  grid-template-columns: auto;
}

.update-button,
.profile-chip {
  min-height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--brand);
  box-shadow: none;
  font-size: 14px;
}

.tabbar {
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 30;
  width: min(100%, 760px);
  min-height: calc(72px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -8px 24px rgba(21, 54, 47, 0.07);
}

.tab-button {
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-rows: 24px auto;
  place-items: center;
  gap: 2px;
  padding: 5px 2px;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}

.tab-button.active {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.section-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 20px;
}

.primary-button,
.success-button,
.secondary-button,
.ghost-button,
.danger-button,
.file-button,
.hero-primary,
.hero-secondary {
  min-height: 48px;
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 780;
}

.primary-button,
.success-button {
  background: var(--brand);
  color: #fff;
}

.secondary-button,
.ghost-button,
.file-button {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--brand-strong);
}

.home-hero-card {
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: 20px;
  border: 0;
  border-radius: var(--radius-main);
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.home-hero-card.missed {
  background: #6c5540;
}

.home-hero-card.taken {
  background: var(--success);
}

.home-hero-card.onboarding {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
}

.home-hero-main h2 {
  font-size: 28px;
}

.home-hero-main span {
  color: #fff;
  font-size: 16px;
}

.home-hero-main em,
.home-hero-main small {
  color: #dceee9;
  font-size: 14px;
}

.hero-med-line {
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.11);
}

.home-hero-actions {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.home-hero-actions > :first-child {
  grid-column: 1 / -1;
}

.home-hero-actions.stacked {
  grid-template-columns: 1fr;
}

.home-hero-actions.stacked > :first-child {
  grid-column: auto;
}

.hero-primary {
  background: #fff;
  color: var(--brand-strong);
}

.home-hero-card.onboarding .hero-primary {
  background: var(--brand);
  color: #fff;
}

.hero-secondary {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.home-hero-card.onboarding .hero-secondary {
  border-color: var(--border-color);
  background: var(--card-bg);
  color: var(--brand);
}

.home-action-plan {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.course-hero,
.next-dose-card,
.medicine-insight-card,
.timeline-group,
.active-plan-card,
.plan-detail-card,
.plan-folder-card,
.medicine-card,
.course-day,
.diet-report-card,
.daily-summary-card,
.diet-simple-summary,
.meal-status-card,
.meal-editor-card,
.profile-summary,
.weight-card,
.slot-editor,
.settings-group,
.privacy-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: none;
}

.course-hero {
  border: 0;
  background: var(--brand);
}

.diet-simple-summary {
  padding: var(--space-4);
}

.meal-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.meal-status-card {
  min-height: 112px;
  padding: 12px;
}

.sheet-panel {
  width: min(100%, 760px);
  max-height: min(88dvh, 780px);
  padding: var(--space-4);
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--card-bg);
  box-shadow: 0 -16px 42px rgba(15, 43, 37, 0.18);
}

.toast {
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 80;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-radius: var(--radius-control);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity var(--state-duration) ease, transform var(--state-duration) ease, visibility 0s linear var(--state-duration);
}

.toast.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

@media (max-width: 520px) {
  .app-shell {
    width: 100%;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .app-header h1 {
    font-size: 22px;
  }

  .home-hero-card {
    padding: var(--space-4);
  }

  .home-hero-main h2 {
    font-size: 25px;
  }

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

  .sheet-panel {
    padding: var(--space-4) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 370px) {
  .home-hero-actions {
    grid-template-columns: 1fr;
  }

  .home-hero-actions > :first-child {
    grid-column: auto;
  }
}

/* Final general-plan layout overrides */
.plan-photo-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.plan-photo-preview {
  width: 100%;
  min-height: 112px;
  aspect-ratio: auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
}

.plan-photo-preview .plan-source-file img {
  width: 100%;
  height: 68px;
  object-fit: cover;
}

.record-filters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70px, auto);
  overflow-x: auto;
}

@media (max-width: 390px) {
  .onboarding-action-grid,
  .plan-create-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 2026-07 UI refinement: calmer hierarchy and mobile-first sheets. */
:root {
  --page-bg: #f3f7f5;
  --border-color: #d8e3df;
  --shadow-soft: 0 10px 28px rgba(21, 54, 47, 0.075);
}

.app-shell {
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

.app-header {
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-3);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.update-button,
.profile-chip {
  width: auto;
  min-height: 44px;
  padding: 8px 11px;
}

.profile-chip {
  max-width: 124px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hero-card {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: 18px;
}

.home-hero-card.missed {
  background: #6b3d4a;
}

.home-course-meta {
  gap: 6px;
}

.home-course-meta span {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
}

.home-hero-main h2 {
  margin-top: 3px;
  font-size: 27px;
  line-height: 1.2;
}

.home-hero-main span {
  margin-top: 6px;
}

.home-hero-main em,
.home-hero-main small {
  margin-top: 5px;
  line-height: 1.4;
}

.home-hero-medicines {
  gap: 6px;
}

.hero-med-line {
  min-height: 44px;
  padding: 8px 11px;
}

.hero-med-line strong {
  font-size: 16px;
}

.hero-med-line span {
  font-size: 14px;
}

.home-hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: var(--space-2);
}

.home-hero-actions > :first-child {
  grid-column: auto;
}

.home-hero-actions .hero-primary,
.home-hero-actions .hero-secondary {
  min-width: 0;
  min-height: 50px;
  font-size: 16px;
}

.home-secondary-panel {
  display: grid;
  gap: 0;
  margin: 0 0 var(--space-6);
  padding: 0 var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

.home-panel-block {
  padding: var(--space-4) 0;
}

.home-panel-block + .home-panel-block {
  border-top: 1px solid var(--border-color);
}

.home-panel-label {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 800;
}

.home-secondary-panel .inline-notice {
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 14px;
}

.home-secondary-panel .home-quick-actions {
  gap: var(--space-2);
}

.home-secondary-panel .quick-record-button {
  min-height: 76px;
  padding: 12px;
  border-radius: var(--radius-control);
}

.home-secondary-panel .quick-record-button strong {
  font-size: 16px;
}

.home-secondary-panel .quick-record-button span {
  font-size: 14px;
}

.onboarding-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.onboarding-action-grid > :first-child {
  grid-column: 1 / -1;
}

.home-empty-links {
  gap: 4px 12px;
}

.home-empty-links button {
  min-height: 48px;
  padding: 6px 2px;
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.plan-stat-grid {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--border-color);
}

.plan-stat-grid article {
  border-radius: 0;
  background: var(--card-bg);
}

.plan-stat-grid article.primary-stat {
  min-height: 92px;
  background: var(--brand-soft);
}

.plan-stat-grid article.primary-stat strong {
  color: var(--brand-strong);
  font-size: 27px;
}

.plan-stat-grid article.secondary-stat {
  min-height: 74px;
  background: #fbfdfc;
}

.plan-stat-grid article.secondary-stat strong {
  color: var(--text-primary);
  font-size: 20px;
}

#mealEditorModal .sheet-panel {
  width: min(100%, 760px);
  height: min(88dvh, 780px);
  max-height: min(88dvh, 780px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

#mealEditorModal .sheet-header {
  position: relative;
  top: auto;
  z-index: 6;
  margin: 0;
  padding: 14px var(--space-4);
  background: var(--card-bg);
}

#mealEditorContent {
  min-height: 0;
  overflow: hidden;
}

.meal-editor-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.meal-editor-scroll {
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.meal-editor-head {
  margin-bottom: var(--space-3);
}

.meal-editor-head h3 {
  font-size: 23px;
}

.meal-editor-head span:not(.status-pill) {
  font-size: 14px;
}

.meal-workflow {
  gap: 4px;
  margin-bottom: var(--space-3);
  padding: 6px;
  border-radius: var(--radius-control);
  background: #f4f7f6;
}

.meal-workflow li,
.meal-workflow li.active,
.meal-workflow li.done {
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
}

.meal-workflow li.active,
.meal-workflow li.done {
  background: var(--card-bg);
}

.meal-workflow b {
  width: 22px;
  height: 22px;
  margin: 0;
  font-size: 12px;
}

.meal-workflow span {
  font-size: 13px;
  line-height: 1.25;
}

.meal-photo-row.compact {
  grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.65fr);
  align-items: start;
}

.meal-photo-row.compact .meal-preview,
.meal-photo-row.compact .meal-preview-grid,
.meal-preview-stage {
  width: 100%;
  min-height: 168px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-control);
}

.meal-preview-stage img {
  background: #edf4f1;
}

.meal-photo-counter {
  right: 10px;
  bottom: 10px;
}

.meal-photo-nav {
  gap: var(--space-2);
}

.photo-nav-button {
  min-height: 44px;
  border-radius: 10px;
}

.meal-file .file-button {
  min-height: 54px;
  border: 1px solid #b7d6cd;
  border-radius: var(--radius-control);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.meal-photo-hint,
.meal-ai-step small,
.meal-fields small {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.meal-fields textarea,
.meal-fields input {
  border-radius: var(--radius-control);
  background: #fbfdfc;
}

.meal-fields textarea {
  min-height: 108px;
}

.meal-analysis {
  margin-top: var(--space-3);
}

.meal-save-actions {
  position: relative;
  z-index: 5;
  bottom: auto;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.35fr);
  margin: 0;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: 0 -8px 20px rgba(21, 54, 47, 0.06);
}

.meal-save-actions button {
  min-height: 54px;
}

body.sheet-open .toast {
  top: calc(12px + env(safe-area-inset-top));
  bottom: auto;
  transform: translate(-50%, -12px);
}

body.sheet-open .toast.show {
  transform: translate(-50%, 0);
}

.tabbar {
  min-height: calc(76px + env(safe-area-inset-bottom));
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.965);
  box-shadow: 0 -7px 22px rgba(21, 54, 47, 0.065);
  backdrop-filter: blur(14px);
}

.tab-button {
  min-height: 60px;
  border-radius: 10px;
  font-size: 13px;
}

.tab-button.active {
  background: #edf5f2;
  box-shadow: inset 0 0 0 1px rgba(20, 95, 84, 0.06);
}

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

@media (max-width: 520px) {
  .plan-detail-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .plan-detail-head > .ghost-button {
    width: auto;
    min-height: 44px;
    padding: 8px 11px;
    font-size: 14px;
  }

  .plan-detail-actions {
    min-width: 118px;
  }

  .plan-detail-actions button {
    width: 100%;
    min-width: 0;
    padding-inline: 9px;
    font-size: 13px;
  }

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

  .plan-time-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: start;
    padding: 12px;
  }

  .plan-time-clock {
    grid-column: 1;
    grid-row: 1;
  }

  .plan-time-item > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .plan-time-item > .status-pill {
    width: auto;
    grid-column: 2;
    grid-row: 1;
  }

  .plan-time-item > .compact-button {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 430px) {
  .activation-code-form {
    grid-template-columns: 1fr;
  }

  .activation-code-form .primary-button {
    width: 100%;
  }

  .meal-photo-row.compact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .meal-editor-scroll {
    padding: var(--space-3);
  }

  .meal-save-actions {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .home-hero-main h2 {
    font-size: 25px;
  }
}

@media (max-width: 370px) {
  .app-shell {
    padding-right: 12px;
    padding-left: 12px;
  }

  .app-header h1 {
    font-size: 21px;
  }

  .profile-chip {
    max-width: 104px;
  }

  .home-hero-actions,
  .home-secondary-panel .home-quick-actions {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .onboarding-action-grid > :first-child {
    grid-column: auto;
  }

  .home-secondary-panel {
    padding-right: 14px;
    padding-left: 14px;
  }

  .meal-save-actions button {
    min-height: 48px;
  }

  .tabbar {
    padding-right: 6px;
    padding-left: 6px;
  }

  .tab-button {
    min-height: 58px;
    font-size: 13px;
  }
}

/* Medication knowledge trial: authoritative lookup without diagnosis or dosing advice. */
.medicine-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-2);
}

.medicine-card-head h3 {
  min-width: 0;
  font-size: 20px;
}

.medicine-knowledge-button {
  min-width: 96px;
  border-color: rgba(20, 95, 84, 0.18);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.medicine-knowledge-panel {
  width: min(100%, 620px);
  max-height: min(92dvh, 860px);
}

.medicine-knowledge-content {
  display: grid;
  gap: var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

.medicine-knowledge-hero,
.medicine-knowledge-section,
.knowledge-safety-note {
  border-radius: var(--radius-card);
}

.medicine-knowledge-hero {
  padding: var(--space-5);
  background: linear-gradient(145deg, #155e52, #214e47);
  color: #fff;
}

.medicine-knowledge-hero h3 {
  margin: var(--space-2) 0;
  color: inherit;
  font-size: 25px;
  line-height: 1.25;
}

.medicine-knowledge-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
}

.knowledge-badge {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 800;
}

.medicine-knowledge-section {
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
}

.medicine-knowledge-section h3 {
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
  font-size: 18px;
}

.medicine-knowledge-section p {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  line-height: 1.65;
}

.knowledge-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.knowledge-section-head h3 {
  margin: 0;
}

.knowledge-section-head span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
}

.knowledge-facts {
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.knowledge-facts > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.knowledge-facts > div:last-child {
  border-bottom: 0;
}

.knowledge-facts dt {
  color: var(--text-secondary);
  font-weight: 750;
}

.knowledge-facts dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.knowledge-checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.knowledge-checklist li {
  position: relative;
  padding: 12px 12px 12px 42px;
  border-radius: var(--radius-control);
  background: #f4f8f6;
  color: var(--text-primary);
  line-height: 1.5;
  font-weight: 700;
}

.knowledge-checklist li::before {
  position: absolute;
  top: 11px;
  left: 13px;
  content: "✓";
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.knowledge-source-card {
  border-color: #ead7ad;
  background: #fffaf0;
}

.knowledge-official-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 14px;
  text-decoration: none;
}

.knowledge-safety-note {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid #f0d8a6;
  background: var(--warning-soft);
  color: #73531b;
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 370px) {
  .medicine-card-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .medicine-knowledge-button {
    width: 100%;
  }

  .knowledge-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* Simplified medication records */
.records-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.records-page-head .eyebrow,
.records-page-head h2,
.records-page-head p {
  margin: 0;
}

.records-page-head h2 {
  margin-top: 4px;
  font-size: 25px;
}

.records-page-head > div > p:last-child {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 14px;
}

.record-overview {
  margin-bottom: var(--space-6);
}

.course-review-overview {
  margin-bottom: var(--space-5);
}

.course-review-empty,
.course-review-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

.course-review-empty {
  padding: 14px 16px;
}

.course-review-empty strong,
.course-review-empty p {
  margin: 0;
}

.course-review-empty strong {
  color: var(--brand-strong);
}

.course-review-empty p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.course-review-card {
  overflow: hidden;
}

.course-review-card > summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.course-review-card > summary::-webkit-details-marker {
  display: none;
}

.course-review-card > summary > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.course-review-card > summary small,
.course-review-card > summary strong,
.course-review-card > summary em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-review-card > summary small {
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.course-review-card > summary strong {
  font-size: 18px;
}

.course-review-card > summary em {
  color: var(--text-secondary);
  font-size: 13px;
  font-style: normal;
}

.course-review-card > summary b {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--brand-strong);
  font-size: 13px;
}

.course-review-card[open] > summary {
  border-bottom: 1px solid var(--border-color);
}

.course-review-card[open] > summary b {
  font-size: 0;
}

.course-review-card[open] > summary b::after {
  content: "收起";
  font-size: 13px;
}

.course-review-content {
  display: grid;
  gap: 14px;
  padding: 16px;
}

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

.course-review-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: var(--radius-control);
  background: var(--brand-soft);
}

.course-review-grid span {
  color: var(--text-secondary);
  font-size: 12px;
}

.course-review-grid strong {
  overflow-wrap: anywhere;
  color: var(--brand-strong);
  font-size: 15px;
}

.course-review-section {
  display: grid;
  gap: 8px;
}

.course-review-section h4 {
  margin: 0;
  font-size: 15px;
}

.course-review-list,
.course-review-questions {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-review-list > li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.course-review-list > li > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.course-review-list strong,
.course-review-list small {
  overflow-wrap: anywhere;
}

.course-review-list small {
  color: var(--text-secondary);
  font-size: 12px;
}

.course-review-list em {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.course-review-list > .course-review-muted {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
}

.course-review-events time {
  width: 54px;
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 12px;
}

.course-review-questions {
  counter-reset: review-question;
}

.course-review-questions > li {
  counter-increment: review-question;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.course-review-questions > li::before {
  content: counter(review-question);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 850;
}

.course-review-note {
  display: grid;
  gap: 7px;
}

.course-review-note > span {
  font-size: 14px;
  font-weight: 800;
}

.course-review-note textarea {
  min-height: 86px;
  resize: vertical;
}

.course-review-actions {
  display: flex;
  justify-content: flex-end;
}

.course-review-actions .primary-button {
  min-width: 148px;
}

.course-review-disclaimer {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f5f7f6;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.duplicate-medication-alert {
  padding: 12px 13px;
  border: 1px solid #ebcd91;
  border-radius: var(--radius-control);
  background: var(--warning-soft);
  color: #714e16;
}

.duplicate-medication-alert strong,
.duplicate-medication-alert p,
.duplicate-medication-alert small {
  display: block;
  margin: 0;
}

.duplicate-medication-alert p {
  margin-top: 5px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.duplicate-medication-alert small {
  margin-top: 5px;
  line-height: 1.5;
}

.medicine-duplicate-alert {
  margin-bottom: 12px;
}

.records-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, #155e52, #214e47);
  color: #fff;
  box-shadow: 0 12px 28px rgba(20, 78, 69, 0.18);
}

.records-rate > span,
.records-rate > p {
  color: rgba(255, 255, 255, 0.78);
}

.records-rate > span {
  font-size: 14px;
  font-weight: 750;
}

.records-rate > strong {
  display: block;
  margin: 7px 0 2px;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -2px;
}

.records-rate > strong small {
  margin-left: 2px;
  font-size: 20px;
  letter-spacing: 0;
}

.records-rate > p {
  margin: 7px 0 0;
  font-size: 13px;
}

.records-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.records-summary-stats > div {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 12px 6px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.1);
}

.records-summary-stats strong {
  max-width: 100%;
  margin: 5px 0 2px;
  overflow-wrap: anywhere;
  font-size: clamp(18px, 6vw, 24px);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.records-summary-stats > div > span:last-child {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.records-stat-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
}

.records-stat-icon.taken {
  background: #dff5eb;
  color: #12644f;
}

.records-stat-icon.missed {
  background: #fff0d8;
  color: #96621a;
}

.records-stat-icon.unresolved {
  background: #edf1f0;
  color: #52605d;
}

.records-empty-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

.records-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 850;
}

.records-empty-summary h3,
.records-empty-summary p {
  margin: 0;
}

.records-empty-summary h3 {
  font-size: 17px;
}

.records-empty-summary p {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.record-recent-section {
  padding: var(--space-5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

.record-recent-head {
  margin-bottom: 2px;
}

.record-recent-head h3 {
  margin: 0;
  font-size: 18px;
}

.record-recent-head > span {
  font-size: 13px;
}

.record-list-empty {
  padding: 28px 0 14px;
  color: var(--text-secondary);
  text-align: center;
}

.record-load-more {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 0 4px;
  text-align: center;
}

.record-load-more button {
  width: min(100%, 280px);
}

.record-load-more span {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.record-day-group {
  border-bottom: 1px solid var(--border-color);
}

.record-day-group:last-child {
  border-bottom: 0;
}

.record-day-group > summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}

.record-day-group > summary::-webkit-details-marker {
  display: none;
}

.record-day-group > summary::before {
  content: "+";
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 850;
}

.record-day-group[open] > summary::before {
  content: "−";
}

.record-day-group > summary > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.record-day-group > summary strong,
.record-day-group > summary small,
.record-day-group > summary em {
  margin: 0;
}

.record-day-group > summary strong {
  font-size: 16px;
}

.record-day-group > summary small {
  color: var(--text-secondary);
  font-size: 12px;
}

.record-day-group > summary em {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
}

.record-day-items {
  padding-left: 38px;
}

.record-item-main {
  min-width: 0;
}

.record-key-value {
  color: var(--brand-strong) !important;
  font-weight: 800;
}

.record-item-detail {
  margin-top: 6px;
}

.record-item-detail > summary {
  width: fit-content;
  color: var(--brand-strong);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.record-item-detail > p {
  margin-top: 7px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--text-secondary);
  white-space: pre-line;
}

.record-item-detail > .record-user-note {
  background: #fffaf0;
  color: #74511c;
}

.record-timeline-item:last-child {
  border-bottom: 0;
}

.record-timeline-item.taken .record-type-icon {
  background: #dff5eb;
  color: #12644f;
}

.record-timeline-item.missed .record-type-icon,
.record-timeline-item.warn .record-type-icon {
  background: #fff0d8;
  color: #96621a;
}

/* Medication instruction content */
.knowledge-section-head .knowledge-status-pending {
  background: #fff0d8;
  color: #875817;
}

.knowledge-plan-purpose {
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--brand-soft);
  color: var(--brand-strong) !important;
  font-weight: 700;
}

.knowledge-pending-card {
  padding: var(--space-4);
  border: 1px dashed #d9b86f;
  border-radius: var(--radius-control);
  background: #fffaf0;
}

.knowledge-pending-card strong {
  display: block;
  color: #684a15;
  font-size: 16px;
}

.knowledge-pending-card p {
  margin: 7px 0 0;
}

.knowledge-helper {
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: #f4f8f6;
  font-size: 13px;
}

.knowledge-checklist-caution li {
  display: grid;
  gap: 3px;
  padding-left: 42px;
}

.knowledge-checklist-caution li::before {
  content: "核";
  background: #e9d29c;
  color: #684a15;
  font-size: 11px;
}

.knowledge-checklist-caution li span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 370px) {
  .records-summary-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .records-summary-stats {
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    overflow-x: auto;
  }

  .record-day-items {
    padding-left: 0;
  }
}

/* Keep the task-resolution flow visible without routine scrolling. */
#careTaskModal .sheet-panel {
  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
  display: flex;
  flex-direction: column;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  overflow: hidden;
}

#careTaskModal .sheet-handle {
  flex: 0 0 auto;
  margin-bottom: 7px;
}

#careTaskModal .sheet-header {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

#careTaskModal .sheet-header .eyebrow {
  margin-bottom: 2px;
}

#careTaskModal .sheet-header h2 {
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.15;
}

#careTaskContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#careTaskModal .care-task-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#careTaskModal .care-task-summary {
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

#careTaskModal .care-task-summary div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

#careTaskModal .care-task-summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#careTaskModal .care-task-summary strong {
  white-space: nowrap;
}

#careTaskModal .care-task-medications {
  gap: 0;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
}

#careTaskModal .care-task-medications p {
  min-height: 44px;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
}

#careTaskModal .care-task-medications p:last-child {
  border-bottom: 0;
}

#careTaskModal .care-task-medications strong {
  min-width: 0;
  line-height: 1.25;
}

#careTaskModal .care-task-medications span {
  flex: 0 0 auto;
  color: var(--text-secondary);
  line-height: 1.25;
  text-align: right;
}

#careTaskModal .care-task-source {
  margin: 0;
  padding: 8px 10px;
}

#careTaskModal .care-task-form {
  gap: 8px;
  padding-top: 8px;
}

/* Keep dose resolution actions visible while longer medication notes remain scrollable. */
#doseDetailModal .dose-detail-panel {
  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
  display: flex;
  flex-direction: column;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  overflow: hidden;
}

#doseDetailModal .sheet-header {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

#doseDetailContent,
#doseDetailModal .dose-detail-card {
  min-height: 0;
  flex: 1 1 auto;
}

#doseDetailContent {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#doseDetailModal .dose-detail-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

#doseDetailModal .dose-detail-scroll {
  min-height: 0;
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#doseDetailModal .dose-detail-actions {
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 2px;
  background: var(--surface);
}

#doseDetailModal .dose-detail-actions button:first-child {
  grid-column: auto;
}

#doseDetailModal .dose-detail-actions button {
  min-height: 44px;
  padding: 8px 4px;
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
}

#doseDetailModal .dose-detail-actions.five-actions {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#doseDetailModal .dose-detail-actions.five-actions button {
  grid-column: span 3;
}

#doseDetailModal .dose-detail-actions.five-actions button:nth-child(n + 3) {
  grid-column: span 2;
}

#doseDetailModal .dose-detail-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#doseDetailModal .dose-detail-meta article {
  min-height: 0;
  padding: 8px;
}

#doseDetailModal .dose-detail-meta strong {
  margin-top: 4px;
  font-size: 16px;
}

#doseDetailModal .dose-detail-note {
  padding: 8px;
}

.care-task-quick-fields,
.care-task-measurement-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#careTaskModal .field {
  gap: 4px;
}

#careTaskModal .field input,
#careTaskModal .field select {
  min-height: 46px;
  padding-block: 8px;
}

#careTaskModal .care-task-quick-fields .check-control {
  min-height: 46px;
  align-self: end;
  gap: 8px;
  padding: 8px 10px;
}

.care-task-note {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: #fbfdfc;
}

.care-task-extra {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: #fbfdfc;
}

.care-task-extra > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 8px 11px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.care-task-extra-content {
  display: grid;
  gap: 8px;
  padding: 0 8px 8px;
}

.care-task-note summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--text-secondary);
  font-weight: 750;
  cursor: pointer;
}

.care-task-note[open] {
  padding-bottom: 8px;
}

.care-task-note[open] summary {
  min-height: 38px;
  padding-bottom: 4px;
}

.care-task-note .field {
  padding: 0 8px;
}

#careTaskModal .care-task-note textarea {
  min-height: 64px;
  resize: none;
}

.care-task-actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  background: var(--card-bg);
}

.care-task-actions.medication-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#careTaskModal .care-task-actions button {
  min-height: 48px;
}

@media (max-height: 700px) {
  #careTaskModal .sheet-header .eyebrow,
  #careTaskModal .care-task-source {
    display: none;
  }

  #careTaskModal .care-task-medications p {
    min-height: 40px;
    padding-block: 5px;
  }
}

.course-calendar-head {
  align-items: end;
}

.course-calendar-summary {
  display: grid;
  justify-items: end;
  color: var(--text-secondary);
  font-size: 12px;
}

.course-calendar-summary strong {
  color: var(--text-primary);
  font-size: 14px;
}

.course-calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.calendar-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-pager button {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--brand);
}

.calendar-pager em {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
}

.plan-create-steps span.complete {
  background: var(--success-soft);
  color: var(--success);
}

@media (max-width: 420px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }

  .app-header > div:first-child {
    min-width: 0;
  }

  .app-header h1,
  .app-header .eyebrow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-header h1 {
    font-size: 22px;
  }

  .course-range {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .header-actions {
    width: 98px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .update-button,
  .profile-chip {
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 13px;
  }

  .course-calendar-head,
  .course-calendar-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .course-calendar-summary {
    justify-items: start;
  }

  .calendar-pager {
    justify-content: space-between;
  }
}

.records-page-head #exportCsvButton {
  min-width: 72px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Final Android polish: compact navigation and first-screen course summary. */
.tabbar {
  min-height: calc(68px + env(safe-area-inset-bottom));
  align-items: center;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}

.tab-button {
  min-height: 50px;
  grid-template-rows: 20px 15px;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 15px;
}

.tab-button.active {
  background: #eef6f3;
  box-shadow: inset 0 0 0 1px rgba(20, 95, 84, 0.055);
}

.tab-icon {
  width: 19px;
  height: 19px;
}

.records-page-head {
  margin-bottom: 14px;
}

.record-overview {
  margin-bottom: 14px;
}

.records-summary-card {
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
}

.records-rate > strong {
  margin-top: 5px;
  font-size: clamp(34px, 10vw, 42px);
}

.records-summary-stats > div {
  padding: 9px 4px;
}

.record-filter-shell {
  margin-bottom: 14px;
}

.record-recent-section {
  padding: 14px;
}

@media (max-width: 430px) {
  .records-summary-card {
    grid-template-columns: minmax(112px, 0.9fr) minmax(0, 1.35fr);
  }

  .records-summary-stats {
    gap: 5px;
  }

  .records-summary-stats strong {
    font-size: clamp(17px, 5.4vw, 22px);
  }

  .course-review-card > summary {
    min-height: 66px;
    padding: 12px 14px;
  }

  .course-review-content {
    padding: 14px;
  }

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

  .course-review-list > li {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .course-review-list em {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  .course-review-actions .primary-button {
    width: 100%;
  }
}

@media (max-width: 350px) {
  .course-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 2026-07 plan creation flow: one decision and one primary action per step. */
#planCreatorModal .plan-create-panel {
  width: min(100%, 760px);
  height: min(92dvh, 820px);
  max-height: min(92dvh, 820px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 16px 16px 0;
  overflow: hidden;
}

#planCreatorModal .plan-create-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0 0 12px;
}

#planCreatorModal .plan-create-header > div {
  min-width: 0;
}

#planCreatorModal .plan-create-header .eyebrow,
#planCreatorModal .plan-create-header h2 {
  margin: 0;
}

#planCreatorModal .plan-create-header .eyebrow {
  margin-bottom: 2px;
  font-size: 12px;
}

#planCreatorModal .plan-create-header h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#planCreatorModal .plan-create-back {
  font-size: 28px;
  line-height: 1;
}

#planCreatorModal .plan-create-steps {
  grid-template-columns: repeat(var(--plan-step-count, 3), minmax(0, 1fr));
  margin-bottom: 10px;
}

#planCreatorModal .plan-create-steps[hidden],
#planCreatorModal .plan-flow-step[hidden],
#planCreatorModal .plan-create-footer[hidden],
#planCreatorModal .plan-input-switcher[hidden],
#planCreatorModal #planTextSourcePanel[hidden],
#planCreatorModal #planFileSourcePanel[hidden],
#planCreatorModal .plan-ai-progress[hidden] {
  display: none !important;
}

#planCreatorModal .plan-create-body {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 2px 2px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: 24px;
}

#planCreatorModal .plan-flow-step {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

#planCreatorModal .plan-flow-intro {
  display: grid;
  gap: 4px;
  padding: 4px 2px;
}

#planCreatorModal .plan-flow-intro strong {
  color: var(--text-primary);
  font-size: 18px;
}

#planCreatorModal .plan-flow-intro span {
  color: var(--text-secondary);
  font-size: 14px;
}

#planCreatorModal .plan-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#planCreatorModal .plan-method-grid button,
#planCreatorModal .manual-purpose-list button {
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--card-bg);
  color: var(--text-primary);
  text-align: left;
  box-shadow: none;
}

#planCreatorModal .plan-method-grid button {
  min-height: 112px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-content: center;
  padding: 14px;
}

#planCreatorModal .plan-method-grid button > span,
#planCreatorModal .manual-purpose-list button > span,
#planCreatorModal .manual-task-heading > span,
#planCreatorModal .plan-reminder-card > div:first-child > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 850;
}

#planCreatorModal .plan-method-grid strong,
#planCreatorModal .manual-purpose-list strong {
  align-self: end;
  font-size: 15px;
}

#planCreatorModal .plan-method-grid small,
#planCreatorModal .manual-purpose-list small,
#planCreatorModal .manual-task-heading small,
#planCreatorModal .plan-reminder-card small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 550;
}

#planCreatorModal .plan-input-mode-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--brand-soft);
}

#planCreatorModal .plan-input-mode-card > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--brand);
  font-weight: 850;
}

#planCreatorModal .plan-input-mode-card > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#planCreatorModal .plan-input-mode-card small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

#planCreatorModal .text-button {
  width: auto;
  min-height: 40px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 13px;
  font-weight: 750;
}

#planCreatorModal .plan-input-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--page-bg);
}

#planCreatorModal .plan-input-switcher button {
  min-height: 42px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--brand);
}

#planCreatorModal .plan-text-source-panel textarea {
  min-height: 210px;
  resize: vertical;
}

#planCreatorModal .plan-file-source-panel {
  display: grid;
  gap: 10px;
}

#planCreatorModal .plan-photo-preview {
  width: 100%;
  min-height: 176px;
  max-height: 240px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  border: 1px dashed var(--border-color);
  border-radius: 16px;
  background: var(--page-bg);
  overflow-x: auto;
}

#planCreatorModal .plan-credit-line {
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--page-bg);
  color: var(--text-secondary);
  font-size: 13px;
}

#planCreatorModal .plan-credit-line strong {
  color: var(--brand);
  white-space: nowrap;
}

#planCreatorModal .plan-ai-progress {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--brand-soft);
}

#planCreatorModal .plan-ai-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--brand-strong);
  font-size: 13px;
}

#planCreatorModal .plan-ai-progress progress {
  width: 100%;
  height: 8px;
  accent-color: var(--brand);
}

#planCreatorModal .plan-review-overview,
#planCreatorModal .plan-start-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--card-bg);
}

#planCreatorModal .plan-ai-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--brand-soft);
}

#planCreatorModal .plan-review-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#planCreatorModal .plan-review-counts span {
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 13px;
}

#planCreatorModal .plan-review-warning {
  color: var(--warning, #8a4b08);
  font-size: 13px;
  line-height: 1.5;
}

#planCreatorModal .plan-confirm-panel {
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

#planCreatorModal .plan-confirm-head {
  padding: 4px 2px;
}

#planCreatorModal .plan-confirm-head strong {
  font-size: 18px;
}

#planCreatorModal .plan-confirm-head span {
  font-size: 13px;
  font-weight: 550;
}

#planCreatorModal .plan-review-item {
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
}

#planCreatorModal .plan-review-item.needs-attention {
  border-color: rgba(181, 108, 25, 0.5);
  background: #fffaf1;
}

#planCreatorModal .review-item-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

#planCreatorModal .review-item-heading > div {
  min-width: 0;
}

#planCreatorModal .review-item-heading p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#planCreatorModal .review-item-heading > span {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

#planCreatorModal .needs-attention .review-item-heading > span {
  background: #fff0d8;
  color: #8a4b08;
}

#planCreatorModal .review-edit-fields {
  border-top: 1px solid var(--border-color);
}

#planCreatorModal .review-edit-fields > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--brand);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

#planCreatorModal .review-edit-body {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

#planCreatorModal .review-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

#planCreatorModal .attention-confirm {
  font-size: 15px;
}

#planCreatorModal .plan-start-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#planCreatorModal .plan-start-summary > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#planCreatorModal .plan-start-summary span {
  color: var(--text-secondary);
  font-size: 12px;
}

#planCreatorModal .plan-start-summary strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

#planCreatorModal .plan-reminder-fields,
#planCreatorModal .manual-task-fields {
  display: grid;
  gap: 10px;
}

#planCreatorModal .plan-reminder-heading {
  display: grid;
  gap: 4px;
}

#planCreatorModal .plan-reminder-heading span {
  color: var(--text-secondary);
  font-size: 13px;
}

#planCreatorModal .plan-reminder-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

#planCreatorModal .plan-reminder-card > div:first-child,
#planCreatorModal .manual-task-heading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

#planCreatorModal .plan-reminder-card p,
#planCreatorModal .manual-task-heading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  margin: 0;
}

#planCreatorModal .plan-reminder-card fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

#planCreatorModal .plan-reminder-card legend {
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

#planCreatorModal .reminder-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#planCreatorModal .reminder-time-grid label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}

#planCreatorModal .reminder-time-grid input,
#planCreatorModal .reminder-time-grid select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
}

#planCreatorModal .manual-purpose-list {
  display: grid;
  gap: 8px;
}

#planCreatorModal .manual-purpose-list button {
  min-height: 68px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-content: center;
  padding: 10px 12px;
}

#planCreatorModal .manual-task-heading {
  padding: 4px 2px 8px;
}

#planCreatorModal .manual-advanced-schedule {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--page-bg);
}

#planCreatorModal .manual-advanced-schedule > summary {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  color: var(--brand);
  font-weight: 780;
  cursor: pointer;
}

#planCreatorModal .manual-advanced-schedule > summary small,
#planCreatorModal .manual-advanced-body .field-help {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 550;
}

#planCreatorModal .manual-advanced-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

#planCreatorModal .manual-advanced-body .field-help {
  margin: 0;
}

#planCreatorModal .manual-time-fieldset,
#planCreatorModal .manual-weekday-fieldset {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

#planCreatorModal .manual-time-fieldset legend,
#planCreatorModal .manual-weekday-fieldset legend {
  padding: 0 5px;
  color: var(--text-secondary);
  font-size: 13px;
}

#planCreatorModal .manual-custom-time-grid,
#planCreatorModal .manual-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#planCreatorModal .manual-custom-time-grid label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

#planCreatorModal .manual-custom-time-grid input {
  width: 100%;
  min-width: 0;
}

#planCreatorModal .manual-weekday-fieldset > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

#planCreatorModal .manual-weekday-fieldset label {
  min-height: 42px;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  font-size: 13px;
}

#planCreatorModal .manual-advanced-schedule [hidden] {
  display: none !important;
}

#planCreatorModal .plan-creation-status {
  margin: 0;
  padding: 8px 2px 0;
  color: var(--danger);
  font-size: 13px;
}

#planCreatorModal .plan-create-footer {
  margin: 0 -16px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8px 22px rgba(21, 54, 47, 0.06);
}

#planCreatorModal .plan-create-footer > span {
  min-height: 18px;
  display: block;
  margin-bottom: 6px;
  color: #9a5b16;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

#planCreatorModal .plan-create-footer > span.ok {
  color: var(--text-secondary);
}

#planCreatorModal .plan-create-footer .primary-button {
  min-height: 50px;
}

@media (max-width: 520px) {
  #planCreatorModal .plan-create-panel {
    height: 100dvh;
    max-height: 100dvh;
    padding-right: 12px;
    padding-left: 12px;
    border-radius: 0;
  }

  #planCreatorModal .plan-create-footer {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  #planCreatorModal .plan-method-grid {
    gap: 8px;
  }

  #planCreatorModal .plan-method-grid button {
    min-height: 102px;
    padding: 12px 10px;
  }

  #planCreatorModal .plan-review-overview .two-column,
  #planCreatorModal .review-edit-body .two-column {
    grid-template-columns: minmax(0, 1fr);
  }

  #planCreatorModal .plan-start-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #planCreatorModal .manual-date-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  #planCreatorModal .plan-method-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #planCreatorModal .plan-method-grid button {
    min-height: 76px;
  }

  #planCreatorModal .plan-input-mode-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  #planCreatorModal .plan-input-mode-card .text-button {
    grid-column: 1 / -1;
    justify-self: end;
  }

  #planCreatorModal .reminder-time-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #planCreatorModal .manual-custom-time-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #planCreatorModal .plan-create-panel {
    width: min(calc(100% - 12px), 920px);
    height: calc(100vh - 8px);
    height: calc(100dvh - 8px);
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - 8px);
    padding: 8px 12px 0;
    border-radius: 18px 18px 0 0;
  }

  #planCreatorModal .plan-create-header {
    gap: 8px;
    margin-bottom: 6px;
  }

  #planCreatorModal .plan-create-header .eyebrow {
    display: none;
  }

  #planCreatorModal .plan-create-header h2 {
    font-size: 21px;
  }

  #planCreatorModal .plan-create-back,
  #planCreatorModal [data-action="close-plan-creator"] {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
  }

  #planCreatorModal .plan-create-steps {
    margin-bottom: 6px;
    font-size: 12px;
  }

  #planCreatorModal .plan-create-body {
    gap: 8px;
    padding-bottom: 8px;
  }

  #planCreatorModal .plan-create-footer {
    margin-right: -12px;
    margin-left: -12px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  }

  #planCreatorModal .plan-create-footer > span {
    min-height: 0;
    margin-bottom: 3px;
    font-size: 11px;
  }

  #planCreatorModal .plan-create-footer .primary-button {
    min-height: 44px;
  }
}

/* New-versus-previous instruction review. */
.plan-change-card {
  margin-top: 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--page-bg);
  overflow: hidden;
}

.plan-change-card > summary {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.plan-change-card > summary::-webkit-details-marker {
  display: none;
}

.plan-change-card > summary span {
  display: grid;
  gap: 3px;
}

.plan-change-card > summary small,
.plan-change-card > summary b,
.plan-change-card > p,
.plan-change-disclaimer,
.symptom-association-section > p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.plan-change-card > summary b {
  color: var(--brand);
}

.plan-change-card > p,
.plan-change-disclaimer {
  margin: 0;
  padding: 0 15px 14px;
}

.plan-change-card > ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 15px 12px;
  list-style: none;
}

.plan-change-card > ul li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border-radius: 11px;
  background: #fff;
}

.plan-change-card > ul li > b {
  height: fit-content;
  padding: 3px 6px;
  border-radius: 7px;
  color: #fff;
  background: var(--brand);
  font-size: 11px;
}

.plan-change-card > ul li.removed > b {
  background: #7f4e00;
}

.plan-change-card > ul li.changed > b {
  background: #365f8f;
}

.plan-change-card > ul li span {
  display: grid;
  gap: 3px;
}

.plan-change-card > ul li small {
  color: var(--text-secondary);
  line-height: 1.5;
}

.course-review-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.symptom-association-section > p {
  margin: 8px 0 0;
}

html[data-accessibility-mode="senior"] :is(.plan-change-card > summary small, .plan-change-card > summary b, .plan-change-card > p, .plan-change-disclaimer, .symptom-association-section > p) {
  font-size: 15px;
}

@media (max-width: 390px) {
  .course-review-actions {
    grid-template-columns: 1fr;
  }
}

/* 2026-08 mobile flow polish: keep the next useful action in the first viewport. */
@media (max-width: 600px) {
  .app-shell {
    padding-right: 12px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
    padding-left: 12px;
  }

  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 0 12px;
  }

  .app-header .eyebrow,
  .app-header #saveStatus {
    display: none;
  }

  .app-header h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
  }

  .course-range {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    width: auto;
    display: flex;
    grid-template-columns: none;
    flex-flow: row nowrap;
    gap: 6px;
  }

  .update-button,
  .profile-chip {
    width: auto;
    min-height: 40px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .home-hero-card {
    gap: 10px;
    margin: 0 0 12px;
    padding: 15px;
    border-radius: 18px;
  }

  .home-course-meta {
    flex-wrap: nowrap;
    gap: 5px;
    overflow: hidden;
  }

  .home-course-meta span {
    min-width: 0;
    padding: 3px 7px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-hero-main p {
    font-size: 13px;
  }

  .home-hero-main h2 {
    margin-top: 3px;
    font-size: 25px;
  }

  .home-hero-main span {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.35;
  }

  .home-hero-main em {
    margin-top: 4px;
    font-size: 13px;
  }

  .home-hero-main small {
    display: none;
  }

  .home-hero-actions {
    gap: 7px;
  }

  .home-hero-actions .hero-primary,
  .home-hero-actions .hero-secondary,
  .home-hero-actions .hero-missed {
    min-height: 46px;
    padding: 8px 10px;
    font-size: 15px;
  }

  .home-alert-link {
    min-height: 42px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .demo-mode-banner {
    margin-bottom: 12px;
    padding: 12px 14px;
  }

  .demo-mode-banner p {
    margin-top: 3px;
    font-size: 13px;
  }

  .home-secondary-panel {
    margin-bottom: 18px;
    padding: 0 14px;
    border-radius: 16px;
  }

  .home-panel-block {
    padding: 12px 0;
  }

  .home-panel-label {
    margin-bottom: 7px;
    font-size: 13px;
  }

  .home-secondary-panel .home-quick-actions {
    gap: 7px;
  }

  .home-secondary-panel .quick-record-button {
    min-height: 64px;
    padding: 9px 10px;
  }

  .home-secondary-panel .quick-record-button strong {
    font-size: 15px;
  }

  .home-secondary-panel .quick-record-button span {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
  }

  .home-timeline-section .section-row {
    margin-bottom: 8px;
  }

  .course-hero {
    padding: 14px;
    border-radius: 18px;
  }

  .course-hero-top {
    align-items: start;
    gap: 9px;
  }

  .course-hero .eyebrow {
    font-size: 13px;
  }

  .course-hero h3 {
    margin-top: 3px;
    font-size: 25px;
  }

  .course-hero p {
    margin-top: 4px;
    font-size: 14px;
  }

  .course-score {
    width: 78px;
    min-height: 64px;
    padding: 7px;
  }

  .course-score strong {
    font-size: 24px;
  }

  .course-score span {
    font-size: 13px;
  }

  .medicine-progress {
    height: 8px;
    margin-top: 10px;
  }

  .course-flags {
    gap: 6px;
    margin-top: 9px;
  }

  .course-flags span {
    padding: 4px 7px;
    font-size: 13px;
  }

  .next-dose-card {
    gap: 9px;
    margin-top: 9px;
    padding: 14px;
    border-radius: 18px;
  }

  .next-dose-head {
    gap: 8px;
  }

  .next-dose-card h3 {
    font-size: 23px;
  }

  .next-dose-card p {
    font-size: 14px;
  }

  .status-pill {
    padding: 5px 8px;
    font-size: 13px;
  }

  .dose-total {
    padding: 9px 10px;
    font-size: 18px;
  }

  .next-dose-card .med-list {
    gap: 4px;
    padding: 6px;
  }

  .next-dose-card .med-line {
    padding: 6px 8px;
    font-size: 16px;
  }

  .next-dose-actions {
    gap: 7px;
  }

  .next-dose-actions .ghost-button:last-child {
    grid-column: auto;
  }

  .next-dose-actions button,
  .xl-action {
    min-height: 48px;
    padding: 8px 10px;
    font-size: 16px;
  }

  .medicine-insight-card,
  .timeline-group {
    padding: 14px;
    border-radius: 18px;
  }

  .toast {
    bottom: calc(76px + env(safe-area-inset-bottom));
    min-height: 46px;
    padding: 10px 13px;
    font-size: 14px;
  }
}

/* Multi-page medical document capture and on-device quality review. */
#planCreatorModal .plan-photo-preview {
  align-items: stretch;
  min-height: 210px;
  max-height: 286px;
  gap: 12px;
}

#planCreatorModal .plan-source-file {
  position: relative;
  width: 154px;
  min-width: 154px;
  height: auto;
  min-height: 188px;
  display: grid;
  grid-template-rows: auto 92px minmax(42px, auto) auto;
  place-items: stretch;
  border: 2px solid var(--border-color);
  border-radius: 16px;
  background: var(--card-bg);
  overflow: hidden;
}

#planCreatorModal .plan-source-file.quality-good {
  border-color: #77aa98;
}

#planCreatorModal .plan-source-file.needs-retake {
  border-color: #d79a36;
  background: #fffaf0;
}

.plan-source-order {
  padding: 6px 9px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

#planCreatorModal .plan-source-file .plan-source-visual {
  width: 100%;
  height: 92px;
  border-radius: 0;
  object-fit: cover;
}

#planCreatorModal .plan-source-file b.plan-source-visual {
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--brand-soft);
}

.plan-source-meta {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
}

#planCreatorModal .plan-source-file .plan-source-meta em {
  padding: 0;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.plan-source-meta small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.needs-retake .plan-source-meta small {
  color: #8a5000;
  font-weight: 700;
}

.plan-source-actions {
  display: grid;
  grid-template-columns: 36px 36px 1fr;
  gap: 4px;
  padding: 0 7px 7px;
}

.plan-source-actions button {
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  color: var(--brand);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.plan-source-actions button:last-child {
  color: var(--danger);
}

.plan-source-actions button:disabled {
  opacity: 0.35;
}

html[data-accessibility-mode="senior"] .plan-source-actions button {
  min-height: 44px;
  font-size: 15px;
}

/* Reminder diagnostics and medication inventory. */
.reminder-reliability-center {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--card-bg);
}

.reminder-reliability-title-row,
.reminder-reliability-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reminder-reliability-title-row h2,
.reminder-reliability-title-row p,
.reminder-reliability-status p,
.reminder-safety-note {
  margin: 0;
}

.reminder-reliability-title-row h2 {
  font-size: 20px;
}

.reminder-reliability-status {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e4df;
  border-radius: 16px;
  background: var(--page-bg);
}

.reminder-reliability-status.attention {
  border-color: #dfb567;
  background: #fffaf0;
}

.reminder-reliability-heading {
  justify-content: flex-start;
}

.reminder-reliability-heading > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-size: 20px;
  font-weight: 900;
}

.reminder-reliability-status.attention .reminder-reliability-heading > span {
  background: #a15c00;
}

.reminder-reliability-heading div {
  display: grid;
  gap: 2px;
}

.reminder-reliability-heading small,
.reminder-reliability-status p,
.reminder-safety-note {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.reminder-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.reminder-health-grid > span {
  display: grid;
  gap: 2px;
  padding: 8px 5px;
  border-radius: 10px;
  text-align: center;
  background: #edf6f1;
}

.reminder-health-grid > span.warn {
  color: #7e4700;
  background: #fff0d5;
}

.reminder-health-grid b {
  font-size: 12px;
}

.reminder-health-grid small {
  font-size: 10px;
}

.reminder-reliability-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.reminder-reliability-actions .primary-button {
  grid-column: 1 / -1;
}

.medicine-inventory-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--page-bg);
}

.medicine-low-stock .medicine-inventory-panel {
  border-color: #d99c37;
  background: #fffaf0;
}

.medicine-inventory-status {
  display: grid;
  gap: 2px;
}

.medicine-inventory-status.warn strong {
  color: #8a5000;
}

.medicine-inventory-status.ok strong {
  color: var(--brand);
}

.medicine-inventory-status small,
.medicine-inventory-panel > p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.medicine-inventory-panel > p {
  margin: 0;
}

.medicine-inventory-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.medicine-inventory-fields label {
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

.medicine-inventory-fields :is(input, select) {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
}

.medicine-inventory-fields button {
  grid-column: 1 / -1;
}

html[data-accessibility-mode="senior"] :is(.reminder-health-grid b, .medicine-inventory-status small, .medicine-inventory-panel > p, .medicine-inventory-fields label) {
  font-size: 15px;
}

@media (max-width: 360px) {
  .reminder-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}