:root {
  color-scheme: light;
  --olyvn-primary: #38BDF8;
  --olyvn-secondary: #7DD3FC;
  --olyvn-accent: #BAE6FD;
  --olyvn-deep-blue: #0EA5E9;
  --olyvn-soft-blue: #E0F2FE;
  --olyvn-bg: #F0F9FF;
  --olyvn-card-bg: #FFFFFF;
  --olyvn-text: #0F172A;
  --olyvn-muted: #64748B;
  --olyvn-white: #FFFFFF;
  --olyvn-gradient-main: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 55%, #BAE6FD 100%);
  --olyvn-gradient-soft: linear-gradient(135deg, #7DD3FC 0%, #BAE6FD 60%, #E0F2FE 100%);
  --olyvn-gradient-clean: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #BAE6FD 100%);
  --health-bg-gradient: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #FFFFFF 100%);
  --heart-rate-red: #EF4444;
  --heart-rate-deep-red: #DC2626;
  --bpm-red: var(--heart-rate-red);
  --connected-green: #22C55E;
  --connected-dark-green: #16A34A;
  --disconnected-gray: #94A3B8;
  --warning-orange: #F97316;
  --peak-red-orange: #F43F5E;
  --ink: var(--olyvn-text);
  --muted: var(--olyvn-muted);
  --panel: var(--olyvn-card-bg);
  --panel-soft: #F8FCFF;
  --line: #CBD5E1;
  --blue-line: #BAE6FD;
  --soft: var(--olyvn-soft-blue);
  --green: var(--connected-green);
  --green-dark: var(--connected-dark-green);
  --teal: var(--olyvn-primary);
  --red: var(--heart-rate-red);
  --amber: var(--warning-orange);
  --violet: #6366F1;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --tap-target: 44px;
  --shadow: 0 24px 70px rgba(14, 165, 233, 0.12);
  --shadow-soft: 0 12px 34px rgba(14, 165, 233, 0.09);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--health-bg-gradient);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--health-bg-gradient);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --ink: var(--olyvn-text);
    --muted: var(--olyvn-muted);
    --panel: var(--olyvn-card-bg);
    --panel-soft: #F8FCFF;
    --line: #CBD5E1;
    --soft: var(--olyvn-soft-blue);
    --shadow: 0 24px 70px rgba(14, 165, 233, 0.12);
    --shadow-soft: 0 12px 34px rgba(14, 165, 233, 0.09);
  }

  body {
    background: var(--health-bg-gradient);
  }

  .monitor-panel,
  .auth-card {
    background: rgba(255, 255, 255, 0.96);
  }

  .date-picker-popover {
    background: rgba(255, 255, 255, 0.98);
  }
}

@supports (-webkit-touch-callout: none) {
  body,
  .auth-screen {
    min-height: -webkit-fill-available;
  }
}

[dir="rtl"] body {
  text-align: right;
}

[dir="rtl"] .topbar,
[dir="rtl"] .timeline-head,
[dir="rtl"] .device-head,
[dir="rtl"] .metric-strip,
[dir="rtl"] .nutrition-hero,
[dir="rtl"] .goal-row,
[dir="rtl"] .billing-panel,
[dir="rtl"] .calendar-footer {
  flex-direction: row-reverse;
}

[dir="rtl"] .top-actions {
  justify-content: flex-start;
}

[dir="rtl"] .auth-card,
[dir="rtl"] .control-panel,
[dir="rtl"] .nutrition-panel,
[dir="rtl"] .timeline,
[dir="rtl"] .device-card {
  direction: rtl;
}

[dir="rtl"] .language-picker,
[dir="rtl"] .sync-pill,
[dir="rtl"] .user-pill,
[dir="rtl"] .status-badge,
[dir="rtl"] .source-badge,
[dir="rtl"] .source-button,
[dir="rtl"] .google-button {
  flex-direction: row-reverse;
}

[dir="rtl"] .source-button {
  justify-content: flex-end;
  text-align: right;
}

[dir="rtl"] .auth-tabs,
[dir="rtl"] .source-toggle,
[dir="rtl"] .display-toggle,
[dir="rtl"] .mobile-source-bar,
[dir="rtl"] .nutrition-dashboard,
[dir="rtl"] .macro-stack,
[dir="rtl"] .device-grid {
  direction: rtl;
}

[dir="rtl"] .calendar-toolbar {
  direction: rtl;
}

[dir="rtl"] .calendar-toolbar strong {
  text-align: right;
}

[dir="rtl"] .metric-strip strong,
[dir="rtl"] .metric-strip span,
[dir="rtl"] .macro-card,
[dir="rtl"] .goal-row,
[dir="rtl"] .nutrition-note,
[dir="rtl"] .decision-copy {
  text-align: right;
}

[dir="rtl"] .heart-rate span:last-child {
  margin-right: 8px;
  margin-left: 0;
}

[dir="rtl"] .heart-rate {
  direction: ltr;
}

[dir="rtl"] .auth-form input {
  text-align: right;
}

[dir="rtl"] #reading-list li {
  direction: rtl;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input,
select,
textarea {
  font: inherit;
  font-size: 16px;
}

button,
input,
select,
label,
a {
  -webkit-tap-highlight-color: rgba(56, 189, 248, 0.18);
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background: var(--health-bg-gradient);
}

.auth-card {
  display: grid;
  gap: 18px;
  width: min(100%, 460px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.auth-card h1 {
  margin-bottom: 8px;
  font-size: 2.6rem;
  letter-spacing: 0;
}

.auth-copy,
.auth-message {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.google-button,
.stripe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

.google-button {
  width: 100%;
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--blue-line);
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.1);
  opacity: 1;
  text-shadow: none;
}

.google-button:hover {
  border-color: rgba(66, 133, 244, 0.38);
  background: #F8FCFF;
  box-shadow: 0 14px 34px rgba(66, 133, 244, 0.14);
}

.google-icon {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: #4285f4;
  font-weight: 950;
}

.google-button span:not(.google-icon) {
  min-width: 0;
  color: var(--ink);
  background: transparent;
  opacity: 1;
  -webkit-text-fill-color: var(--ink);
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.auth-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
  opacity: 1;
  -webkit-text-fill-color: var(--ink);
}

.auth-tab.active {
  color: #fff;
  border-color: var(--olyvn-primary);
  background: var(--olyvn-primary);
  box-shadow: 0 10px 24px rgba(56, 189, 248, 0.22);
  -webkit-text-fill-color: #fff;
}

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

.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.auth-form input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 16px;
}

.auth-text-button {
  justify-self: end;
  min-height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0;
  color: var(--olyvn-deep-blue);
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
}

.auth-text-button:hover,
.auth-text-button:focus-visible {
  color: var(--olyvn-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

.app-shell {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding:
    max(28px, env(safe-area-inset-top))
    max(0px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(0px, env(safe-area-inset-left));
}

.monitor-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(186, 230, 253, 0.88);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 26px;
  backdrop-filter: blur(18px);
}

.topbar,
.timeline-head,
.device-head,
.metric-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 900;
}

.profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid rgba(186, 230, 253, 0.96);
  border-radius: 999px;
  color: #075985;
  background: linear-gradient(135deg, #E0F2FE 0%, #FFFFFF 100%);
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.14);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-pill button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  background: var(--olyvn-primary);
  font-weight: 900;
  cursor: pointer;
}

.billing-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: var(--radius-md);
  padding: 18px;
  background: rgba(249, 115, 22, 0.08);
}

.billing-panel h2,
.billing-panel p {
  margin-bottom: 0;
}

.date-selector-shell {
  position: relative;
  display: inline-grid;
  justify-items: start;
  margin-top: 20px;
}

.date-selector-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 0 18px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.date-selector-button:hover,
.date-selector-button[aria-expanded="true"] {
  border-color: rgba(14, 165, 233, 0.46);
  box-shadow: 0 18px 44px rgba(14, 165, 233, 0.18);
}

.date-selector-icon {
  color: var(--muted);
  font-size: 0.8rem;
}

.date-picker-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  left: 0;
  width: min(414px, calc(100vw - 24px));
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(14, 165, 233, 0.2);
}

.calendar-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 20px;
  color: var(--olyvn-text);
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 100%);
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 1fr 44px 44px;
  align-items: center;
  gap: 10px;
}

.calendar-toolbar strong {
  color: var(--olyvn-text);
  font-size: 1.08rem;
  text-align: left;
}

.calendar-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  color: var(--olyvn-text);
  background: transparent;
  font-size: 1.85rem;
  font-weight: 400;
  cursor: pointer;
}

.calendar-nav:hover,
.calendar-day:hover {
  background: rgba(255, 255, 255, 0.5);
}

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

.calendar-weekdays span {
  text-align: center;
  color: var(--olyvn-muted);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 0;
  border-radius: 4px;
  color: var(--olyvn-text);
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.calendar-day::before {
  content: "";
  position: absolute;
  inset: 7px 0;
  z-index: -1;
  background: transparent;
}

.calendar-day.outside-month {
  color: rgba(100, 116, 139, 0.58);
}

.calendar-day.has-data:not(.range-start):not(.range-end) {
  box-shadow: inset 0 -3px 0 rgba(14, 165, 233, 0.72);
}

.calendar-day.locked-date {
  color: rgba(100, 116, 139, 0.36);
  cursor: not-allowed;
  opacity: 0.62;
}

.calendar-day.future-date,
.calendar-day:disabled {
  color: rgba(100, 116, 139, 0.32);
  cursor: not-allowed;
  opacity: 0.52;
}

.calendar-day.locked-date:hover,
.calendar-day.future-date:hover,
.calendar-day:disabled:hover {
  background: transparent;
}

.calendar-day.today {
  box-shadow: inset 0 0 0 1px var(--olyvn-deep-blue);
}

.calendar-day.in-range::before {
  background: rgba(14, 165, 233, 0.18);
}

.calendar-day.range-start,
.calendar-day.range-end {
  color: var(--olyvn-white);
  background: var(--olyvn-deep-blue);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.78);
}

.calendar-day.range-start::before,
.calendar-day.range-end::before {
  background: rgba(14, 165, 233, 0.18);
}

.calendar-day.range-start::before {
  left: 50%;
  border-radius: 999px 0 0 999px;
}

.calendar-day.range-end::before {
  right: 50%;
  border-radius: 0 999px 999px 0;
}

.calendar-day.range-start.range-end::before {
  display: none;
}

.calendar-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.calendar-text-button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  padding: 0 8px;
  color: var(--olyvn-deep-blue);
  background: transparent;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.calendar-text-button:hover {
  background: rgba(14, 165, 233, 0.12);
}

.calendar-text-button.active {
  color: var(--olyvn-white);
  background: var(--olyvn-deep-blue);
}

.stripe-button {
  min-width: 160px;
  color: #fff;
  border-color: var(--olyvn-primary);
  background: var(--olyvn-primary);
}

.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 800;
}

.auth-language-picker {
  justify-content: space-between;
  width: 100%;
}

.language-picker select {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: var(--olyvn-soft-blue);
  font: inherit;
  outline: none;
  padding: 0 8px;
}

.eyebrow,
.device-kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 3rem;
  line-height: 0.95;
}

h2 {
  margin-bottom: 14px;
  font-size: 1rem;
}

.sync-pill,
.status-badge,
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.source-badge {
  width: fit-content;
  max-width: 100%;
  min-height: calc(var(--tap-target) - var(--space-3));
  border-color: rgba(186, 230, 253, 0.82);
  padding: var(--space-1) var(--space-3);
  color: #64748B;
  background: #F8FCFF;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.2;
  white-space: normal;
}

.source-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #38BDF8;
}

.source-badge-center {
  justify-content: center;
  margin: var(--space-1) auto 0;
}

.status-badge {
  color: var(--muted);
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--disconnected-gray);
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--disconnected-gray);
}

.sync-pill.live {
  color: var(--connected-dark-green);
  background: #DCFCE7;
  border-color: rgba(34, 197, 94, 0.32);
}

.sync-pill.connected {
  color: var(--connected-dark-green);
  background: #DCFCE7;
  border-color: rgba(34, 197, 94, 0.32);
}

.status-badge.connected {
  background: #DCFCE7;
  color: var(--connected-dark-green);
  border-color: rgba(34, 197, 94, 0.32);
}

.status-badge.connected::before {
  background: var(--connected-green);
}

.status-badge.stale,
.sync-pill.stale {
  color: #C2410C;
  background: #FFF7ED;
  border-color: rgba(249, 115, 22, 0.34);
}

.status-badge.stale::before,
.sync-pill.stale .dot {
  background: var(--warning-orange);
}

.sync-pill.live .dot {
  background: var(--connected-green);
}

.sync-pill.connected .dot {
  background: var(--connected-green);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 430px);
  gap: 20px;
  margin-top: 22px;
}

.heart-card,
.control-panel,
.device-card,
.nutrition-panel,
.timeline {
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.heart-card {
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.9)),
    var(--panel);
}

.ring {
  display: grid;
  place-items: center;
  width: min(360px, 100%);
  aspect-ratio: 1;
  margin: 0 auto 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--panel) 0 56%, transparent 57%),
    conic-gradient(from 135deg, var(--heart-rate-red) 0deg, var(--warning-orange) var(--progress, 0deg), var(--olyvn-soft-blue) 0);
  box-shadow: 0 18px 46px rgba(239, 68, 68, 0.12);
  text-align: center;
}

.heart-icon {
  display: block;
  color: var(--heart-rate-red);
  font-size: 3rem;
  line-height: 1;
}

.metric-label {
  margin: 12px 0 4px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

.heart-rate {
  margin-bottom: 0;
  color: var(--heart-rate-deep-red);
  font-size: 5.6rem;
  font-weight: 900;
  line-height: 0.9;
}

.heart-rate span:last-child {
  margin-left: 8px;
  color: var(--heart-rate-red);
  font-size: 1rem;
  font-weight: 800;
}

.last-updated-text {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 850;
}

.metric-strip {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.metric-strip div {
  min-width: 0;
}

.metric-strip span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.metric-strip strong {
  display: block;
  margin-top: 2px;
}

.control-panel {
  align-self: start;
  padding: 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FCFF 100%);
}

.source-toggle {
  display: grid;
  gap: 10px;
}

.source-button,
.mobile-source-button,
.connect-button,
.ghost-button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.source-button {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 0 14px;
  color: var(--ink);
  background: #FFFFFF;
  font-weight: 800;
}

.source-button:hover,
.connect-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.connect-button:hover,
.photo-button:hover,
.stripe-button:hover,
.user-pill button:hover {
  border-color: var(--olyvn-deep-blue);
  background: var(--olyvn-deep-blue);
}

.connect-button.disconnect:hover {
  color: var(--heart-rate-deep-red);
  border-color: rgba(220, 38, 38, 0.44);
  background: #FEF2F2;
}

.ghost-button:hover,
.source-button:hover,
.display-button:hover {
  border-color: var(--olyvn-primary);
  background: #F0F9FF;
}

.source-button[aria-checked="true"] {
  border-color: var(--olyvn-primary);
  background: #E0F2FE;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.16), 0 10px 24px rgba(56, 189, 248, 0.12);
}

.source-button[data-source="best"][aria-checked="true"] {
  border-color: rgba(34, 197, 94, 0.45);
  background: #DCFCE7;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.16), 0 10px 24px rgba(34, 197, 94, 0.12);
}

.source-mark {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--muted);
}

.whoop-mark {
  background: var(--red);
}

.garmin-mark {
  background: var(--teal);
}

.oura-mark {
  background: var(--violet);
}

.withings-mark {
  background: var(--olyvn-deep-blue);
}

.best-mark {
  background: var(--connected-green);
}

.decision-copy {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.display-panel {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

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

.display-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: #FFFFFF;
  font-weight: 900;
  cursor: pointer;
}

.display-button[aria-checked="true"] {
  color: #fff;
  border-color: var(--olyvn-primary);
  background: var(--olyvn-primary);
  box-shadow: 0 10px 24px rgba(56, 189, 248, 0.18);
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.mobile-source-bar {
  display: none;
}

.device-card {
  padding: 20px;
  border-color: var(--blue-line);
  background: #FFFFFF;
}

.device-card.connected {
  border-color: rgba(34, 197, 94, 0.36);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.08), 0 12px 34px rgba(34, 197, 94, 0.08);
}

.device-head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.status-badge {
  font-size: 0.82rem;
  font-weight: 800;
}

.device-metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 12px;
}

.device-metric span {
  color: var(--bpm-red);
  font-size: 3rem;
  font-weight: 900;
}

.device-metric small {
  color: var(--bpm-red);
  font-weight: 800;
}

.hr-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.hr-stats span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-sm);
  padding: 8px;
  color: var(--muted);
  background: #F8FCFF;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.hr-stats b {
  color: var(--ink);
  font-size: 1rem;
}

.bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 6px;
  height: 58px;
  margin-bottom: 18px;
}

.bars span {
  border-radius: 999px;
  background: var(--soft);
  min-height: 14px;
}

.device-card.connected .bars span {
  background: linear-gradient(180deg, var(--connected-green), var(--connected-dark-green));
}

.bars span:nth-child(1) { height: 34%; }
.bars span:nth-child(2) { height: 62%; }
.bars span:nth-child(3) { height: 45%; }
.bars span:nth-child(4) { height: 80%; }
.bars span:nth-child(5) { height: 56%; }

.bpm-chart-button {
  position: relative;
  display: grid;
  align-items: center;
  width: 100%;
  height: 78px;
  margin: 0 0 18px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 8px;
  color: var(--muted);
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%);
  cursor: pointer;
  overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.bpm-chart-button:hover {
  transform: translateY(-1px);
  border-color: rgba(239, 68, 68, 0.38);
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.1);
}

.bpm-chart-button .chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.bpm-chart-button.has-data .chart-empty {
  display: none;
}

.bpm-sparkline {
  width: 100%;
  height: 100%;
}

.chart-grid {
  stroke: #E0F2FE;
  stroke-width: 1;
}

.chart-axis {
  stroke: #94A3B8;
  stroke-width: 1.4;
}

.chart-tick {
  stroke: #94A3B8;
  stroke-width: 1.2;
}

.chart-area {
  fill: rgba(239, 68, 68, 0.12);
}

.chart-line {
  fill: none;
  stroke: var(--heart-rate-red);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-point {
  fill: #FFFFFF;
  stroke: var(--heart-rate-deep-red);
  stroke-width: 3;
}

.chart-point.active {
  fill: var(--heart-rate-red);
  stroke: #FFFFFF;
}

.bpm-history-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(10px);
}

.bpm-history-card {
  display: grid;
  gap: 16px;
  width: min(920px, 100%);
  max-height: min(820px, calc(100svh - 36px));
  overflow: auto;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 22px;
  color: var(--ink);
  background: #FFFFFF;
  box-shadow: 0 30px 90px rgba(14, 165, 233, 0.2);
}

.bpm-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.bpm-history-head h2 {
  margin: 0;
  font-size: 1.8rem;
}

.bpm-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.bpm-history-summary span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-sm);
  padding: 10px;
  color: var(--muted);
  background: #F8FCFF;
  font-size: 0.78rem;
  font-weight: 850;
}

.bpm-history-summary strong {
  color: var(--ink);
  font-size: 1.35rem;
}

.bpm-history-chart-shell {
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%);
}

#bpm-history-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
}

#bpm-history-chart .chart-point {
  cursor: pointer;
}

.chart-label {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.chart-tick-label {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.chart-axis-title {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.chart-value-label {
  fill: var(--heart-rate-deep-red);
  font-size: 14px;
  font-weight: 900;
}

.bpm-history-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bpm-history-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--muted);
  background: #FFFFFF;
}

.bpm-history-list li.active {
  border-color: rgba(239, 68, 68, 0.38);
  background: #FEF2F2;
}

.bpm-history-list strong {
  color: var(--heart-rate-deep-red);
}

.connect-button {
  width: 100%;
  color: #fff;
  background: var(--olyvn-primary);
  border-color: var(--olyvn-primary);
  font-weight: 900;
  opacity: 1;
  -webkit-text-fill-color: #fff;
}

.connect-button.disconnect {
  color: var(--heart-rate-deep-red);
  background: #FFFFFF;
  border-color: rgba(220, 38, 38, 0.34);
  -webkit-text-fill-color: var(--heart-rate-deep-red);
}

.ghost-button {
  padding: 0 16px;
  color: var(--ink);
  border-color: var(--blue-line);
  background: #FFFFFF;
  font-weight: 800;
}

.ghost-button.danger {
  color: #B91C1C;
  border-color: #FECACA;
  background: #FEF2F2;
}

.health-sources-panel {
  margin-top: 20px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-soft);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-head h2 {
  margin: 0;
  font-size: 1.45rem;
}

.health-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.health-source-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 16px;
  background: #FFFFFF;
}

.health-source-card.connected {
  border-color: rgba(34, 197, 94, 0.36);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.08);
}

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

.health-source-head h3,
.health-source-copy,
.health-source-meta,
.health-source-error {
  margin: 0;
}

.health-source-head h3 {
  font-size: 1.16rem;
}

.health-source-copy,
.health-source-meta {
  color: var(--muted);
  line-height: 1.45;
}

.health-source-error {
  min-height: 1.3em;
  color: #B91C1C;
  font-weight: 800;
}

.metric-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.metric-chips span {
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  background: #F0F9FF;
  font-size: 0.76rem;
  font-weight: 850;
}

.health-source-actions {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr;
  gap: 8px;
}

.nutrition-panel {
  margin-top: 20px;
  padding: 22px;
  background: var(--panel);
}

.nutrition-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.nutrition-hero h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1;
}

.nutrition-hero input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.photo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 134px;
  min-height: 50px;
  border: 1px solid var(--olyvn-primary);
  border-radius: var(--radius-md);
  color: #fff;
  background: var(--olyvn-primary);
  font-weight: 900;
  cursor: pointer;
}

.goal-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.goal-editor label,
.tracking-card {
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}

.goal-editor label {
  display: grid;
  gap: 8px;
  padding: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.goal-editor input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
}

.tracking-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.tracking-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.tracking-card > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.tracking-card strong {
  font-size: 2.6rem;
  line-height: 0.95;
}

.tracking-card small {
  color: var(--muted);
  font-weight: 800;
}

.tracking-card .metric-goal,
.calorie-card .goal-row,
.macro-card .metric-goal,
.macro-rings .metric-goal,
.micro-tracker-row .metric-goal {
  margin-top: auto;
  color: #64748B;
  font-size: 0.72rem;
  font-weight: 850;
}

.nutrition-dashboard {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(200px, 0.7fr) minmax(220px, 0.8fr);
  gap: 14px;
  align-items: stretch;
}

.calorie-card,
.macro-card,
.food-preview-card {
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}

.calorie-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.calorie-ring {
  display: grid;
  place-items: center;
  width: min(210px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--panel) 0 56%, transparent 57%),
    conic-gradient(var(--warning-orange) var(--calorie-progress, 0deg), var(--olyvn-soft-blue) 0);
  text-align: center;
}

.calorie-ring span {
  display: block;
  font-size: 4rem;
  font-weight: 950;
  line-height: 0.9;
}

.calorie-ring small {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.76rem;
}

.goal-row strong {
  color: var(--ink);
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--olyvn-soft-blue);
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--olyvn-primary), var(--warning-orange), var(--peak-red-orange));
  transition: width 250ms ease;
}

.macro-stack {
  display: grid;
  gap: 14px;
}

.macro-card {
  display: grid;
  align-content: stretch;
  gap: 6px;
  min-height: 120px;
  padding: 16px;
}

.macro-card span,
.nutrition-note {
  color: var(--muted);
}

.macro-card strong {
  font-size: 2.5rem;
  line-height: 0.95;
}

.macro-card small {
  color: var(--muted);
  font-weight: 800;
}

.protein-card {
  border-color: rgba(14, 165, 233, 0.2);
  background: rgba(56, 189, 248, 0.08);
}

.meal-card {
  border-color: rgba(249, 115, 22, 0.22);
  background: rgba(249, 115, 22, 0.08);
}

.food-preview-card {
  display: grid;
  grid-template-rows: minmax(180px, 1fr) auto;
  gap: 12px;
  padding: 12px;
}

.food-preview {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--muted);
  background: var(--panel);
  font-size: 0.78rem;
  text-align: center;
}

.food-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nutrition-note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.meal-log {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.meal-log-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.meal-log-head h3 {
  margin: 0;
  font-size: 1rem;
}

.meal-log-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.meal-photo-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.meal-photo-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--panel-soft);
}

.meal-photo-card img,
.meal-photo-placeholder {
  width: 96px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--soft);
}

.meal-photo-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
}

.meal-nutrients {
  display: grid;
  gap: 8px;
}

.meal-nutrients strong {
  font-size: 1.15rem;
}

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

.nutrient-grid span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  color: var(--muted);
  background: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
}

.nutrient-grid b {
  color: var(--ink);
}

.nutrient-grid.secondary span {
  background: #FFF7ED;
}

.low-confidence-estimates {
  padding: 10px;
}

.low-confidence-estimates summary {
  font-size: 0.84rem;
}

.meal-log-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  color: var(--muted);
  background: var(--panel-soft);
  text-align: center;
}

.timeline {
  margin-top: 20px;
  padding: 22px;
}

.timeline h2 {
  margin: 0;
}

#reading-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

#reading-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--muted);
}

#reading-list strong {
  color: var(--bpm-red);
}

@media (max-width: 820px) {
  body {
    background: var(--health-bg-gradient);
  }

  .app-shell {
    width: 100%;
    padding: 0;
  }

  .monitor-panel {
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: max(14px, env(safe-area-inset-top)) 12px max(90px, env(safe-area-inset-bottom));
  }

  .topbar,
  .hero-grid,
  .health-source-grid,
  .health-source-actions,
  .device-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sync-pill {
    justify-self: start;
  }

  .top-actions {
    justify-content: start;
  }

  .language-picker {
    width: 100%;
    justify-content: space-between;
  }

  .user-pill,
  .billing-panel,
  .date-selector-shell {
    width: 100%;
  }

  .billing-panel {
    display: grid;
  }

  .date-selector-button,
  .date-picker-popover {
    width: 100%;
  }

  .date-picker-popover {
    position: static;
    margin-top: 10px;
  }

  .stripe-button {
    width: 100%;
  }

  .language-picker select {
    max-width: 62%;
  }

  h1 {
    font-size: 2.35rem;
  }

  .hero-grid {
    gap: 12px;
    margin-top: 16px;
  }

  .heart-card,
  .control-panel,
  .device-card,
  .nutrition-panel,
  .timeline {
    border-radius: var(--radius-md);
  }

  .heart-card {
    padding: 14px;
  }

  .ring {
    width: min(72vw, 300px);
    margin-bottom: 14px;
  }

  .heart-icon {
    font-size: 2.25rem;
  }

  .heart-rate {
    font-size: 4.8rem;
  }

  .metric-strip {
    align-items: stretch;
    gap: 8px;
  }

  .metric-strip strong {
    font-size: 0.92rem;
  }

  .control-panel {
    padding: 14px;
  }

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

  .source-button {
    justify-content: center;
    min-height: 50px;
    padding: 0 8px;
    font-size: 0.82rem;
    text-align: center;
  }

  .source-mark {
    display: none;
  }

  .decision-copy {
    font-size: 0.92rem;
  }

  .display-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .display-button {
    min-height: 50px;
    font-size: 0.86rem;
  }

  .device-grid {
    gap: 12px;
    margin-top: 12px;
  }

  .device-card,
  .health-sources-panel,
  .nutrition-panel,
  .timeline {
    padding: 14px;
  }

  .device-head {
    align-items: start;
  }

  .status-badge {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.74rem;
  }

  .bpm-history-card {
    padding: 16px;
  }

  .bpm-history-head,
  .bpm-history-summary,
  .bpm-history-list li {
    grid-template-columns: 1fr;
  }

  .bpm-history-head {
    display: grid;
  }

  .device-metric {
    margin: 14px 0 12px;
  }

  .device-metric span {
    font-size: 2.5rem;
  }

  .hr-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .connect-button,
  .ghost-button {
    min-height: 50px;
  }

  .timeline {
    margin-top: 12px;
  }

  .nutrition-panel {
    margin-top: 12px;
  }

  .health-sources-panel {
    margin-top: 12px;
  }

  .nutrition-hero {
    align-items: stretch;
  }

  .nutrition-dashboard {
    grid-template-columns: 1fr;
  }

  .goal-editor,
  .tracking-dashboard,
  .meal-photo-list {
    grid-template-columns: 1fr;
  }

  .meal-photo-card {
    grid-template-columns: 84px 1fr;
  }

  .meal-photo-card img,
  .meal-photo-placeholder {
    width: 84px;
  }

  .food-preview {
    min-height: 210px;
  }

  .calorie-ring {
    width: min(64vw, 230px);
  }

  .macro-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .macro-card {
    min-height: 108px;
  }

  .macro-card strong {
    font-size: 2.1rem;
  }

  #reading-list li {
    grid-template-columns: 1fr auto;
  }

  #reading-list time {
    grid-column: 1 / -1;
  }

  .mobile-source-bar {
    position: fixed;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-md);
    padding: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 40px rgba(14, 165, 233, 0.16);
    backdrop-filter: blur(16px);
  }

  .mobile-source-button {
    min-height: 46px;
    color: var(--ink);
    background: transparent;
    font-size: 0.86rem;
    font-weight: 900;
  }

  .mobile-source-button.active {
    color: #fff;
    border-color: var(--olyvn-primary);
    background: var(--olyvn-primary);
  }
}

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

  .ring {
    width: min(78vw, 280px);
  }

  .heart-rate {
    font-size: 4.1rem;
  }

  .nutrition-hero {
    display: grid;
  }

  .photo-button {
    width: 100%;
  }

  .macro-stack {
    grid-template-columns: 1fr;
  }

  .bpm-history-summary {
    grid-template-columns: 1fr;
  }
}

.auth-screen .auth-card {
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--blue-line);
  box-shadow: 0 24px 70px rgba(14, 165, 233, 0.12);
}

.auth-screen .language-picker {
  color: var(--muted);
  background: #FFFFFF;
  border-color: var(--blue-line);
}

.auth-screen .language-picker select {
  color: var(--ink);
  background: var(--olyvn-soft-blue);
}

.auth-screen h1,
.auth-screen #auth-title {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.auth-screen .auth-copy,
.auth-screen .auth-message,
.auth-screen .auth-form label {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

.auth-screen .google-button {
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--blue-line);
}

.auth-screen .google-button span:not(.google-icon) {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.auth-screen .auth-tab:not(.active) {
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--line);
  -webkit-text-fill-color: var(--ink);
}

.auth-screen .auth-tab.active,
.auth-screen .connect-button:not(.disconnect) {
  color: #FFFFFF;
  background: var(--olyvn-primary);
  border-color: var(--olyvn-primary);
  -webkit-text-fill-color: #FFFFFF;
}

.auth-screen .auth-form input {
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--line);
  font-size: 16px;
  -webkit-text-fill-color: var(--ink);
}

.auth-screen {
  color: #0F172A;
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #FFFFFF 100%);
}

.auth-screen .auth-card {
  color: #0F172A;
  background: #FFFFFF;
  border-color: #BAE6FD;
  box-shadow: 0 24px 70px rgba(14, 165, 233, 0.12);
}

.auth-screen .eyebrow {
  color: #64748B;
  -webkit-text-fill-color: #64748B;
}

.auth-screen h1,
.auth-screen #auth-title {
  color: #0F172A;
  -webkit-text-fill-color: #0F172A;
}

.auth-screen .auth-copy,
.auth-screen .auth-message,
.auth-screen .auth-form label {
  color: #64748B;
  -webkit-text-fill-color: #64748B;
}

.auth-screen .language-picker {
  color: #64748B;
  background: #FFFFFF;
  border-color: #BAE6FD;
}

.auth-screen .language-picker select {
  color: #0F172A;
  background: #E0F2FE;
  -webkit-text-fill-color: #0F172A;
}

.auth-screen .google-button {
  color: #0F172A;
  background: #FFFFFF;
  border-color: #BAE6FD;
}

.auth-screen .google-button span:not(.google-icon) {
  color: #0F172A;
  -webkit-text-fill-color: #0F172A;
}

.auth-screen .ghost-button,
.auth-screen .auth-tab:not(.active) {
  color: #0F172A;
  background: #FFFFFF;
  border-color: #BAE6FD;
  -webkit-text-fill-color: #0F172A;
}

.auth-screen .auth-tab.active,
.auth-screen .connect-button:not(.disconnect) {
  color: #FFFFFF;
  background: #38BDF8;
  border-color: #38BDF8;
  -webkit-text-fill-color: #FFFFFF;
}

.auth-screen .auth-form input {
  color: #0F172A;
  background: #FFFFFF;
  border-color: #CBD5E1;
  -webkit-text-fill-color: #0F172A;
}

/* Heilsa premium mobile UI */
.icon-sprite {
  display: none;
}

.auth-card {
  overflow: hidden;
}

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

.premium-tabbar {
  position: sticky;
  top: max(var(--space-3), env(safe-area-inset-top));
  z-index: 18;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: var(--space-2);
  margin: var(--space-5) calc(var(--space-1) * -1) 0;
  padding: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgba(186, 230, 253, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

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

.premium-tabbar a {
  display: grid;
  place-items: center;
  min-height: var(--tap-target);
  border-radius: 999px;
  padding: 0 var(--space-4);
  color: #0F172A;
  -webkit-text-fill-color: #0F172A;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 900;
}

.premium-tabbar a:hover,
.premium-tabbar a:focus,
.premium-tabbar a[aria-current="page"] {
  color: #FFFFFF;
  background: #0EA5E9;
  -webkit-text-fill-color: #FFFFFF;
  outline: none;
}

.premium-screen {
  margin-top: var(--space-5);
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(14, 165, 233, 0.1);
}

.screen-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.screen-heading h2 {
  margin: 0;
  max-width: 680px;
  color: #071A2C;
  font-size: clamp(1.35rem, 3vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.screen-heading p {
  max-width: 620px;
  margin: var(--space-2) 0 0;
  color: #64748B;
  font-size: 0.98rem;
  line-height: 1.45;
}

.premium-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  border-radius: 999px;
  padding: 0 var(--space-3);
  color: #16A34A;
  background: #DCFCE7;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

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

.daily-progress-score-card {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  box-shadow: 0 18px 44px rgba(14, 165, 233, 0.12);
}

.daily-progress-score-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.daily-progress-score-copy {
  display: grid;
  gap: var(--space-1);
}

.daily-progress-score-copy h3 {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  color: #071A2C;
  font-size: 2.1rem;
  line-height: 1;
}

.daily-progress-score-copy h3 small {
  color: #64748B;
  font-size: 0.95rem;
  font-weight: 900;
}

.daily-progress-score-copy p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: #64748B;
  font-weight: 750;
  line-height: 1.45;
}

.daily-progress-score-note {
  color: #64748B;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.35;
}

.daily-progress-score-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.daily-progress-score-chevron {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(186, 230, 253, 0.95);
  border-radius: 999px;
  color: #0EA5E9;
  font-size: 1.2rem;
  font-weight: 950;
  transition: transform 180ms ease;
}

.daily-progress-score-card.expanded .daily-progress-score-chevron {
  transform: rotate(180deg);
}

.daily-progress-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #E0F2FE;
}

.daily-progress-bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38BDF8 0%, #22C55E 58%, #F97316 100%);
  transition: width 220ms ease;
}

.daily-progress-breakdown {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}

.daily-progress-breakdown div {
  display: grid;
  gap: 4px;
  padding: var(--space-3);
  border: 1px solid rgba(186, 230, 253, 0.95);
  border-radius: var(--radius-sm);
  background: #F8FCFF;
}

.daily-progress-breakdown span {
  color: #64748B;
  font-size: 0.76rem;
  font-weight: 900;
}

.daily-progress-breakdown strong {
  color: #071A2C;
  font-size: 1rem;
  line-height: 1;
}

.recovery-card,
.premium-metric-card,
.daily-progress-score-card,
.daily-summary article,
.connection-card,
.scanner-result-grid article,
.macro-rings article,
.vitamin-panel,
.insight-grid article,
.usage-grid article,
.legal-card,
.workout-form,
.workout-day-card,
.workout-item,
.supplement-card,
.supplement-item {
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #FFFFFF 0%, #F8FCFF 100%);
}

.recovery-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
}

.score-ring,
.small-ring {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 57%, transparent 58%),
    conic-gradient(#22C55E 0 var(--score), #E2E8F0 var(--score) 360deg);
}

.score-ring {
  width: 128px;
  height: 128px;
}

.score-ring span {
  display: block;
  color: #071A2C;
  font-size: 2.35rem;
  font-weight: 950;
  line-height: 1;
}

.score-ring small,
.recovery-card p,
.premium-metric-card small,
.daily-summary p,
.connection-card p,
.macro-rings p,
.vitamin-panel p,
.insight-grid p,
.usage-grid small,
.legal-card li {
  color: #64748B;
  line-height: 1.45;
}

.metric-goal {
  display: block;
  margin-top: auto;
  color: #64748B;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.3;
}

.recovery-card h3,
.daily-summary h3,
.connection-card h3,
.macro-rings h3,
.vitamin-panel h3,
.insight-grid h3 {
  margin: 0 0 6px;
  color: #071A2C;
}

.premium-metric-card {
  display: grid;
  gap: var(--space-2);
  min-height: 146px;
  padding: var(--space-4);
}

.premium-metric-card svg,
.connection-card svg,
.insight-grid svg,
.legal-card svg,
.settings-list svg {
  width: 24px;
  height: 24px;
  color: #0EA5E9;
}

.premium-metric-card.heart svg {
  color: #EF4444;
}

.premium-metric-card span,
.usage-grid span,
.scanner-result-grid span {
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 900;
}

.premium-metric-card .source-badge,
.daily-progress-score-card .source-badge,
.daily-summary .source-badge,
.usage-grid .source-badge,
.scanner-result-grid .source-badge,
.macro-rings .source-badge,
.meal-nutrients .source-badge,
.micro-tracker-row .source-badge {
  color: #64748B;
  background: #F8FCFF;
  font-size: 0.74rem;
  font-weight: 850;
}

.premium-metric-card strong,
.daily-summary strong,
.macro-rings strong,
.usage-grid strong,
.scanner-result-grid strong {
  color: #071A2C;
  font-size: 1.45rem;
  line-height: 1;
}

.daily-summary strong,
.macro-rings strong {
  display: block;
  font-size: 1.35rem;
}

.daily-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.daily-summary article {
  padding: var(--space-4);
}

.mini-bars,
.weekly-chart {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  min-height: 72px;
  margin: var(--space-3) 0;
}

.mini-bars span,
.weekly-chart span {
  flex: 1;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #38BDF8 0%, #22C55E 100%);
}

.mini-bars span {
  height: var(--bar);
  min-height: 22px;
}

.weekly-chart span {
  height: var(--h);
  min-height: 20px;
}

.micro-grid,
.sync-row {
  display: grid;
  gap: var(--space-2);
}

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

.micro-grid span {
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: #0F172A;
  background: #F0F9FF;
  font-size: 0.8rem;
  font-weight: 850;
}

.sync-row {
  grid-template-columns: repeat(4, 1fr);
}

.sync-row span {
  height: 8px;
  border-radius: 999px;
  background: #22C55E;
}

.connection-grid,
.insight-grid,
.usage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.connection-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
}

.connection-card span {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: calc(var(--tap-target) - var(--space-4));
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  color: #64748B;
  background: #F1F5F9;
  font-size: 0.78rem;
  font-weight: 900;
}

.connection-card.connected span,
.connection-card.manual span {
  color: #16A34A;
  background: #DCFCE7;
}

.scanner-result-grid,
.macro-rings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.scanner-result-grid article,
.macro-rings article,
.usage-grid article,
.insight-grid article {
  padding: var(--space-4);
}

.nutrition-safety-note {
  margin-top: var(--space-3);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  color: #C2410C;
  background: #FFF7ED;
  font-size: 0.9rem;
  font-weight: 850;
}

.small-ring {
  width: 88px;
  height: 88px;
  margin-bottom: var(--space-3);
}

.small-ring span {
  color: #071A2C;
  font-size: 1.2rem;
  font-weight: 950;
}

.protein-ring {
  --score: 317deg;
}

.carb-ring {
  --score: 230deg;
}

.fat-ring {
  --score: 256deg;
}

.vitamin-panel {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-3);
  padding: var(--space-5);
}

.insight-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.usage-bar {
  height: 10px;
  margin-top: var(--space-3);
  border-radius: 999px;
  background: #E2E8F0;
  overflow: hidden;
}

.usage-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38BDF8, #22C55E);
}

.settings-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.settings-list button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--tap-target) + var(--space-2));
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  color: #071A2C;
  background: #FFFFFF;
  font-weight: 900;
  cursor: pointer;
}

.unit-system-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.unit-option {
  display: grid;
  gap: var(--space-2);
  min-height: 82px;
  border: 1px solid rgba(186, 230, 253, 0.95);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: #0F172A;
  background: #FFFFFF;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(14, 165, 233, 0.08);
}

.unit-option strong {
  font-size: 1rem;
  line-height: 1.1;
}

.unit-option span {
  color: #64748B;
  font-size: 0.86rem;
  font-weight: 800;
}

.unit-option.active {
  border-color: #38BDF8;
  background: #E0F2FE;
  box-shadow: 0 16px 34px rgba(56, 189, 248, 0.2);
}

.unit-option.active strong {
  color: #075985;
}

.workout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: var(--space-4);
  align-items: start;
}

.workout-form,
.workout-day-card {
  padding: var(--space-4);
}

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

.workout-field {
  display: grid;
  gap: var(--space-2);
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 900;
}

.workout-field.full,
.workout-actions {
  grid-column: 1 / -1;
}

.workout-field input,
.workout-field select,
.workout-field textarea {
  width: 100%;
  min-height: var(--tap-target);
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  color: #0F172A;
  background: #FFFFFF;
  font: inherit;
}

.workout-field textarea {
  padding-top: var(--space-3);
  resize: vertical;
}

.workout-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.workout-actions p {
  margin: 0;
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 850;
}

.workout-builder-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-md);
  background: #F8FCFF;
}

.workout-filter-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(4, minmax(130px, 1fr));
  gap: var(--space-3);
}

.exercise-library-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2);
  max-height: 330px;
  overflow: auto;
  padding-right: var(--space-1);
}

.exercise-library-button {
  display: grid;
  gap: var(--space-1);
  min-height: 78px;
  padding: var(--space-3);
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: #0F172A;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.06);
}

.exercise-library-button strong {
  font-size: 0.94rem;
  line-height: 1.2;
}

.exercise-library-button span {
  color: #64748B;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.3;
}

.exercise-library-button.active {
  border-color: #38BDF8;
  background: #E0F2FE;
  box-shadow: 0 14px 30px rgba(56, 189, 248, 0.18);
}

.exercise-dynamic-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.exercise-dynamic-fields > .full {
  grid-column: 1 / -1;
}

.workout-structure-grid,
.workout-recovery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.exercise-set-builder {
  display: grid;
  gap: var(--space-3);
}

.exercise-set-list,
.exercise-set-summary {
  display: grid;
  gap: var(--space-2);
}

.exercise-set-row {
  display: grid;
  grid-template-columns: 58px repeat(5, minmax(80px, 1fr)) minmax(170px, 1.3fr) auto;
  gap: var(--space-2);
  align-items: end;
  padding: var(--space-3);
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}

.exercise-set-row label {
  display: grid;
  gap: var(--space-1);
  color: #64748B;
  font-size: 0.68rem;
  font-weight: 900;
}

.exercise-set-row input,
.exercise-set-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  color: #0F172A;
  background: #FFFFFF;
  font: inherit;
}

.set-number {
  color: #075985;
  font-size: 0.78rem;
  font-weight: 950;
}

.exercise-set-summary {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: #F8FCFF;
}

.exercise-set-summary span {
  color: #64748B;
  font-size: 0.76rem;
  font-weight: 850;
}

.workout-day-card {
  display: grid;
  gap: var(--space-3);
}

.workout-day-card h3 {
  margin: 0;
  color: #071A2C;
  font-size: 1.35rem;
  line-height: 1.1;
}

.workout-list {
  display: grid;
  gap: var(--space-3);
}

.workout-item {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.workout-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.workout-item-head strong {
  display: block;
  color: #071A2C;
  font-size: 1rem;
}

.workout-item-head span:not(.source-badge),
.workout-empty span,
.workout-item p {
  color: #64748B;
  font-size: 0.86rem;
  line-height: 1.45;
}

.workout-item dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.workout-item dl div,
.workout-empty {
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #F0F9FF;
}

.workout-item dt {
  color: #64748B;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.workout-item dd {
  margin: var(--space-1) 0 0;
  color: #0F172A;
  font-weight: 950;
}

.workout-exercise-card {
  border: 1px solid #BAE6FD;
  background: #FFFFFF;
}

.workout-exercise-stack {
  display: grid;
  gap: var(--space-2);
}

.workout-exercise-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: #F0F9FF;
}

.workout-exercise-row strong {
  display: block;
  color: #0F172A;
  font-size: 0.9rem;
}

.workout-exercise-row span {
  display: block;
  margin-top: var(--space-1);
  color: #64748B;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.35;
}

.workout-item-actions,
.workout-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.workout-template-panel {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid #E0F2FE;
}

.workout-template-card {
  background: #F8FCFF;
}

.workout-recovery-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workout-empty {
  display: grid;
  gap: var(--space-2);
  color: #0F172A;
}

.ghost-button.danger {
  border-color: #FECACA;
  color: #DC2626;
  background: #FFFFFF;
}

.ghost-button.danger:hover,
.ghost-button.danger:focus-visible {
  border-color: #FCA5A5;
  background: #FEF2F2;
}

.supplement-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  align-items: start;
}

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

.supplement-preview {
  display: grid;
  place-items: center;
  min-height: 240px;
  border: 1px dashed #7DD3FC;
  border-radius: var(--radius-md);
  background: #F0F9FF;
  color: #64748B;
  font-weight: 900;
  overflow: hidden;
}

.supplement-preview img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
}

.supplement-actions,
.supplement-save-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.supplement-actions input {
  display: none;
}

.supplement-status {
  min-height: 22px;
  margin: var(--space-3) 0 0;
  color: #64748B;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.45;
}

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

.supplement-field,
.supplement-micros label {
  display: grid;
  gap: var(--space-2);
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 900;
}

.supplement-field.full,
.supplement-micros.full,
.supplement-save-row.full {
  grid-column: 1 / -1;
}

.supplement-field input,
.supplement-field select,
.supplement-field textarea,
.supplement-micros input {
  width: 100%;
  min-height: var(--tap-target);
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  color: #0F172A;
  background: #FFFFFF;
  font: inherit;
}

.supplement-field textarea {
  min-height: 92px;
  padding: var(--space-3);
  resize: vertical;
}

.medication-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.medication-tabs button {
  min-height: var(--tap-target);
  border: 1px solid #BAE6FD;
  border-radius: 999px;
  padding: 0 var(--space-3);
  color: #0F172A;
  background: #FFFFFF;
  font-weight: 900;
  cursor: pointer;
}

.medication-tabs button.active {
  color: #FFFFFF;
  border-color: #38BDF8;
  background: #38BDF8;
}

.medication-layout,
.medication-list {
  display: grid;
  gap: var(--space-3);
}

.medication-section {
  min-width: 0;
}

.medication-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.medication-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.medication-card h3 {
  margin: 0;
  color: #071A2C;
}

.medication-card p,
.medication-card small,
.review-choice span {
  margin: 0;
  color: #64748B;
  font-size: 0.86rem;
  line-height: 1.45;
}

.medication-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.medication-card dl div,
.review-choice {
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #F0F9FF;
}

.medication-card dt {
  color: #64748B;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.medication-card dd {
  margin: var(--space-1) 0 0;
  color: #0F172A;
  font-weight: 950;
}

.medication-status-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  color: #C2410C;
  background: #FFEDD5;
  font-size: 0.76rem;
  font-weight: 900;
}

.medication-status-badge.verified {
  color: #16A34A;
  background: #DCFCE7;
}

.medication-days {
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #FFFFFF;
}

.medication-days legend {
  padding: 0 var(--space-1);
  color: #64748B;
  font-size: 0.86rem;
  font-weight: 900;
}

.medication-days label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  margin: var(--space-1) var(--space-2) 0 0;
  color: #0F172A;
  font-weight: 800;
}

.notification-preview {
  display: grid;
  gap: var(--space-1);
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #F0F9FF;
}

.notification-preview strong {
  color: #0F172A;
}

.notification-preview span {
  color: #0F172A;
  font-weight: 900;
}

.notification-preview small {
  color: #64748B;
  line-height: 1.45;
}

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

.supplement-micros section {
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: #FFFFFF;
}

.supplement-micros h4 {
  margin: 0 0 var(--space-3);
  color: #071A2C;
}

#supplement-vitamin-list,
#supplement-mineral-list {
  display: grid;
  gap: var(--space-3);
}

.supplement-history {
  margin-top: var(--space-4);
}

.supplement-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.supplement-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.supplement-item > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.supplement-item strong {
  display: block;
  color: #071A2C;
}

.supplement-item p,
.supplement-item small {
  margin: 0;
  color: #64748B;
  font-size: 0.86rem;
  line-height: 1.45;
}

.voice-log-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.voice-log-card,
.voice-log-item,
.empty-state {
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: var(--radius-md);
  background: #FFFFFF;
}

.voice-log-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.voice-log-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.voice-log-preview {
  display: grid;
  gap: var(--space-3);
}

.voice-log-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.voice-log-fields div {
  display: grid;
  gap: var(--space-1);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #F0F9FF;
}

.voice-log-fields span,
.empty-state span,
.voice-log-item small,
.voice-log-preview p {
  color: #64748B;
  font-size: 0.86rem;
  line-height: 1.45;
}

.voice-log-fields strong,
.empty-state strong {
  color: #0F172A;
}

.voice-log-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.voice-log-item,
.empty-state {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.voice-log-item p,
.voice-log-item small {
  margin: 0;
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: var(--space-4);
  align-items: start;
}

.chat-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: var(--radius-md);
  background: #FFFFFF;
}

.chat-thread-card {
  min-height: 560px;
}

.chat-source-row,
.chat-message-head,
.chat-message-sources,
.chat-pending-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.chat-source-row {
  justify-content: space-between;
  color: #64748B;
  font-size: 0.86rem;
  line-height: 1.45;
}

.chat-messages {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: #F0F9FF;
}

.chat-message {
  display: grid;
  gap: var(--space-2);
  max-width: 84%;
  padding: var(--space-3);
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(14, 165, 233, 0.08);
}

.chat-message.user {
  justify-self: end;
  border-color: rgba(56, 189, 248, 0.45);
  background: #E0F2FE;
}

.chat-message.assistant {
  justify-self: start;
}

.chat-message p,
.chat-memory p {
  margin: 0;
  color: #0F172A;
  line-height: 1.5;
}

.chat-message-head {
  justify-content: space-between;
}

.chat-message-head strong {
  color: #0F172A;
}

.chat-message-head small,
.chat-memory p {
  color: #64748B;
  font-size: 0.84rem;
}

.chat-example-grid {
  display: grid;
  gap: var(--space-2);
}

.chat-example-grid button,
.chat-memory-list span {
  min-height: var(--tap-target);
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: var(--radius-sm);
  background: #F0F9FF;
  color: #0F172A;
  font: inherit;
}

.chat-example-grid button {
  padding: var(--space-3);
  text-align: left;
  cursor: pointer;
}

.chat-example-grid button:hover,
.chat-example-grid button:focus {
  border-color: #38BDF8;
  background: #E0F2FE;
}

.chat-memory {
  display: grid;
  gap: var(--space-3);
}

.chat-memory-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.chat-memory-list span {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 7px 10px;
  color: #64748B;
  font-size: 0.84rem;
}

.floating-chatbox {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 42;
  display: grid;
  justify-items: end;
  gap: var(--space-2);
}

.chatbox-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  border: 1px solid rgba(14, 165, 233, 0.26);
  border-radius: 999px;
  padding: 0 var(--space-4);
  color: #FFFFFF;
  background: var(--olyvn-primary);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 18px 38px rgba(14, 165, 233, 0.24);
}

.chatbox-toggle svg {
  width: 18px;
  height: 18px;
  color: #FFFFFF;
}

.chatbox-panel {
  display: grid;
  gap: var(--space-3);
  width: min(390px, calc(100vw - 28px));
  border: 1px solid rgba(186, 230, 253, 0.95);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: #0F172A;
  background: #FFFFFF;
  box-shadow: 0 24px 64px rgba(14, 165, 233, 0.22);
}

.chatbox-head,
.chatbox-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.chatbox-head h3 {
  margin: 0;
  color: #0F172A;
  font-size: 1rem;
}

.chatbox-messages {
  min-height: 190px;
  max-height: 310px;
}

.chatbox-panel .chat-message {
  max-width: 92%;
  padding: var(--space-2);
}

.chatbox-panel textarea {
  min-height: 78px;
}

.chatbox-panel p[role="status"],
.chatbox-panel small {
  margin: 0;
  color: #64748B;
  font-size: 0.78rem;
  line-height: 1.4;
}

.legal-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
}

.legal-card ul {
  margin: 0;
  padding-left: 18px;
}

.legal-card li + li {
  margin-top: 8px;
}

.quick-add-button {
  width: var(--tap-target);
  height: var(--tap-target);
  border: 0;
  border-radius: 999px;
  color: #FFFFFF;
  background: #38BDF8;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(56, 189, 248, 0.28);
  cursor: pointer;
}

.quick-add-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  padding: var(--space-4);
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(10px);
}

.quick-add-card {
  width: min(520px, 100%);
  margin: 0 auto max(var(--space-3), env(safe-area-inset-bottom));
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: #FFFFFF;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
}

.quick-add-head,
.meal-review-head,
.meal-review-subhead,
.settings-section-head,
.settings-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.quick-add-grid button,
.settings-source-card,
.meal-review-panel,
.detected-food-row,
.editable-nutrition-grid label,
.micros-review-grid section,
.micro-tracker-row,
.settings-section {
  border: 1px solid rgba(186, 230, 253, 0.9);
  border-radius: var(--radius-md);
  background: #FFFFFF;
}

.quick-add-grid button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--tap-target) + var(--space-3));
  padding: var(--space-3);
  color: #0F172A;
  font-weight: 900;
  cursor: pointer;
}

.quick-add-grid svg,
.settings-source-head svg {
  width: 22px;
  height: 22px;
  color: #0EA5E9;
}

.scanner-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.scanner-pipeline li {
  border: 1px solid #BAE6FD;
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  color: #64748B;
  background: #F0F9FF;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.scanner-pipeline li.active {
  color: #FFFFFF;
  background: #38BDF8;
}

.meal-review-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
}

.confidence-pill {
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  color: #C2410C;
  background: #FFF7ED;
  font-weight: 900;
}

.meal-review-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.confidence-pill[data-level="high-confidence"] {
  color: #16A34A;
  background: #DCFCE7;
}

.confidence-pill[data-level="medium-confidence"] {
  color: #0369A1;
  background: #E0F2FE;
}

.meal-review-form,
.editable-nutrition-grid,
.micros-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.meal-review-form label,
.editable-nutrition-grid label,
.micros-review-grid label,
.detected-food-row label {
  display: grid;
  gap: var(--space-2);
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 900;
}

.editable-nutrition-grid label,
.micros-review-grid section {
  padding: var(--space-3);
}

.secondary-estimates-details,
.micros-review-details,
.low-confidence-estimates {
  grid-column: 1 / -1;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: var(--radius-md);
  background: #F8FCFF;
  padding: var(--space-3);
}

.secondary-estimates-details summary,
.micros-review-details summary,
.low-confidence-estimates summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: #0F172A;
  font-weight: 950;
  cursor: pointer;
}

.secondary-estimates-details summary small,
.micros-review-details summary span {
  color: #F97316;
  font-size: 0.76rem;
  font-weight: 900;
}

.secondary-estimates-details p,
.micros-review-details p,
.low-confidence-estimates p,
.meal-estimate-disclaimer {
  margin: var(--space-2) 0 0;
  color: #64748B;
  font-size: 0.82rem;
  line-height: 1.5;
}

.secondary-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.meal-review-form input,
.editable-nutrition-grid input,
.micros-review-grid input,
.detected-food-row input {
  min-height: var(--tap-target);
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  color: #0F172A;
  background: #F8FCFF;
  font: inherit;
}

.detected-food-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.detected-food-row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.7fr auto;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-3);
}

.detected-food-row small {
  color: #64748B;
}

.meal-review-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.review-error {
  min-height: 20px;
  color: #C2410C;
  font-weight: 850;
}

.settings-section {
  margin-top: 16px;
  padding: 16px;
}

.settings-section-head {
  margin-bottom: 12px;
}

.settings-section-head h3,
.settings-source-head h4 {
  margin: 0;
  color: #071A2C;
}

.settings-section-head p,
.settings-source-head p {
  margin: 4px 0 0;
  color: #64748B;
}

.settings-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-source-card {
  padding: 14px;
}

.settings-source-head {
  align-items: flex-start;
}

.settings-source-head span {
  border-radius: 999px;
  padding: 6px 9px;
  color: #64748B;
  background: #F1F5F9;
  font-size: 0.74rem;
  font-weight: 900;
}

.settings-source-card.connected .settings-source-head span {
  color: #16A34A;
  background: #DCFCE7;
}

.settings-source-card dl {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

.settings-source-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #64748B;
  font-size: 0.82rem;
}

.settings-source-card dd {
  margin: 0;
  color: #0F172A;
  font-weight: 850;
  text-align: right;
}

.settings-embedded-panel {
  margin-top: 14px;
}

.micro-tracker-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.micro-tracker-row {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.micro-tracker-row strong {
  color: #071A2C;
}

@media (max-width: 980px) {
  .daily-progress-breakdown {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid,
  .daily-summary,
  .connection-grid,
  .scanner-result-grid,
  .macro-rings,
  .insight-grid,
  .usage-grid,
  .settings-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scanner-pipeline,
  .settings-source-grid,
  .unit-system-panel,
  .workout-structure-grid,
  .workout-recovery-grid,
  .workout-filter-grid,
  .exercise-dynamic-fields,
  .workout-layout,
  .chat-layout,
  .voice-log-layout,
  .supplement-layout,
  .supplement-micros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recovery-card {
    grid-column: 1 / -1;
  }

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

@media (max-width: 640px) {
  .app-shell {
    width: min(100%, 430px);
    padding-inline: max(12px, env(safe-area-inset-left));
  }

  .monitor-panel {
    padding: 14px;
    border-radius: 24px;
  }

  .premium-screen {
    padding: 16px;
    border-radius: 22px;
  }

  .screen-heading {
    display: grid;
  }

  .daily-progress-score-toggle {
    display: grid;
  }

  .daily-progress-score-meta {
    justify-content: space-between;
  }

  .daily-progress-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .daily-summary,
  .connection-grid,
  .scanner-result-grid,
  .macro-rings,
  .insight-grid,
  .usage-grid,
  .settings-list {
    grid-template-columns: 1fr;
  }

  .quick-add-grid,
  .workout-layout,
  .workout-form,
  .workout-structure-grid,
  .workout-recovery-grid,
  .workout-filter-grid,
  .exercise-dynamic-fields,
  .exercise-set-row,
  .workout-item dl,
  .chat-layout,
  .voice-log-layout,
  .voice-log-fields,
  .supplement-layout,
  .supplement-form,
  .supplement-micros,
  .meal-review-form,
  .editable-nutrition-grid,
  .secondary-nutrition-grid,
  .micros-review-grid,
  .detected-food-row,
  .scanner-pipeline,
  .settings-source-grid,
  .unit-system-panel {
    grid-template-columns: 1fr;
  }

  .recovery-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .premium-tabbar {
    margin-inline: -2px;
  }

  .auth-card {
    padding: 18px;
  }

  .auth-card h1 {
    font-size: 2.35rem;
  }

  .floating-chatbox {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
  }

  .chatbox-panel {
    width: 100%;
  }

}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #EAF6FF;
    --muted: #9FB0C4;
    --panel: #0B1726;
    --panel-soft: #101F31;
    --line: rgba(148, 163, 184, 0.35);
    --blue-line: rgba(56, 189, 248, 0.38);
    --health-bg-gradient: linear-gradient(135deg, #06111F 0%, #082136 48%, #0B1726 100%);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.24);
  }

  body,
  html {
    background: var(--health-bg-gradient);
  }

  .monitor-panel,
  .auth-card,
  .premium-screen,
  .premium-tabbar,
  .recovery-card,
  .premium-metric-card,
  .daily-summary article,
  .connection-card,
  .scanner-result-grid article,
  .macro-rings article,
  .vitamin-panel,
  .insight-grid article,
  .usage-grid article,
  .legal-card,
  .settings-list button,
  .unit-option,
  .chat-card,
  .chatbox-panel,
  .chat-message,
  .chat-example-grid button,
  .chat-memory-list span {
    color: #EAF6FF;
    border-color: rgba(56, 189, 248, 0.26);
    background: linear-gradient(145deg, rgba(15, 29, 46, 0.96), rgba(8, 24, 39, 0.96));
  }

  .screen-heading h2,
  .recovery-card h3,
  .premium-metric-card strong,
  .daily-summary h3,
  .connection-card h3,
  .macro-rings h3,
  .vitamin-panel h3,
  .insight-grid h3,
  .usage-grid strong,
  .settings-list button,
  .unit-option strong,
  .chat-message-head strong,
  .chatbox-head h3,
  .chat-message p,
  .score-ring span,
  .small-ring span {
    color: #F8FCFF;
  }

  .screen-heading p,
  .recovery-card p,
  .premium-metric-card small,
  .daily-summary p,
  .connection-card p,
  .macro-rings p,
  .vitamin-panel p,
  .insight-grid p,
  .usage-grid small,
  .legal-card li,
  .unit-option span,
  .chat-source-row,
  .chat-message-head small,
  .chatbox-panel p[role="status"],
  .chatbox-panel small,
  .chat-memory p {
    color: #9FB0C4;
  }

  .premium-tabbar a {
    color: #EAF6FF;
  }

  .language-picker,
  .user-pill,
  .date-selector-button {
    color: #EAF6FF;
    background: rgba(15, 29, 46, 0.9);
    border-color: rgba(56, 189, 248, 0.28);
  }

  .micro-grid span {
    color: #EAF6FF;
    background: rgba(56, 189, 248, 0.12);
  }

  .chat-messages,
  .chat-message.user {
    background: rgba(56, 189, 248, 0.12);
  }
}

/* Final contrast guard: keep Heilsa readable across Web, iOS, and Android. */
.auth-screen,
.app-shell,
.monitor-panel,
.premium-screen,
.topbar,
.date-picker-popover,
.quick-add-card,
.bpm-history-card,
.settings-section,
.settings-source-card,
.meal-review-panel,
.workout-form,
.workout-day-card,
.workout-item,
.supplement-card,
.supplement-item {
  color: #0F172A;
}

.auth-screen,
body,
html {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #FFFFFF 100%);
}

.auth-card,
.monitor-panel,
.premium-screen,
.premium-tabbar,
.recovery-card,
.premium-metric-card,
.daily-summary article,
.connection-card,
.scanner-result-grid article,
.macro-rings article,
  .vitamin-panel,
  .insight-grid article,
  .usage-grid article,
  .legal-card,
  .settings-list button,
.health-sources-panel,
.health-source-card,
.settings-section,
.settings-source-card,
.unit-option,
.quick-add-card,
.meal-review-panel,
.workout-form,
.workout-day-card,
.workout-item,
.supplement-card,
.supplement-item,
.supplement-micros section,
.detected-food-row,
.editable-nutrition-grid label,
.micros-review-grid section,
.micro-tracker-row {
  color: #0F172A;
  background: #FFFFFF;
  border-color: #BAE6FD;
}

.screen-heading h2,
.auth-screen h1,
.auth-screen #auth-title,
.recovery-card h3,
.premium-metric-card strong,
.daily-summary h3,
.connection-card h3,
.macro-rings h3,
.vitamin-panel h3,
.insight-grid h3,
.usage-grid strong,
  .settings-list button,
  .unit-option strong,
  .settings-section-head h3,
  .settings-source-head h4,
  .workout-day-card h3,
  .workout-item-head strong,
  .workout-item dd,
  .supplement-micros h4,
  .supplement-item strong,
  .score-ring span,
.small-ring span,
.heart-rate strong,
.settings-source-card dd {
  color: #0F172A;
  -webkit-text-fill-color: #0F172A;
}

.screen-heading p,
.auth-screen .auth-copy,
.auth-screen .auth-message,
.auth-screen .auth-form label,
.recovery-card p,
.premium-metric-card small,
.daily-summary p,
.connection-card p,
.macro-rings p,
.vitamin-panel p,
  .insight-grid p,
  .usage-grid small,
  .legal-card li,
  .settings-section-head p,
.settings-source-head p,
.settings-source-card dl div,
.workout-field,
.workout-actions p,
.workout-item-head span:not(.source-badge),
.workout-empty span,
.workout-item p,
.supplement-field,
.supplement-micros label,
.supplement-status,
.supplement-item p,
.supplement-item small,
.detected-food-row small {
  color: #475569;
  -webkit-text-fill-color: #475569;
}

.eyebrow,
.auth-screen .eyebrow,
.premium-metric-card span,
.usage-grid span,
.scanner-result-grid span,
.micro-tracker-row small,
.sync-pill,
.language-picker,
.user-pill,
.date-selector-button {
  color: #64748B;
  -webkit-text-fill-color: #64748B;
}

.language-picker,
.user-pill,
.date-selector-button,
.premium-tabbar a,
.google-button,
.ghost-button,
.auth-tab:not(.active),
.source-button,
.mobile-source-button,
.auth-screen .language-picker,
.auth-screen .google-button,
.auth-screen .ghost-button,
.auth-screen .auth-tab:not(.active) {
  color: #0F172A;
  background: #FFFFFF;
  border-color: #BAE6FD;
  -webkit-text-fill-color: #0F172A;
}

.premium-tabbar a:hover,
.premium-tabbar a:focus,
.premium-tabbar a[aria-current="page"] {
  color: #FFFFFF;
  background: #0EA5E9;
  -webkit-text-fill-color: #FFFFFF;
}

.language-picker select,
.auth-screen .language-picker select,
.auth-form input,
.auth-screen .auth-form input,
.meal-review-form input,
.editable-nutrition-grid input,
.micros-review-grid input,
.detected-food-row input,
.workout-field input,
.workout-field select,
.workout-field textarea,
.supplement-field input,
.supplement-micros input {
  color: #0F172A;
  background: #FFFFFF;
  border-color: #CBD5E1;
  -webkit-text-fill-color: #0F172A;
}

.connect-button,
.auth-tab.active,
.source-button[aria-checked="true"],
.mobile-source-button.active,
.quick-add-button,
.auth-screen .connect-button:not(.disconnect),
.auth-screen .auth-tab.active {
  color: #FFFFFF;
  background: #38BDF8;
  border-color: #38BDF8;
  -webkit-text-fill-color: #FFFFFF;
}

.connect-button:hover,
.auth-tab.active:hover,
.quick-add-button:hover {
  color: #FFFFFF;
  background: #0EA5E9;
  border-color: #0EA5E9;
  -webkit-text-fill-color: #FFFFFF;
}

.premium-badge,
.status-badge.connected,
.sync-pill.live,
.sync-pill.connected,
.connection-card.connected span,
.connection-card.manual span,
.settings-source-card.connected .settings-source-head span {
  color: #166534;
  background: #DCFCE7;
  border-color: #BBF7D0;
  -webkit-text-fill-color: #166534;
}

.status-badge,
.connection-card span,
.settings-source-head span {
  color: #475569;
  background: #F1F5F9;
  border-color: #CBD5E1;
  -webkit-text-fill-color: #475569;
}

.heart-rate svg,
.heart-rate strong,
.premium-metric-card.heart svg,
.bpm,
.bpm-value {
  color: #DC2626;
  -webkit-text-fill-color: #DC2626;
}