/* ==========================================================================
   SENTINI HOSPITALS — Patient App
   Cent Percent Care · multi-speciality remote monitoring prototype
   1. Design tokens   2. Base   3. Device frame   4. App shell
   5. Navigation      6. Buttons 7. Forms
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand — derived from the Sentini Hospitals logo */
  --navy:        #1F3B78;
  --navy-dark:   #162C5C;
  --navy-deep:   #0E1E42;
  --navy-600:    #2B4E96;
  --navy-300:    #7FA0D8;
  --navy-100:    #DCE5F5;
  --navy-50:     #F0F4FC;

  --accent:      #ED1745;
  --accent-dark: #CE0E38;
  --accent-50:   #FEF0F3;
  --accent-100:  #FBD8E0;

  /* Semantic aliases required by the spec */
  --primary:       var(--navy);
  --primary-dark:  var(--navy-dark);
  --primary-light: var(--navy-100);

  --background: #F4F6FB;
  --surface:    #FFFFFF;
  --surface-2:  #FAFBFE;

  --text-primary:   #16233F;
  --text-secondary: #5F6B85;
  --text-tertiary:  #94A0B8;

  --border:      #E7EBF3;
  --border-dark: #DCE2EE;

  --success:    #15855A;
  --success-bg: #E8F6EF;
  --warning:    #B97309;
  --warning-bg: #FDF3E3;
  --danger:     var(--accent);
  --danger-bg:  var(--accent-50);

  /* Chart palette — clinical, never diagnostic */
  --c-heart: #ED1745;
  --c-sys:   #1F3B78;
  --c-dia:   #7FA0D8;
  --c-spo2:  #2E7FA8;
  --c-steps: #1F3B78;
  --c-sleep: #4C5FA8;
  --c-weight:#1F3B78;
  --c-band:  rgba(31, 59, 120, .07);

  /* Radius */
  --r-xs: 10px;  --r-sm: 13px;  --r: 16px;
  --r-md: 18px;  --r-lg: 22px;  --r-xl: 28px;  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(16,32,66,.04), 0 3px 12px rgba(16,32,66,.05);
  --sh-2: 0 2px 6px rgba(16,32,66,.06), 0 16px 32px -16px rgba(16,32,66,.20);
  --sh-3: 0 20px 48px -20px rgba(16,32,66,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 66px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: #E9EDF5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
b, strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid rgba(31,59,120,.38);
  outline-offset: 2px;
  border-radius: 6px;
}
.screen--dark :focus-visible { outline-color: rgba(255,255,255,.65); }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

[hidden] { display: none !important; }

.ic {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic--sm { width: 18px; height: 18px; stroke-width: 1.8; }
.ic--xs { width: 14px; height: 14px; stroke-width: 1.9; }

/* Utilities */
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.num { font-variant-numeric: tabular-nums; }

/* ---------- 3. Device frame (desktop preview) ---------- */
.stage {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 40px 24px;
  background:
    radial-gradient(900px 500px at 15% 0%, #F3F6FC 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, #EAEFF8 0%, transparent 55%),
    #E9EDF5;
}

.device {
  position: relative;
  width: 390px;
  height: 844px;
  flex: none;
  padding: 11px;
  border-radius: 56px;
  background: linear-gradient(160deg, #2A3242, #0C1220 45%, #1A2130);
  box-shadow: var(--sh-3), 0 0 0 2px rgba(255,255,255,.14) inset;
}
.device__hw { position: absolute; inset: 0; pointer-events: none; }
.device__btn { position: absolute; background: #222A3A; border-radius: 3px; }
.device__btn--silent { left: -3px; top: 132px; width: 3px; height: 30px; }
.device__btn--up     { left: -3px; top: 186px; width: 3px; height: 56px; }
.device__btn--down   { left: -3px; top: 254px; width: 3px; height: 56px; }
.device__btn--power  { right: -3px; top: 212px; width: 3px; height: 88px; }

/* ---------- 4. App shell ---------- */
.app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 46px;
  background: var(--background);
  isolation: isolate;
}

.statusbar {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px 0 30px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  position: relative;
  z-index: 40;
}
.statusbar__island {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 112px; height: 30px; border-radius: var(--r-pill); background: #0B1220;
}
.statusbar__icons { display: flex; align-items: center; gap: 6px; }
.statusbar__icons svg { fill: var(--text-primary); }
.sb-sig { width: 18px; height: 12px; }
.sb-wifi { width: 16px; height: 12px; }
.sb-bat { width: 26px; height: 12px; stroke: var(--text-primary); }
.sb-bat rect[fill="none"] { opacity: .4; }

.screens { position: relative; flex: 1; min-height: 0; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
  visibility: hidden;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.screen.is-active { visibility: visible; opacity: 1; transform: none; z-index: 2; }
.screen.is-leaving { transform: translateX(-10px); }
.screen--plain { background: var(--surface); }
.screen--dark { background: var(--navy-deep); }

.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 28px;
  scrollbar-width: thin;
  scrollbar-color: #C9D3E6 transparent;
}
.scroll::-webkit-scrollbar { width: 5px; }
.scroll::-webkit-scrollbar-thumb { background: #C9D3E6; border-radius: 99px; }
.scroll--nav { padding-bottom: 20px; }
.scroll--foot { padding-bottom: 12px; }

.screen__foot {
  flex: none;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: grid;
  gap: 8px;
}
.screen__foot--stack { gap: 8px; }

/* Action pair rendered inline inside a scrolling screen (keeps the tab bar). */
.inline-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 8px; }

/* ---------- 5. Navigation ---------- */
.appbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}
.appbar--flat { background: var(--surface); border-bottom: 0; }
.appbar--alert { background: var(--surface); box-shadow: inset 0 3px 0 var(--accent); }
.appbar__title {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  flex: 1; text-align: center; padding: 0 4px;
}
.appbar__title--lead { text-align: left; font-size: 24px; font-weight: 800; padding-left: 8px; }
.appbar__btn {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--text-primary); cursor: pointer;
  transition: background .18s var(--ease);
}
.appbar__btn:hover { background: var(--navy-50); }
.appbar__btn:active { background: var(--navy-100); }
.appbar__btn--text { width: auto; padding: 0 12px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--navy); }
.appbar__progress { flex: 1; display: flex; align-items: center; gap: 12px; padding-right: 8px; }
.appbar__step { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

.appbar > .appbar__title:first-child { text-align: left; padding-left: 8px; }
.appbar__spacer { width: 42px; flex: none; }

.tabbar {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 28px -22px rgba(16,32,66,.5);
  z-index: 30;
}
.tabbar[hidden] { display: none; }
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-tertiary); font-size: 10.5px; font-weight: 600;
  letter-spacing: .01em; cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
  min-height: 52px;
}
.tabbar__item .ic { width: 23px; height: 23px; stroke-width: 1.7; }
.tabbar__item:hover { color: var(--navy-600); }
.tabbar__item.is-active { color: var(--navy); }
.tabbar__item.is-active .ic { stroke-width: 2.1; }
.tabbar__item.is-active span { font-weight: 700; }

.fab {
  position: absolute;
  right: 18px; bottom: 18px;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--navy); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(31,59,120,.65);
  cursor: pointer; z-index: 20;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.fab:hover { background: var(--navy-600); }
.fab:active { transform: scale(.94); }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 15px; font-weight: 650; letter-spacing: -.005em;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 13.5px; border-radius: var(--r-sm); }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-600); }

.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); }

.btn--soft { background: var(--navy-50); color: var(--navy); border-color: #E2EAF8; }
.btn--soft:hover { background: var(--navy-100); }

.btn--outline { background: var(--surface); color: var(--navy); border-color: var(--border-dark); }
.btn--outline:hover { background: var(--navy-50); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: rgba(31,59,120,.06); color: var(--navy); }

.btn--light { background: rgba(255,255,255,.96); color: var(--navy); }
.btn--light:hover { background: #fff; }

.btn--danger { background: var(--accent); color: #fff; }
.btn--danger:hover { background: var(--accent-dark); }

.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-row--3 { grid-template-columns: repeat(3, 1fr); }
.btn-row--3 .btn { padding: 0 8px; font-size: 13.5px; }

.btn-link {
  border: 0; background: none; padding: 2px 2px;
  color: var(--navy); font-size: 13.5px; font-weight: 650;
  cursor: pointer; border-radius: 6px;
}
.btn-link:hover { text-decoration: underline; }

.iconbtn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; position: relative;
  border: 0; border-radius: 50%;
  background: var(--navy-50); color: var(--navy);
  cursor: pointer; transition: background .18s var(--ease);
}
.iconbtn:hover { background: var(--navy-100); }
.iconbtn--light { background: rgba(255,255,255,.14); color: #fff; }
.iconbtn--light:hover { background: rgba(255,255,255,.24); }
.iconbtn--bell { background: transparent; }
.iconbtn--send { background: var(--navy); color: #fff; }
.iconbtn--send:hover { background: var(--navy-600); }
.dot-badge {
  position: absolute; top: 7px; right: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2.5px var(--surface);
}

/* ---------- 7. Forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field__label {
  font-size: 13px; font-weight: 650; color: var(--text-secondary);
  letter-spacing: .005em;
}
.field__opt { font-weight: 500; color: var(--text-tertiary); }
.field__help { font-size: 12.5px; color: var(--text-tertiary); }
.field__error { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.field__error[hidden] { display: none; }

.input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font-family: inherit; font-size: 16px; font-weight: 550;
  color: var(--text-primary);
  background: var(--surface);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--r);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  appearance: none;
}
.input::placeholder { color: var(--text-tertiary); font-weight: 450; }
.input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(31,59,120,.10);
}
.input[readonly] { background: var(--surface-2); color: var(--text-secondary); }
.input--num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; text-align: center; }
.input.is-invalid { border-color: var(--accent); }

/* Native date/time pickers are still used where a free-form value is needed
   (BP reading, report date). Tone the browser glyph down so it sits with the
   rest of the controls instead of shouting in default black. */
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .45;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: opacity .16s var(--ease), background .16s var(--ease);
}
.input[type="date"]:hover::-webkit-calendar-picker-indicator,
.input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: .85; background: var(--navy-50); }
.input[type="time"]::-webkit-inner-spin-button,
.input[type="date"]::-webkit-inner-spin-button { display: none; appearance: none; }

.field__phone { display: flex; align-items: stretch; gap: 10px; }
.field__cc {
  display: grid; place-items: center;
  min-width: 62px; padding: 0 12px;
  background: var(--navy-50); color: var(--navy);
  border: 1.5px solid #E2EAF8; border-radius: var(--r);
  font-weight: 700; font-size: 15px;
}
.field__unit { position: relative; }
.field__unit .input { padding-right: 58px; }
.field__unit span {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 650; color: var(--text-tertiary);
  pointer-events: none;
}
.field__unit .input--num { padding-right: 58px; }
.field__select { position: relative; }
.field__select .input { padding-right: 44px; cursor: pointer; }
.field__select .ic {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary); pointer-events: none;
}
.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: 1fr 1fr; }

.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
  width: 50px; height: 30px; border-radius: var(--r-pill);
  background: #D3DAE8; position: relative;
  transition: background .2s var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16,32,66,.25);
  transition: transform .2s var(--ease);
}
.switch input:checked + .switch__track { background: var(--navy); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 3px solid rgba(31,59,120,.38); outline-offset: 2px; }

.segmented {
  display: flex; gap: 4px;
  padding: 4px;
  background: #EDF1F8;
  border-radius: var(--r-sm);
}
.segmented__item {
  flex: 1; min-height: 34px;
  border: 0; border-radius: 10px; background: transparent;
  font-size: 13px; font-weight: 650; color: var(--text-secondary);
  cursor: pointer; transition: all .18s var(--ease);
  white-space: nowrap; padding: 0 6px;
}
.segmented__item:hover { color: var(--navy); }
.segmented__item.is-active {
  background: var(--surface); color: var(--navy);
  box-shadow: 0 1px 3px rgba(16,32,66,.12);
}
.segmented--lg { padding: 5px; }
.segmented--lg .segmented__item { min-height: 44px; font-size: 14.5px; }
.segmented--sm { margin: 4px 0 14px; }

.tabstrip {
  flex: none;
  display: flex; gap: 4px;
  padding: 6px 16px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 9;
}
.tabstrip::-webkit-scrollbar { display: none; }
.tabstrip--equal .tabstrip__item { flex: 1; }
.tabstrip__item {
  position: relative;
  padding: 10px 14px 12px;
  border: 0; background: transparent;
  font-size: 14px; font-weight: 650; color: var(--text-tertiary);
  white-space: nowrap; cursor: pointer;
  transition: color .18s var(--ease);
}
.tabstrip__item::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: transparent; transition: background .2s var(--ease);
}
.tabstrip__item:hover { color: var(--navy-600); }
.tabstrip__item.is-active { color: var(--navy); }
.tabstrip__item.is-active::after { background: var(--navy); }

.chiprow {
  display: flex; gap: 8px;
  margin: 4px -20px 14px; padding: 2px 20px 4px;
  overflow-x: auto; scrollbar-width: none;
}
.chiprow::-webkit-scrollbar { display: none; }
.chiprow--wrap { flex-wrap: wrap; overflow: visible; margin-bottom: 8px; }
.chip {
  flex: none;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--border-dark); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--navy-300); color: var(--navy); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.choice-list { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 12px 16px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r); cursor: pointer; text-align: left;
  transition: all .18s var(--ease);
}
.choice:hover { border-color: var(--navy-300); }
.choice__label { flex: 1; font-size: 15px; font-weight: 600; }
.choice__box {
  width: 24px; height: 24px; flex: none;
  border: 2px solid var(--border-dark); border-radius: 8px;
  position: relative; transition: all .18s var(--ease);
}
.choice__box::after {
  content: ""; position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg) scale(.4); opacity: 0;
  transition: all .18s var(--ease);
}
.choice.is-selected { border-color: var(--navy); background: var(--navy-50); }
.choice.is-selected .choice__box { background: var(--navy); border-color: var(--navy); }
.choice.is-selected .choice__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.choice--none { border-style: dashed; }

.pick-list { display: grid; gap: 10px; }
.pick {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  transition: all .18s var(--ease);
}
.pick:hover { border-color: var(--navy-300); }
.pick__ic {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 13px; background: var(--navy-50); color: var(--navy);
}
.pick__text { flex: 1; display: grid; gap: 2px; }
.pick__text strong { font-size: 15px; font-weight: 650; }
.pick__text small { font-size: 12.5px; color: var(--text-secondary); }
.pick__radio {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2px solid var(--border-dark); position: relative;
  transition: all .18s var(--ease);
}
.pick__radio::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: #fff; transform: scale(0); transition: transform .18s var(--ease);
}
.pick.is-selected { border-color: var(--navy); background: var(--navy-50); }
.pick.is-selected .pick__radio { border-color: var(--navy); background: var(--navy); }
.pick.is-selected .pick__radio::after { transform: scale(1); }
.pick.is-disabled { opacity: .5; pointer-events: none; }

/* ==========================================================================
   8. Structure & cards   9. Metrics  10. Lists & rows  11. Badges  12. Charts
   ========================================================================== */

/* ---------- 8. Structure ---------- */
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.page-sub { margin-top: 8px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }

.section { margin: 22px 0; }
.section:first-child { margin-top: 10px; }
.section__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.section__title { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--sh-1);
}
.card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.card__head--tight { align-items: center; margin-bottom: 6px; }
.card--today .sync { margin: 0 0 14px; }
.card__title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.card__sub { margin-top: 3px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.card__meta { font-size: 12.5px; color: var(--text-tertiary); font-weight: 550; }
.card__eyebrow {
  font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 12px;
}
.card__ic {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--navy-50); color: var(--navy);
}
.card__ic--success { background: var(--success-bg); color: var(--success); }
.card__ic--danger { background: var(--danger-bg); color: var(--danger); }

.card--today { padding-bottom: 6px; }
.card--notified, .card--emergency { display: flex; gap: 14px; align-items: flex-start; }
.card--emergency { border-color: var(--accent-100); background: var(--accent-50); }

.note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r);
  font-size: 13px; line-height: 1.55; margin-bottom: 14px;
}
.note p { margin: 0; }
.note .ic { margin-top: 1px; flex: none; }
.note--info { background: var(--navy-50); color: var(--navy-dark); border: 1px solid #E2EAF8; }
.note--muted { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }
.note--warn { background: var(--warning-bg); color: var(--warning); border: 1px solid #F6E3C4; }

.hint { font-size: 12.5px; color: var(--text-tertiary); margin-top: 8px; line-height: 1.5; }
.prose { font-size: 14px; color: var(--text-secondary); line-height: 1.65; }
.disclaimer {
  margin: 20px 2px 8px; font-size: 11.5px; line-height: 1.6;
  color: var(--text-tertiary); text-align: center;
}
.appver { margin: 22px 0 6px; text-align: center; font-size: 11.5px; color: var(--text-tertiary); }
.source-note {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  margin: 4px 0 8px; font-size: 12px; color: var(--text-tertiary);
}
.proto-note {
  margin: 12px 0 4px; text-align: center; font-size: 11.5px;
  color: var(--text-tertiary); letter-spacing: .02em;
}
.fineprint { margin: 14px 2px; font-size: 11.5px; line-height: 1.6; color: var(--text-tertiary); }

.kv { display: grid; gap: 1px; background: var(--border); border-radius: var(--r-sm); overflow: hidden; }
.kv__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; background: var(--surface);
  font-size: 13.5px;
}
.kv__row span { color: var(--text-secondary); flex: none; }
.kv__row b { font-weight: 650; text-align: right; }
.kv--bill .kv__row:last-child { background: var(--navy-50); }
.kv--bill .kv__row:last-child b { font-size: 17px; color: var(--navy); }

.empty { text-align: center; padding: 42px 24px; }
.empty__ic {
  width: 62px; height: 62px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 22px;
  background: var(--navy-50); color: var(--navy-300);
}
.empty h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.empty p { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 16px; }

.hscroll {
  display: flex; gap: 12px;
  margin: 0 -20px; padding: 4px 20px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }

/* ---------- 9. Metrics ---------- */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.metric {
  display: grid; gap: 8px;
  padding: 14px 14px 12px; text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.metric:hover { border-color: var(--navy-300); background: #fff; box-shadow: var(--sh-1); }
.metric:active { transform: scale(.985); }
.metric--wide { grid-column: span 2; }
.metric__top { display: flex; align-items: center; gap: 8px; }
.metric__ic {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--navy-50); color: var(--navy);
}
.metric__ic .ic { width: 16px; height: 16px; }
.metric__ic--heart { background: var(--accent-50); color: var(--accent); }
.metric__ic--spo2 { background: #E6F1F7; color: var(--c-spo2); }
.metric__ic--sleep { background: #ECEEF8; color: var(--c-sleep); }
.metric__ic--success { background: var(--success-bg); color: var(--success); }
.metric__label { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--text-secondary); }
.metric__value {
  display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.metric__value strong { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.metric__value span { font-size: 11.5px; font-weight: 650; color: var(--text-tertiary); }
.metric__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.metric__delta {
  display: inline-flex; align-items: center; gap: 3px; flex: 1; min-width: 0;
  font-size: 10.5px; font-weight: 650; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.metric__delta .ic { width: 12px; height: 12px; }
.metric__delta--up { color: var(--warning); }
.metric__delta--down { color: var(--success); }
.metric__spark { width: 46px; height: 20px; flex: none; }
.metric--wide .metric__spark { width: 72px; }
.metric--alert { border-color: var(--accent-100); background: var(--accent-50); }
.metric--alert .metric__value strong { color: var(--accent); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat {
  padding: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.stat__label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.stat__value {
  display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.stat__value strong { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.stat__value span { font-size: 11px; font-weight: 650; color: var(--text-tertiary); }
.stat__meta { margin-top: 4px; font-size: 11px; color: var(--text-tertiary); }

.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.mini-stat {
  padding: 13px 10px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.mini-stat b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.mini-stat small { display: block; margin-top: 3px; font-size: 11px; color: var(--text-secondary); }

/* Hero metric cards */
.hero {
  position: relative; overflow: hidden;
  padding: 20px; margin-bottom: 14px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 62%, var(--navy-deep) 100%);
  color: #fff;
  box-shadow: 0 18px 34px -22px rgba(22,44,92,.85);
}
.hero::after {
  content: ""; position: absolute; right: -60px; top: -70px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.055);
}
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; position: relative; }
.hero__ic {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 14px; background: rgba(255,255,255,.14); color: #fff;
}
.hero--heart .hero__ic { background: rgba(237,23,69,.9); }
.hero__label { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.72); position: relative; }
.hero__value {
  display: flex; align-items: baseline; gap: 7px; margin-top: 5px;
  font-variant-numeric: tabular-nums; position: relative;
}
.hero__value strong { font-size: 44px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.hero__value span { font-size: 14px; font-weight: 650; color: rgba(255,255,255,.72); }
.hero__value--dark strong { color: var(--text-primary); }
.hero__meta { margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.66); position: relative; }
.hero__split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14); position: relative;
}
.hero__split small { display: block; font-size: 11.5px; color: rgba(255,255,255,.62); margin-bottom: 3px; }
.hero__split b { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Metric header --------------------------------------------------------
   Heart, BP, SpO2, Activity, Sleep and Weight put the app bar inside the navy
   hero, so the two read as a single block rather than a white bar above a
   coloured card. The block is fixed; only the detail below it scrolls.      */
.metric-head {
  position: relative; flex: none; overflow: hidden; z-index: 2;
  padding-bottom: 22px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 62%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 14px 30px -24px rgba(22,44,92,.9);
}
.metric-head::after {
  content: ""; position: absolute; right: -70px; top: -84px;
  width: 224px; height: 224px; border-radius: 50%; background: rgba(255,255,255,.055);
}
.metric-head .appbar {
  background: transparent; border-bottom: 0; position: relative; z-index: 1;
}
.metric-head .appbar__title { color: #fff; }
.metric-head .appbar__btn { color: #fff; }
.metric-head .appbar__btn:hover { background: rgba(255,255,255,.14); }
.metric-head .appbar__btn:active { background: rgba(255,255,255,.22); }
.metric-head__body { position: relative; z-index: 1; padding: 6px 20px 0; }
.metric-head .hero__top { margin-bottom: 14px; }
.metric-head .badge--success,
.metric-head .badge--neutral,
.metric-head .badge--warning,
.metric-head .badge--danger { background: rgba(255,255,255,.16); color: #fff; }
.metric-head--heart .hero__ic { background: rgba(237,23,69,.92); }
.metric-head .goal__meta { color: rgba(255,255,255,.68); }
.metric-head .goal__text .hero__value strong { color: #fff; font-size: 34px; }
.progress--light { background: rgba(255,255,255,.18); }
.progress--light span { background: #fff; }
.metric-head + .scroll { padding-top: 16px; }

.card--goal { padding: 18px; }
.goal { display: flex; align-items: center; gap: 18px; }
.goal__ring { width: 96px; height: 96px; flex: none; }
.goal__text { flex: 1; min-width: 0; }
.goal__text .hero__label { color: var(--text-secondary); }
.goal__text .hero__value strong { font-size: 32px; color: var(--text-primary); }
.goal__meta { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 8px; font-variant-numeric: tabular-nums; }

.ring-sm { width: 46px; height: 46px; flex: none; }

.progress { height: 8px; border-radius: 99px; background: #E6EBF5; overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: 99px; background: var(--navy); transition: width .45s var(--ease); }
.progress--thin { height: 7px; }

.meter { display: grid; gap: 8px; }
.meter__track { display: flex; gap: 5px; }
.meter__unit { flex: 1; height: 10px; border-radius: 99px; background: #E6EBF5; }
.meter__unit.is-used { background: var(--navy); }
.meter__unit.is-free { background: var(--navy-100); }
.meter__legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); }
.meter__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* ---------- 10. Lists & rows ---------- */
.list {
  display: grid; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.list--flush { background: transparent; border: 0; border-radius: 0; gap: 0; }
.list--flush .row { border-bottom: 1px solid var(--border); border-radius: 0; padding-left: 0; padding-right: 0; }
.list--flush .row:last-child { border-bottom: 0; }

.row {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 60px; padding: 13px 15px;
  background: var(--surface); border: 0; text-align: left;
  cursor: pointer; transition: background .16s var(--ease);
}
.row:hover { background: var(--navy-50); }
.row--static, .row--plain { cursor: default; }
.row--static:hover { background: var(--surface); }
.row--plain { border: 1px solid var(--border); border-radius: var(--r); }
.row--card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-1); margin-bottom: 14px;
}
.row--danger .row__text strong { color: var(--accent); }
.row__ic {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: #EEF1F7; color: var(--text-secondary);
}
.row__ic--navy { background: var(--navy-50); color: var(--navy); }
.row__ic--danger { background: var(--danger-bg); color: var(--danger); }
.row__ic--success { background: var(--success-bg); color: var(--success); }
.row__ic--warning { background: var(--warning-bg); color: var(--warning); }
.row__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row__text strong { font-size: 14.5px; font-weight: 650; letter-spacing: -.005em; }
.row__text small { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.row__chev { color: var(--text-tertiary); flex: none; }
.row__value { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.row__value b { display: block; font-size: 15px; font-weight: 700; }
.row__value small { display: block; font-size: 11.5px; color: var(--text-tertiary); }

.reading {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--border);
}
.reading:last-child { border-bottom: 0; }
.reading__date { flex: none; width: 62px; }
.reading__date b { display: block; font-size: 13.5px; font-weight: 700; }
.reading__date small { display: block; font-size: 11px; color: var(--text-tertiary); }
.reading__val { flex: 1; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.reading__val small { font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); margin-left: 4px; }
.reading__tag { flex: none; }
.reading.is-abnormal .reading__val { color: var(--accent); }

.benefits { display: grid; gap: 10px; }
.benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--text-primary); line-height: 1.45;
}
.benefits .ic { color: var(--success); margin-top: 2px; flex: none; }
.benefits--compact li { font-size: 13px; color: var(--text-secondary); }

.perm-points { display: grid; gap: 10px; margin: 14px 2px 4px; }
.perm-points li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.perm-points .ic { color: var(--success); flex: none; }

.tagwrap { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--navy-50); color: var(--navy);
  font-size: 12.5px; font-weight: 650;
}
.tag--muted { background: #EEF1F7; color: var(--text-secondary); }
.tag--accent { background: var(--accent-50); color: var(--accent-dark); }

/* ---------- 11. Badges & status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; flex: none;
}
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg); color: var(--danger); }
.badge--navy    { background: var(--navy-50); color: var(--navy); }
.badge--neutral { background: #EEF1F7; color: var(--text-secondary); }
.badge--dark    { background: rgba(255,255,255,.14); color: #fff; }
.badge--outline { background: transparent; border: 1px solid var(--border-dark); color: var(--text-secondary); }
.hero .badge--success { background: rgba(255,255,255,.16); color: #fff; }
.hero .badge--neutral { background: rgba(255,255,255,.16); color: #fff; }

.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--success); position: relative;
  display: inline-block; margin-right: 6px;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--success); opacity: .5;
  animation: pulseRing 2.2s var(--ease) infinite;
}
.pulse-dot--light { background: #5BD9A3; }
.pulse-dot--light::after { border-color: #5BD9A3; }
@keyframes pulseRing {
  0% { transform: scale(.6); opacity: .6; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
.pill-live {
  display: inline-flex; align-items: center;
  margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--success);
}
.pill-live--center { justify-content: center; }

.sync {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 12px; color: var(--text-tertiary);
}
.sync .ic { flex: none; }
.sync.is-syncing .ic { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.sync-strip {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); font-size: 12.5px; color: var(--text-secondary);
}
.sync-strip p { flex: 1; }
.sync-strip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }

.avatar {
  display: grid; place-items: center; flex: none;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-600), var(--navy-dark));
  color: #fff; font-weight: 750; letter-spacing: .02em;
  border: 0; cursor: default; overflow: hidden;
}
button.avatar { cursor: pointer; }
.avatar--doc { background: linear-gradient(145deg, #2E5AA8, #17305F); }
.avatar--light { background: rgba(255,255,255,.16); }
.avatar--40 { width: 40px; height: 40px; font-size: 13.5px; }
.avatar--44 { width: 44px; height: 44px; font-size: 14.5px; }
.avatar--56 { width: 56px; height: 56px; font-size: 17px; }
.avatar--72 { width: 72px; height: 72px; font-size: 22px; }
.avatar--84 { width: 84px; height: 84px; font-size: 26px; }
.avatar--96 { width: 96px; height: 96px; font-size: 30px; }

/* ---------- 12. Charts ---------- */
.chart { position: relative; width: 100%; height: 178px; }
.chart--tall { height: 216px; }
.chart--mini { height: 62px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart__grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.chart__axis { fill: var(--text-tertiary); font-size: 10px; font-weight: 600; }
.chart__band { fill: var(--c-band); }
.chart__line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart__dot { stroke: #fff; stroke-width: 2; }
.chart__bar { rx: 4; }
.chart__hit { fill: transparent; }
.chart__cursor { stroke: var(--navy); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; }
.chart__focus { opacity: 0; }
.chart.is-active .chart__cursor, .chart.is-active .chart__focus { opacity: 1; }

.chart__tip {
  position: absolute; top: 4px; left: 0;
  padding: 7px 11px; border-radius: 11px;
  background: var(--navy-deep); color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -4px);
  transition: opacity .14s var(--ease);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.6);
  z-index: 5;
}
.chart__tip b { font-variant-numeric: tabular-nums; }
.chart__tip small { display: block; color: rgba(255,255,255,.62); font-weight: 500; font-size: 10.5px; }
.chart.is-active .chart__tip { opacity: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); font-weight: 550; }
.legend__item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend__item--band i { background: var(--c-band); border: 1px solid var(--border-dark); }

.trendcard {
  flex: none; width: 168px;
  padding: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  cursor: pointer; transition: all .18s var(--ease);
}
.trendcard:hover { border-color: var(--navy-300); box-shadow: var(--sh-2); }
.trendcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.trendcard__label { font-size: 12px; font-weight: 650; color: var(--text-secondary); }
.trendcard__value { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.trendcard__value strong { font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.trendcard__value span { font-size: 11px; font-weight: 650; color: var(--text-tertiary); }
.trendcard__chart { height: 46px; margin-top: 8px; }
.trendcard__chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.trendcard__foot { margin-top: 6px; font-size: 11px; color: var(--text-tertiary); }

.trend-now { text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.trend-now b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.trend-now span { display: block; font-size: 11px; color: var(--text-tertiary); font-weight: 650; }

/* ---- Section header (tab root that owns a set of screens) ---------------- */
.sechead {
  position: relative; flex: none; overflow: hidden; z-index: 2;
  padding: 10px 18px 14px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 60%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 0 0 26px 26px;
  box-shadow: 0 14px 30px -24px rgba(22,44,92,.9);
}
.sechead::after {
  content: ""; position: absolute; right: -76px; top: -96px;
  width: 222px; height: 222px; border-radius: 50%; background: rgba(255,255,255,.055);
}
.sechead__row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 44px;
}
.sechead__title { font-size: 25px; font-weight: 800; letter-spacing: -.025em; }
.sechead__sync {
  position: relative; display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 10px 13px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
}
.sechead__sync p { flex: 1; min-width: 0; font-size: 12.5px; color: rgba(255,255,255,.82); }
.sechead__action {
  flex: none; border: 0; background: none; padding: 2px;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.sechead + .scroll { padding-top: 16px; }

.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat {
  display: grid; gap: 10px;
  padding: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  cursor: pointer; transition: all .18s var(--ease);
}
.cat:hover { border-color: var(--navy-300); box-shadow: var(--sh-2); transform: translateY(-1px); }
.cat:active { transform: scale(.985); }
.cat__top { display: flex; align-items: center; justify-content: space-between; }
.cat__status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650;
}
.cat__status i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cat__status--ok { color: var(--success); }
.cat__status--ok i { background: var(--success); }
.cat__status--attention { color: var(--warning); }
.cat__status--attention i { background: var(--warning); }
.cat__status--muted { color: var(--text-tertiary); }
.cat__status--muted i { background: var(--border-dark); }
.cat__ic {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 13px; background: var(--navy-50); color: var(--navy);
}
.cat__ic--heart { background: var(--accent-50); color: var(--accent); }
.cat__ic--spo2 { background: #E6F1F7; color: var(--c-spo2); }
.cat__ic--sleep { background: #ECEEF8; color: var(--c-sleep); }
.cat__name { font-size: 13.5px; font-weight: 650; }
.cat__value { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.cat__value strong { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.cat__value span { font-size: 11px; font-weight: 650; color: var(--text-tertiary); }
.cat__meta { font-size: 11.5px; color: var(--text-tertiary); }
.cat.is-attention { border-color: #F3DFBF; background: #FFFCF5; }

/* ==========================================================================
   13. Splash & onboarding  14. Auth  15. Home  16. Connect  17. Timeline
   18. Alerts  19. Consultations & call  20. Prescription  21. Plans
   22. Chat  23. Overlays  24. Responsive
   ========================================================================== */

/* ---------- 13. Splash & onboarding ---------- */
.splash {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 36px; background: var(--surface); text-align: center;
}
.splash__logo { width: 100%; max-width: 268px; animation: rise .8s var(--ease) both; }
.splash__line {
  margin-top: 26px; font-size: 15px; font-weight: 600; color: var(--navy);
  letter-spacing: .01em; animation: rise .8s .18s var(--ease) both;
}
.splash__loader {
  width: 132px; height: 4px; margin-top: 36px;
  border-radius: 99px; background: #E6EBF5; overflow: hidden;
}
.splash__loader span {
  display: block; width: 40%; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--navy), var(--accent));
  animation: loadSlide 1.4s var(--ease) infinite;
}
@keyframes loadSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.splash__foot {
  position: absolute; bottom: 42px; left: 0; right: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-tertiary);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.onb { flex: 1; display: flex; flex-direction: column; background: var(--surface); }
.onb__track { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.onb__slide {
  flex: none; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 32px; text-align: center;
  opacity: 0; transform: translateX(24px);
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.onb__slide.is-active { opacity: 1; transform: none; }
.onb__art { width: 100%; max-width: 300px; margin-bottom: 26px; }
.onb__title { font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.onb__text { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 300px; }
.onb__foot { flex: none; display: grid; gap: 8px; padding: 0 24px calc(22px + env(safe-area-inset-bottom)); }
.onb-chip { animation: float 4.5s ease-in-out infinite; }
.onb-chip--2 { animation-delay: -1.5s; }
.onb-chip--3 { animation-delay: -3s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 16px; }
.dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px;
  background: #D3DAE8; cursor: pointer; transition: all .26s var(--ease);
}
.dots button.is-active { width: 24px; background: var(--navy); }

/* ---------- 14. Auth ---------- */
.auth {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 24px 28px calc(28px + env(safe-area-inset-bottom));
  background: var(--surface);
  overflow-y: auto;
}
.auth__brand { width: 190px; margin-bottom: 34px; }
.auth__title { font-size: 28px; font-weight: 800; letter-spacing: -.028em; line-height: 1.18; }
.auth__sub { margin: 10px 0 28px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.auth__sub strong { color: var(--text-primary); }
.auth__legal { margin-top: 20px; font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }
.auth__legal .btn-link { font-size: 12px; }
.auth__trust {
  display: flex; align-items: center; gap: 8px; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-tertiary);
}
.auth__trust .ic { color: var(--success); }

/* ---- Verification (OTP) ---------------------------------------------------
   Branded navy header with the Sentini lockup, and a white card that lifts
   over it to hold the code entry.                                          */
.vhero {
  position: relative; flex: none; overflow: hidden;
  padding: 10px 24px 52px;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-dark) 58%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 0 0 30px 30px;
}
.vhero::after {
  content: ""; position: absolute; right: -76px; top: -86px;
  width: 232px; height: 232px; border-radius: 50%; background: rgba(255,255,255,.06);
}
.vhero::before {
  content: ""; position: absolute; left: -58px; bottom: -96px;
  width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.045);
}
.vhero__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.vhero__logo {
  position: relative; display: inline-block;
  padding: 9px 13px; border-radius: 13px; background: #fff;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.55);
}
.vhero__logo img { width: 126px; display: block; }
.vhero__title {
  position: relative; margin-top: 22px;
  font-size: 27px; font-weight: 800; letter-spacing: -.028em; line-height: 1.15;
}
.vhero__sub { position: relative; margin-top: 8px; font-size: 13.5px; color: rgba(255,255,255,.7); }
.vhero__num {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 13px; padding: 13px 15px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.17);
  border-radius: var(--r);
  font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.vhero__change {
  flex: none; border: 0; background: none; padding: 2px;
  font: inherit; font-size: 13px; font-weight: 650; color: #fff;
  opacity: .82; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.vhero__change:hover { opacity: 1; }

/* Login carries the lockup and no back button; Connect is tighter because a
   list follows it. Both share the OTP header so the entry flow reads as one. */
.vhero--tall { padding: 34px 24px 44px; }
.vhero--compact { padding: 8px 20px 26px; border-radius: 0 0 26px 26px; }
.vhero--compact .vhero__title { margin-top: 16px; font-size: 24px; }
.vhero--compact .vhero__sub { font-size: 13px; line-height: 1.5; }
.auth--under { justify-content: flex-start; padding-top: 26px; }
.auth--under .auth__trust { margin-top: auto; }

.vscroll { padding-top: 0; margin-top: -28px; }
.vbody { display: flex; flex-direction: column; min-height: 100%; }

.vcard {
  position: relative;
  padding: 24px 18px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 44px -24px rgba(16,32,66,.34), 0 2px 8px rgba(16,32,66,.05);
}
.vcard__label {
  margin-bottom: 16px; text-align: center;
  font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary);
}

.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp__box {
  width: 100%; height: 62px; padding: 0;
  text-align: center; font-family: inherit; font-size: 24px; font-weight: 750;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
  background-color: var(--surface-2); caret-color: var(--navy);
  background-image: radial-gradient(circle at center, #CBD4E6 3px, transparent 3.5px);
  border: 1.5px solid var(--border-dark); border-radius: 16px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease), transform .16s var(--ease);
  appearance: none;
}
.otp__box:hover { border-color: var(--navy-300); }
.otp__box:focus {
  outline: none; border-color: var(--navy); background: #fff;
  box-shadow: 0 0 0 4px rgba(31,59,120,.13);
  transform: translateY(-1px);
}
.otp__box.is-filled { border-color: var(--navy); background: var(--navy-50); color: var(--navy); }
.otp.is-error .otp__box { border-color: var(--accent); background: var(--accent-50); color: var(--accent-dark); }
.otp.is-error { animation: shake .45s var(--ease); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.verify__msg {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 13px;
  font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--accent);
}
.verify__msg .ic { margin-top: 1px; flex: none; }

.resend {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding: 15px 0;
  border-top: 1px solid var(--border);
}
.resend__label { flex: 1; font-size: 13px; color: var(--text-secondary); }
.resend__timer { font-size: 12.5px; font-weight: 650; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.resend__timer[hidden] { display: none; }
.resend .btn-link:disabled { display: none; }

.verify__note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: auto; padding-top: 26px;
  font-size: 12px; line-height: 1.5; color: var(--text-tertiary);
}
.verify__note .ic { margin-top: 1px; flex: none; color: var(--success); }

.proto-hint {
  margin-top: 14px; padding: 9px 12px;
  border: 1px dashed var(--border-dark); border-radius: var(--r-sm);
  text-align: center; font-size: 11.5px; color: var(--text-tertiary);
}
.proto-hint strong { color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* ---- Profile setup -------------------------------------------------------
   Navy step header with a three-point stepper, then the form broken into
   labelled cards so it reads as sections rather than one long column.     */
.sstep {
  position: relative; flex: none; overflow: hidden;
  padding: 8px 20px 20px;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-dark) 60%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 0 0 26px 26px;
  z-index: 2;
}
.sstep::after {
  content: ""; position: absolute; right: -70px; top: -90px;
  width: 210px; height: 210px; border-radius: 50%; background: rgba(255,255,255,.055);
}
.sstep__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.sstep__count {
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
}

.stepper { position: relative; display: flex; align-items: flex-start; padding: 0 4px; }
.stepper__item {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.stepper__item::before {
  content: ""; position: absolute; top: 13px; right: 50%; left: -50%;
  height: 2px; background: rgba(255,255,255,.22);
}
.stepper__item:first-child::before { display: none; }
.stepper__item.is-active::before, .stepper__item.is-done::before { background: rgba(255,255,255,.6); }
.stepper__dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-dark);
  border: 1.5px solid rgba(255,255,255,.3);
  font-size: 12px; font-weight: 750; color: rgba(255,255,255,.7);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease);
}
.stepper__dot .ic { display: none; }
.stepper__label {
  font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center;
  color: rgba(255,255,255,.6);
  transition: color .25s var(--ease);
}
.stepper__item.is-active .stepper__dot {
  background: #fff; border-color: #fff; color: var(--navy);
  box-shadow: 0 0 0 5px rgba(255,255,255,.16);
}
.stepper__item.is-active .stepper__label { color: #fff; font-weight: 700; }
.stepper__item.is-done .stepper__dot { background: #47C48D; border-color: #47C48D; color: var(--navy-deep); }
.stepper__item.is-done .stepper__dot b { display: none; }
.stepper__item.is-done .stepper__dot .ic { display: block; stroke-width: 3; }
.stepper__item.is-done .stepper__label { color: rgba(255,255,255,.82); }

.setup-intro { margin: 4px 2px 20px; }

.fcard {
  padding: 18px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.fcard__head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.fcard__ic {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--navy-50); color: var(--navy);
}
.fcard__ic--accent { background: var(--accent-50); color: var(--accent); }
.fcard__title { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: -.005em; }
.fcard__count { font-size: 11.5px; font-weight: 650; color: var(--text-tertiary); }
.fcard .form { gap: 16px; }
.fcard .choice-list { gap: 9px; }

.setup-step { display: none; }
.setup-step.is-active { display: block; animation: fadeUp .3s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Medicine entry: each medicine is a small block with full-width fields, so
   names and doses are never clipped by a cramped side-by-side row. */
.med-rows { display: grid; gap: 10px; margin-bottom: 12px; }
.med-row {
  display: grid; gap: 9px;
  padding: 12px 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.med-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.med-row__n {
  font-size: 10.5px; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.med-row__del {
  width: 30px; height: 30px; flex: none; margin: -3px -3px -3px 0;
  display: grid; place-items: center;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--text-tertiary); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.med-row__del:hover { background: var(--accent-50); color: var(--accent); }
.med-row .input { min-height: 46px; font-size: 14.5px; padding: 11px 14px; }

/* ---------- 15. Home ---------- */
/* ---- Home header ----------------------------------------------------------
   The front door of the app: brand, who the patient is, and the standing
   clinical relationship, on the same navy system as the metric screens.   */
.homehead {
  position: relative; flex: none; overflow: hidden; z-index: 2;
  padding: 8px 18px 14px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 60%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 14px 30px -24px rgba(22,44,92,.9);
}
.homehead::after {
  content: ""; position: absolute; right: -74px; top: -96px;
  width: 232px; height: 232px; border-radius: 50%; background: rgba(255,255,255,.06);
}
.homehead__top {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.homehead__logo {
  width: 122px; display: block;
  padding: 7px 10px; border-radius: 11px; background: #fff;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.5);
  box-sizing: content-box;
}
.homehead__bell {
  position: relative; flex: none;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  cursor: pointer; transition: background .18s var(--ease);
}
.homehead__bell:hover { background: rgba(255,255,255,.2); }
.homehead__count {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px var(--navy-dark);
}

.homehead__id { position: relative; display: flex; align-items: center; gap: 13px; }
.homehead__text { flex: 1; min-width: 0; }
.homehead__greet { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.66); }
.homehead__name {
  margin-top: 2px;
  font-size: 21px; font-weight: 800; letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.homehead__uhid { flex: none; text-align: right; }
.homehead__uhid small {
  display: block; font-size: 9.5px; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.homehead__uhid b {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 650; color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

.homehead__care {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r);
  background: rgba(255,255,255,.1); color: #fff;
  cursor: pointer; text-align: left;
  transition: background .18s var(--ease);
}
.homehead__care:hover { background: rgba(255,255,255,.17); }
.homehead__care-label { flex: 1; font-size: 12.5px; font-weight: 650; }
.homehead__care-doc { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.72); }
.homehead__care .ic { color: rgba(255,255,255,.6); flex: none; }

.avatar--48 { width: 48px; height: 48px; font-size: 15.5px; }
.avatar--ring { box-shadow: 0 0 0 2px rgba(255,255,255,.28); }

.homehead + .scroll { padding-top: 16px; }

.mood {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.mood__q { flex: 1 0 100%; font-size: 13.5px; font-weight: 650; }
.mood__row { display: flex; gap: 8px; width: 100%; }
.mood__chip {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 8px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 13px; font-weight: 650; cursor: pointer;
  transition: all .18s var(--ease);
}
.mood__chip:hover { border-color: var(--navy-300); }
.mood__chip.is-active { border-color: var(--navy); background: var(--navy-50); color: var(--navy); }
.mood__face { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.mood__face--good { background: #2FA37A; }
.mood__face--ok { background: #E3A62A; }
.mood__face--bad { background: var(--accent); }

.doc { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.doc__meta { flex: 1; min-width: 0; }
.doc__name { font-size: 16px; font-weight: 750; letter-spacing: -.015em; }
.doc__spec { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }

.doc-hero {
  padding: 24px 20px 20px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-1); text-align: center;
}
.doc-hero .avatar { margin: 0 auto 14px; }
.doc-hero__name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.doc-hero__spec { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.doc-hero__place { margin-top: 2px; font-size: 12.5px; color: var(--text-tertiary); }
.doc-hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
}
.doc-hero__stats b { display: block; font-size: 16px; font-weight: 750; }
.doc-hero__stats small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-secondary); }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick__item {
  display: grid; justify-items: center; gap: 8px;
  padding: 14px 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all .18s var(--ease);
}
.quick__item:hover { border-color: var(--navy-300); color: var(--navy); box-shadow: var(--sh-1); }
.quick__ic {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 13px; background: var(--navy-50); color: var(--navy);
}

.flagstrip {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 15px; margin-bottom: 14px;
  background: var(--accent-50); border: 1px solid var(--accent-100);
  border-radius: var(--r-md); color: var(--accent-dark);
  cursor: pointer; transition: border-color .18s var(--ease);
}
.flagstrip:hover { border-color: var(--accent); }
.flagstrip > .ic { flex: none; color: var(--accent); }
.flagstrip span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.flagstrip strong { font-size: 13.5px; font-weight: 700; }
.flagstrip small { font-size: 12px; color: #8A2038; }

.alertcard {
  display: block; width: 100%; text-align: left;
  padding: 16px; margin-bottom: 14px;
  background: linear-gradient(165deg, #FFF6F8, #FEF0F3);
  border: 1px solid var(--accent-100);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 24px -18px rgba(237,23,69,.55);
  cursor: pointer; transition: all .18s var(--ease);
}
.alertcard:hover { border-color: var(--accent); }
.alertcard__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.alertcard__ic {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--accent); color: #fff;
}
.alertcard__title { flex: 1; font-size: 14.5px; font-weight: 750; color: var(--accent-dark); }
.alertcard__time { font-size: 11.5px; font-weight: 600; color: var(--accent); }
.alertcard__text { font-size: 13px; line-height: 1.5; color: #7C1226; }
.alertcard__value {
  display: flex; align-items: baseline; gap: 6px; margin: 12px 0;
  font-variant-numeric: tabular-nums;
}
.alertcard__value strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); }
.alertcard__value span { font-size: 12.5px; font-weight: 650; color: var(--accent); }
.alertcard__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--accent-dark);
}

/* ---------- 16. Connect health ---------- */
.connect-list { display: grid; gap: 12px; margin: 20px 0 22px; }
.connect {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: all .2s var(--ease);
}
.connect.is-connected { border-color: #BFE3D2; background: #F7FCFA; }
.connect__ic {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 15px; background: var(--navy-50); color: var(--navy);
}
.connect__ic--dark { background: var(--navy-deep); color: #fff; }
.connect__ic--green { background: #E9F7F0; color: #1E8E5B; }
.connect__text { flex: 1; min-width: 0; }
.connect__name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.connect__sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.connect__status { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; font-weight: 650; }
.connect__status--on { color: var(--success); }
.connect__status--off { color: var(--text-tertiary); }

.permission {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--navy-50); border: 1px solid #E2EAF8;
}
.permission__icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 13px; background: var(--navy); color: #fff;
}
.permission h3 { font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--navy-dark); }
.permission p { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

.device-card { padding: 16px; }
.device-card__head { display: flex; align-items: center; gap: 13px; }
.device-card__body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- 17. Timeline ---------- */
.tl-day {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 14px;
}
.tl-day h2 { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.tl-day span { flex: 1; height: 1px; background: var(--border); }
.tl-day small { font-size: 11.5px; color: var(--text-tertiary); font-weight: 600; }

.tl { position: relative; padding-left: 86px; }
.tl::before {
  content: ""; position: absolute; left: 74px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(var(--border), var(--border));
}
.tl-item { position: relative; margin-bottom: 12px; }
.tl-item__time {
  position: absolute; left: -86px; top: 14px; width: 58px;
  text-align: right; font-size: 11.5px; font-weight: 650;
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.tl-item__node {
  position: absolute; left: -17px; top: 17px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--navy-300);
  z-index: 1;
}
.tl-item__card {
  display: block; width: 100%; text-align: left;
  padding: 14px 15px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
button.tl-item__card { cursor: pointer; transition: all .18s var(--ease); }
button.tl-item__card:hover { border-color: var(--navy-300); box-shadow: var(--sh-2); }
.tl-item__head { display: flex; align-items: center; gap: 10px; }
.tl-item__ic {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--navy-50); color: var(--navy);
}
.tl-item__title { flex: 1; font-size: 14px; font-weight: 650; }
.tl-item__value {
  margin-top: 8px; font-size: 19px; font-weight: 750;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.tl-item__value small { font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); margin-left: 5px; }
.tl-item__sub { margin-top: 5px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

.tl-item--alert .tl-item__node { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-50); }
.tl-item--alert .tl-item__card { border-color: var(--accent-100); background: linear-gradient(165deg,#FFF7F9,#FEF0F3); }
.tl-item--alert .tl-item__ic { background: var(--accent); color: #fff; }
.tl-item--alert .tl-item__value { color: var(--accent); }
.tl-item--care .tl-item__node { border-color: var(--navy); }
.tl-item--care .tl-item__ic { background: var(--navy); color: #fff; }
.tl-item--done .tl-item__node { border-color: var(--success); }
.tl-item--done .tl-item__ic { background: var(--success-bg); color: var(--success); }

/* ---------- 18. Alerts ---------- */
.alert-hero {
  padding: 24px 20px; margin-bottom: 14px; text-align: center;
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, #FFF6F8, #FDE9EE);
  border: 1px solid var(--accent-100);
}
.alert-hero__ic {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 18px;
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(237,23,69,.6);
}
.alert-hero__label { font-size: 13px; font-weight: 650; color: var(--accent-dark); }
.alert-hero__value {
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  margin-top: 6px; font-variant-numeric: tabular-nums;
}
.alert-hero__value strong { font-size: 46px; font-weight: 800; letter-spacing: -.035em; color: var(--accent); line-height: 1.05; }
.alert-hero__value span { font-size: 14px; font-weight: 650; color: var(--accent); }
.alert-hero__status { margin-top: 10px; font-size: 13px; color: #7C1226; line-height: 1.5; }

/* ---------- 19. Consultations & call ---------- */
.entitle-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--navy-50); border: 1px solid #E2EAF8;
  border-radius: var(--r); font-size: 12.5px; color: var(--navy-dark);
}
.entitle-strip .ic { flex: none; color: var(--navy); }
.entitle-strip p { flex: 1; line-height: 1.45; }
.entitle-strip strong { font-weight: 700; }

.entitle-card {
  padding: 16px; margin: 4px 0 14px;
  background: var(--navy-50); border: 1px solid #E2EAF8;
  border-radius: var(--r-lg);
}
.entitle-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.entitle-card__ic {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--navy); color: #fff;
}
.entitle-card h3 { flex: 1; font-size: 14px; font-weight: 700; color: var(--navy-dark); }
.entitle-card p { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.entitle-card--paid { background: var(--warning-bg); border-color: #F6E3C4; }
.entitle-card--paid .entitle-card__ic { background: var(--warning); }
.entitle-card--paid h3 { color: var(--warning); }

.appt {
  padding: 16px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.appt--next {
  border-color: #CFDCF3;
  background: linear-gradient(160deg, #F7FAFF, var(--surface) 55%);
}
.appt__head { display: flex; align-items: center; gap: 13px; }
.appt__meta { flex: 1; min-width: 0; }
.appt__name { font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; }
.appt__spec { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }
.appt__when {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.appt__when div { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.appt__when .ic { color: var(--navy); flex: none; }
.appt__when b { font-weight: 700; }
.appt__foot { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10px; }
.appt__foot .btn { padding: 0 10px; }
.appt--past { opacity: 1; }
.appt--cancelled .appt__name { color: var(--text-secondary); }

.call { flex: 1; display: flex; flex-direction: column; background: var(--navy-deep); color: #fff; }
.call__bar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
}
.call__bartext { flex: 1; min-width: 0; }
.call__bartext p { font-size: 15px; font-weight: 700; }
.call__bartext small { font-size: 12px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.call__stage { flex: 1; min-height: 0; position: relative; padding: 0 16px 8px; }
.call__stage--wait { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }

.remote {
  position: absolute; inset: 0 16px 8px;
  border-radius: var(--r-xl); overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(74,116,196,.45) 0%, transparent 62%),
    linear-gradient(160deg, #24427F, #14264F 60%, #0C1A38);
  display: grid; place-items: center;
}
.remote::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 50% at 50% 30%, rgba(255,255,255,.08), transparent 70%);
}
.remote__inner { text-align: center; position: relative; }
.remote__inner .avatar { margin: 0 auto 16px; box-shadow: 0 0 0 10px rgba(255,255,255,.05); }
.remote__name { font-size: 18px; font-weight: 750; }
.remote__spec { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.62); }
.remote__tag {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: rgba(10,20,40,.6); backdrop-filter: blur(8px);
  font-size: 11.5px; font-weight: 650;
}

.selfpreview {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #22304F, #16223C);
  border: 1px solid rgba(255,255,255,.1);
  display: grid; place-items: center;
}
.selfpreview--large { flex: 1; min-height: 0; }
.selfpreview--pip {
  position: absolute; right: 26px; bottom: 22px;
  width: 96px; height: 128px; z-index: 3;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.7);
}
.selfpreview__body { text-align: center; display: grid; gap: 10px; justify-items: center; }
.selfpreview__body p { font-size: 12px; color: rgba(255,255,255,.5); }
.selfpreview__tag {
  position: absolute; left: 10px; bottom: 9px;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(10,20,40,.55); font-size: 10.5px; font-weight: 650;
}
.selfpreview.is-off::after {
  content: "Camera off"; position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(12,22,44,.9); font-size: 12px; color: rgba(255,255,255,.6);
}

.waitinfo {
  flex: none; text-align: center;
  padding: 20px 18px; border-radius: var(--r-xl);
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09);
}
.waitinfo .avatar { margin: 0 auto 12px; }
.waitinfo h2 { font-size: 17px; font-weight: 750; }
.waitinfo p { font-size: 13px; color: rgba(255,255,255,.62); margin-top: 3px; }
.waitinfo__status {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px; font-size: 13.5px; font-weight: 650; color: #fff;
}
.waitinfo__sub { font-size: 12.5px; }
.spinner {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin .9s linear infinite;
}

.call__controls {
  flex: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 14px 16px;
}
.call__controls--5 { grid-template-columns: repeat(5, 1fr); }
.callbtn {
  display: grid; justify-items: center; gap: 5px;
  padding: 11px 4px;
  border: 0; border-radius: var(--r);
  background: rgba(255,255,255,.1); color: #fff;
  font-size: 10.5px; font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease);
}
.callbtn:hover { background: rgba(255,255,255,.17); }
.callbtn.is-off { background: rgba(255,255,255,.92); color: var(--navy-deep); }
.callbtn--end { background: var(--accent); }
.callbtn--end:hover { background: var(--accent-dark); }
.call .btn--light {
  margin: 0 16px calc(16px + env(safe-area-inset-bottom));
  width: calc(100% - 32px);
}

.callhealth {
  position: absolute; left: 16px; right: 16px; bottom: 8px; z-index: 5;
  padding: 16px; border-radius: var(--r-lg);
  background: rgba(14,30,66,.92); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  animation: sheetUp .26s var(--ease) both;
}
.callhealth__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.callhealth__head h3 { font-size: 13px; font-weight: 700; }
.callhealth__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.callhealth__item {
  padding: 11px 10px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); text-align: center;
}
.callhealth__item small { display: block; font-size: 10.5px; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.callhealth__item b { font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
@keyframes sheetUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 20. Prescription document ---------- */
.rx {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  margin-top: 4px;
}
.rx__header {
  padding: 18px 18px 16px;
  border-bottom: 3px solid var(--navy);
  background: linear-gradient(180deg, #fff, #FBFCFE);
}
.rx__logo { width: 186px; margin-bottom: 12px; }
.rx__hospital { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; }
.rx__hospital p { font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.rx__hospital b { display: block; font-size: 11.5px; color: var(--text-primary); }
.rx__doc { text-align: right; }
.rx__doc strong { display: block; font-size: 13px; font-weight: 750; color: var(--navy); }
.rx__doc small { display: block; font-size: 10.5px; color: var(--text-secondary); line-height: 1.5; }

.rx__patient {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  padding: 14px 18px;
  background: var(--navy-50);
  border-bottom: 1px solid var(--border);
}
.rx__patient div { font-size: 11.5px; }
.rx__patient span { color: var(--text-secondary); }
.rx__patient b { font-weight: 700; }

.rx__body { padding: 18px; }
.rx__section { margin-bottom: 20px; }
.rx__section:last-child { margin-bottom: 0; }
.rx__label {
  font-size: 10.5px; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy);
  padding-bottom: 6px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.rx__notes { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

.rx__rxmark {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: 10px;
  border-radius: 9px; background: var(--navy); color: #fff;
  font-size: 15px; font-weight: 800; font-family: Georgia, serif;
}
.rx-med {
  padding: 12px 0; border-bottom: 1px dashed var(--border);
}
.rx-med:last-child { border-bottom: 0; padding-bottom: 0; }
.rx-med__top { display: flex; align-items: baseline; gap: 8px; }
.rx-med__n {
  font-size: 11px; font-weight: 700; color: var(--text-tertiary);
  min-width: 16px;
}
.rx-med__name { flex: 1; font-size: 14.5px; font-weight: 750; letter-spacing: -.01em; }
.rx-med__form { font-size: 11px; font-weight: 650; color: var(--navy); background: var(--navy-50); padding: 3px 8px; border-radius: 6px; }
.rx-med__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 10px 0 0 24px;
}
.rx-med__cell small { display: block; font-size: 10px; color: var(--text-tertiary); margin-bottom: 2px; }
.rx-med__cell b { font-size: 12.5px; font-weight: 650; }
.rx-med__note { margin: 8px 0 0 24px; font-size: 11.5px; color: var(--text-secondary); font-style: italic; }

.rx__tests { display: grid; gap: 7px; }
.rx__tests li { display: flex; gap: 9px; font-size: 13px; }
.rx__tests li::before { content: "•"; color: var(--navy); font-weight: 700; }

.rx__followup {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--navy-50); border: 1px solid #E2EAF8;
}
.rx__followup .ic { color: var(--navy); flex: none; }
.rx__followup div { flex: 1; }
.rx__followup small { display: block; font-size: 11px; color: var(--text-secondary); }
.rx__followup b { font-size: 14px; font-weight: 750; }

.rx__sign {
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.rx__sign-left { font-size: 10.5px; color: var(--text-tertiary); line-height: 1.6; }
.rx__sign-right { text-align: center; }
.rx__scribble {
  width: 118px; height: 40px; margin-bottom: 4px;
}
.rx__sign-right b { display: block; font-size: 12px; font-weight: 750; }
.rx__sign-right small { display: block; font-size: 10px; color: var(--text-secondary); }
.rx__foot {
  padding: 10px 18px 12px; text-align: center;
  background: var(--navy-50); border-top: 1px solid var(--border);
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); font-weight: 650;
}

.rxcard { padding: 16px; margin-bottom: 12px; }
.rxcard__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.rxcard__meta { flex: 1; min-width: 0; }
.rxcard__doc { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.rxcard__date { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.rxcard__meds { display: grid; gap: 7px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.rxcard__meds li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.rxcard__meds .ic { color: var(--navy-300); flex: none; }
.rxcard__meds b { font-weight: 650; }
.rxcard__meds small { color: var(--text-tertiary); font-size: 11.5px; }
.rxcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.rxcard__follow { font-size: 12px; color: var(--text-secondary); }
.rxcard__follow b { color: var(--text-primary); }

.dose {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.dose__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dose__time {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-secondary);
}
.dose__time .ic { color: var(--navy); }
.dose__clock { margin-left: auto; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.dose__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.dose__item:first-of-type { border-top: 0; }
.dose__pill {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--navy-50); color: var(--navy);
}
.dose__text { flex: 1; min-width: 0; }
.dose__text strong { display: block; font-size: 14.5px; font-weight: 650; }
.dose__text small { font-size: 12px; color: var(--text-secondary); }
.dose__at { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.dose__btn {
  flex: none; min-height: 34px; padding: 0 13px;
  border: 1.5px solid var(--border-dark); border-radius: var(--r-pill);
  background: var(--surface); color: var(--navy);
  font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: all .18s var(--ease);
}
.dose__btn:hover { border-color: var(--navy); background: var(--navy-50); }
.dose__btn.is-taken { background: var(--success-bg); border-color: #BFE3D2; color: var(--success); cursor: default; }

/* ---------- 21. Plans, payment, success ---------- */
.plan-hero {
  position: relative; overflow: hidden;
  padding: 22px 20px; margin-bottom: 14px;
  border-radius: var(--r-xl); color: #fff;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 60%, var(--navy-deep) 100%);
  box-shadow: 0 18px 34px -22px rgba(22,44,92,.85);
}
.plan-hero::after {
  content: ""; position: absolute; right: -70px; top: -60px;
  width: 210px; height: 210px; border-radius: 50%; background: rgba(255,255,255,.055);
}
.plan-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
.plan-hero__eyebrow { font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.plan-hero__name { margin-top: 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; position: relative; }
.plan-hero__price { margin-top: 10px; display: flex; align-items: baseline; gap: 5px; position: relative; font-variant-numeric: tabular-nums; }
.plan-hero__price strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.plan-hero__price span { font-size: 13px; color: rgba(255,255,255,.66); }
.plan-hero__row {
  display: flex; gap: 10px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14); position: relative;
}
.plan-hero__row div { flex: 1; }
.plan-hero__row small { display: block; font-size: 11px; color: rgba(255,255,255,.6); margin-bottom: 3px; }
.plan-hero__row b { font-size: 14px; font-weight: 700; }

.plan-list { display: grid; gap: 12px; }
.plancard {
  position: relative; width: 100%; text-align: left;
  padding: 18px; padding-right: 54px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  cursor: pointer; transition: all .2s var(--ease);
}
.plancard:hover { border-color: var(--navy-300); }
.plancard.is-selected { border-color: var(--navy); background: var(--navy-50); box-shadow: var(--sh-2); }
.plancard__tag {
  position: absolute; top: -9px; right: 16px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
}
.plancard__name { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.plancard__price { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.plancard__price strong { font-size: 27px; font-weight: 800; letter-spacing: -.03em; }
.plancard__price span { font-size: 12.5px; color: var(--text-secondary); }
.plancard__per { margin-top: 4px; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.plancard__facts { display: grid; gap: 6px; margin-top: 14px; }
.plancard__facts li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.plancard__facts .ic { color: var(--success); flex: none; }
.plancard__radio {
  position: absolute; top: 20px; right: 18px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border-dark); transition: all .18s var(--ease);
}
.plancard__radio::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: #fff; transform: scale(0); transition: transform .18s var(--ease);
}
.plancard.is-selected .plancard__radio { border-color: var(--navy); background: var(--navy); }
.plancard.is-selected .plancard__radio::after { transform: scale(1); }
.plancard__save {
  display: inline-block; margin-top: 10px;
  padding: 4px 9px; border-radius: 7px;
  background: var(--success-bg); color: var(--success);
  font-size: 11px; font-weight: 700;
}

.foot-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 2px 4px; font-size: 13px; color: var(--text-secondary);
}
.foot-summary b { font-size: 16px; font-weight: 750; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.foot-summary small { display: block; font-size: 11.5px; color: var(--text-tertiary); }

.success {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 28px calc(28px + env(safe-area-inset-bottom));
  background: var(--surface); text-align: center; overflow-y: auto;
}
.success__mark {
  width: 84px; height: 84px; margin-bottom: 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--success-bg); color: var(--success);
  animation: pop .45s var(--ease) both;
}
.success__mark .ic { width: 40px; height: 40px; stroke-width: 2.4; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.success__title { font-size: 25px; font-weight: 800; letter-spacing: -.025em; }
.success__sub { margin: 10px 0 24px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }
.success__card { width: 100%; text-align: left; margin-bottom: 24px; }

.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.source {
  display: grid; justify-items: center; gap: 9px;
  padding: 18px 8px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 650; color: var(--text-secondary);
  cursor: pointer; transition: all .18s var(--ease);
}
.source:hover { border-color: var(--navy-300); }
.source__ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--navy-50); color: var(--navy); }
.source.is-selected { border-color: var(--navy); background: var(--navy-50); color: var(--navy); }
.source.is-selected .source__ic { background: var(--navy); color: #fff; }

.dropzone {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--navy-50); border: 1.5px dashed var(--navy-300);
  border-radius: var(--r-md);
}
.dropzone__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--navy); }
.dropzone div { flex: 1; min-width: 0; }
.dropzone strong { display: block; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone small { font-size: 11.5px; color: var(--text-secondary); }

.datepick { display: flex; gap: 9px; margin: 0 -20px; padding: 2px 20px 6px; overflow-x: auto; scrollbar-width: none; }
.datepick::-webkit-scrollbar { display: none; }
.dateitem {
  flex: none; width: 60px; padding: 11px 4px;
  display: grid; justify-items: center; gap: 3px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer;
  transition: all .18s var(--ease);
}
.dateitem small { font-size: 10.5px; font-weight: 650; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.dateitem b { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dateitem span { font-size: 10.5px; color: var(--text-tertiary); }
.dateitem:hover { border-color: var(--navy-300); }
.dateitem.is-selected { background: var(--navy); border-color: var(--navy); }
.dateitem.is-selected small, .dateitem.is-selected b, .dateitem.is-selected span { color: #fff; }

.timepick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.timeitem {
  min-height: 44px; padding: 0 6px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 650; color: var(--text-primary);
  cursor: pointer; transition: all .18s var(--ease);
  font-variant-numeric: tabular-nums;
}
.timeitem:hover { border-color: var(--navy-300); }
.timeitem.is-selected { background: var(--navy); border-color: var(--navy); color: #fff; }
.timeitem:disabled { background: var(--surface-2); color: var(--text-tertiary); cursor: not-allowed; text-decoration: line-through; }
.sheet__body .timepick { gap: 8px; }
.sheet__body .timeitem { min-height: 42px; font-size: 13px; }

/* ---------- 22. Chat ---------- */
.appbar--chat { padding: 6px 8px; }
.chathead {
  flex: 1; display: flex; align-items: center; gap: 11px;
  min-width: 0; padding: 4px 6px; border: 0; background: none;
  border-radius: var(--r-sm); cursor: pointer; text-align: left;
}
.chathead:hover { background: var(--navy-50); }
.chathead__text { min-width: 0; }
.chathead__text strong { display: block; font-size: 15px; font-weight: 700; }
.chathead__text small { display: flex; align-items: center; font-size: 11.5px; color: var(--text-secondary); }

.chat {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 10px;
  background: var(--background);
}
.chat__day { align-self: center; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(31,59,120,.07); font-size: 11px; font-weight: 650; color: var(--text-secondary); }
.msg { max-width: 78%; }
.msg--in { align-self: flex-start; }
.msg--out { align-self: flex-end; }
.msg__bubble {
  padding: 11px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.5;
  box-shadow: var(--sh-1);
}
.msg--in .msg__bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.msg--out .msg__bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.msg__time { margin-top: 4px; font-size: 10.5px; color: var(--text-tertiary); padding: 0 4px; }
.msg--out .msg__time { text-align: right; }
.msg__attach {
  display: flex; align-items: center; gap: 11px;
  margin-top: 8px; padding: 11px 12px;
  border-radius: 14px; background: rgba(255,255,255,.14);
  cursor: pointer; border: 0; width: 100%; text-align: left; color: inherit;
}
.msg--in .msg__attach { background: var(--navy-50); }
.msg__attach .ic { flex: none; }
.msg__attach div { flex: 1; min-width: 0; }
.msg__attach strong { display: block; font-size: 13px; font-weight: 650; }
.msg__attach small { font-size: 11px; opacity: .75; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

.composer {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  background: var(--surface); border-top: 1px solid var(--border);
}
.composer__input {
  flex: 1; min-height: 44px; padding: 11px 16px;
  font: inherit; font-size: 15px;
  background: var(--background); border: 1px solid var(--border);
  border-radius: var(--r-pill); color: var(--text-primary);
}
.composer__input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31,59,120,.09); }
.chat__note {
  flex: none; padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); text-align: center;
  font-size: 10.5px; color: var(--text-tertiary);
}

.notif {
  display: flex; gap: 13px; width: 100%; text-align: left;
  padding: 14px 15px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  transition: all .18s var(--ease);
}
.notif:hover { border-color: var(--navy-300); }
.notif.is-unread { background: #F8FAFF; border-color: #D9E3F6; }
.notif__ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; }
.notif__body { flex: 1; min-width: 0; }
.notif__title { display: flex; align-items: baseline; gap: 8px; }
.notif__title strong { flex: 1; font-size: 14px; font-weight: 650; }
.notif__title time { font-size: 11px; color: var(--text-tertiary); flex: none; }
.notif__text { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); flex: none; margin-top: 6px; }

.profile-hero {
  padding: 24px 20px 20px; margin-bottom: 16px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-1);
}
.profile-hero .avatar { margin: 0 auto 14px; }
.profile-hero__name { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.profile-hero__meta { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.profile-hero__uhid { margin-top: 8px; font-size: 11.5px; color: var(--text-tertiary); letter-spacing: .02em; }
.profile-hero__uhid b { color: var(--navy); font-weight: 700; }
.profile-hero__tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; }

.doc-page h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.doc-page h3 { font-size: 14.5px; font-weight: 700; margin: 20px 0 6px; }
.doc-page p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); }

/* ---------- 23. Overlays ---------- */
.scrim {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(11,21,44,.42);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .24s var(--ease);
}
.scrim.is-open { opacity: 1; }
.scrim[hidden] { display: none; }

.sheet-host {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -18px 44px -22px rgba(11,21,44,.5);
  transform: translateY(100%);
  transition: transform .3s var(--ease);
  max-height: 88%;
  display: flex; flex-direction: column;
}
.sheet-host[hidden] { display: none; }
.sheet-host.is-open { transform: none; }
.sheet__grip { width: 40px; height: 4px; border-radius: 99px; background: #D6DCE9; margin: 10px auto 4px; flex: none; }
.sheet__head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 20px 12px;
}
.sheet__head h2 { flex: 1; font-size: 17px; font-weight: 750; letter-spacing: -.015em; }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 8px; }
.sheet__body p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.sheet__foot {
  flex: none; display: grid; gap: 8px;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
}
.sheet__foot--row { grid-template-columns: 1fr 1fr; }

.toast-host {
  position: absolute; left: 16px; right: 16px; bottom: 90px; z-index: 80;
  display: grid; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: var(--r);
  background: var(--navy-deep); color: #fff;
  font-size: 13.5px; font-weight: 550; line-height: 1.45;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
  animation: toastIn .28s var(--ease) both;
}
.toast.is-out { animation: toastOut .24s var(--ease) both; }
.toast .ic { flex: none; }
.toast--success .ic { color: #5BD9A3; }
.toast--alert { background: var(--accent-dark); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- 24. Desktop aside & responsive ---------- */
/* Decorative flourishes are absolutely positioned, so they paint above the
   header content and would swallow taps. They are purely visual. */
.hero::after,
.vhero::after, .vhero::before,
.sstep::after,
.metric-head::after,
.homehead::after,
.sechead::after,
.plan-hero::after,
.remote::before { pointer-events: none; }

.stage__aside { display: none; max-width: 330px; }
.stage__logo {
  width: 210px; margin-bottom: 26px; padding: 14px 16px;
  background: #fff; border-radius: var(--r-md);
  box-shadow: 0 2px 10px rgba(16,32,66,.06);
  box-sizing: content-box;
}
.stage__aside h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.stage__aside p { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); }
.stage__facts { margin-top: 26px; display: grid; gap: 14px; }
.stage__facts div { padding-left: 14px; border-left: 3px solid var(--navy-100); }
.stage__facts dt { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.stage__facts dd { margin: 3px 0 0; font-size: 13.5px; color: var(--text-primary); font-weight: 600; }

@media (min-width: 1080px) { .stage__aside { display: block; } }

@media (max-width: 900px) { .stage { gap: 0; } }

/* Tablet: keep the framed app, just centred */
@media (max-width: 760px) and (min-width: 641px) {
  .stage { padding: 28px 16px; }
}

/* Phone: full-bleed app, no frame */
@media (max-width: 640px) {
  .stage { padding: 0; min-height: 100dvh; background: var(--background); }
  .device {
    width: 100%; height: 100dvh; padding: 0;
    border-radius: 0; background: var(--background); box-shadow: none;
  }
  .device__hw { display: none; }
  .app { border-radius: 0; padding-top: env(safe-area-inset-top); }
  .statusbar { display: none; }
  .toast-host { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .metric-grid, .stat-grid, .cat-grid { gap: 8px; }
  .quick { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .hero__value strong { font-size: 38px; }
  .otp { gap: 6px; }
  .otp__box { height: 52px; font-size: 19px; }
}

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

@media print {
  .stage { display: block; padding: 0; background: #fff; }
  .device { width: 100%; height: auto; padding: 0; box-shadow: none; }
  .app { height: auto; border-radius: 0; }
  .tabbar, .appbar, .screen__foot, .statusbar, .stage__aside { display: none !important; }
  .screen { position: static; opacity: 1; visibility: visible; transform: none; display: none; }
  .screen.is-active { display: block; }
}

/* ==========================================================================
   Diet & nutrition
   ========================================================================== */
.metric-head--diet .hero__ic { background: rgba(255,255,255,.18); }
.sectionline-p { margin: 20px 0 10px; }

.nutri { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ntarget {
  padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.ntarget__top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.ntarget__ic {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--navy-50); color: var(--navy);
}
.ntarget__ic .ic { width: 14px; height: 14px; }
.ntarget__name { font-size: 11.5px; font-weight: 650; color: var(--text-secondary); }
.ntarget__value {
  display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.ntarget__value strong { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
.ntarget__value span { font-size: 11px; font-weight: 650; color: var(--text-tertiary); }
.ntarget__bar { height: 6px; border-radius: 99px; background: #E6EBF5; overflow: hidden; margin-top: 9px; }
.ntarget__bar span { display: block; height: 100%; border-radius: 99px; background: var(--navy); transition: width .4s var(--ease); }
.ntarget__foot { margin-top: 7px; font-size: 10.5px; font-weight: 650; color: var(--text-tertiary); }
.ntarget--warn .ntarget__bar span { background: var(--warning); }
.ntarget--warn .ntarget__foot { color: var(--warning); }
.ntarget--over .ntarget__bar span { background: var(--accent); }
.ntarget--over .ntarget__foot { color: var(--accent); }
.ntarget--over .ntarget__value strong { color: var(--accent); }

.mealgroup {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.mealgroup__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mealgroup__name {
  flex: 1; font-size: 12px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-secondary);
}
.mealgroup__kcal { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.fooditem { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.fooditem:first-of-type { border-top: 0; }
.fooditem__ic {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 11px; background: var(--navy-50); color: var(--navy);
}
.fooditem__ic--salty { background: var(--warning-bg); color: var(--warning); }
.fooditem__text { flex: 1; min-width: 0; }
.fooditem__text strong { display: block; font-size: 14px; font-weight: 650; }
.fooditem__text small { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fooditem__del {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-tertiary);
  cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease);
}
.fooditem__del:hover { background: var(--accent-50); color: var(--accent); }

.foodrow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  transition: all .16s var(--ease);
}
.foodrow:hover { border-color: var(--navy-300); box-shadow: var(--sh-1); }
.foodrow__text { flex: 1; min-width: 0; }
.foodrow__text strong { display: block; font-size: 14.5px; font-weight: 650; }
.foodrow__text small { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.foodrow__na {
  flex: none; text-align: right; font-variant-numeric: tabular-nums;
}
.foodrow__na b { display: block; font-size: 13.5px; font-weight: 750; }
.foodrow__na small { display: block; font-size: 10px; color: var(--text-tertiary); }
.foodrow--salty .foodrow__na b { color: var(--warning); }

.portion { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 14px; }
.portion__btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1.5px solid var(--border-dark); border-radius: 50%;
  background: var(--surface); color: var(--navy); cursor: pointer;
  transition: all .16s var(--ease);
}
.portion__btn:hover { border-color: var(--navy); background: var(--navy-50); }
.portion__btn:disabled { opacity: .4; cursor: not-allowed; }
.portion__value { min-width: 90px; text-align: center; }
.portion__value b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.portion__value small { display: block; font-size: 11.5px; color: var(--text-secondary); }