:root {
  --bg: #f5f7f5;
  --surface: #ffffff;
  --ink: #182622;
  --muted: #5f706b;
  --line: #d7dfdb;
  --line-strong: #bccbc5;
  --teal: #167466;
  --teal-soft: #e8f2ef;
  --blue: #2e6f9e;
  --blue-soft: #e9f1f7;
  --amber: #a66a18;
  --amber-soft: #fbf1df;
  --red: #b84d4a;
  --red-soft: #faeae9;
  --green: #287753;
  --shadow: 0 10px 28px rgba(26, 48, 41, .07);
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
button, input, select, textarea { letter-spacing: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid rgba(46, 111, 158, .32);
  outline-offset: 3px;
}
input, select, textarea {
  min-height: 44px;
  border-color: var(--line-strong);
  border-radius: 6px;
  padding: 10px 12px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(22, 116, 102, .12);
}
label span { color: #465953; font-size: var(--text-13, 13px); }

.primary-button, .secondary-button, .danger-button, .header-action, .small-button {
  min-height: 44px;
  border-radius: 6px;
}
.primary-button { border-color: #12695d; background: #12695d; }
.primary-button:hover { background: #0d594f; }
.secondary-button { color: #135f55; border-color: #b5cbc4; background: #fff; }
.secondary-button:hover { background: #edf5f2; border-color: #8eb3a8; }
.small-button { padding: 8px 13px; color: #135f55; border-color: #a8c7be; }
.text-button { min-height: 40px; padding: 8px 2px; color: #12695d; }
.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-color: var(--line-strong);
  border-radius: 6px;
  color: #30443e;
}
.icon-button img, .header-action img, .nav-icon img, .mobile-nav-button img { display: block; }
.nav-icon img, .mobile-nav-button img, .header-action img, #refreshButton img { color: currentColor; }

.login-view {
  position: relative;
  place-items: center;
  padding: 40px 20px;
  background: #edf3f0;
}
.login-view::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: 10px;
  background: #155f54;
}
.login-panel {
  position: relative;
  width: min(470px, calc(100vw - 32px));
  padding: 38px 42px 34px;
  border-color: #cedad5;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(25, 55, 45, .12);
}
.login-brand { margin-bottom: 22px; }
.login-brand .brand-mark { width: 58px; height: 58px; }
.brand-lockup strong { color: #153e36; font-size: 23px; }
.brand-lockup span:not(.brand-mark span) { font-size: 14px; }
.login-panel .eyebrow { margin-top: 0; color: #2e6f9e; }
.login-panel h1 { font-size: 28px; line-height: 1.3; }
.login-copy { margin: 8px 0 22px; color: var(--muted); }
.login-links { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 10px; }
.login-intro-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  color: #2e6f9e;
  font-weight: 700;
  text-decoration: none;
}

.sidebar {
  width: 248px;
  padding: 22px 18px;
  border-color: #ccd7d2;
  background: #fbfcfb;
}
.brand-block { padding: 2px 8px 24px; border-bottom: 1px solid var(--line); }
.brand-block strong { color: #153e36; }
.main-nav { gap: 4px; margin-top: 18px; }
.nav-button {
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 6px;
  color: #4d615a;
}
.nav-button:hover { background: #eef3f1; }
.nav-button.is-active {
  color: #104f46;
  background: #e3efeb;
  box-shadow: inset 3px 0 #167466;
}
.nav-icon { display: grid; place-items: center; color: currentColor; }
.nav-icon img, .mobile-nav-button img { filter: none; }
.sidebar-footer { border-color: var(--line); }
.avatar { border-radius: 6px; color: #225f84; background: var(--blue-soft); }

.main-content {
  margin-left: 248px;
  padding: 26px clamp(28px, 4vw, 64px) 60px;
}
.main-content > .topbar, .main-content > .view-section, .main-content > .secondary-back {
  width: min(100%, 1320px);
  margin-inline: auto;
}
.topbar { margin-bottom: 24px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.topbar .eyebrow { color: #2e6f9e; font-size: 12px; letter-spacing: 0; }
.topbar h1 { font-size: 28px; line-height: 1.3; }
.topbar-actions { gap: 8px; }
.observer-pill {
  min-height: 34px;
  border: 1px solid #a8c8bf;
  border-radius: 6px;
  color: #104f46;
  background: #edf5f2;
}
.status-pill { border-radius: 6px; }
.sync-status { min-width: 70px; text-align: right; }
.header-action { border-color: #b6c9c2; color: #254d45; }
.header-action img { color: #167466; }
.home-tools .plus-button { border-color: #12695d; border-radius: 6px; background: #12695d; }

.view-section > .content-section,
#familyContent > .content-section,
.family-tools-grid > .content-section,
.family-insights-columns > .content-section,
.device-layout > .content-section {
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.section-heading { gap: 18px; }
.section-heading > div > span { color: #52716a; font-size: 12px; font-weight: 800; }
.section-heading h2 { color: #1b322c; font-size: 20px; line-height: 1.35; }
.count-label { color: #51645e; font-variant-numeric: tabular-nums; }
.empty-state, .family-empty-note, .welcoming-empty {
  color: var(--muted);
  background: #f0f3f1;
  border: 1px dashed #b9c7c1;
  border-radius: 6px;
}

.home-reminder-entry {
  margin: 18px 0 4px;
  padding: 14px 18px;
  border-color: #b7d2ca;
  background: #edf5f2;
}
.dashboard-motto {
  margin: 12px 0 18px;
  border: 1px solid #d5ddd9;
  border-left: 3px solid #a66a18;
  border-radius: 0;
  background: #fbfaf5;
}
.dashboard-overview {
  border: 1px solid #cbdad5;
  border-left: 4px solid #167466;
  border-radius: 0;
  background: #eef4f1;
}
.score-block.dual-score-block { border-color: #cbdad5; }
.score-ring { box-shadow: inset 0 0 0 7px #e0e7e3; }
.overview-summary > strong { color: #203d35; }
.metric-grid { gap: 12px; margin-block: 18px 4px; }
.metric-card {
  min-height: 142px;
  border-color: #d1dad6;
  border-top-width: 3px;
  border-radius: 6px;
  box-shadow: 0 5px 16px rgba(25, 55, 45, .045);
}
.metric-card.metric-heart { border-top-color: #b34d58; }
.metric-card.metric-pressure { border-top-color: #2e6f9e; }
.metric-card.metric-oxygen { border-top-color: #547b75; }
.metric-card.metric-temperature { border-top-color: #a66a18; }
.metric-value strong { color: #172c26; }
.metric-card p { color: #60716b; font-size: 13px; }
.advice-panel { margin-top: 10px; }
.advice-sections-inline { border-color: var(--line); background: #fff; }
.dashboard-columns { gap: 28px; }
.chart-wrap { border: 1px solid #d7dfdb; border-radius: 6px; background: #fff; }

.monitor-toolbar {
  justify-content: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.segmented {
  gap: 2px;
  padding: 3px;
  border: 1px solid #c3d0cb;
  border-radius: 6px;
  background: #e9eeeb;
}
.segment {
  min-height: 40px;
  border-radius: 4px;
  color: #4b5e58;
  background: transparent;
}
.segment.is-active {
  color: #104f46;
  background: #fff;
  box-shadow: 0 1px 4px rgba(24, 47, 39, .1);
}
#periodSelect { width: auto; min-width: 150px; }
.monitor-chart-section { padding-top: 12px !important; }
.monitor-analysis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 294px;
  gap: 22px;
  align-items: stretch;
  margin-top: 18px;
}
.monitor-analysis-layout .chart-wrap { margin: 0; }
.monitor-summary {
  min-width: 0;
  padding: 18px;
  border: 1px solid #cfd9d5;
  border-radius: 6px;
  background: #fbfcfb;
}
.monitor-summary-heading > span { color: #2e6f9e; font-size: 12px; font-weight: 800; }
.monitor-summary-heading h3 { margin: 3px 0 14px; font-size: 17px; line-height: 1.4; }
.monitor-summary-values { margin: 0; }
.monitor-summary-values > div { padding: 11px 0; border-top: 1px solid var(--line); }
.monitor-summary-values dt { color: var(--muted); font-size: 12px; }
.monitor-summary-values dd { margin: 3px 0 0; color: #1b3831; font-size: 16px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.monitor-summary-counts { margin: 14px 0 4px; color: #2d5148; font-size: 13px; font-weight: 700; }
.monitor-summary-semantics { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.monitor-latest { padding-left: 18px; border-left: 1px solid var(--line); }
.latest-number { font-variant-numeric: tabular-nums; }
.table-scroll { border: 1px solid #d6dedb; border-radius: 6px; background: #fff; }
table { border-collapse: collapse; }
th { background: #edf2f0; color: #425851; }
th, td { padding: 13px 14px; border-bottom-color: #e0e6e3; }

.group-toolbar {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #cfd9d5;
  border-radius: 6px;
  background: #eef3f1;
}
.group-toolbar label { min-width: min(100%, 320px); }
.family-tools-grid { gap: 30px; }
.family-tools-grid > .content-section { padding-top: 10px; }
.family-task-item, .family-message-item { border-color: var(--line); }
.family-insights-columns .family-empty-note,
#familyReminderList .family-empty-note {
  min-height: 92px;
  display: grid;
  place-items: center;
  margin: 10px 0 0;
  padding: 18px;
  text-align: center;
  border: 1px dashed #b9c7c1;
  border-radius: 6px;
  background: #f1f4f2;
}
.family-message-form textarea { background: #fff; }
.family-reminders-section { border-color: var(--line); }
.reminder-plan { border-color: #ced9d4; border-radius: 6px; background: #fbfcfb; }
.reminder-time-tags strong { color: #104f46; background: #e6f0ec; }

.device-layout { gap: 34px; }
.device-visual { background: #eef2f0 !important; }
.smart-ring-device { padding-block: 18px; }
.device-details { align-self: stretch; }
.definition-list div { border-color: var(--line); }

.personal-menu { gap: 0 28px; }
.personal-menu button { min-height: 82px; padding: 16px 8px; }
.personal-menu button:hover { background: #edf3f0; }
.personal-menu button > span:last-child { color: #2e6f9e; }
.personal-subpage > .content-section { padding-top: 4px; }
.personal-detail-form { margin-top: 14px; }
.personal-setting, .contact-summary, .personal-faq details, .feedback-record { border-color: var(--line); }

#reminders > .content-section { border-color: var(--line); }
.reminder-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #d0dad6;
  border-radius: 6px;
  background: #f0f4f2;
}
.reminder-read-filter { flex: 0 0 auto; }
.reminder-kind-filter { width: min(210px, 100%); }
.reminder-kind-filter span { margin-bottom: 4px; }
.reminder-kind-filter select { background: #fff; }
#reminderFilterCount { margin-left: auto; padding-bottom: 10px; }
#reminderFilterScope { margin: 8px 0 0; }
.reminder-notice { min-height: 92px; }
.reminder-notice-meta > span:first-child { color: #2e6f9e; font-weight: 750; }
.reminder-filter-empty { margin-top: 14px; }
.reminder-delivery-options > div + div { border-color: var(--line); }

dialog, .family-dialog, .simulate-dialog {
  border-color: #bfcac5;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(18, 39, 32, .24);
}
dialog::backdrop, .family-dialog::backdrop, .simulate-dialog::backdrop { background: rgba(18, 35, 30, .56); }
.simulate-dialog-header { border-color: var(--line); background: #fbfcfb; }
.simulate-dialog-header h2 { color: #1b332c; }
.simulate-dialog-copy { color: #53645f; background: #f0f4f2; }
.reminder-times-fieldset, .reminder-recurrence-fieldset { border-color: #c9d4cf; }

.mobile-nav {
  border-color: #c8d2ce;
  box-shadow: 0 -6px 20px rgba(24, 47, 39, .08);
}
.mobile-nav-button { min-height: 66px; color: #5d6d68; }
.mobile-nav-button.is-active { color: #125e53; background: #eef5f2; }
.mobile-nav-button span { color: currentColor; }
.mobile-nav-button[data-view="family"] { color: #5d6d68; font-weight: 400; }
.mobile-nav-button[data-view="family"] span {
  width: auto;
  height: 24px;
  margin: 0;
  display: flex;
  background: transparent;
  box-shadow: none;
}
.mobile-nav-button[data-view="family"].is-active { color: #125e53; font-weight: 700; }

@media (max-width: 1100px) {
  .monitor-analysis-layout { grid-template-columns: minmax(0, 1fr); }
  .monitor-summary-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .monitor-summary-values > div { border-top: 0; }
  .monitor-summary-values > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .login-view { padding: 18px 12px; }
  .login-view::before { width: 8px; }
  .login-panel { padding: 30px 24px 26px; }
  .main-content { margin-left: 0; padding: 14px 14px calc(92px + env(safe-area-inset-bottom)); }
  .topbar { gap: 12px; margin-bottom: 18px; padding-bottom: 14px; }
  .mobile-brand { padding-bottom: 10px; }
  .mobile-brand span { font-size: 12px; }
  .topbar h1 { font-size: 22px; }
  .health-context-bar { gap: 8px 10px; padding: 8px 0 14px; margin-bottom: 12px; }
  .health-context-bar label { gap: 4px; }
  .health-context-bar label span { font-size: 12px; }
  .health-context-bar p { font-size: 12px; }
  .topbar-actions { justify-content: flex-start; }
  .sync-status { margin-left: 0; text-align: left; }
  #seniorModeButton { margin-left: auto; }
  .observer-pill { max-width: 100%; }
  .dashboard-overview { border-left-width: 3px; }
  .score-block.dual-score-block { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dual-score-block .score-ring { width: 78px; height: 78px; }
  .metric-grid { gap: 10px; }
  .metric-card { min-height: 136px; }
  .section-heading { align-items: flex-start; }
  .monitor-toolbar { align-items: stretch; }
  #periodSelect { width: 100%; }
  .monitor-latest { width: 100%; align-items: flex-start; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
  .monitor-summary { padding: 14px; }
  .monitor-summary-values { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .monitor-summary-values > div { border-top: 1px solid var(--line); }
  .monitor-summary-values > div + div { padding-left: 0; border-left: 0; }
  .family-tools-grid, .family-insights-columns { gap: 8px; }
  .device-layout { gap: 8px; }
  .device-visual { min-height: 300px; }
  .personal-menu { grid-template-columns: minmax(0, 1fr); }
  .reminder-filter-bar { align-items: stretch; }
  .reminder-read-filter { width: 100%; }
  .reminder-read-filter .segment { flex: 1; }
  .reminder-kind-filter { width: 100%; }
  #reminderFilterCount { width: 100%; margin-left: 0; padding-bottom: 0; }
  .reminder-notice { padding: 16px 0; }
  .mobile-nav { min-height: 70px; background: #fff; }
  .mobile-nav-button { padding: 8px 0; font-size: 12px; }
  body[data-current-view="monitor"] .main-content { padding-top: 8px; }
  body[data-current-view="monitor"] .topbar { gap: 6px 10px; margin-bottom: 6px; padding-bottom: 8px; }
  body[data-current-view="monitor"] .mobile-brand { padding-bottom: 4px; }
  body[data-current-view="monitor"] .topbar .eyebrow { display: none; }
  body[data-current-view="monitor"] .topbar h1 { font-size: 20px; }
  body[data-current-view="monitor"] .topbar-actions { gap: 5px; }
  body[data-current-view="monitor"] .observer-pill { flex: 1 1 auto; max-width: calc(100% - 92px); min-height: 34px; overflow: hidden; text-overflow: ellipsis; }
  body[data-current-view="monitor"] .status-pill { min-height: 34px; padding-block: 5px; font-size: 12px; }
  body[data-current-view="monitor"] .sync-status { font-size: 11px; }
  body[data-current-view="monitor"] #manualEntryButton { width: 44px; flex: 0 0 44px; justify-content: center; padding-inline: 0; }
  body[data-current-view="monitor"] #manualEntryButton span { display: none; }
  body[data-current-view="monitor"] .health-context-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; padding: 4px 0 8px; margin-bottom: 7px; }
  body[data-current-view="monitor"] .health-context-bar label { min-width: 0; }
  body[data-current-view="monitor"] .health-context-bar label span { margin-bottom: 0; line-height: 1.25; }
  body[data-current-view="monitor"] .health-context-bar select { min-height: 44px; padding-block: 7px; }
  body[data-current-view="monitor"] .health-context-bar p { grid-column: 1 / -1; min-width: 0; margin: 0; line-height: 1.4; }
  body[data-current-view="monitor"] .monitor-toolbar { gap: 7px; margin-bottom: 5px; padding-bottom: 8px; }
  body[data-current-view="monitor"] .monitor-toolbar .segmented { width: 100%; overflow: visible; }
  body[data-current-view="monitor"] .monitor-toolbar .segment { min-width: 0; min-height: 44px; flex: 1 1 25%; padding: 6px 4px; font-size: 14px; }
  body[data-current-view="monitor"] #periodSelect { min-height: 44px; }
  body[data-current-view="monitor"] .monitor-chart-section { padding-top: 5px !important; }
  body[data-current-view="monitor"] .monitor-chart-section > .section-heading { flex-wrap: nowrap; align-items: center; gap: 10px; min-height: 0; margin-bottom: 7px; }
  body[data-current-view="monitor"] .monitor-chart-section > .section-heading h2 { font-size: 18px; }
  body[data-current-view="monitor"] .monitor-range-note { margin-block: 2px 0; font-size: 11px; line-height: 1.35; }
  body[data-current-view="monitor"] .monitor-latest { width: auto; flex: 0 0 auto; align-items: flex-end; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid var(--line); text-align: right; }
  body[data-current-view="monitor"] .monitor-latest small { font-size: 11px; }
  body[data-current-view="monitor"] .monitor-latest strong { font-size: 22px; }
  body[data-current-view="monitor"] .monitor-analysis-layout { gap: 10px; margin-top: 6px; }
  body[data-current-view="monitor"] .chart-wrap.large { min-height: 230px; }
}

@media (max-width: 390px) {
  .login-panel { padding-inline: 20px; }
  .main-content { padding-inline: 12px; }
  .topbar-actions { gap: 6px; }
  .header-action { flex: 1 1 132px; justify-content: center; }
  .observer-pill { flex: 1 1 100%; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-value strong { font-size: 26px; }
  .segmented { width: 100%; }
  .segment { min-width: 0; flex: 1 1 40%; padding-inline: 8px; }
  .date-range { grid-template-columns: minmax(0, 1fr); }
  .reminder-read-filter .segment { flex-basis: 0; }
}

body.senior-mode .monitor-summary-values dd { font-size: 20px; }
body.senior-mode .monitor-summary-semantics,
body.senior-mode .monitor-summary-counts,
body.senior-mode #reminderFilterScope { font-size: 16px; }
body.comfortable-mode .monitor-summary-values dd { font-size: 18px; }