/** Shopify CDN: Minification failed

Line 3462:0 Unexpected "}"

**/
/* ═══════════════════════════════════════════════════════════
   FILE:        30-cui-shell.css
   PROJECT:     MetaScore / BaseLine — Client UI v2
   VERSION:     1.35.3
   LAST UPDATED: 2026-05-04
   PURPOSE:     All styles for the 30-CUI. Single file, no overrides.
                v1.35.3 — Accordion breathing room, take three.
                Tony screenshot review of v1.35.2: the 28px body
                padding still read as squashed because (a) some
                user agents were ignoring my rule due to CSS cache
                or specificity, and (b) at larger text sizes the
                fixed 28px gap stayed proportionally too small as
                the title grew. Two fixes:
                  (a) padding-top raised from 28px to 32px and
                      marked !important so no other rule can win.
                  (b) New scaling rules: 38px at text-md, 44px at
                      text-lg. Gap now grows with the title.
                v1.35.2 — Accordion breathing room. Tony screenshot
                review of v1.35.1: title sat right on top of the
                content despite the 18px padding bump. The visual
                contrast between uppercase DM Mono title and
                sentence-case DM Sans content makes any small gap
                read as squashed. Fixed by:
                  (a) cui-acc-head padding raised from 2px 0 to
                      6px 0 so the title row has more presence.
                  (b) cui-acc-body padding-top raised from 18px to
                      28px. Total gap from title baseline to first
                      content line is now ~34px instead of ~20px.
                v1.35.1 — Polish pass on the settings accordion
                landed in v1.35.0. Title raised from 10px to 14px
                with text-size scaling rules so it reads as a real
                title not a tiny label. Chevron raised from 18px
                to 22px (also scales). Body padding-top raised from
                12px to 18px so content does not feel squashed onto
                the title. Profile head name raised from 18px to
                24px so it dominates the email line. New
                .cui-profile-foot-version style for the app version
                row that now lives at the bottom of screen-settings
                instead of in the identity block.
                v1.35.0 — Settings accordion pattern. Each section on
                screen-settings now collapses into an accordion that
                shows the section title inside the card header instead
                of above it. Five new classes: .cui-acc wrapper, .cui-acc-head
                clickable header row, .cui-acc-title (DM Mono uppercase
                10px to match the existing cui-sec-head label visually),
                .cui-acc-chevron with rotation on open, .cui-acc-body
                that hides when closed. Accordion header uses the same
                cursor and hit-target pattern as the existing
                cui-summary-row. Body slides in via cuiFadeIn animation
                (already defined). Independent open/close per accordion
                — multiple can be open at once. State persists per
                customer ID via JS layer (see 30-cui-shell.js v1.7.22).
                v1.34.0 — Visual clarity pass on practitioner card
                and trends metrics. Dropdown pill (.cui-prac-dropdown)
                now has a 1px solid border using the theme border
                token so it reads as a tappable pill on both themes
                instead of a faint tinted stripe on cream. Metric
                chevron (.cui-metric-chevron) simplified to match
                the practitioner dropdown chevron — removed the
                28px circle, removed the elevated background, now
                sits as a clean 16px stroked chevron in the muted
                colour. Open-state switches to teal and rotates
                180deg, same as before. Both dropdowns now share
                one visual language.
                v1.33.0 — Period select added. .cui-period-select and
                .cui-period-btn rules for the AM / PM toggle at the top
                of the glucose and BP entry screens. Visual language
                matches the existing trends pill pattern. Screen-scoped
                override on #screen-bp flips the active-state colour to
                blue so the pill matches the screen accent. Replaces the
                implicit clock-only AM / PM decision with a user choice
                on every reading.
                v1.32.0 — Nav hide rule added. body.cui-hide-nav hides the
                bottom navigation. Toggled by bp-ui.js on input focus so the
                nav does not float between the BP reading fields and the
                iOS keyboard. Other screens can adopt the same body class
                when they need keyboard-aware nav hiding.
                v1.29.4 — cui-digest gets position:relative to contain info button.
                v1.29.3 — Phase tracker CSS classes removed (all inline now).
                Greeting phase label style retained. Legacy journey classes
                retained hidden.
                v1.29.0 — Phase tracker dot matrix styles added. Old journey
                CSS replaced. Greeting phase label style added. Legacy journey
                classes retained hidden for backwards compat.
                v1.19.0 — Added hex molecular texture overlay on ALL
                screens via Shopify CDN image at 35% opacity.
                v1.18.0 — Clean card style: white cards, no glass/blur,
                no bubbles, lighter warm background. Matches PUI mockup.
                v1.15.0 — Added glucose/BP redesign classes (flash card,
                habit rows, dot matrix, zone card, unit toggle, bar chart).
                Light theme default. Dark via [data-theme="dark"].
                CSS custom properties for all colours.
   OWNED BY:    MetaScore / Tony
   DO NOT:
     - Create a second CSS file
     - Use raw hex outside :root / [data-theme]
     - Add !important unless overriding Shopify theme bleed
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY RULE — SINGLE SOURCE OF TRUTH
   Card titles (h-level):  CUI_TD(16) = 16px default, scales with user setting
   Body / description:     CUI_TS(14) = 14px default
   Muted labels:           CUI_TS(12) = 12px default
   Section headers:        cui-sec-head = 10px DM Mono uppercase (never changes)
   Info icons:             12px SVG, 22px touch target
   RULE: Never hardcode font-size values in JS. Always use CUI_TD() or CUI_TS().
         Never use font-size < 11px for body copy. Min touch target = 44px.
   ═══════════════════════════════════════════════════════════ */

/* ── LIGHT THEME (DEFAULT) ──────────────────────────────── */
:root, [data-theme="light"] {
  --bg:             #ECEAE5;
  --surface:        #FFFFFF;
  --elevated:       #E9E5E0;
  --border:         rgba(140,128,115,0.30);
  --border-hi:      rgba(72,148,132,0.45);
  --text:           #1A1816;
  --text-mid:       #3D3834;
  --muted:          #6E6760;
  --dim:            #A09891;
  --teal:           #3D8F80;
  --teal-soft:      rgba(61,143,128,0.08);
  --teal-mid:       rgba(61,143,128,0.16);
  --blue:           #3D95B8;
  --blue-soft:      rgba(61,149,184,0.10);
  --purple:         #7B68B5;
  --purple-soft:    rgba(123,104,181,0.10);
  --green:          #3D9E52;
  --green-text:     #2E7A3E;
  --green-soft:     rgba(61,158,82,0.10);
  --amber:          #C4832A;
  --amber-text:     #A0671A;
  --amber-soft:     rgba(196,131,42,0.10);
  --danger:         #B5524C;
  --danger-dim:     rgba(181,82,76,0.08);
  --danger-border:  rgba(181,82,76,0.22);
  --zone-amber-bg:  rgba(196,131,42,0.18);
  --zone-amber-text:#A0671A;
  --zone-green-bg:  rgba(61,158,82,0.16);
  --zone-green-text:#2E7A3E;
  --zone-blue-bg:   rgba(61,149,184,0.16);
  --zone-blue-text: #3D95B8;
  --zone-purple-bg: rgba(123,104,181,0.16);
  --zone-purple-text:#7B68B5;
  --card-sh:        0 2px 12px rgba(44,41,38,0.06);
  --card-sh-lg:     0 8px 28px rgba(44,41,38,0.09);
  --glow:           rgba(61,143,128,0.12);
  --streak-bg:      linear-gradient(135deg, #3D8F80, #5AADA0);
  --ring-track:     #E9E5E0;
  --outer-ring:     #8B9DAD;
  --skeleton:       #E9E5E0;
  --skeleton-shine: #F2EFEB;
  --on-teal:        #FFFFFF;
  --drift-bg:       linear-gradient(135deg, #8B7B6A, #A69585);
  --phase-grad-end: #78C4B6;
  --info-icon:      #6E6760;
  --body-bg:        #E5E2DE;
}

/* ── DARK THEME ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #070E14;
  --surface:        #0A1520;
  --elevated:       #12222A;
  --border:         rgba(45,212,191,0.10);
  --border-hi:      rgba(45,212,191,0.30);
  --text:           #E8F0F7;
  --text-mid:       #C4D8E8;
  --muted:          rgba(200,220,235,0.58);
  --dim:            rgba(200,220,235,0.35);
  --teal:           #2DD4BF;
  --teal-soft:      rgba(45,212,191,0.08);
  --teal-mid:       rgba(45,212,191,0.16);
  --blue:           #38BEFF;
  --blue-soft:      rgba(56,190,255,0.08);
  --purple:         #C4B5FD;
  --purple-soft:    rgba(196,181,253,0.06);
  --green:          #4ADE80;
  --green-text:     #4ADE80;
  --green-soft:     rgba(74,222,128,0.08);
  --amber:          #E8A44A;
  --amber-text:     #FCD34D;
  --amber-soft:     rgba(232,164,74,0.06);
  --danger:         #EF4444;
  --danger-dim:     rgba(239,68,68,0.08);
  --danger-border:  rgba(239,68,68,0.22);
  --zone-amber-bg:  rgba(232,164,74,0.14);
  --zone-amber-text:#FCD34D;
  --zone-green-bg:  rgba(74,222,128,0.12);
  --zone-green-text:#4ADE80;
  --zone-blue-bg:   rgba(56,190,255,0.12);
  --zone-blue-text: #38BEFF;
  --zone-purple-bg: rgba(196,181,253,0.10);
  --zone-purple-text:#C4B5FD;
  --card-sh:        0 4px 24px rgba(0,0,0,0.40);
  --card-sh-lg:     0 8px 28px rgba(0,0,0,0.50);
  --glow:           rgba(45,212,191,0.15);
  --streak-bg:      linear-gradient(135deg, #0D4A44, #1A6B5F);
  --ring-track:     rgba(200,220,235,0.10);
  --outer-ring:     rgba(200,220,235,0.18);
  --skeleton:       rgba(200,220,235,0.10);
  --skeleton-shine: rgba(200,220,235,0.16);
  --on-teal:        #FFFFFF;
  --drift-bg:       linear-gradient(135deg, #4A3F35, #5E5348);
  --phase-grad-end: #5AADA0;
  --info-icon:      rgba(200,220,235,0.45);
  --body-bg:        #030A10;
}


/* ═══════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════ */
/* Body background for desktop — area outside the phone frame */
html {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: pan-x pan-y !important;
  -webkit-text-size-adjust: 100% !important;
}
body {
  background: var(--body-bg) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
  margin: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: pan-x pan-y !important;
}
body:has([data-theme="dark"]) {
  --body-bg: #030A10;
  background: var(--body-bg) !important;
}
#cui-root *, #cui-root *::before, #cui-root *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
#cui-root {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  width: 390px;
  height: 844px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
  transition: background 0.4s, color 0.4s;
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
  border-radius: 44px;
}
#cui-root button { color: inherit; font-family: inherit; }
#cui-root a { color: inherit; text-decoration: none; }
#cui-root input, #cui-root select, #cui-root textarea {
  font-family: 'DM Mono', monospace;
  -webkit-appearance: none;
  appearance: none;
}


/* ═══════════════════════════════════════════════════════════
   SCREENS
   ═══════════════════════════════════════════════════════════ */
.cui-screen {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.cui-screen.active {
  display: flex;
}
.cui-screen.slide-enter-left,
.cui-screen.slide-enter-right,
.cui-screen.slide-exit-left,
.cui-screen.slide-exit-right {
  display: flex;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
}
.cui-screen.active.no-anim {
  position: relative;
}
.cui-screen.slide-enter-left {
  display: flex;
  transform: translateX(100%);
  animation: cui-slide-in-left 0.3s ease-in-out forwards;
}
.cui-screen.slide-enter-right {
  display: flex;
  transform: translateX(-100%);
  animation: cui-slide-in-right 0.3s ease-in-out forwards;
}
.cui-screen.slide-exit-left {
  display: flex;
  transform: translateX(0);
  animation: cui-slide-out-left 0.3s ease-in-out forwards;
}
.cui-screen.slide-exit-right {
  display: flex;
  transform: translateX(0);
  animation: cui-slide-out-right 0.3s ease-in-out forwards;
}
@keyframes cui-slide-in-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes cui-slide-in-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes cui-slide-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes cui-slide-out-right {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}


/* ═══════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════ */
.cui-top-bar {
  padding: 14px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.cui-brand {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 2px;
  color: var(--teal);
}
.cui-top-actions { display: flex; gap: 6px; }
.cui-top-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.25s;
  box-shadow: var(--card-sh);
}
.cui-top-btn:hover { border-color: var(--border-hi); color: var(--teal); }

.cui-back-btn {
  font-size: 14px; color: var(--teal); cursor: pointer;
  background: none; border: none;
  font-weight: 500; padding: 0;
}
.cui-page-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.3px; margin-top: 4px;
}
.cui-page-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════
   SCROLL AREA
   ═══════════════════════════════════════════════════════════ */
.cui-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 100px;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}
.cui-scroll::-webkit-scrollbar { display: none; }

/* ── PULL-TO-REFRESH ─────────────────────────────────── */
.cui-ptr-indicator {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: height 0.2s, opacity 0.2s;
  height: 0; opacity: 0;
}
.cui-ptr-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--teal);
  animation: cui-ptr-spin 0.6s linear infinite;
}
@keyframes cui-ptr-spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */
.cui-bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  transition: background 0.4s;
  z-index: 10;
}
/* v1.32.0 — Keyboard-aware hide. bp-ui.js adds cui-hide-nav to <body> on
   input focus so the nav does not float over the iOS keyboard between the
   reading fields and the keypad. Class is removed on blur. */
body.cui-hide-nav .cui-bottom-nav { display: none !important; }
@media (max-width: 430px) {
  body {
    padding: 0 !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
  #cui-root {
    width: 100%;
    height: 100vh;
    height: var(--vvh, 100dvh);
    border-radius: 0;
    box-shadow: none;
  }
}
.cui-nav-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 8px 0 2px;
  cursor: pointer; color: var(--dim);
  transition: color 0.2s;
  border: none; background: none;
}
.cui-nav-tab:hover { color: var(--muted); }
.cui-nav-tab.active { color: var(--teal); }
.cui-nav-tab svg { width: 22px; height: 22px; }
.cui-nav-tab span {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 0.3px;
}


/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.cui-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px; /* FROZEN — do not change. Scope overrides to screen selectors. */
  margin-bottom: 14px;
  box-shadow: var(--card-sh);
  transition: background 0.4s;
  position: relative; /* Required for absolute-positioned info icon */
}
.cui-card-header {
  display: flex; align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}
/* Card header with content left + icon right */
.cui-card-header--has-label {
  justify-content: space-between;
}
.cui-card-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════════
   GREETING (Kit banner)
   ═══════════════════════════════════════════════════════════ */
.cui-greeting {
  border-radius: 22px; padding: 18px 20px;
  margin-bottom: 12px; background: var(--streak-bg);
  position: relative; overflow: hidden;
  box-shadow: 0 6px 24px var(--glow);
  animation: cuiBreathe 5s ease-in-out infinite;
  transition: background 0.4s;
}
.cui-greeting::after {
  content: ''; position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.cui-greeting--drift {
  background: var(--drift-bg);
}
.cui-greeting-name { font-size: 18px; font-weight: 600; color: var(--on-teal); }
.cui-greeting-date {
  font-size: 11px; color: rgba(255,255,255,0.65);
  font-family: 'DM Mono', monospace; margin-top: 4px;
}
.cui-greeting-phase {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85);
  font-family: 'DM Mono', monospace; margin-top: 4px;
  text-transform: uppercase; letter-spacing: 2px;
}

/* Kit avatar (small, for inside cards) */
.cui-kit-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--streak-bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 3px 8px var(--glow);
}
.cui-kit-av-inner {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 1.5px solid rgba(255,255,255,0.4);
}


/* ═══════════════════════════════════════════════════════════
   METABOLIC AGE — CONCENTRIC RINGS
   ═══════════════════════════════════════════════════════════ */
.cui-ma-ring-box {
  position: relative; width: 180px; height: 180px;
  margin: 0 auto !important;
}
.cui-ma-ring-box svg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 180px; height: 180px;
}
.cui-ma-svg {
  position: relative !important;
  display: block;
  width: 100% !important; height: 100% !important;
  animation: cuiPulseGlow 3s ease-in-out infinite;
}
.cui-ma-ring-center {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2;
}
.cui-ma-number {
  font-size: 44px; font-weight: 700;
  font-family: 'DM Mono', monospace; line-height: 1;
}
.cui-ma-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  color: var(--muted); margin-top: 3px !important;
}
.cui-ma-outer-label {
  position: absolute; z-index: 3;
  font-size: 9px; font-family: 'DM Mono', monospace;
  color: var(--dim);
  top: 2px; left: 50%; transform: translateX(-50%);
}
.cui-ma-legend {
  display: flex; justify-content: center;
  gap: 16px; margin-top: 10px;
}
.cui-ma-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-family: 'DM Mono', monospace;
  color: var(--muted);
}
.cui-ma-legend-dot {
  width: 8px; height: 3px; border-radius: 2px;
}
.cui-ma-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-family: 'DM Mono', monospace;
  font-weight: 600; padding: 5px 14px;
  border-radius: 10px; margin-top: 10px;
}
/* Neon glow on inner ring — dark mode */
/* ── Food Score dark mode card contrast fix ── */
[data-theme="dark"] #cui-foodscan-breakfast,
[data-theme="dark"] #cui-foodscan-dinner,
[data-theme="dark"] #cui-foodscan-snack {
  background: var(--elevated) !important;
  border-color: rgba(45,212,191,0.14) !important;
}
[data-theme="dark"] #cui-food-scan-card > div:nth-child(2),
[data-theme="dark"] #cui-food-scan-card > div:nth-child(3) {
  background: var(--surface) !important;
}

[data-theme="dark"] .cui-ma-glow-blue { filter: drop-shadow(0 0 10px rgba(56,190,255,0.30)); }
[data-theme="dark"] .cui-ma-glow-purple { filter: drop-shadow(0 0 10px rgba(196,181,253,0.30)); }
[data-theme="dark"] .cui-ma-glow-green { filter: drop-shadow(0 0 10px rgba(74,222,128,0.30)); }
[data-theme="dark"] .cui-ma-glow-amber { filter: drop-shadow(0 0 10px rgba(232,164,74,0.30)); }

/* Pillar sub-ages */
.cui-ma-pillars {
  display: flex; justify-content: center;
  gap: 20px; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cui-ma-pillar { text-align: center; min-width: 65px; }
.cui-ma-pillar-icon { margin-bottom: 4px; opacity: 0.45; }
.cui-ma-pillar-age {
  font-size: 20px; font-weight: 700;
  font-family: 'DM Mono', monospace; line-height: 1.1;
}
.cui-ma-pillar-diff {
  font-size: 9px; font-family: 'DM Mono', monospace;
  margin-top: 2px; opacity: 0.7;
}
.cui-ma-pillar-name {
  font-size: 8px; text-transform: uppercase;
  letter-spacing: 0.5px; margin-top: 4px; opacity: 0.4;
}

/* Strongest / Focus Area */
.cui-ma-sf-row { display: flex; gap: 6px; margin-top: 14px; }
.cui-ma-sf-card {
  flex: 1; padding: 10px 12px; border-radius: 12px;
  background: var(--teal-soft);
  border: 1px solid var(--border);
}
.cui-ma-sf-title {
  font-size: 8px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--dim);
  margin-bottom: 4px; font-family: 'DM Mono', monospace;
}
.cui-ma-sf-name { font-size: 11px; font-weight: 600; }
.cui-ma-sf-age {
  font-size: 16px; font-family: 'DM Mono', monospace;
  font-weight: 700; margin-top: 2px;
}
.cui-ma-sf-diff { font-size: 9px; font-weight: 400; opacity: 0.6; }

/* Building state (pre-metabolic age) */
.cui-ma-build-pct {
  font-size: 28px; font-weight: 700;
  font-family: 'DM Mono', monospace; color: var(--teal);
}

/* Engine output — hero number */
.cui-ma-hero {
  font-size: 42px; font-weight: 700;
  font-family: 'DM Mono', monospace; line-height: 1;
  color: var(--teal);
}
.cui-ma-hero-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  color: var(--muted); margin-top: 4px !important;
  letter-spacing: 0.5px;
}

/* Engine ring — clean */
.cui-ma-svg circle:last-child {
  transition: stroke-dasharray 1.2s ease;
}

/* Engine output — offset badge — teal only */
.cui-ma-offset-badge {
  display: flex; align-items: center; justify-content: center;
  margin: 10px auto 0 !important;
  padding: 5px 16px !important; border-radius: 20px;
  width: fit-content;
  font-family: 'DM Mono', monospace;
  font-size: 12px; font-weight: 600;
  background: var(--teal-soft);
  color: var(--teal);
  border: 1px solid var(--teal-mid);
}

/* Engine output — calendar reference */
.cui-ma-cal {
  font-size: 10px; color: var(--dim); text-align: center;
  margin-top: 4px !important;
  font-family: 'DM Mono', monospace;
}

/* Engine output — pillar cards */
.cui-ma-pcards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border);
}
.cui-ma-pcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 12px !important;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--card-sh);
}
.cui-ma-pcard::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--teal); opacity: 0.25;
  border-radius: 16px 16px 0 0;
}
.cui-ma-pcard-icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px !important;
  background: var(--teal);
}
.cui-ma-pcard-icon svg {
  stroke: var(--surface); opacity: 0.9;
}
.cui-ma-pcard-label {
  font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted);
  font-family: 'DM Mono', monospace;
  margin-bottom: 6px !important;
}
.cui-ma-pcard-age {
  font-size: 26px; font-weight: 700;
  font-family: 'DM Mono', monospace; line-height: 1.1;
  color: var(--teal);
}
.cui-ma-pcard-offset {
  font-size: 10px; font-family: 'DM Mono', monospace;
  margin-top: 3px !important; font-weight: 600;
  color: var(--teal);
}




/* ═══════════════════════════════════════════════════════════
   QUICK LOG ROW
   ═══════════════════════════════════════════════════════════ */
.cui-quick-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 12px;
}
.cui-quick-btn {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px 16px;
  cursor: pointer; transition: all 0.25s;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--card-sh); text-align: left;
}
.cui-quick-btn:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.cui-quick-icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cui-quick-icon--teal { background: var(--teal-soft); }
.cui-quick-icon--blue { background: var(--blue-soft); }
.cui-quick-title { font-size: 13px; font-weight: 600; }
.cui-quick-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }


/* ═══════════════════════════════════════════════════════════
   STREAK
   ═══════════════════════════════════════════════════════════ */
.cui-streak-flame { font-size: 22px; flex-shrink: 0; }
.cui-streak-num { font-size: 22px; font-weight: 700; color: var(--teal); }
.cui-streak-label { font-size: 11px; color: var(--muted); }
.cui-streak-best {
  font-size: 10px; color: var(--dim);
  font-family: 'DM Mono', monospace; margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════
   FOCUS CARD
   ═══════════════════════════════════════════════════════════ */
.cui-focus-card {
  background: var(--teal-soft);
  border: 1px solid var(--teal-mid);
  border-radius: 20px; padding: 16px 18px;
  margin-bottom: 12px;
}
.cui-focus-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--teal);
}
.cui-focus-body {
  font-size: 13px; color: var(--text-mid);
  line-height: 1.6; margin-top: 8px;
}
.cui-focus-action {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; font-size: 12px; font-weight: 600;
  color: var(--teal); cursor: pointer;
  background: none; border: none; padding: 0;
}


/* ═══════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════ */
.cui-sec-head {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px; padding-left: 2px;
}
.cui-sec-header {
  display: flex; align-items: center;
  gap: 6px; margin: 16px 0 8px;
}
.cui-sec-header .cui-sec-head { margin: 0; }


/* ═══════════════════════════════════════════════════════════
   AVERAGES
   ═══════════════════════════════════════════════════════════ */
.cui-avg-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 12px;
}
.cui-avg-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px 10px;
  text-align: center; box-shadow: var(--card-sh);
  transition: background 0.4s;
}
.cui-avg-val { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.cui-avg-val-row {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
}
.cui-avg-arrow {
  font-size: 13px; font-weight: 700; line-height: 1;
}
.cui-avg-arrow--good { color: var(--green-text); }
.cui-avg-arrow--warn { color: var(--amber-text); }
.cui-avg-badge {
  font-size: 8px; font-weight: 600; color: var(--teal);
  background: var(--teal-soft); border: 1px solid var(--teal-mid);
  padding: 1px 5px !important; border-radius: 6px;
  font-family: 'DM Mono', monospace; letter-spacing: 0.5px;
  text-transform: uppercase; line-height: 1.4;
}
.cui-avg-unit { font-size: 9px; color: var(--muted); font-family: 'DM Mono', monospace; margin-top: 2px; }
.cui-avg-label { font-size: 10px; color: var(--muted); margin-top: 4px; }
.cui-avg-delta { font-size: 9px; font-family: 'DM Mono', monospace; margin-top: 3px; }


/* ═══════════════════════════════════════════════════════════
   SHOP
   ═══════════════════════════════════════════════════════════ */
.cui-shop-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 12px;
}
.cui-shop-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 18px 10px;
  cursor: pointer; transition: all 0.25s;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  box-shadow: var(--card-sh);
}
.cui-shop-tile:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.cui-shop-icon {
  width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.cui-shop-icon--teal { background: var(--teal-soft); }
.cui-shop-icon--blue { background: var(--blue-soft); }
.cui-shop-icon--green { background: var(--green-soft); }
.cui-shop-label { font-size: 12px; font-weight: 600; }


/* ═══════════════════════════════════════════════════════════
   PRACTITIONER CARD
   ═══════════════════════════════════════════════════════════ */
.cui-prac-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 14px 18px !important;
  margin-bottom: 12px !important;
  display: flex; align-items: center; gap: 12px !important;
  box-shadow: var(--card-sh); cursor: pointer;
  transition: all 0.25s;
}
.cui-prac-card:has(.cui-prac-cta) {
  display: block !important;
  cursor: default;
}
.cui-prac-card:hover { border-color: var(--border-hi); }
.cui-prac-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dim); flex-shrink: 0;
}
.cui-prac-dot--connected {
  background: var(--teal); box-shadow: 0 0 8px var(--glow);
}
.cui-prac-info { flex: 1; }
.cui-prac-name { font-size: 13px; font-weight: 600; }
.cui-prac-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cui-prac-arrow { font-size: 16px; color: var(--dim); }


/* ═══════════════════════════════════════════════════════════
   DATE STAMP
   ═══════════════════════════════════════════════════════════ */
.cui-date-stamp {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-family: 'DM Mono', monospace;
  color: var(--teal); margin-bottom: 14px;
}
.cui-date-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 8px var(--glow);
}


/* ═══════════════════════════════════════════════════════════
   MODE TOGGLE (AM/PM)
   ═══════════════════════════════════════════════════════════ */
.cui-mode-toggle {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--elevated); border-radius: 16px;
  padding: 4px; transition: background 0.4s;
}
.cui-mode-btn {
  flex: 1; padding: 10px; border-radius: 13px;
  border: none; background: transparent;
  color: var(--muted); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.25s; text-align: center;
}
.cui-mode-btn.active {
  background: var(--surface); color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}


/* ═══════════════════════════════════════════════════════════
   PHASE CARD
   ═══════════════════════════════════════════════════════════ */
.cui-phase-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 18px;
  margin-bottom: 12px; box-shadow: var(--card-sh);
  transition: background 0.4s;
}
.cui-phase-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 10px;
}
.cui-phase-bar {
  height: 5px; border-radius: 3px;
  background: var(--ring-track); margin-bottom: 10px;
  overflow: hidden;
}
.cui-phase-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--phase-grad-end));
  transition: width 0.5s ease;
}
.cui-phase-pills { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cui-phase-pill {
  font-size: 11px; padding: 5px 12px;
  border-radius: 10px; font-weight: 500;
}
.cui-phase-pill--done { background: var(--green-soft); color: var(--green-text); }
.cui-phase-pill--due { background: var(--blue-soft); color: var(--blue); }
.cui-phase-guidance {
  font-size: 13px; color: var(--muted);
  line-height: 1.6; margin-top: 10px;
}


/* ═══════════════════════════════════════════════════════════
   STEP ACCORDIONS
   ═══════════════════════════════════════════════════════════ */
.cui-step-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer; margin-bottom: 8px;
  transition: all 0.25s; box-shadow: var(--card-sh);
}
.cui-step-btn:hover { border-color: var(--border-hi); }
.cui-step-chevron {
  color: var(--dim); font-size: 13px; transition: transform 0.25s;
}
.cui-step-btn.open .cui-step-chevron { transform: rotate(180deg); }
.cui-step-panel {
  display: none; padding: 0 0 8px;
  animation: cuiFadeIn 0.3s ease;
}
.cui-step-panel.open { display: block; }


/* ═══════════════════════════════════════════════════════════
   SETTINGS ACCORDION (v1.35.0 → v1.35.1)
   Independent open/close accordions used on screen-settings.
   Each section card uses .cui-card .cui-acc together. The
   header (.cui-acc-head) sits at the top of the card padding
   box. Body (.cui-acc-body) is hidden when closed, shown when
   open. Chevron rotates 90deg on open.

   v1.35.1 — Title size raised from 10px to 14px and now scales
   with the user's text size preference (md → 16px, lg → 18px)
   so the title reads as a TITLE not a label. Chevron raised to
   22px to match. Body padding-top raised from 12px to 18px so
   the content is not squashed onto the title. Title colour
   moved from var(--muted) to var(--text-mid) for prominence.
   ═══════════════════════════════════════════════════════════ */
.cui-acc-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  gap: 8px; padding: 6px 0;
}
.cui-acc-title {
  font-size: 14px; font-family: 'DM Mono', monospace;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-mid); font-weight: 600;
}
.cui-acc-chevron {
  color: var(--text-mid); font-size: 22px; line-height: 1;
  flex-shrink: 0; transition: transform 0.25s;
}
.cui-acc-head[aria-expanded="true"] > .cui-acc-chevron {
  transform: rotate(90deg);
}
.cui-acc-body {
  display: none;
  padding-top: 32px !important;
  animation: cuiFadeIn 0.25s ease;
}
.cui-acc-body.open { display: block; }

/* v1.35.3 — Body padding scales with text size so the gap stays
   proportional to the larger title at md and lg. Without this the
   title grows with text scaling but the gap below it stays at the
   default px value, making it feel squashed at larger sizes. */
#cui-root.cui-text-md .cui-acc-body { padding-top: 38px !important; }
#cui-root.cui-text-lg .cui-acc-body { padding-top: 44px !important; }

/* Text-size scaling for accordion title and chevron. Mirrors
   the summary-key pattern so the title grows in lockstep with
   the content inside. */
#cui-root.cui-text-md .cui-acc-title { font-size: 16px !important; }
#cui-root.cui-text-md .cui-acc-chevron { font-size: 24px !important; }
#cui-root.cui-text-lg .cui-acc-title { font-size: 18px !important; }
#cui-root.cui-text-lg .cui-acc-chevron { font-size: 26px !important; }

/* App version row at the bottom of screen-settings (v1.35.1).
   Small, dim, DM Mono. Sits below the Account accordion. */
.cui-profile-foot-version {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 24px !important;
  padding-bottom: 8px !important;
}
.cui-profile-foot-version-prev {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--muted);
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-top: 2px !important;
}


/* ═══════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════ */
.cui-field { margin-bottom: 14px; }
.cui-field-label {
  font-size: 11px; font-family: 'DM Mono', monospace;
  color: var(--muted); margin-bottom: 6px;
}
.cui-field-input {
  width: 100%; padding: 13px 16px;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: 16px; font-weight: 500;
  outline: none; transition: all 0.25s;
}
.cui-field-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
  background: var(--surface);
}
.cui-field-input::placeholder { color: var(--dim); }
.cui-field-note {
  font-size: 10px; color: var(--dim);
  margin-top: 4px; line-height: 1.4;
}
.cui-field-error {
  font-size: 11px; color: var(--danger);
  margin-top: 4px; display: none;
}
.cui-field-error.visible { display: block; }


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.cui-btn-primary {
  width: 100%; padding: 14px !important; border-radius: 16px;
  border: none; background: var(--teal) !important;
  color: var(--on-teal) !important;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.25s;
  box-shadow: 0 4px 14px rgba(61,143,128,0.20);
  -webkit-text-fill-color: var(--on-teal) !important;
}
.cui-btn-primary:hover { filter: brightness(0.95); transform: translateY(-0.5px); }
.cui-btn-primary:disabled {
  opacity: 0.4; cursor: not-allowed; transform: none;
  color: var(--on-teal) !important; -webkit-text-fill-color: var(--on-teal) !important;
}
.cui-btn-primary.cui-saving { opacity: 0.6; pointer-events: none; }

.cui-btn-soft {
  width: 100%; padding: 13px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-mid); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.25s;
}
.cui-btn-soft:hover { border-color: var(--border-hi); background: var(--bg); }

.cui-btn-undo {
  width: 100%; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--danger-border); background: var(--danger-dim);
  color: var(--danger); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.25s;
}
.cui-btn-undo:hover { background: rgba(181,82,76,0.12); }
.cui-undo-wrap { margin-top: 10px; }

.cui-btn-text {
  background: none; border: none; color: var(--muted);
  font-size: 12px; cursor: pointer; padding: 8px 0;
  text-decoration: underline; text-underline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════
   RESULT CARD
   ═══════════════════════════════════════════════════════════ */
.cui-result-card {
  background: var(--teal-soft); border: 1px solid var(--teal-mid);
  border-radius: 18px; padding: 18px 20px 16px !important; margin-bottom: 10px;
}
.cui-result-title {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 6px;
}
.cui-result-value { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.cui-result-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 6px; }


/* ═══════════════════════════════════════════════════════════
   CHECKLIST
   ═══════════════════════════════════════════════════════════ */
.cui-check-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg);
  margin-bottom: 6px; cursor: pointer; transition: all 0.25s;
}
.cui-check-item.checked { border-color: var(--border-hi); background: var(--teal-soft); }
.cui-check-box {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: transparent; flex-shrink: 0;
  transition: all 0.25s;
}
.cui-check-item.checked .cui-check-box {
  background: var(--teal); border-color: var(--teal);
  color: var(--on-teal); box-shadow: 0 2px 8px rgba(61,143,128,0.25);
}
.cui-check-label { font-size: 13px; color: var(--text-mid); }


/* ═══════════════════════════════════════════════════════════
   HABIT CHIPS
   ═══════════════════════════════════════════════════════════ */
.cui-habit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cui-habit-chip {
  padding: 9px 16px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-mid); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 6px;
}
.cui-habit-chip.active {
  background: var(--teal-soft);
  border-color: var(--border-hi); color: var(--teal);
}


/* ═══════════════════════════════════════════════════════════
   SLEEP + WAKE
   ═══════════════════════════════════════════════════════════ */
.cui-sleep-row { display: flex; gap: 6px; margin-bottom: 10px; }
.cui-sleep-opt { flex: 1; display: flex; justify-content: center; }
.cui-sleep-opt input[type="radio"] { display: none; }
.cui-sleep-opt span {
  display: block; width: 100%; text-align: center;
  padding: 9px 8px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 12px; color: var(--text-mid);
  cursor: pointer; transition: all 0.25s;
}
.cui-sleep-opt input[type="radio"]:checked + span {
  background: var(--teal-soft); border-color: var(--border-hi);
  color: var(--teal); font-weight: 600;
}

.cui-wake-row { display: flex; gap: 8px; margin-bottom: 12px; }
.cui-wake-chip {
  flex: 1; padding: 12px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-mid); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.25s;
  text-align: center;
}
.cui-wake-chip.active {
  background: var(--teal-soft);
  border-color: var(--border-hi); color: var(--teal);
}

/* Sleep duration */
.cui-sleep-duration {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.cui-sleep-duration-label {
  font-size: 11px; color: var(--muted);
  font-family: 'DM Mono', monospace;
  white-space: nowrap;
}
.cui-sleep-duration-input {
  width: 70px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: 14px; text-align: center;
  outline: none; transition: all 0.25s;
}
.cui-sleep-duration-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.cui-sleep-duration-unit {
  font-size: 11px; color: var(--dim);
  font-family: 'DM Mono', monospace;
}


/* ═══════════════════════════════════════════════════════════
   INFO BUTTON — single standard across whole app
   Always top-right of card. Absolute positioned so it never
   pushes content down. 26px touch target, muted circle.
   ═══════════════════════════════════════════════════════════ */
.cui-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--dim) !important;
  cursor: pointer;
  transition: background 0.2s; flex-shrink: 0;
  padding: 0; line-height: 1;
  position: absolute;
  top: 14px; right: 14px;
  z-index: 1;
}
[data-theme="dark"] .cui-info-btn {
  background: rgba(255,255,255,0.06);
  color: rgba(200,220,235,0.5) !important;
}
.cui-info-btn:hover { background: var(--elevated); }
/* Inline variant — sits in flex header row, does not float over charts */
.cui-info-btn--inline {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex-shrink: 0;
}

/* Card must be position:relative to anchor the button */
.cui-card { position: relative; }

/* ═══════════════════════════════════════════════════════════
   DARK MODE — COMPONENT OVERRIDES
   Fixes contrast issues where CSS variables alone aren't enough.
   v1.8.6 — full dark mode audit 2026-03-16.
   ═══════════════════════════════════════════════════════════ */

/* Summary row border — hardcoded light colour invisible in dark */
[data-theme="dark"] .cui-summary-row {
  border-bottom-color: rgba(200,220,235,0.08);
}

/* Soft button — needs more contrast against dark surface */
[data-theme="dark"] .cui-btn-soft {
  color: var(--text); border-color: rgba(45,212,191,0.18);
}
[data-theme="dark"] .cui-btn-soft:hover {
  border-color: rgba(45,212,191,0.35);
  background: rgba(45,212,191,0.06);
}

/* Text button — too dim in dark mode */
[data-theme="dark"] .cui-btn-text {
  color: var(--text-mid);
}

/* Mode toggle inactive tabs — barely visible */
[data-theme="dark"] .cui-mode-btn {
  color: rgba(200,220,235,0.50);
}
[data-theme="dark"] .cui-mode-btn.active {
  background: rgba(45,212,191,0.12);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.20);
}

/* HVM chart bars — 35% opacity invisible on dark bg */
[data-theme="dark"] .cui-hvm-bar {
  opacity: 0.55;
}

/* Journey muted — double-fading kills readability */
[data-theme="dark"] .cui-journey-muted {
  opacity: 0.60;
}

/* Journey inactive label — inherits --text which is fine, but sub needs boost */
[data-theme="dark"] .cui-journey-inactive-sub {
  color: rgba(200,220,235,0.50);
}

/* Stepper future dots — invisible */
[data-theme="dark"] .cui-stepper-dot {
  border-color: rgba(200,220,235,0.15);
  color: rgba(200,220,235,0.40);
}
[data-theme="dark"] .cui-stepper-name--future {
  color: rgba(200,220,235,0.40);
}

/* Check box unchecked — border too faint */
[data-theme="dark"] .cui-check-box {
  border-color: rgba(200,220,235,0.25);
}

/* Habit chips — inactive border barely visible */
[data-theme="dark"] .cui-habit-chip {
  border-color: rgba(200,220,235,0.12);
  color: var(--text-mid);
}

/* Sleep options — same issue as habit chips */
[data-theme="dark"] .cui-sleep-opt span {
  border-color: rgba(200,220,235,0.12);
  color: var(--text-mid);
}

/* Phase bar track — near-invisible progress background */
[data-theme="dark"] .cui-phase-bar {
  background: rgba(200,220,235,0.10);
}

/* Step accordion buttons — border too faint */
[data-theme="dark"] .cui-step-btn {
  border-color: rgba(200,220,235,0.10);
}
[data-theme="dark"] .cui-step-btn:hover {
  border-color: rgba(45,212,191,0.25);
}

/* Input fields — border barely visible */
[data-theme="dark"] .cui-field-input {
  border-color: rgba(200,220,235,0.12);
  color: var(--text);
}
[data-theme="dark"] .cui-field-input::placeholder {
  color: rgba(200,220,235,0.30);
}
[data-theme="dark"] .cui-field-input:focus {
  border-color: var(--teal);
}

/* Quick log button borders */
[data-theme="dark"] .cui-quick-btn {
  border-color: rgba(200,220,235,0.08);
}
[data-theme="dark"] .cui-quick-btn:hover {
  border-color: rgba(45,212,191,0.25);
}

/* Card borders — bump slightly for definition */
[data-theme="dark"] .cui-card {
  border-color: rgba(200,220,235,0.08);
}

/* Nav tab inactive — too faint to see which tabs exist */
[data-theme="dark"] .cui-nav-tab {
  color: rgba(200,220,235,0.35);
}
[data-theme="dark"] .cui-nav-tab:hover {
  color: rgba(200,220,235,0.55);
}

/* Top bar buttons */
[data-theme="dark"] .cui-top-btn {
  border-color: rgba(200,220,235,0.10);
  color: rgba(200,220,235,0.50);
}

/* Notice / elevated panels — slightly brighter for separation */
[data-theme="dark"] .cui-notice {
  background: rgba(200,220,235,0.06);
}

/* Result card note text */
[data-theme="dark"] .cui-result-note {
  color: var(--text-mid);
}

/* Heatmap legend and day labels */
[data-theme="dark"] .cui-heatmap-legend {
  color: rgba(200,220,235,0.40);
}
[data-theme="dark"] .cui-heatmap-day-labels {
  color: rgba(200,220,235,0.35);
}

/* BP progress dates */
[data-theme="dark"] .cui-bp-progress-date {
  color: rgba(200,220,235,0.35);
}

/* TC scrollbar thumb */
[data-theme="dark"] .cui-tc-scroll::-webkit-scrollbar-thumb {
  background: rgba(200,220,235,0.20);
}

/* Metric detail row border — hardcoded light colour */
[data-theme="dark"] .cui-metric-detail-row {
  border-bottom-color: rgba(200,220,235,0.08);
}

/* Metric rows — stronger interactive cues in dark mode */
[data-theme="dark"] .cui-metrics-card .cui-metric-row {
  background: rgba(200,220,235,0.04) !important;
  border-color: rgba(200,220,235,0.10) !important;
}
[data-theme="dark"] .cui-metric-header:hover {
  background: rgba(45,212,191,0.08);
}
/* Profile section separator — hardcoded light colour */
[data-theme="dark"] .cui-profile-section + .cui-profile-section {
  border-top-color: rgba(200,220,235,0.08);
}

/* Dark mode — teal buttons get dark text for contrast */
[data-theme="dark"] .cui-btn-primary {
  color: #070E14 !important;
  -webkit-text-fill-color: #070E14 !important;
}
[data-theme="dark"] .cui-btn-primary:disabled {
  color: #070E14 !important;
  -webkit-text-fill-color: #070E14 !important;
}
[data-theme="dark"] #screen-profile .cui-btn-soft:not(.cui-btn-soft--danger) {
  color: #070E14 !important;
  -webkit-text-fill-color: #070E14 !important;
}
[data-theme="dark"] .cui-prac-cta-btn {
  color: #070E14 !important;
  -webkit-text-fill-color: #070E14 !important;
}

.cui-info-overlay {
  display: none; position: absolute; inset: 0;
  background: rgba(0,0,0,0.3); z-index: 100;
  align-items: flex-end; justify-content: center;
  animation: cuiFadeIn 0.2s ease;
  border-radius: 44px;
  overflow: hidden;
}
.cui-info-overlay.open { display: flex; }
.cui-info-popup {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 24px 24px 0 0; padding: 24px 22px 32px !important;
  max-width: 480px; width: 100%;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
  transition: background 0.4s;
}
.cui-info-popup-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cui-info-popup-body { font-size: 13px; color: var(--text-mid); line-height: 1.7; white-space: pre-wrap; }
.cui-info-popup-close {
  margin-top: 16px !important; width: 100%; padding: 14px !important;
  border-radius: 14px; border: none;
  background: var(--teal); color: var(--on-teal);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center;
  -webkit-text-fill-color: var(--on-teal);
}
[data-theme="dark"] .cui-info-popup-close {
  color: #070E14 !important;
  -webkit-text-fill-color: #070E14 !important;
}


/* ═══════════════════════════════════════════════════════════
   EMERGENCY THRESHOLD
   ═══════════════════════════════════════════════════════════ */
.cui-emergency-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  border-radius: 44px;
  overflow: hidden;
}
.cui-emergency-card {
  background: var(--surface); border: 2px solid var(--danger);
  border-radius: 22px; padding: 24px;
  max-width: 380px; width: 100%; text-align: center;
  box-shadow: var(--card-sh-lg);
}
.cui-emergency-icon { color: var(--danger); margin-bottom: 12px; }
.cui-emergency-title {
  font-size: 16px; font-weight: 700; margin-bottom: 10px;
  line-height: 1.4;
}
.cui-emergency-body {
  font-size: 13px; color: var(--text-mid);
  line-height: 1.7; margin-bottom: 18px;
}


/* ═══════════════════════════════════════════════════════════
   OUTAGE BANNER
   ═══════════════════════════════════════════════════════════ */
.cui-outage-banner {
  background: var(--amber-soft);
  border-bottom: 1px solid rgba(196,148,58,0.18);
  padding: 10px 20px;
  font-size: 12px; color: var(--amber-text);
  text-align: center; font-weight: 500;
}

/* ── SYNC BAR — stale data indicator ────────────────────
   Thin animated bar at top of app. Shows when cache is from
   a previous day while fresh data loads from Supabase.
   Hides automatically when cui-data-fresh fires.
──────────────────────────────────────────────────────── */
.cui-sync-bar {
  height: 3px;
  background: var(--elevated);
  overflow: hidden;
  flex-shrink: 0;
}
.cui-sync-bar-fill {
  height: 100%;
  width: 40%;
  background: var(--teal);
  border-radius: 2px;
  animation: cui-sync-slide 1.2s ease-in-out infinite;
}
@keyframes cui-sync-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}


/* ═══════════════════════════════════════════════════════════
   IDENTITY CHECK
   ═══════════════════════════════════════════════════════════ */
.cui-identity-overlay {
  position: fixed; inset: 0;
  background: var(--bg); z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.cui-identity-card {
  text-align: center; max-width: 320px; width: 100%;
  padding: 40px 30px !important;
  animation: cuiIdentityIn 0.6s ease both;
}
@keyframes cuiIdentityIn {
  0% { opacity: 0; transform: scale(0.92) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.cui-identity-card .cui-avatar {
  width: 96px !important; height: 96px !important;
  font-size: 28px !important;
  margin: 0 auto !important;
  border: 2px solid var(--teal-mid) !important;
  box-shadow: 0 8px 30px rgba(61,143,128,0.15);
  animation: cuiAvatarPulse 3s ease-in-out infinite;
}
@keyframes cuiAvatarPulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(61,143,128,0.15); }
  50% { box-shadow: 0 8px 40px rgba(61,143,128,0.25); }
}
.cui-identity-name {
  font-size: 24px !important; font-weight: 700 !important;
  margin-top: 24px !important;
  color: var(--text);
}
.cui-identity-sub {
  font-size: 11px; color: var(--muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1.5px !important; text-transform: uppercase;
  margin-top: 6px !important; margin-bottom: 32px !important;
}
.cui-identity-card .cui-btn-primary {
  margin-top: 0 !important;
}
.cui-identity-card .cui-btn-soft {
  margin-top: 10px !important;
}


/* ═══════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════ */
.cui-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--teal-soft); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--teal);
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(61,143,128,0.10);
}


/* ═══════════════════════════════════════════════════════════
   DIAGNOSTICS PANEL
   ═══════════════════════════════════════════════════════════ */
.cui-diag-panel {
  position: absolute; inset: 0; z-index: 250;
  background: var(--bg); display: flex; flex-direction: column;
}
.cui-diag-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.cui-diag-title { font-size: 16px; font-weight: 700; }
.cui-diag-close {
  font-size: 18px; background: none; border: none;
  color: var(--muted); cursor: pointer;
}
.cui-diag-scroll {
  flex: 1; overflow-y: auto; padding: 12px 20px;
  font-size: 11px; font-family: 'DM Mono', monospace;
  line-height: 1.8; color: var(--text-mid);
}


/* ═══════════════════════════════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════════════════════════════ */
.cui-progress {
  padding: 16px 24px 0;
  display: flex; gap: 4px; flex-shrink: 0;
}
.cui-progress-dot {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--elevated); transition: background 0.4s;
}
.cui-progress-dot.done { background: var(--teal); }
.cui-progress-dot.current { background: var(--teal); opacity: 0.5; }

.cui-onboarding-step { display: none; flex-direction: column; min-height: 0; gap: 20px; }
.cui-onboarding-step.active { display: flex; }

/* Kit bubble */
.cui-kit-bubble {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px 20px 20px 4px;
  padding: 16px 18px; margin-bottom: 16px;
  box-shadow: var(--card-sh);
}
.cui-kit-name {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1px; color: var(--teal);
  text-transform: uppercase; margin-bottom: 6px;
}
.cui-kit-text {
  font-size: 14px; color: var(--text-mid); line-height: 1.65;
}
.cui-kit-text strong { color: var(--text); font-weight: 600; }

/* Sex cards */
.cui-sex-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cui-sex-card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 20px; padding: 24px 16px;
  text-align: center; cursor: pointer; transition: all 0.25s;
  box-shadow: var(--card-sh);
}
.cui-sex-card:hover { border-color: var(--border-hi); }
.cui-sex-card.selected { border-color: var(--teal); background: var(--teal-soft); }
.cui-sex-icon { font-size: 28px; margin-bottom: 8px; }
.cui-sex-label { font-size: 14px; font-weight: 600; }

/* Goal grid */
.cui-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.cui-goal-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 18px; padding: 18px 14px;
  cursor: pointer; transition: all 0.25s; box-shadow: var(--card-sh);
}
.cui-goal-card:hover { border-color: var(--border-hi); }
.cui-goal-card.selected { border-color: var(--teal); background: var(--teal-soft); }
.cui-goal-icon { color: var(--teal); margin-bottom: 6px; }
.cui-goal-label { font-size: 12px; font-weight: 600; line-height: 1.3; }

/* Health options */
.cui-health-question { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cui-health-options { display: flex; gap: 8px; margin-bottom: 14px; }
.cui-health-opt {
  flex: 1; padding: 12px; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--surface);
  text-align: center; font-size: 13px; font-weight: 600;
  color: var(--text-mid); cursor: pointer; transition: all 0.25s;
}
.cui-health-opt.selected { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }

/* T&C scroll */
.cui-tc-scroll {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px;
  max-height: 320px; overflow-y: auto;
  margin-bottom: 16px; box-shadow: var(--card-sh);
}
.cui-tc-scroll::-webkit-scrollbar { width: 3px; }
.cui-tc-scroll::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }
.cui-tc-heading {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--teal); margin: 16px 0 6px; font-weight: 600;
}
.cui-tc-heading:first-child { margin-top: 0; }
.cui-tc-body { font-size: 12px; color: var(--text-mid); line-height: 1.65; }
.cui-tc-body strong { color: var(--text); font-weight: 600; }
.cui-tc-highlight {
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  padding: 10px 12px; border-radius: 0 10px 10px 0;
  margin: 10px 0; font-size: 12px;
  color: var(--text-mid); line-height: 1.6;
}
.cui-tc-check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; cursor: pointer;
}
.cui-tc-checkbox {
  width: 24px; height: 24px; border-radius: 8px;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px; color: transparent;
  transition: all 0.25s; margin-top: 1px;
}
.cui-tc-check.checked .cui-tc-checkbox {
  background: var(--teal); border-color: var(--teal); color: var(--on-teal);
}
.cui-tc-check-label { font-size: 13px; font-weight: 600; line-height: 1.4; }

/* Summary */
.cui-summary-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid rgba(140,128,115,0.10);
  gap: 12px;
}
.cui-summary-row:last-child { border-bottom: none; }
.cui-summary-key { font-size: 13px; color: var(--muted); flex-shrink: 0; min-width: 110px; padding-top: 1px; }
.cui-summary-val { font-size: 13px; font-weight: 600; flex: 1; text-align: right; word-break: break-word; }
.cui-summary-goals { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 200px; }
.cui-summary-goal-chip {
  font-size: 12px; padding: 6px 14px; border-radius: 100px;
  background: var(--teal-soft); color: var(--teal); font-weight: 600;
  white-space: nowrap; border: 1px solid rgba(29,158,117,0.2);
  display: inline-block;
}

/* Step labels */
.cui-step-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1.5px; color: var(--teal);
  text-transform: uppercase; margin-bottom: 8px;
}
.cui-step-title {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 6px;
}
.cui-step-sub {
  font-size: 13px; color: var(--muted);
  line-height: 1.5; margin-bottom: 20px;
}

/* Notice */
.cui-notice {
  font-size: 11px; color: var(--muted); line-height: 1.5;
  padding: 10px 14px; background: var(--elevated);
  border-radius: 12px; margin-bottom: 16px;
}

/* Onboarding layout */
.cui-ob-body { flex: 1; padding: 28px 0 8px; display: flex; flex-direction: column; gap: 16px; }
.cui-ob-body--center { flex: 1; padding: 28px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cui-ob-footer { padding: 20px 0 36px; flex-shrink: 0; }
.cui-ob-footer .cui-btn-primary { width: 100%; }
.cui-ob-footer .cui-btn-primary:disabled { opacity: 0.4; }
.cui-ob-footer .cui-btn-primary:disabled { opacity: 0.4; }

/* Jarvis avatar */
.cui-ob-avatar-wrap { display: flex; flex-direction: column; align-items: center; }
.cui-ob-avatar-pulse-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 8px;
}
.cui-ob-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700; color: #fff;
  position: relative; z-index: 1; flex-shrink: 0;
}
.cui-ob-avatar-ring {
  position: absolute; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--teal);
  animation: cuiObPulse 2.6s ease-out infinite;
}
.cui-ob-avatar-ring--2 { animation-delay: 1.3s; }
@keyframes cuiObPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.0); opacity: 0; }
}
/* Onboarding always renders in light mode regardless of app theme */
#screen-onboarding {
  --bg:         #ECEAE5;
  --surface:    #FFFFFF;
  --elevated:   #E9E5E0;
  --border:     rgba(140,128,115,0.30);
  --border-hi:  rgba(72,148,132,0.45);
  --text:       #1A1816;
  --text-mid:   #3D3834;
  --muted:      #6E6760;
  --dim:        #A09891;
  --teal:       #3D8F80;
  --teal-soft:  rgba(61,143,128,0.08);
  --teal-mid:   rgba(61,143,128,0.16);
  --amber:      #C4943A;
  --amber-soft: rgba(196,148,58,0.10);
  --on-teal:    #FFFFFF;
  background:   #ECEAE5 !important;
  color:        #1A1816 !important;
}

.cui-ob-avatar-name {
  font-size: 11px; font-family: 'DM Mono', monospace;
  letter-spacing: 2px; text-transform: uppercase; color: var(--teal);
}

/* Kit bubble variants */
.cui-kit-bubble--plain { border-radius: 20px; }

/* Onboarding input */
.cui-ob-label {
  font-size: 11px; font-family: 'DM Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--teal); display: block; margin-bottom: 8px;
}
.cui-ob-input {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 15px; font-family: 'DM Sans', sans-serif;
  outline: none; box-sizing: border-box; transition: border-color 0.25s;
}
.cui-ob-input:focus { border-color: var(--teal); }
.cui-ob-field { margin-bottom: 16px; }

/* Animation */
@keyframes cuiObFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cui-ob-anim { opacity: 0; }
.cui-ob-anim.visible { animation: cuiObFadeUp 0.4s ease forwards; }

/* Onboarding field note */
.cui-ob-field-note {
  font-size: 12px; color: var(--muted); line-height: 1.5;
  margin-top: 8px;
}

/* Onboarding field label (monospace, teal) */
.cui-ob-field-label {
  font-size: 11px; font-family: 'DM Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--teal); display: block; margin-bottom: 8px;
}

/* Goal vertical list */
.cui-ob-goal-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cui-ob-goal-item {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
  font-size: 13px; font-weight: 600; color: var(--text-mid);
  cursor: pointer; transition: all 0.25s; line-height: 1.4;
}
.cui-ob-goal-item:hover { border-color: var(--border-hi); }
.cui-ob-goal-item.selected { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.cui-ob-goal-item.disabled { opacity: 0.4; pointer-events: none; }
.cui-ob-goal-counter {
  font-size: 12px; color: var(--muted); text-align: center;
  margin-top: 4px; margin-bottom: 8px;
}

/* Phase cards row */
.cui-ob-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.cui-ob-phase-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 18px; padding: 16px 10px;
  text-align: center; box-shadow: var(--card-sh);
}
.cui-ob-phase-num {
  font-size: 22px; font-weight: 700; color: var(--teal);
  font-family: 'DM Mono', monospace; margin-bottom: 4px;
}
.cui-ob-phase-name {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.cui-ob-phase-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Athlete options — vertical stack */
.cui-ob-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cui-ob-opt {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
  font-size: 13px; font-weight: 600; color: var(--text-mid);
  cursor: pointer; transition: all 0.25s; line-height: 1.4;
}
.cui-ob-opt:hover { border-color: var(--border-hi); }
.cui-ob-opt.selected { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }

/* Day picker — wrapping row */
.cui-ob-day-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cui-ob-day {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 100px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; color: var(--text-mid);
  cursor: pointer; transition: all 0.25s;
}
.cui-ob-day:hover { border-color: var(--border-hi); }
.cui-ob-day.selected { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }

/* Wake/bedtime row */
.cui-ob-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.cui-ob-time-col { display: flex; flex-direction: column; gap: 6px; }

/* Footer row with back + continue */
.cui-ob-footer-row { display: flex; align-items: center; gap: 12px; }
.cui-ob-footer-row .cui-ob-next { flex: 1; }
.cui-ob-back {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-mid); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.cui-ob-back:hover { border-color: var(--border-hi); color: var(--text); }

/* Dark mode overrides for new classes */
[data-theme="dark"] .cui-ob-goal-item { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .cui-ob-goal-item.selected { border-color: var(--teal); background: var(--teal-soft); }
[data-theme="dark"] .cui-ob-phase-card { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .cui-ob-opt { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .cui-ob-opt.selected { border-color: var(--teal); background: var(--teal-soft); }
[data-theme="dark"] .cui-ob-day { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .cui-ob-day.selected { border-color: var(--teal); background: var(--teal-soft); }


/* ═══════════════════════════════════════════════════════════
   KIT CARDS (inside home + reading flows)
   ═══════════════════════════════════════════════════════════ */
.cui-kit-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 16px 18px;
  margin-bottom: 10px; box-shadow: var(--card-sh);
}
.cui-kit-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.cui-kit-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 0.8px; color: var(--teal); text-transform: uppercase;
}
.cui-kit-card-body { font-size: 14px; color: var(--text-mid); line-height: 1.7; padding-top: 4px; }
.cui-kit-card-body strong { color: var(--text); font-weight: 600; }
.cui-kit-card-body em { color: var(--teal); font-style: normal; font-weight: 600; }
.cui-kit-card-dismiss {
  font-size: 10px; color: var(--dim); cursor: pointer;
  margin-top: 8px; background: none; border: none; padding: 0;
}

/* Kit card variants */
.cui-kit-card--insight { background: var(--teal-soft); border-color: var(--teal-mid); }
.cui-kit-card--warning { background: var(--amber-soft); border-color: rgba(196,148,58,0.18); }
.cui-kit-card--celebrate { background: var(--purple-soft); border-color: rgba(142,125,191,0.18); }
.cui-kit-card--edu { border-left: 3px solid var(--teal); border-radius: 4px 20px 20px 4px; }
.cui-kit-card--nudge { background: var(--bg); border-style: dashed; }

/* State badges */
.cui-state-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-family: 'DM Mono', monospace; font-weight: 500;
  padding: 3px 8px; border-radius: 6px; margin-left: auto;
}
.cui-state-badge--thriving { background: var(--green-soft); color: var(--green-text); }
.cui-state-badge--steady { background: var(--blue-soft); color: var(--blue); }
.cui-state-badge--drifting { background: var(--amber-soft); color: var(--amber-text); }


/* ═══════════════════════════════════════════════════════════
   METRIC ROWS (TRENDS)
   ═══════════════════════════════════════════════════════════ */
.cui-metric-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; margin-bottom: 8px;
  overflow: hidden; box-shadow: var(--card-sh);
  transition: background 0.4s;
}
.cui-metric-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; cursor: pointer; transition: background 0.15s;
}
.cui-metric-header:hover { background: var(--teal-soft); }
.cui-metric-header:active { background: var(--teal-mid); }
.cui-metric-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cui-metric-name { flex: 1; font-size: 14px; font-weight: 600; }
.cui-metric-status { font-size: 13px; font-weight: 600; }
.cui-metric-chevron {
  width: 16px; height: 16px;
  color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
}
.cui-metric-row.open .cui-metric-chevron {
  color: var(--teal); transform: rotate(180deg);
}
.cui-metric-detail {
  display: none; padding: 0 18px 14px;
  border-top: 1px solid var(--border);
  overflow: visible;
}
.cui-metric-detail.open { display: block; }
.cui-metric-detail-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid rgba(140,128,115,0.08);
}
.cui-metric-detail-row:last-child { border-bottom: none; }
.cui-metric-detail-key { font-size: 11px; color: var(--muted); }
.cui-metric-detail-val { font-size: 11px; font-weight: 600; }

/* Mini charts */
.cui-mchart { padding: 8px 0 12px; margin-bottom: 8px; position: relative; }
.cui-mchart-bars { display: flex; gap: 3px; align-items: flex-end; height: 64px; }
.cui-mchart-bar {
  flex: 1; border-radius: 3px 3px 1px 1px;
  min-width: 0; transition: height 0.3s; position: relative;
}
.cui-mchart-bar:hover::after {
  content: attr(data-val); position: absolute;
  bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  font-size: 9px; font-family: 'DM Mono', monospace;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 5px; border-radius: 4px;
  white-space: nowrap; z-index: 2;
}
.cui-mchart-dates { display: flex; justify-content: space-between; margin-top: 4px; }
.cui-mchart-date {
  font-size: 8px; font-family: 'DM Mono', monospace;
  color: var(--dim); flex: 1; text-align: center;
}
.cui-mchart-controls {
  display: flex; align-items: center; gap: 5px; margin-bottom: 14px;
  flex-wrap: nowrap;
}
.cui-mchart-range { display: flex; gap: 5px; }
.cui-mchart-range-btn {
  padding: 5px 9px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 11px; font-family: 'DM Mono', monospace;
  color: var(--muted); cursor: pointer;
  white-space: nowrap;
}
.cui-mchart-range-btn.active {
  background: var(--teal-soft); border-color: var(--border-hi);
  color: var(--teal);
}
.cui-mchart-ampm { display: flex; gap: 5px; margin-left: 6px; }
.cui-mchart-ampm-btn {
  padding: 5px 9px !important; border-radius: 20px !important;
  border: 1px solid var(--border) !important; background: var(--bg) !important;
  font-size: 11px !important; font-family: 'DM Mono', monospace !important;
  color: var(--muted) !important; cursor: pointer; white-space: nowrap;
}
.cui-mchart-ampm-btn.active {
  background: var(--teal-soft) !important; border-color: var(--border-hi) !important;
  color: var(--teal) !important;
}

/* ── PERIOD SELECT (entry screens) ──
   AM / PM selector on glucose and BP entry. Matches the trends pill
   pattern (.cui-mchart-ampm-btn) but scoped to its own class so future
   changes to one pattern don't bleed into the other. User picks the
   period for this reading — clock pre-selects the default, tap to
   override. Active-state colour flips to blue on the BP screen below. */
.cui-period-select {
  display: flex !important;
  gap: 5px !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}
.cui-period-btn {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
  font-size: 12px !important;
  font-family: 'DM Mono', monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.cui-period-btn.active {
  background: var(--teal-soft) !important;
  border-color: var(--border-hi) !important;
  color: var(--teal) !important;
}
#screen-bp .cui-period-btn.active {
  background: var(--blue-soft) !important;
  border-color: var(--border-hi) !important;
  color: var(--blue) !important;
}

/* No data state */
.cui-mchart-empty {
  height: 64px; display: flex; align-items: center;
  justify-content: center; font-size: 11px;
  color: var(--dim); font-family: 'DM Mono', monospace;
}


/* ═══════════════════════════════════════════════════════════
   TRENDS — ZONE SPECTRUM
   ═══════════════════════════════════════════════════════════ */
.cui-spectrum-bar {
  display: flex; height: 28px; border-radius: 8px;
  overflow: visible; position: relative;
}
.cui-spectrum-seg { flex: 1; }
.cui-spectrum-marker {
  position: absolute; top: -5px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 2px 10px rgba(0,0,0,0.20);
  transition: left 0.5s ease;
  margin-left: -13px;
}

/* ── Habits vs Metabolic Age chart ── */
.cui-hvm-chart {
  position: relative; height: 180px;
  display: flex; align-items: flex-end;
  gap: 2px; padding: 0 0 24px !important;
  margin-top: 14px !important;
}
.cui-hvm-day {
  flex: 1; display: flex; align-items: flex-end;
  gap: 1px; min-width: 0;
}
.cui-hvm-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  min-height: 2px; transition: height 0.3s ease;
}
.cui-hvm-line {
  position: absolute; left: 0; right: 0;
  height: 2px; background: var(--teal);
  opacity: 0.5;
}
.cui-hvm-dot {
  position: absolute; width: 8px; height: 8px;
  border-radius: 50%; background: var(--teal);
  border: 2px solid var(--surface);
  margin-left: -4px; margin-top: -3px;
}
.cui-hvm-dates {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--dim);
  font-family: 'DM Mono', monospace;
}
.cui-hvm-legend {
  display: flex; gap: 14px; margin-top: 10px !important;
  font-size: 10px; color: var(--muted);
  font-family: 'DM Mono', monospace;
  align-items: center;
}
.cui-hvm-legend-dot {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 4px;
}
.cui-hvm-legend-line {
  width: 16px; height: 2px; display: inline-block;
  margin-right: 4px; vertical-align: middle;
  border-radius: 1px;
}
.cui-hvm-ma-label {
  position: absolute; right: 0; font-size: 9px;
  font-family: 'DM Mono', monospace; color: var(--teal);
  font-weight: 600;
}

/* Phase badge */
.cui-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 100px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  background: var(--elevated);
  padding: 7px 16px;
  max-width: 100%;
}
.cui-phase-badge-pre {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cui-phase-badge-val {
  font-size: 13px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.04em;
  color: var(--teal);
  font-weight: 700;
  white-space: nowrap;
}
/* Remove old sub-element classes — replaced above */
.cui-phase-badge-label,
.cui-phase-badge-sep,
.cui-phase-badge-value { display: none; }


/* ═══════════════════════════════════════════════════════════
   TRENDS — TIME IN ZONE
   ═══════════════════════════════════════════════════════════ */
.cui-tiz-bar {
  display: flex; height: 28px; border-radius: 8px;
  overflow: hidden; margin-bottom: 8px;
}
.cui-tiz-seg { transition: width 0.5s ease; }
.cui-tiz-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.cui-tiz-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.cui-tiz-dot { width: 8px; height: 8px; border-radius: 50%; }
#screen-trends .cui-tiz-item { font-size: 10px !important; }


/* ═══════════════════════════════════════════════════════════
   TRENDS — HVM CHART
   ═══════════════════════════════════════════════════════════ */
.cui-hvm-chart {
  position: relative; height: 120px;
  display: flex; align-items: flex-end; gap: 2px;
}
.cui-hvm-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 2px; height: 100%; position: relative;
}
.cui-hvm-bar {
  width: 100%; border-radius: 3px 3px 0 0;
  background: var(--teal); opacity: 0.35;
}
.cui-hvm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); position: absolute; z-index: 2;
  border: 1.5px solid var(--surface);
}
.cui-hvm-date {
  font-size: 8px; color: var(--dim);
  font-family: 'DM Mono', monospace; margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════
   TRENDS — JOURNEY STEPPER
   ═══════════════════════════════════════════════════════════ */
.cui-stepper { display: flex; flex-direction: column; }
.cui-stepper-step {
  display: flex; align-items: flex-start; gap: 12px;
  position: relative; padding-bottom: 16px;
}
.cui-stepper-step:last-child { padding-bottom: 0; }
.cui-stepper-line {
  position: absolute; left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--border);
}
.cui-stepper-step:last-child .cui-stepper-line { display: none; }
.cui-stepper-dot {
  width: 28px; height: 28px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  border: 2px solid var(--border);
  background: var(--bg); color: var(--dim);
  position: relative; z-index: 1;
}
.cui-stepper-dot--done { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.cui-stepper-dot--current { background: var(--surface); border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.cui-stepper-name { font-size: 13px; font-weight: 600; }
.cui-stepper-name--future { color: var(--dim); }
.cui-stepper-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Legacy journey classes — dead code */
.cui-journey-active { display: none; }
.cui-journey-inactive { display: none; }
.cui-journey-muted { opacity: 0.45; }


/* ═══════════════════════════════════════════════════════════
   TRENDS — TARGET RINGS
   ═══════════════════════════════════════════════════════════ */
.cui-target-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px; text-align: center;
  box-shadow: var(--card-sh); transition: background 0.4s;
}
.cui-target-ring { width: 52px; height: 52px; margin: 0 auto 8px; position: relative; }
.cui-target-ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.cui-target-ring-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--teal);
  font-family: 'DM Mono', monospace;
}
.cui-target-name { font-size: 11px; color: var(--text-mid); font-weight: 500; }


/* ═══════════════════════════════════════════════════════════
   TRENDS — HEATMAP
   ═══════════════════════════════════════════════════════════ */
.cui-heatmap-grid { display: flex; gap: 3px; flex-wrap: wrap; }
.cui-heatmap-cell {
  width: 12px; height: 12px; border-radius: 3px;
  transition: transform 0.15s;
}
.cui-heatmap-cell:hover { transform: scale(1.4); }
.cui-heatmap-months { display: flex; justify-content: space-between; margin-top: 10px; }
.cui-heatmap-month { font-size: 9px; color: var(--dim); font-family: 'DM Mono', monospace; }
.cui-heatmap-wrap {
  display: flex; gap: 6px;
}
.cui-heatmap-day-labels {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 8px; color: var(--dim);
  font-family: 'DM Mono', monospace;
  flex-shrink: 0;
}
.cui-heatmap-day-label {
  display: flex; align-items: center; justify-content: flex-end;
  width: 22px; height: 12px;
}
.cui-heatmap-legend {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px !important;
  font-size: 9px; color: var(--dim);
  font-family: 'DM Mono', monospace;
}
.cui-heatmap-legend-cells {
  display: flex; gap: 2px;
}
.cui-heatmap-legend-cell {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--teal);
}


/* ═══════════════════════════════════════════════════════════
   TRENDS — INSIGHT CARD
   ═══════════════════════════════════════════════════════════ */
.cui-insight-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 16px 18px;
  margin-bottom: 12px; box-shadow: var(--card-sh);
  transition: background 0.4s;
}
.cui-insight-highlight { color: var(--teal); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════
   SKELETON LOADING STATES
   ═══════════════════════════════════════════════════════════ */
.cui-skeleton {
  background: var(--skeleton);
  border-radius: 8px;
  animation: cuiShimmer 1.5s ease-in-out infinite;
}
.cui-skeleton-line { height: 12px; margin-bottom: 8px; }
.cui-skeleton-line--short { width: 60%; }
.cui-skeleton-line--medium { width: 80%; }
.cui-skeleton-circle { border-radius: 50%; }
.cui-skeleton-box { border-radius: 16px; }

@keyframes cuiShimmer {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}


/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

/* ── Focus-visible — keyboard navigation (accessibility) ── */
#cui-root button:focus-visible,
#cui-root input:focus-visible,
#cui-root select:focus-visible,
#cui-root [tabindex]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
#cui-root .cui-nav-tab:focus-visible { outline-offset: -2px; }
#cui-root .cui-habit-chip:focus-visible,
#cui-root .cui-wake-chip:focus-visible,
#cui-root .cui-goal-card:focus-visible,
#cui-root .cui-sex-card:focus-visible,
#cui-root .cui-health-opt:focus-visible,
#cui-root .cui-check-item:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

@keyframes cuiFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cuiBreathe {
  0%, 100% { box-shadow: 0 6px 24px var(--glow); }
  50%      { box-shadow: 0 6px 32px var(--glow); }
}
@keyframes cuiPulseGlow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}
.cui-fade-in { animation: cuiFadeIn 0.5s ease both; }
.cui-fade-in-d1 { animation-delay: 0.15s; }
.cui-fade-in-d2 { animation-delay: 0.3s; }
.cui-fade-in-d3 { animation-delay: 0.45s; }


/* ═══════════════════════════════════════════════════════════
   HAPTIC FEEDBACK FLASH (visual confirmation on save)
   ═══════════════════════════════════════════════════════════ */
.cui-save-flash {
  animation: cuiFlash 0.3s ease;
}
@keyframes cuiFlash {
  0% { box-shadow: 0 0 0 0 var(--teal); }
  50% { box-shadow: 0 0 0 6px var(--teal-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Utility ── */
.cui-mt-8 { margin-top: 8px; }
.cui-m-12 { margin: 12px; }
.cui-diag-zone {
  position: absolute; bottom: 0; left: 0;
  width: 80px; height: 80px; z-index: 50;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — full width on mobile
   ═══════════════════════════════════════════════════════════ */
/* mobile handled by the media query above */


/* ═══════════════════════════════════════════════════════════
   HOME SCREEN SPACING REBALANCE — FORCE PASS v1.0.3
   Purpose: make the home screen breathe without changing shell structure.
   These selectors are intentionally specific so they beat earlier rules.
   ═══════════════════════════════════════════════════════════ */
#screen-home .cui-top-bar {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 14px !important;
}

#screen-home .cui-scroll {
  padding: 0 16px 112px !important;
}

#screen-home .cui-greeting,
#screen-home #cui-greeting-slot {
  margin-bottom: 16px !important;
}

#screen-home .cui-card {
  margin-bottom: 14px !important;
}

#screen-home .cui-card-header {
  margin-bottom: 14px !important;
}

#screen-home #cui-ma-card.cui-card {
  padding: 14px 16px 16px !important;
  margin-bottom: 14px !important;
}

#screen-home .cui-ma-ring-box {
  width: 140px !important;
  height: 140px !important;
}

#screen-home .cui-ma-ring-box svg:not(.cui-ma-svg) {
  width: 140px !important;
  height: 140px !important;
}

#screen-home .cui-ma-number,
#screen-home .cui-ma-hero {
  font-size: 38px !important;
}

#screen-home .cui-ma-build-pct {
  font-size: 26px !important;
}

#screen-home .cui-ma-pillars {
  gap: 16px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
}

/* ── DUAL GAUGE — MA + Stress side by side inside one card ── */
.cui-ma-dual {
  display: flex !important;
  gap: 8px !important;
}
.cui-ma-gauge {
  flex: 1 !important;
  min-width: 0 !important;
  text-align: center !important;
}
.cui-ma-gauge-head {
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.cui-ma-gauge-head .cui-card-label {
  font-size: 9px !important;
}
#screen-home .cui-ma-dual .cui-ma-ring-box {
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto !important;
}
#screen-home .cui-ma-dual .cui-ma-ring-box svg,
#screen-home .cui-ma-dual .cui-ma-ring-box svg:not(.cui-ma-svg) {
  width: 120px !important;
  height: 120px !important;
}
#screen-home .cui-ma-dual .cui-ma-hero {
  font-size: 30px !important;
}
#screen-home .cui-ma-dual .cui-ma-hero-label {
  font-size: 9px !important;
}

#screen-home #cui-quick-log.cui-quick-row,
#screen-home .cui-quick-row {
  gap: 12px !important;
  margin-bottom: 16px !important;
}

#screen-home .cui-quick-btn {
  padding: 12px 16px !important;
  border-radius: 20px !important;
}

#screen-home #cui-streak-card.cui-card {
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
}

#screen-home #cui-focus-card.cui-focus-card {
  padding: 18px 18px !important;
  margin-bottom: 18px !important;
}

/* ── SMART NUDGE ──────────────────────────────────────── */
.cui-nudge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px !important; border-radius: 16px;
  background: var(--teal-soft);
  border: 1px solid var(--border);
  margin-bottom: 14px !important; cursor: pointer;
  transition: all 0.2s;
}
.cui-nudge:hover { border-color: var(--border-hi); }
.cui-nudge-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--teal-mid); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.cui-nudge-text { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }
.cui-nudge-sub { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; margin-top: 2px !important; }
.cui-nudge-arrow { color: var(--teal); font-size: 16px; margin-left: auto; flex-shrink: 0; }

/* ── WELLNESS SPARKLINE ───────────────────────────────── */
#screen-home .cui-sparkline-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px 16px !important; margin-bottom: 14px !important;
  box-shadow: var(--card-sh);
}
.cui-sparkline-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px !important;
}
.cui-sparkline-head .cui-card-label { font-size: 10px; }
.cui-sparkline-trend {
  font-size: 11px; font-weight: 600;
  font-family: 'DM Mono', monospace;
}
.cui-sparkline-svg {
  width: 100%; height: 50px; display: block;
}

/* ── AM vs PM BP COMPARISON ───────────────────────────── */
#screen-home .cui-bp-compare {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px !important; margin-bottom: 14px !important;
  box-shadow: var(--card-sh);
}
#screen-home .cui-bp-compare .cui-card-header {
  margin-bottom: 6px !important;
}
.cui-bp-compare-row {
  display: flex; gap: 10px; margin-top: 10px !important;
}
.cui-bp-compare-col {
  flex: 1; text-align: center; padding: 10px 8px !important;
  background: var(--elevated); border-radius: 12px;
}
.cui-bp-compare-period {
  font-size: 9px; font-family: 'DM Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px !important;
}
.cui-bp-compare-val {
  font-size: 20px; font-weight: 700;
  font-family: 'DM Mono', monospace;
}
.cui-bp-compare-hr {
  font-size: 10px; color: var(--muted);
  font-family: 'DM Mono', monospace; margin-top: 2px !important;
}
.cui-bp-compare-note {
  font-size: 10px; color: var(--dim);
  font-family: 'DM Mono', monospace;
  margin-top: 8px !important; text-align: center;
}

/* ── WEEKLY DIGEST ────────────────────────────────────── */
#screen-home .cui-digest {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px !important; margin-bottom: 14px !important;
  box-shadow: var(--card-sh);
  position: relative; /* Contains cui-info-btn absolute positioning */
}
#screen-home .cui-digest .cui-card-header {
  margin-bottom: 8px !important;
}
.cui-digest-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0 !important;
}
.cui-digest-row + .cui-digest-row {
  border-top: 1px solid var(--border);
}
.cui-digest-icon {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.cui-digest-label {
  font-size: 12px; color: var(--text); flex: 1; min-width: 0;
}
.cui-digest-val {
  font-size: 11px; font-weight: 600; font-family: 'DM Mono', monospace;
  flex-shrink: 0; text-align: right;
}

/* ── GOAL PROGRESS ────────────────────────────────────── */
#screen-home .cui-goals {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px !important; margin-bottom: 14px !important;
  box-shadow: var(--card-sh);
}
#screen-home .cui-goals .cui-card-header {
  margin-bottom: 8px !important;
}
.cui-goal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0 !important;
}
.cui-goal-row + .cui-goal-row {
  border-top: 1px solid var(--border);
}
.cui-goal-label {
  font-size: 12px; color: var(--text); flex: 1; min-width: 0;
}
.cui-goal-bar-bg {
  width: 80px; height: 6px; border-radius: 3px;
  background: var(--elevated); overflow: hidden; flex-shrink: 0;
}
.cui-goal-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.5s ease;
}
.cui-goal-pct {
  font-size: 10px; font-weight: 600; font-family: 'DM Mono', monospace;
  min-width: 32px; text-align: right; flex-shrink: 0;
}

/* ── STREAK MILESTONE ─────────────────────────────────── */
.cui-streak-milestone {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px !important; padding: 8px 12px !important;
  background: var(--teal-soft); border: 1px solid var(--border);
  border-radius: 12px;
}
.cui-streak-milestone-icon {
  font-size: 18px; flex-shrink: 0;
}
.cui-streak-milestone-text {
  font-size: 11px; font-weight: 600; color: var(--teal);
}
.cui-streak-milestone-sub {
  font-size: 9px; color: var(--muted);
  font-family: 'DM Mono', monospace; margin-top: 1px !important;
}

#screen-home .cui-sec-head,
#screen-home .cui-sec-header {
  margin: 16px 0 8px !important;
}

#screen-home .cui-avg-row {
  gap: 8px !important;
  margin-bottom: 14px !important;
}

#screen-home .cui-avg-box {
  padding: 10px 6px 10px !important;
  border-radius: 14px !important;
}

#screen-home .cui-avg-val {
  font-size: 22px !important;
}

#screen-home .cui-avg-unit {
  margin-top: 1px !important;
}

#screen-home .cui-avg-label {
  margin-top: 2px !important;
  font-size: 9px !important;
  letter-spacing: 0.3px !important;
}

#screen-home .cui-shop-grid {
  gap: 8px !important;
  margin-bottom: 14px !important;
}

#screen-home .cui-shop-tile {
  padding: 12px 8px !important;
  border-radius: 14px !important;
}

#screen-home .cui-shop-icon {
  width: 32px !important; height: 32px !important;
  border-radius: 10px !important;
}

#screen-home .cui-shop-label {
  font-size: 11px !important;
}

#screen-home .cui-nudge {
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
}

#screen-home .cui-prac-home-card {
  margin-bottom: 16px !important;
  padding: 16px 18px !important;
  transition: border-color 0.4s, box-shadow 0.4s !important;
}
#screen-home #cui-prac-card {
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; overflow: hidden !important;
}

/* Practitioner home card — all inline: dot + label + name + badge */
.cui-prac-home-row {
  display: flex; align-items: center; gap: 8px;
}
.cui-prac-home-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dim); flex-shrink: 0;
  transition: background 0.4s, box-shadow 0.4s;
}
.cui-prac-home-dot--connected {
  background: var(--teal);
  box-shadow: 0 0 6px var(--glow);
  animation: cuiPracPulse 2.4s ease-in-out infinite;
}
.cui-prac-home-label {
  font-size: 12px; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
.cui-prac-home-name {
  font-size: 13px; font-weight: 500; color: var(--text-mid); flex: 1;
}
.cui-prac-home-status {
  font-size: 10px; font-weight: 600; color: var(--teal);
  background: var(--teal-soft); border: 1px solid var(--teal-mid);
  padding: 3px 10px !important; border-radius: 20px;
  font-family: 'DM Mono', monospace; letter-spacing: 0.5px;
  text-transform: uppercase; flex-shrink: 0;
}

/* Linked state — teal border glow */
.cui-prac-home-card--linked {
  border-color: var(--teal-mid) !important;
  box-shadow: 0 0 16px rgba(61,143,128,0.08), var(--card-sh) !important;
}

/* Practitioner session results — redesigned v1.4.6 */
.cui-prac-results {
  margin-top: 14px !important;
  display: flex; flex-direction: column; gap: 0;
}

/* Score hero strip */
.cui-prac-score-hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px !important; margin-bottom: 12px !important;
  border-radius: 14px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-mid);
}
.cui-prac-score-big {
  font-size: 28px; font-weight: 800;
  font-family: 'DM Mono', monospace;
  color: var(--teal); line-height: 1;
}
.cui-prac-score-denom {
  font-size: 14px; font-weight: 400; color: var(--dim);
}
.cui-prac-score-meta {
  text-align: right;
}
.cui-prac-score-zone {
  font-size: 11px; font-weight: 700;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--teal);
}
.cui-prac-score-date {
  font-size: 10px; color: var(--dim);
  font-family: 'DM Mono', monospace;
  margin-top: 3px !important;
}

/* Pillar sections — accent left border */
.cui-prac-pillar {
  padding: 10px 0 10px 12px !important;
  border-left: 3px solid var(--teal);
  margin-bottom: 10px !important;
}
.cui-prac-pillar:last-child {
  margin-bottom: 0 !important;
}
.cui-prac-pillar--heart { border-left-color: var(--teal); }
.cui-prac-pillar--inner { border-left-color: var(--blue); }
.cui-prac-pillar--strength { border-left-color: var(--purple); }
.cui-prac-pillar:first-child {
  border-top: none; padding-top: 10px !important;
}
.cui-prac-pillar-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 6px !important;
  font-weight: 600;
}
.cui-prac-pillar--heart .cui-prac-pillar-label { color: var(--teal); }
.cui-prac-pillar--inner .cui-prac-pillar-label { color: var(--blue); }
.cui-prac-pillar--strength .cui-prac-pillar-label { color: var(--purple); }

/* Metric grid — 2 columns for compact display */
.cui-prac-metric-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
}
.cui-prac-metric {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 0 !important;
}
.cui-prac-metric-label {
  font-size: 11px; color: var(--muted);
}
.cui-prac-metric-val {
  font-size: 13px; font-weight: 700;
  font-family: 'DM Mono', monospace;
  color: var(--text);
}
.cui-prac-metric-unit {
  font-size: 9px; color: var(--dim); font-weight: 400;
  margin-left: 2px;
}

/* When a metric spans full width (e.g. only 1 item in row) */
.cui-prac-metric--wide {
  grid-column: 1 / -1;
}

/* Score Breakdown card — MHI / FAI bars */
.cui-prac-score-breakdown {
  margin-top: 12px !important;
}
.cui-prac-score-breakdown-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 10px !important;
}
.cui-prac-sub-score {
  background: var(--elevated); border-radius: 12px;
  padding: 12px 14px !important; margin-bottom: 8px !important;
}
.cui-prac-sub-score:last-child { margin-bottom: 0 !important; }
.cui-prac-sub-score-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px !important;
}
.cui-prac-sub-score-title {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.cui-prac-sub-score-subtitle {
  font-size: 10px; color: var(--muted);
  font-family: 'DM Mono', monospace;
}
.cui-prac-sub-score-val {
  font-size: 22px; font-weight: 800;
  font-family: 'DM Mono', monospace; line-height: 1;
}
.cui-prac-sub-score-denom {
  font-size: 12px; font-weight: 400; color: var(--dim);
}
.cui-prac-sub-bar {
  height: 4px; border-radius: 2px;
  background: var(--border); overflow: hidden;
}
.cui-prac-sub-bar-fill {
  height: 100%; border-radius: 2px;
  transition: width 0.6s ease;
}

/* Breakdown section — individual marker rows */
.cui-prac-breakdown {
  margin-top: 12px !important; padding: 14px 16px !important;
  background: var(--elevated); border-radius: 14px;
}
.cui-prac-breakdown-label {
  font-size: 10px; font-family: 'DM Mono', monospace;
  font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; margin-bottom: 8px !important;
}
.cui-prac-breakdown-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--border);
}
.cui-prac-breakdown-row:last-child { border-bottom: none; }
.cui-prac-breakdown-name {
  font-size: 13px; color: var(--text); letter-spacing: 0.2px;
}
.cui-prac-zone-pill {
  font-size: 10px; font-weight: 600;
  font-family: 'DM Mono', monospace;
  padding: 3px 10px !important; border-radius: 8px;
  letter-spacing: 0.5px;
}
.cui-prac-zone-pill--referral { background: var(--zone-amber-bg); color: var(--zone-amber-text); }
.cui-prac-zone-pill--watch    { background: var(--zone-green-bg); color: var(--zone-green-text); }
.cui-prac-zone-pill--balance  { background: var(--zone-blue-bg);  color: var(--zone-blue-text); }
.cui-prac-zone-pill--optimal  { background: var(--zone-purple-bg);color: var(--zone-purple-text); }
.cui-prac-zone-pill--nodata   { background: var(--elevated);      color: var(--dim); }

/* Collapsible dropdown sections for MHI/FAI breakdowns */
.cui-prac-dropdown {
  margin-top: 8px !important;
  background: var(--elevated); border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.cui-prac-dd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px !important; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.cui-prac-dd-header:active { opacity: 0.8; }
.cui-prac-dd-title {
  font-size: 10px; font-family: 'DM Mono', monospace;
  font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
}
.cui-prac-dd-right {
  display: flex; align-items: center; gap: 8px;
}
.cui-prac-dd-chevron {
  color: var(--dim);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.cui-prac-dropdown--open .cui-prac-dd-chevron {
  transform: rotate(180deg);
}
.cui-prac-dd-body {
  padding: 0 16px 12px !important;
}
.cui-prac-no-session {
  font-size: 12px; color: var(--muted); line-height: 1.5;
  margin: 6px 0 0 !important; padding: 0 !important;
}

/* Pulse keyframes for connected dot */
@keyframes cuiPracPulse {
  0%, 100% { box-shadow: 0 0 4px var(--glow); }
  50% { box-shadow: 0 0 14px var(--glow), 0 0 28px rgba(61,143,128,0.06); }
}

/* Pending state — practitioner request awaiting approval */
.cui-prac-home-card--pending,
.cui-profile-prac--pending {
  border-color: rgba(196,148,58,0.30) !important;
  box-shadow: 0 0 12px rgba(196,148,58,0.06), var(--card-sh) !important;
}
.cui-prac-home-dot--pending {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
  animation: cuiPracPendingPulse 2s ease-in-out infinite;
}
@keyframes cuiPracPendingPulse {
  0%, 100% { box-shadow: 0 0 3px rgba(196,148,58,0.20); }
  50% { box-shadow: 0 0 10px rgba(196,148,58,0.30); }
}
.cui-prac-pending-row {
  display: flex; align-items: center; gap: 10px;
}
.cui-prac-pending-text {
  font-size: 13px; color: var(--text-mid); line-height: 1.45;
}
.cui-prac-pending-text strong {
  color: var(--text); font-weight: 700;
}
.cui-prac-pending-actions {
  display: flex; gap: 8px;
  margin-top: 12px !important;
}
.cui-prac-pending-btn {
  flex: 1; padding: 10px !important; border-radius: 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: none; transition: filter 0.2s;
}
.cui-prac-pending-btn--accept {
  background: var(--teal); color: var(--on-teal);
}
.cui-prac-pending-btn--accept:hover { filter: brightness(0.95); }
.cui-prac-pending-btn--decline {
  background: var(--elevated); color: var(--muted);
  border: 1px solid var(--border) !important;
}
.cui-prac-pending-btn--decline:hover { background: var(--bg); }

/* Practitioner CTA — unlinked state */
.cui-prac-cta {
  margin-top: 4px !important;
}
.cui-prac-cta-headline {
  font-size: 15px; font-weight: 700;
  margin-bottom: 6px !important;
}
.cui-prac-cta-body {
  font-size: 12px; color: var(--muted);
  line-height: 1.55; margin-bottom: 12px !important;
}
.cui-prac-cta-input {
  display: block; width: 100%;
  padding: 10px 12px !important; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  font-size: 13px; font-family: 'DM Sans', sans-serif;
  margin-bottom: 10px !important;
  transition: border-color 0.2s;
}
.cui-prac-cta-input::placeholder { color: var(--dim); }
.cui-prac-cta-input:focus {
  outline: none; border-color: var(--teal);
}
.cui-prac-cta-btn {
  display: block; width: 100%; text-align: center;
  padding: 12px !important; border-radius: 14px;
  background: var(--teal); color: var(--on-teal);
  font-size: 13px; font-weight: 600;
  border: none; cursor: pointer;
  transition: filter 0.2s;
}
.cui-prac-cta-btn:hover { filter: brightness(0.95); }

/* Already have a practitioner — connect info */
.cui-prac-connect-info {
  margin-top: 16px !important; padding-top: 14px !important;
  border-top: 1px solid var(--border);
}
.cui-prac-connect-title {
  font-size: 13px; font-weight: 600;
  margin-bottom: 4px !important;
}
.cui-prac-connect-body {
  font-size: 12px; color: var(--muted);
  line-height: 1.5;
}
.cui-prac-connect-email {
  margin-top: 8px !important; padding: 8px 12px !important;
  background: var(--elevated); border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--teal);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.3px;
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL HEADER + CONTENT POLISH — FORCE PASS v1.0.4
   Purpose: fix the crowded header system and rebalance the main content pages.
   Scope: home header + glucose/bp/trends/profile/details top sections.
   ═══════════════════════════════════════════════════════════ */
#cui-root .cui-top-bar {
  padding: 20px 22px 16px !important;
}

#cui-root .cui-top-actions {
  gap: 10px !important;
}

#cui-root .cui-top-btn {
  width: 42px !important;
  height: 42px !important;
  font-size: 15px !important;
}

#cui-root .cui-brand {
  font-size: 12px !important;
  letter-spacing: 3px !important;
}

#screen-glucose .cui-scroll,
#screen-bp .cui-scroll,
#screen-trends .cui-scroll,
#screen-profile .cui-scroll,
#screen-details .cui-scroll,
#screen-quiz .cui-scroll,
#cui-root #screen-onboarding .cui-scroll {
  padding: 0 16px 40px !important;
  overflow-y: auto !important;
}

#cui-root #screen-onboarding .cui-onboarding-step {
  display: none !important;
}

#cui-root #screen-onboarding .cui-onboarding-step.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 100% !important;
}

#cui-root #screen-onboarding .cui-progress {
  padding: 20px 4px 0 !important;
}

#cui-root #screen-onboarding .cui-progress-dot {
  background: rgba(61,143,128,0.18) !important;
  height: 4px !important;
}

#cui-root #screen-onboarding .cui-progress-dot.done { background: var(--teal) !important; opacity: 1 !important; }
#cui-root #screen-onboarding .cui-progress-dot.current { background: var(--teal) !important; opacity: 0.45 !important; }

/* Body — grows to fill space, pushes footer down */
#cui-root #screen-onboarding .cui-ob-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 24px 0 16px !important;
}

/* Step 1 — footer sits naturally below last bubble, not pinned to bottom */
#cui-root #screen-onboarding #cui-ob-step-1 .cui-ob-body {
  flex: 0 0 auto !important;
}

/* Footer — always at the bottom */
#cui-root #screen-onboarding .cui-ob-footer {
  flex-shrink: 0 !important;
  padding: 12px 0 36px !important;
}

#cui-root #screen-onboarding .cui-ob-footer .cui-btn-primary {
  padding: 18px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  background: var(--teal) !important;
  width: 100% !important;
}

/* Step text */
#cui-root #screen-onboarding .cui-step-label {
  margin-bottom: 8px !important;
}

#cui-root #screen-onboarding .cui-step-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

#cui-root #screen-onboarding .cui-step-sub {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

/* Inputs */
#cui-root #screen-onboarding .cui-ob-field {
  margin-bottom: 14px !important;
}

#cui-root #screen-onboarding .cui-ob-field-label {
  font-size: 11px !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

#cui-root #screen-onboarding .cui-ob-input {
  width: 100% !important;
  padding: 16px !important;
  min-height: 54px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
}

#cui-root #screen-onboarding .cui-ob-input::-webkit-outer-spin-button,
#cui-root #screen-onboarding .cui-ob-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

#cui-root #screen-onboarding .cui-ob-input[type="number"] {
  -moz-appearance: textfield !important;
}

#cui-root #screen-onboarding .cui-ob-input:-webkit-autofill,
#cui-root #screen-onboarding .cui-ob-input:-webkit-autofill:hover,
#cui-root #screen-onboarding .cui-ob-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
}

#cui-root #screen-onboarding .cui-ob-field-note {
  font-size: 12px !important;
  margin-top: 8px !important;
  color: var(--muted) !important;
}

/* Sex cards */
#cui-root #screen-onboarding .cui-sex-row {
  margin-bottom: 0 !important;
}

#cui-root #screen-onboarding .cui-sex-card {
  padding: 24px 16px !important;
  min-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Athlete options */
#cui-root #screen-onboarding .cui-ob-opts {
  gap: 12px !important;
}

#cui-root #screen-onboarding .cui-ob-opt {
  padding: 18px 16px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border-radius: 14px !important;
}

/* Goal grid */
#cui-root #screen-onboarding .cui-goal-grid {
  gap: 10px !important;
}

#cui-root #screen-onboarding .cui-goal-card {
  padding: 18px 14px !important;
  border-radius: 18px !important;
}

#cui-root #screen-onboarding .cui-goal-icon {
  color: var(--teal) !important;
  margin-bottom: 8px !important;
}

#cui-root #screen-onboarding .cui-goal-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#cui-root #screen-onboarding .cui-ob-goal-counter {
  font-size: 12px !important;
  color: var(--muted) !important;
  text-align: center !important;
  padding-top: 4px !important;
}

/* Days */
#cui-root #screen-onboarding .cui-ob-day-row {
  gap: 8px !important;
}

#cui-root #screen-onboarding .cui-ob-day {
  padding: 10px 18px !important;
  font-size: 13px !important;
}

/* Phase cards */
#cui-root #screen-onboarding .cui-ob-phases {
  gap: 10px !important;
}

#cui-root #screen-onboarding .cui-ob-phase-card {
  padding: 18px 10px !important;
  border-radius: 18px !important;
}

/* Time row */
#cui-root #screen-onboarding .cui-ob-time-row {
  gap: 12px !important;
}

/* T&C */
#cui-root #screen-onboarding .cui-tc-scroll {
  padding: 16px 18px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
}




#cui-root .cui-kit-name {
  margin-bottom: 6px !important;
}

#cui-root .cui-kit-text {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

#cui-root .cui-kit-bubble {
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
}

/* Back button */
#cui-root #screen-onboarding .cui-ob-footer-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#cui-root #screen-onboarding .cui-ob-footer-row .cui-ob-next {
  flex: 1 !important;
}

#cui-root #screen-onboarding .cui-ob-back {
  width: 52px !important;
  height: 52px !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}
}

#cui-root #screen-onboarding .cui-tc-highlight {
  padding: 10px 12px !important;
  margin: 10px 0 !important;
}

#cui-root #screen-onboarding .cui-tc-heading {
  margin: 16px 0 6px !important;
}

#cui-root #screen-onboarding .cui-tc-heading:first-child {
  margin-top: 0 !important;
}

/* Home header */
#screen-home .cui-greeting {
  min-height: 110px !important;
  padding: 22px 22px 18px !important;
  border-radius: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#screen-home .cui-greeting-name {
  font-size: 38px !important;
  line-height: 1.05 !important;
  letter-spacing: -1px !important;
}

#screen-home .cui-greeting-date {
  margin-top: 10px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#screen-home .cui-greeting::after {
  top: -28px !important;
  right: -14px !important;
  width: 140px !important;
  height: 140px !important;
}

/* Shared page headers */
#screen-glucose .cui-back-btn,
#screen-bp .cui-back-btn,
#screen-trends .cui-back-btn,
#screen-profile .cui-back-btn,
#screen-details .cui-back-btn,
#screen-quiz .cui-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#screen-glucose .cui-page-title,
#screen-bp .cui-page-title,
#screen-trends .cui-page-title,
#screen-profile .cui-page-title,
#screen-details .cui-page-title,
#screen-quiz .cui-page-title {
  font-size: 24px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.5px !important;
  margin-top: 0 !important;
}

#screen-glucose .cui-page-sub,
#screen-bp .cui-page-sub,
#screen-trends .cui-page-sub,
#screen-profile .cui-page-sub,
#screen-details .cui-page-sub,
#screen-quiz .cui-page-sub {
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin-top: 6px !important;
}

#screen-glucose .cui-date-stamp,
#screen-bp .cui-date-stamp,
#screen-trends .cui-date-stamp,
#screen-profile .cui-date-stamp,
#screen-details .cui-date-stamp {
  margin-top: 12px !important;
  margin-bottom: 18px !important;
  gap: 10px !important;
}

/* Toggle / tabs */
#screen-glucose .cui-mode-toggle,
#screen-bp .cui-mode-toggle,
#screen-trends .cui-mode-toggle,
#screen-details .cui-mode-toggle {
  padding: 4px !important;
  border-radius: 18px !important;
  margin-bottom: 18px !important;
}

#screen-glucose .cui-mode-btn,
#screen-bp .cui-mode-btn,
#screen-trends .cui-mode-btn,
#screen-details .cui-mode-btn {
  padding: 12px 10px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
}

/* Main content cards across pages */
#screen-glucose .cui-phase-card,
#screen-bp .cui-phase-card,
#screen-trends .cui-phase-card,
#screen-details .cui-phase-card {
  padding: 18px 18px 16px !important;
  margin-bottom: 16px !important;
  border-radius: 22px !important;
}

#screen-glucose .cui-phase-label,
#screen-bp .cui-phase-label,
#screen-trends .cui-phase-label,
#screen-details .cui-phase-label {
  margin-bottom: 12px !important;
}

#screen-glucose .cui-phase-guidance,
#screen-bp .cui-phase-guidance,
#screen-trends .cui-phase-guidance,
#screen-details .cui-phase-guidance {
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-top: 12px !important;
}

#screen-glucose .cui-step-btn,
#screen-bp .cui-step-btn,
#screen-trends .cui-step-btn,
#screen-details .cui-step-btn {
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

#screen-glucose .cui-step-panel,
#screen-bp .cui-step-panel,
#screen-trends .cui-step-panel,
#screen-details .cui-step-panel {
  padding: 2px 0 12px !important;
}

#screen-glucose .cui-field,
#screen-bp .cui-field,
#screen-trends .cui-field,
#screen-profile .cui-field,
#screen-details .cui-field {
  margin-bottom: 16px !important;
}

#screen-glucose .cui-card,
#screen-bp .cui-card,
#screen-trends .cui-card,
#screen-profile .cui-card,
#screen-details .cui-card {
  margin-bottom: 16px !important;
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL PAGE SIDE GUTTERS — FORCE PASS v1.0.6
   Purpose: match the home-page side breathing room across all screens.
   Scope: glucose / bp / trends / profile / details shared page gutters.
   Notes:
   - Keeps the home screen layout as-is.
   - Applies the same inset rhythm so all sections sit off the sides cleanly.
   ═══════════════════════════════════════════════════════════ */

#screen-glucose .cui-scroll,
#screen-bp .cui-scroll,
#screen-trends .cui-scroll,
#screen-profile .cui-scroll,
#screen-details .cui-scroll {
  padding: 4px 22px 112px !important;
}

#screen-glucose .cui-page-head,
#screen-bp .cui-page-head,
#screen-trends .cui-page-head,
#screen-profile .cui-page-head,
#screen-details .cui-page-head {
  padding-left: 4px !important;
  padding-right: 4px !important;
  margin-bottom: 14px !important;
}

#screen-glucose .cui-mode-toggle,
#screen-bp .cui-mode-toggle,
#screen-trends .cui-mode-toggle,
#screen-details .cui-mode-toggle {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

#screen-glucose .cui-phase-card,
#screen-bp .cui-phase-card,
#screen-trends .cui-phase-card,
#screen-details .cui-phase-card,
#screen-glucose .cui-card,
#screen-bp .cui-card,
#screen-trends .cui-card,
#screen-profile .cui-card,
#screen-details .cui-card {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

#screen-glucose .cui-step-btn,
#screen-bp .cui-step-btn,
#screen-trends .cui-step-btn,
#screen-details .cui-step-btn,
#screen-profile .cui-list-btn,
#screen-profile .cui-pill-btn,
#screen-profile .cui-action-btn {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

#screen-trends .cui-metric-list,
#screen-trends .cui-metrics-card,
#screen-trends .cui-journey-card,
#screen-trends .cui-heatmap-card,
#screen-profile .cui-profile-head,
#screen-profile .cui-profile-card,
#screen-profile .cui-prac-card,
#screen-profile .cui-details-card {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

#screen-trends .cui-mchart-range-btn {
  padding: 6px 8px !important;
  min-width: 26px !important;
  text-align: center !important;
}

#screen-trends .cui-mchart-range {
  gap: 4px !important;
}

#screen-trends .cui-mchart-ampm {
  gap: 4px !important;
  margin-left: 4px !important;
}

#screen-trends .cui-mchart-ampm-btn {
  padding: 6px 8px !important;
}

#screen-trends .cui-journey-active {
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
  gap: 18px !important;
}

#screen-trends .cui-journey-active-text {
  padding-right: 20px !important;
}

#screen-trends .cui-journey-active-sub {
  margin-top: 4px !important;
}

#screen-trends .cui-journey-inactive {
  padding: 14px 20px !important;
  gap: 14px !important;
}

#screen-trends .cui-journey-inactive-sub {
  margin-top: 3px !important;
}

#screen-trends .cui-journey-active .cui-info-btn {
  top: 14px !important;
  right: 14px !important;
}

#screen-trends .cui-heatmap-card {
  padding: 18px 20px !important;
}

#screen-trends .cui-heatmap-card .cui-card-header {
  margin-bottom: 12px !important;
}

#screen-trends .cui-heatmap-card .cui-mchart-range {
  margin-bottom: 14px !important;
}

#screen-trends .cui-heatmap-grid {
  margin-bottom: 10px !important;
}

#screen-trends .cui-heatmap-months {
  margin-top: 8px !important;
}



/* ═══════════════════════════════════════════════════════════
   VERSION 1.1.1 — DROPDOWN INNER CONTENT PADDING ONLY
   Freeze step button/header. Adjust open panel inner spacing only.
   ═══════════════════════════════════════════════════════════ */
#screen-glucose .cui-step-panel.open > .cui-card,
#screen-bp .cui-step-panel.open > .cui-card {
  padding: 16px 18px 18px;
  margin: 0 18px 12px;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-field,
#screen-bp .cui-step-panel.open > .cui-card .cui-field {
  margin-bottom: 16px;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-field-label,
#screen-bp .cui-step-panel.open > .cui-card .cui-field-label {
  display: block;
  margin-bottom: 8px;
  line-height: 1.45;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-field-input,
#screen-bp .cui-step-panel.open > .cui-card .cui-field-input {
  padding: 14px 16px;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-field-note,
#screen-bp .cui-step-panel.open > .cui-card .cui-field-note {
  margin-top: 6px;
  line-height: 1.45;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-btn-primary,
#screen-bp .cui-step-panel.open > .cui-card .cui-btn-primary,
#screen-glucose .cui-step-panel.open > .cui-card .cui-btn-soft,
#screen-bp .cui-step-panel.open > .cui-card .cui-btn-soft,
#screen-glucose .cui-step-panel.open > .cui-card .cui-btn-undo,
#screen-bp .cui-step-panel.open > .cui-card .cui-btn-undo {
  margin-top: 8px;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-wake-row,
#screen-bp .cui-step-panel.open > .cui-card .cui-wake-row {
  margin-top: 6px;
  margin-bottom: 14px;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-wake-chip,
#screen-bp .cui-step-panel.open > .cui-card .cui-wake-chip {
  min-height: 42px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-glucose .cui-step-panel.open > .cui-card > :first-child,
#screen-bp .cui-step-panel.open > .cui-card > :first-child {
  margin-top: 0;
}


/* ═══════════════════════════════════════════════════════════
   VERSION 1.1.2 — STEP CONTENT POLISH ONLY
   Freeze step headers/buttons. Improve only inner content spacing
   for Step 1 result/save, Step 2 comment cards, and Step 3 layout.
   ═══════════════════════════════════════════════════════════ */

/* Keep step headers frozen */
#screen-glucose .cui-step-btn,
#screen-bp .cui-step-btn {
  padding: 15px 18px !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
}

/* Open panel card stays inset, but add more inner breathing room */
#screen-glucose .cui-step-panel.open > .cui-card,
#screen-bp .cui-step-panel.open > .cui-card {
  padding: 20px 22px 20px !important;
}

/* Step 1 result / comment card */
#screen-glucose .cui-step-panel.open > .cui-card .cui-result-card,
#screen-bp .cui-step-panel.open > .cui-card .cui-result-card {
  padding: 18px 20px 16px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-result-title,
#screen-bp .cui-step-panel.open > .cui-card .cui-result-title {
  margin-bottom: 10px !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-result-value,
#screen-bp .cui-step-panel.open > .cui-card .cui-result-value {
  line-height: 1.08 !important;
  margin-bottom: 10px !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-result-note,
#screen-bp .cui-step-panel.open > .cui-card .cui-result-note {
  line-height: 1.6 !important;
  margin-top: 0 !important;
}

/* Save buttons breathe more */
#screen-glucose .cui-step-panel.open > .cui-card .cui-btn-primary,
#screen-bp .cui-step-panel.open > .cui-card .cui-btn-primary {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin-top: 12px !important;
}

/* Step 2 insight / comment card */
#screen-glucose .cui-step-panel.open > .cui-card .cui-kit-card,
#screen-bp .cui-step-panel.open > .cui-card .cui-kit-card,
#screen-glucose .cui-step-panel.open > .cui-card .cui-kit-bubble,
#screen-bp .cui-step-panel.open > .cui-card .cui-kit-bubble {
  padding: 18px 18px 16px !important;
  margin-top: 12px !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-kit-card-body,
#screen-bp .cui-step-panel.open > .cui-card .cui-kit-card-body,
#screen-glucose .cui-step-panel.open > .cui-card .cui-kit-text,
#screen-bp .cui-step-panel.open > .cui-card .cui-kit-text {
  line-height: 1.72 !important;
}

/* Step 3 — chips and sleep block only */
#screen-glucose .cui-step-panel.open > .cui-card .cui-habit-chips,
#screen-bp .cui-step-panel.open > .cui-card .cui-habit-chips {
  gap: 10px !important;
  margin-top: 12px !important;
  margin-bottom: 18px !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-habit-chip,
#screen-bp .cui-step-panel.open > .cui-card .cui-habit-chip {
  padding: 10px 16px !important;
  min-height: 42px !important;
  align-items: center !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-step-title,
#screen-bp .cui-step-panel.open > .cui-card .cui-step-title,
#screen-glucose .cui-step-panel.open > .cui-card h3,
#screen-bp .cui-step-panel.open > .cui-card h3 {
  margin-bottom: 14px !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-sleep-row,
#screen-bp .cui-step-panel.open > .cui-card .cui-sleep-row {
  gap: 10px !important;
  margin-top: 8px !important;
  margin-bottom: 14px !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-sleep-opt span,
#screen-bp .cui-step-panel.open > .cui-card .cui-sleep-opt span {
  padding: 11px 10px !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-sleep-duration,
#screen-bp .cui-step-panel.open > .cui-card .cui-sleep-duration {
  gap: 12px !important;
  margin-top: 4px !important;
  margin-bottom: 18px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-sleep-duration-label,
#screen-bp .cui-step-panel.open > .cui-card .cui-sleep-duration-label {
  line-height: 1.4 !important;
}

#screen-glucose .cui-step-panel.open > .cui-card .cui-sleep-duration-input,
#screen-bp .cui-step-panel.open > .cui-card .cui-sleep-duration-input {
  min-height: 42px !important;
  padding: 10px 12px !important;
}


/* ═══════════════════════════════════════════════════════════
   v1.2.x — TRENDS + PROFILE LAYOUT FIXES
   Accumulated from sessions on 2026-03-13.
   All scoped — nothing touches glucose/bp screens.
   ═══════════════════════════════════════════════════════════ */

/* Trends root vertical rhythm */
#cui-trends-root > * { margin-bottom: 12px; }
#cui-trends-root > *:last-child { margin-bottom: 0; }

/* Trends card labels and section heads */
#screen-trends .cui-card-label { margin-bottom: 16px !important; }
#screen-trends .cui-sec-head { margin: 16px 0 8px !important; }

/* Trends + Profile card padding — scoped, never touches glucose/bp */
#screen-trends .cui-card {
  padding: 22px 22px 24px !important;
}
#screen-profile .cui-card {
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
}

/* Metrics card — rows inside a single card, not individual floating cards */
.cui-metrics-card { padding: 10px 10px !important; }
.cui-metrics-card .cui-metric-row {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  margin-bottom: 6px !important;
  box-shadow: none !important;
}
.cui-metrics-card .cui-metric-row:last-child { margin-bottom: 0 !important; }
.cui-metrics-card .cui-metric-header {
  padding: 14px 16px !important;
}
.cui-metrics-card .cui-metric-detail {
  padding: 4px 16px 16px !important;
  border-top: 1px solid var(--border) !important;
  overflow: visible !important;
}
.cui-metrics-card .cui-metric-detail-row {
  padding: 11px 0 !important;
}
.cui-metrics-card .cui-metric-detail-key { font-size: 12px !important; color: var(--muted) !important; }
.cui-metrics-card .cui-metric-detail-val { font-size: 12px !important; font-weight: 600 !important; }
.cui-metrics-card .cui-mchart { padding: 12px 0 14px !important; }

/* TIZ legend — single line in trends */
#screen-trends .cui-tiz-legend {
  flex-wrap: nowrap !important; gap: 8px !important; font-size: 10px !important;
}

/* Kit card — extra horizontal padding in trends */
#screen-trends .cui-kit-card {
  padding: 20px 24px !important;
}

/* ─────────────────────────────────────────────────────────
   PROFILE SCREEN — LAYOUT + SPACING
   ───────────────────────────────────────────────────────── */

/* Cards — bigger gaps between sections */
#screen-profile .cui-card {
  margin-bottom: 20px !important;
}

/* Buttons — teal filled, white text, consistent spacing */
#screen-profile .cui-btn-soft {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: var(--on-teal) !important;
  margin-bottom: 12px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}
#screen-profile .cui-btn-soft:hover {
  filter: brightness(0.95) !important;
}
#screen-profile .cui-btn-soft:last-child { margin-bottom: 0 !important; }

/* Gap between last card and first button */
#screen-profile .cui-card + .cui-btn-soft {
  margin-top: 6px !important;
}

/* Delete button — red, separated from the group */
#screen-profile .cui-btn-soft.cui-btn-soft--danger {
  background: transparent !important;
  border-color: var(--danger-border) !important;
  color: var(--danger) !important;
}
#screen-profile .cui-btn-soft.cui-btn-soft--danger:hover {
  background: var(--danger-dim) !important;
  filter: none !important;
}
#screen-profile .cui-profile-delete {
  margin-top: 24px !important;
}

/* Profile practitioner card — linked state */
.cui-profile-prac-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px !important;
}
.cui-profile-prac-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dim); flex-shrink: 0;
}
.cui-profile-prac-dot--on {
  background: var(--teal);
  box-shadow: 0 0 8px var(--glow);
  animation: cuiPracPulse 2.4s ease-in-out infinite;
}
.cui-profile-prac-name {
  font-size: 14px; font-weight: 600; flex: 1;
}
.cui-profile-prac-badge {
  font-size: 10px; font-weight: 600; color: var(--teal);
  background: var(--teal-soft); border: 1px solid var(--teal-mid);
  padding: 3px 10px !important; border-radius: 20px;
  font-family: 'DM Mono', monospace; letter-spacing: 0.5px;
  text-transform: uppercase; flex-shrink: 0;
}
.cui-profile-prac--linked {
  border-color: var(--teal-mid) !important;
  box-shadow: 0 0 16px rgba(61,143,128,0.08), var(--card-sh) !important;
}
.cui-profile-prac-foot {
  margin-top: 8px !important; text-align: right;
}

/* Inline link buttons */
.cui-link-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 500; padding: 6px 0 !important;
  color: var(--danger); font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cui-link-btn:hover { opacity: 0.7; }

/* Summary rows — more breathing room */
#screen-profile .cui-summary-row {
  padding: 12px 4px !important;
}

/* Profile head — generous vertical rhythm */
.cui-profile-head {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0 8px !important;
}
.cui-profile-head-name {
  font-size: 24px; font-weight: 700;
  margin-top: 14px !important; text-align: center;
  letter-spacing: -0.01em;
}
.cui-profile-head-sub {
  font-size: 11px; color: var(--muted);
  font-family: 'DM Mono', monospace;
  margin-top: 5px !important; text-align: center;
  margin-bottom: 20px !important;
}

/* Status — ACTIVE in green */
.cui-status-active {
  color: var(--teal);
}

/* Profile edit rows — tappable with chevron */
.cui-profile-edit-row:active {
  background: var(--teal-soft);
  border-radius: 8px;
}

/* Profile edit option buttons (sex, medication) */
.cui-edit-opt {
  padding: 12px !important; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: all 0.2s;
}
.cui-edit-opt--active {
  background: var(--teal-soft) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* Profile edit goal chips */
.cui-edit-goal-chip {
  padding: 8px 14px !important; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
  display: inline-flex !important; align-items: center !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.cui-edit-goal-chip--active {
  background: var(--teal-soft) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* Practitioner inner row */
.cui-prac-inner {
  display: flex; align-items: center; gap: 14px;
  margin-top: 6px !important; padding-left: 2px !important;
}

/* Result card zone colours */
.cui-result-card--purple {
  background: var(--purple-soft);
  border-color: rgba(142,125,191,0.20);
}
.cui-result-card--purple .cui-result-title { color: var(--purple) !important; }
.cui-result-card--purple .cui-result-value { color: var(--purple) !important; }

.cui-result-card--blue {
  background: var(--blue-soft);
  border-color: rgba(91,168,196,0.20);
}
.cui-result-card--blue .cui-result-title { color: var(--blue) !important; }
.cui-result-card--blue .cui-result-value { color: var(--blue) !important; }

.cui-result-card--green {
  background: var(--green-soft);
  border-color: rgba(92,168,106,0.20);
}
.cui-result-card--green .cui-result-title { color: var(--green-text) !important; }
.cui-result-card--green .cui-result-value { color: var(--green-text) !important; }

.cui-result-card--amber {
  background: var(--amber-soft);
  border-color: rgba(196,148,58,0.20);
}
.cui-result-card--amber .cui-result-title { color: var(--amber-text) !important; }
.cui-result-card--amber .cui-result-value { color: var(--amber-text) !important; }

/* Bare div children of open step panels — match .cui-card inset */
#screen-glucose .cui-step-panel.open > div:not(.cui-card),
#screen-bp .cui-step-panel.open > div:not(.cui-card) {
  margin: 0 18px 12px;
}

/* Habits section titles */
.cui-habits-section-title {
  font-size: 13px; font-weight: 600;
  margin-bottom: 10px;
}
.cui-habits-section-title--mt {
  margin-top: 14px;
}

/* Trends + profile root containers — match scroll inset */
#cui-trends-root,
#cui-profile-content,
#cui-details-content {
  padding: 0 2px;
}


/* ═══════════════════════════════════════════════════════════
   v1.3.1 — NEW CLASSES FOR JS INLINE-STYLE ELIMINATION
   No layout changes. Additive only.
   ═══════════════════════════════════════════════════════════ */

/* Danger button modifier */
.cui-btn-soft--danger {
  color: var(--danger) !important;
  border-color: var(--danger-border) !important;
}
.cui-btn-soft--danger:hover {
  background: var(--danger-dim) !important;
}

/* Step section headings */
.cui-step-heading {
  font-size: 13px; font-weight: 600; margin-bottom: 12px;
}

/* Source / footnote note */
.cui-source-note {
  font-size: 11px; color: var(--muted);
  line-height: 1.55; margin-top: 12px;
}

/* Health gate question and note */
.cui-health-question {
  font-size: 14px; font-weight: 600; margin-bottom: 10px;
}
.cui-health-note {
  font-size: 12px; color: var(--muted);
  line-height: 1.55; margin-top: 10px;
}

/* Phase card — progress count and nudge */
.cui-phase-progress-text {
  font-size: 11px; color: var(--muted);
  font-family: 'DM Mono', monospace; margin-top: 4px;
}
.cui-phase-nudge {
  margin-top: 10px; font-size: 13px;
  color: var(--amber-text); line-height: 1.55;
}

/* Milestone card */
.cui-milestone-card {
  margin-top: 12px; padding: 14px 16px;
  background: var(--purple-soft);
  border: 1px solid rgba(142,125,191,0.18);
  border-radius: 16px;
}
.cui-milestone-card-title {
  font-size: 12px; font-weight: 600; color: var(--purple);
}
.cui-milestone-card-body {
  font-size: 13px; color: var(--text-mid);
  margin-top: 6px; line-height: 1.55;
}

/* Empty and loading states */
.cui-empty-state {
  font-size: 13px; color: var(--muted);
  line-height: 1.6; padding: 14px 0;
}
.cui-empty-state--center {
  text-align: center; padding: 20px 0;
}

/* BP result card */
.cui-bp-result-value {
  font-size: 22px; font-weight: 700;
  font-family: 'DM Mono', monospace;
  margin-bottom: 12px;
}
.cui-bp-result-unit {
  font-size: 14px; color: var(--muted); margin-left: 6px;
}
.cui-bp-result-bpm {
  font-size: 14px; margin-left: 10px;
}
.cui-bp-metric-rows { margin-top: 10px; }
.cui-bp-metric-row {
  display: flex; justify-content: space-between;
  align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.cui-bp-metric-row:last-child { border-bottom: none; }
.cui-bp-metric-label { font-size: 12px; color: var(--muted); }
.cui-bp-metric-right {
  display: flex; align-items: center; gap: 6px;
}
.cui-bp-metric-val {
  font-size: 12px; font-family: 'DM Mono', monospace;
}
.cui-bp-metric-zone { font-size: 11px; font-weight: 600; }

/* BP progress chart */
.cui-bp-progress-heading {
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.cui-bp-progress-bars {
  display: flex; gap: 3px; align-items: flex-end; height: 64px;
}
.cui-bp-progress-bar-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-end; height: 64px;
}
.cui-bp-progress-bar-fill {
  border-radius: 3px 3px 1px 1px; min-height: 4px;
}
.cui-bp-progress-bar-empty {
  flex: 1; background: var(--elevated); border-radius: 3px;
}
.cui-bp-progress-dates {
  display: flex; gap: 3px; margin-top: 4px;
}
.cui-bp-progress-date {
  flex: 1; text-align: center;
  font-size: 10px; font-family: 'DM Mono', monospace;
  color: var(--dim);
}
.cui-bp-progress-footer {
  font-size: 11px; color: var(--muted); margin-top: 10px;
}

/* Progress table — inline styles retained in JS (reverted from class attempt) */

/* Home — metabolic age building state */
.cui-ma-build-heading {
  font-size: 14px; font-weight: 600;
  text-align: center; margin-top: 8px !important;
}
.cui-ma-build-sub {
  font-size: 12px; color: var(--muted);
  text-align: center; margin-top: 3px !important;
}

/* Metabolic Age — 7-day progress track */
.cui-ma-day-track {
  display: flex; gap: 4px; justify-content: center;
  margin-top: 10px !important;
}
.cui-ma-day {
  width: 28px; height: 4px; border-radius: 2px;
  background: var(--elevated);
  transition: background 0.4s;
}
.cui-ma-day--done {
  background: var(--teal);
}

/* Home — streak consistency */
.cui-streak-consistency {
  font-size: 12px; color: var(--muted);
  font-family: 'DM Mono', monospace; text-align: right;
}
.cui-streak-consistency-label {
  font-size: 10px; color: var(--dim);
  font-family: 'DM Mono', monospace;
}

/* Home — avg row readability bump */
.cui-avg-unit { font-size: 10px !important; }
.cui-avg-delta { font-size: 10px !important; }
.cui-avg-label { font-size: 11px !important; }

/* Home — consistent font: all data values use DM Sans */
#screen-home .cui-digest-val,
#screen-home .cui-goal-pct,
#screen-home .cui-avg-unit,
#screen-home .cui-avg-delta,
#screen-home .cui-avg-badge,
#screen-home .cui-streak-best,
#screen-home .cui-quick-sub,
#screen-home .cui-nudge-text,
#screen-home .cui-nudge-sub {
  font-family: 'DM Sans', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════
   QUIZ SCREEN — scoped spacing for text-heavy content
   #cui-root * resets all margin/padding to 0, so every
   element here needs explicit !important overrides.
   ═══════════════════════════════════════════════════════ */

/* Section headers */
#screen-quiz .quiz-section-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 24px 0 12px !important;
  padding: 0 !important;
}
#screen-quiz .quiz-section-title:first-child {
  margin-top: 8px !important;
}

/* Individual question rows */
#screen-quiz .quiz-q {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  background: var(--elevated) !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
}

/* Question label text */
#screen-quiz .quiz-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.45 !important;
  margin: 0 0 10px !important;
  display: block !important;
}

/* Scale options container */
#screen-quiz .quiz-scale {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Radio inputs hidden */
#screen-quiz .quiz-scale input[type="radio"] {
  display: none !important;
}

/* Scale option labels — pill style */
#screen-quiz .quiz-scale label {
  display: inline-block !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-mid) !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}
#screen-quiz .quiz-scale label:hover {
  border-color: var(--teal) !important;
}
#screen-quiz .quiz-scale input[type="radio"]:checked + label {
  border-color: var(--teal) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  background: rgba(45,212,191,0.08) !important;
}

/* Meta question styling — slightly different */
#screen-quiz .quiz-meta {
  margin: 0 0 20px !important;
  padding: 14px !important;
  background: var(--purple-soft, rgba(142,125,191,0.06)) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(142,125,191,0.15) !important;
}

/* Missing/unanswered highlight */
#screen-quiz .quiz-q.quiz-missing {
  outline: 3px solid var(--amber) !important;
  scroll-margin-top: 80px !important;
}

/* Progress bar */
#screen-quiz .quiz-progress-bar {
  height: 4px !important;
  background: var(--elevated) !important;
  border-radius: 2px !important;
  margin: 12px 0 20px !important;
  overflow: hidden !important;
}
#screen-quiz .quiz-progress-fill {
  height: 100% !important;
  background: var(--teal) !important;
  border-radius: 2px !important;
  transition: width 0.3s ease !important;
}

/* Result zone badge */
#screen-quiz .quiz-zone-badge {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 6px !important;
}

/* Result bars */
#screen-quiz .quiz-result-bar {
  display: grid !important;
  grid-template-columns: 90px 1fr 50px !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}
#screen-quiz .quiz-result-bar label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  cursor: default !important;
}
#screen-quiz .quiz-result-track {
  height: 8px !important;
  background: var(--elevated) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
#screen-quiz .quiz-result-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 0.3s ease !important;
}

/* Insight cards */
#screen-quiz .quiz-insight {
  margin: 0 0 12px !important;
  padding: 14px !important;
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
#screen-quiz .quiz-insight-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 0 8px !important;
}
#screen-quiz .quiz-insight-row {
  font-size: 12px !important;
  color: var(--text-mid) !important;
  line-height: 1.5 !important;
  margin: 0 0 6px !important;
}
#screen-quiz .quiz-insight-row strong {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* Archetype chip */
#screen-quiz .quiz-archetype {
  display: inline-block !important;
  padding: 6px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 8px 0 16px !important;
}

/* Result summary header */
#screen-quiz .quiz-result-header {
  margin: 0 0 16px !important;
  padding: 0 !important;
}
#screen-quiz .quiz-result-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 0 6px !important;
}

/* Actions */
#screen-quiz .quiz-actions {
  display: flex !important;
  gap: 10px !important;
  margin: 20px 0 0 !important;
}

/* Adaptation notes */
#screen-quiz .quiz-adaptation {
  margin: 12px 0 !important;
  padding: 12px 14px !important;
  background: rgba(45,212,191,0.06) !important;
  border: 1px solid rgba(45,212,191,0.15) !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--text-mid) !important;
}

/* Home screen quiz card */
#screen-home .cui-quiz-card {
  margin: 12px 0 !important;
  padding: 14px !important;
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}
#screen-home .cui-quiz-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 0 10px !important;
}
#screen-home .cui-quiz-pill {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin: 0 6px 6px 0 !important;
}

/* Dark theme overrides */
[data-theme="dark"] #screen-quiz .quiz-q {
  background: var(--elevated) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] #screen-quiz .quiz-scale label {
  border-color: var(--border) !important;
  color: var(--text-mid) !important;
}
[data-theme="dark"] #screen-quiz .quiz-scale input[type="radio"]:checked + label {
  background: rgba(45,212,191,0.12) !important;
}

/* ═══════════════════════════════════════════════════════════
   GLUCOSE/BP REDESIGN v2 — Flash, Input, Result, Dot Matrix
   Added v1.15.0, 2026-03-20
   ═══════════════════════════════════════════════════════════ */


/* ── FLASH / REMINDER CARD ─────────────────────────────── */
#screen-glucose .cui-flash-wrap,
#screen-bp .cui-flash-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100% !important;
  text-align: center !important;
  padding: 40px 16px !important;
}
.cui-flash-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 22px !important;
  padding: 40px 28px !important;
  max-width: 320px !important;
  width: 100% !important;
  box-shadow: var(--card-sh-lg) !important;
}
.cui-flash-icon {
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--teal) !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 28px !important;
  background: var(--teal-soft) !important;
}
#screen-bp .cui-flash-icon {
  border-color: var(--blue) !important;
  background: var(--blue-soft) !important;
}
.cui-flash-name {
  font-size: 22px !important; font-weight: 700 !important;
  color: var(--text) !important; margin-bottom: 16px !important;
}
.cui-flash-title {
  font-size: 15px !important; color: var(--text-mid) !important;
  margin-bottom: 6px !important; line-height: 1.6 !important;
}
.cui-flash-body {
  font-size: 14px !important; color: var(--muted) !important;
  line-height: 1.6 !important;
}
.cui-flash-bar {
  margin-top: 32px !important;
  width: 100% !important; height: 3px !important;
  background: var(--ring-track) !important;
  border-radius: 2px !important; overflow: hidden !important;
}
.cui-flash-bar-fill {
  height: 100% !important;
  background: var(--teal) !important;
  border-radius: 2px !important;
  transition: width 5s linear !important;
}
#screen-bp .cui-flash-bar-fill {
  background: var(--blue) !important;
}
.cui-flash-dismiss {
  font-size: 12px !important; color: var(--dim) !important;
  margin-top: 24px !important; cursor: pointer !important;
  background: none !important; border: none !important;
}


/* ── GLUCOSE / BP VALUE INPUT ──────────────────────────── */
.cui-value-card {
  background: var(--surface) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  border: 1px solid var(--border) !important;
  text-align: center !important;
  box-shadow: var(--card-sh) !important;
}
.cui-value-label {
  font-size: 10px !important; font-family: 'DM Mono', monospace !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
  color: var(--muted) !important; margin-bottom: 20px !important;
}
.cui-value-display {
  font-size: 60px !important; font-weight: 700 !important;
  color: var(--text) !important; line-height: 1 !important;
  padding: 8px 16px !important;
  border-bottom: 2px solid var(--teal) !important;
  min-width: 140px !important; text-align: center !important;
  display: inline-block !important;
  font-family: 'DM Mono', monospace !important;
}
#screen-bp .cui-value-display {
  border-bottom-color: var(--blue) !important;
  font-size: 48px !important;
}
.cui-value-unit {
  font-size: 13px !important; color: var(--dim) !important;
  margin-top: 12px !important;
}
.cui-value-note {
  font-size: 11px !important; color: var(--dim) !important;
  margin-top: 14px !important;
}

/* Hidden native input that sits behind the display */
.cui-value-hidden-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important; height: 1px !important;
}


/* ── UNIT TOGGLE (mmol/L ↔ mg/dL) ─────────────────────── */
.cui-unit-toggle {
  display: inline-flex !important;
  background: var(--elevated) !important;
  border-radius: 10px !important;
  padding: 2px !important; gap: 2px !important;
  margin-top: 14px !important;
}
.cui-unit-btn {
  padding: 6px 14px !important; border-radius: 8px !important;
  font-size: 12px !important; font-weight: 500 !important;
  cursor: pointer !important; border: none !important;
  background: transparent !important; color: var(--dim) !important;
  transition: all 0.2s !important;
}
.cui-unit-btn.active {
  background: var(--teal) !important;
  color: var(--on-teal) !important;
}


/* ── HABIT ROWS (checklist style) ──────────────────────── */
.cui-habit-row {
  display: flex !important; align-items: center !important;
  gap: 14px !important; padding: 13px 0 !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--border) !important;
  transition: background 0.15s !important;
}
.cui-habit-row:last-child { border-bottom: none !important; }
.cui-habit-box {
  width: 24px !important; height: 24px !important;
  border-radius: 6px !important; flex-shrink: 0 !important;
  border: 1.5px solid var(--dim) !important;
  background: transparent !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}
.cui-habit-row.active .cui-habit-box {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 2px 8px rgba(61,143,128,0.25) !important;
}
.cui-habit-row-label {
  font-size: 15px !important; color: var(--dim) !important;
  transition: color 0.2s !important;
}
.cui-habit-row.active .cui-habit-row-label {
  color: var(--text) !important;
}


/* ── BP CHECKLIST (round checkboxes) ───────────────────── */
.cui-bp-check-box {
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  border: 1.5px solid var(--dim) !important;
  background: transparent !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}
.cui-habit-row.active .cui-bp-check-box {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 2px 8px rgba(91,168,196,0.25) !important;
}


/* ── ZONE RESULT CARD ──────────────────────────────────── */
.cui-zone-card {
  border-radius: 22px !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
  text-align: center !important;
  border-width: 1.5px !important;
  border-style: solid !important;
}
.cui-zone-card--purple {
  background: var(--zone-purple-bg) !important;
  border-color: var(--purple) !important;
}
.cui-zone-card--blue {
  background: var(--zone-blue-bg) !important;
  border-color: var(--blue) !important;
}
.cui-zone-card--green {
  background: var(--zone-green-bg) !important;
  border-color: var(--green) !important;
}
.cui-zone-card--amber {
  background: var(--zone-amber-bg) !important;
  border-color: var(--amber) !important;
}
.cui-zone-value {
  font-size: 44px !important; font-weight: 700 !important;
  color: var(--text) !important; line-height: 1 !important;
  font-family: 'DM Mono', monospace !important;
}
.cui-zone-value-unit {
  font-size: 14px !important; margin-left: 8px !important;
}
.cui-zone-hr {
  font-size: 14px !important; color: var(--muted) !important;
  margin: 4px 0 8px !important;
}
.cui-zone-pill {
  display: inline-block !important;
  padding: 4px 18px !important; border-radius: 20px !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--on-teal) !important;
  margin: 6px 0 !important;
}
.cui-zone-pill--purple { background: var(--purple) !important; }
.cui-zone-pill--blue   { background: var(--blue) !important; }
.cui-zone-pill--green  { background: var(--green) !important; }
.cui-zone-pill--amber  { background: var(--amber) !important; }
.cui-zone-message {
  font-size: 14px !important; line-height: 1.4 !important;
  margin-top: 10px !important;
}


/* ── CHART CARD (bar chart / dumbbell chart) ───────────── */
.cui-chart-card {
  background: var(--surface) !important;
  border-radius: 22px !important;
  padding: 16px !important;
  margin-bottom: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--card-sh) !important;
}
.cui-chart-label {
  font-size: 10px !important; font-family: 'DM Mono', monospace !important;
  letter-spacing: 0.5px !important; text-transform: uppercase !important;
  color: var(--muted) !important; margin-bottom: 12px !important;
}
.cui-chart-legend {
  display: flex !important; justify-content: center !important;
  gap: 16px !important; margin-top: 8px !important;
}
.cui-chart-legend-item {
  display: flex !important; align-items: center !important;
  gap: 4px !important; font-size: 10px !important;
  color: var(--dim) !important;
}
.cui-chart-legend-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
}


/* ── DOT MATRIX (habit history grid) ───────────────────── */
.cui-dot-card {
  background: var(--surface) !important;
  border-radius: 22px !important;
  padding: 16px !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 18px !important;
  box-shadow: var(--card-sh) !important;
}
.cui-dot-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
.cui-dot-title {
  font-size: 10px !important; font-family: 'DM Mono', monospace !important;
  letter-spacing: 0.5px !important; text-transform: uppercase !important;
  color: var(--muted) !important;
}
.cui-dot-count {
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--teal) !important;
}
#screen-bp .cui-dot-count {
  color: var(--blue) !important;
}
.cui-dot-grid {
  display: grid !important;
  gap: 0 !important;
}
.cui-dot-dates {
  display: grid !important;
  margin-bottom: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--border) !important;
}
.cui-dot-date {
  text-align: center !important;
  font-size: 10px !important;
  color: var(--dim) !important;
}
.cui-dot-date--today {
  color: var(--text) !important;
  font-weight: 600 !important;
}
.cui-dot-row {
  display: grid !important;
  align-items: center !important;
  padding: 5px 0 !important;
}
.cui-dot-row-label {
  font-size: 11px !important;
  color: var(--text) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-right: 8px !important;
}
.cui-dot-cell {
  display: flex !important;
  justify-content: center !important;
}
.cui-dot {
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: var(--ring-track) !important;
  transition: background 0.2s !important;
}
.cui-dot--on {
  background: var(--teal) !important;
}
#screen-bp .cui-dot--on {
  background: var(--blue) !important;
}


/* ── FOOTER LINE (next reading due) ────────────────────── */
.cui-next-due {
  text-align: center !important;
  padding: 0 0 8px !important;
  font-size: 12px !important;
  color: var(--dim) !important;
}


/* ── SECTION HEADER (for input screen) ─────────────────── */
.cui-section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}
.cui-section-title {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}
.cui-section-count {
  font-size: 12px !important;
  color: var(--teal) !important;
}
#screen-bp .cui-section-count {
  color: var(--blue) !important;
}


/* ── SAVE FLASH ANIMATION ──────────────────────────────── */
@keyframes cuiZoneReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cui-zone-card { animation: cuiZoneReveal 0.35s ease !important; }

/* =========================================================
   TEXT SCALE SYSTEM — v1.1.0
   --ts variable drives all scalable text.
   Fixed text (nav, pills, monospace data) never changes.
   Two extra sizes above default — nothing smaller.
   Default=1.0x  Medium=1.25x  Large=1.40x
   ========================================================= */

#cui-root { --ts: 1; }
#cui-root.cui-text-md { --ts: 1.25; }
#cui-root.cui-text-lg { --ts: 1.40; }

/* ── Scalable CSS classes ─────────────────────────── */
/* 12px base → md:15px lg:17px */
#cui-root.cui-text-md .cui-shop-label,
#cui-root.cui-text-md .cui-prac-sub,
#cui-root.cui-text-md .cui-result-note,
#cui-root.cui-text-md .cui-goal-label,
#cui-root.cui-text-md .cui-tc-body,
#cui-root.cui-text-md .cui-summary-key,
#cui-root.cui-text-md .cui-summary-val,
#cui-root.cui-text-md .cui-stepper-sub,
#cui-root.cui-text-md .cui-journey-active-sub,
#cui-root.cui-text-md .cui-digest-label,
#cui-root.cui-text-md .cui-prac-home-label,
#cui-root.cui-text-md .cui-prac-sub-score-denom,
#cui-root.cui-text-md .cui-prac-breakdown-name,
#cui-root.cui-text-md .cui-prac-no-session,
#cui-root.cui-text-md .cui-prac-cta-body,
#cui-root.cui-text-md .cui-prac-connect-body,
#cui-root.cui-text-md .cui-metrics-card .cui-metric-detail-key,
#cui-root.cui-text-md .cui-metrics-card .cui-metric-detail-val,
#cui-root.cui-text-md .cui-health-note,
#cui-root.cui-text-md .cui-milestone-card-title,
#cui-root.cui-text-md .cui-bp-metric-label,
#cui-root.cui-text-md .cui-ma-build-sub,
#cui-root.cui-text-md .cui-streak-consistency,
#cui-root.cui-text-md .cui-flash-dismiss,
#cui-root.cui-text-md .cui-section-count { font-size: 15px !important; }

#cui-root.cui-text-lg .cui-shop-label,
#cui-root.cui-text-lg .cui-prac-sub,
#cui-root.cui-text-lg .cui-result-note,
#cui-root.cui-text-lg .cui-goal-label,
#cui-root.cui-text-lg .cui-tc-body,
#cui-root.cui-text-lg .cui-summary-key,
#cui-root.cui-text-lg .cui-summary-val,
#cui-root.cui-text-lg .cui-stepper-sub,
#cui-root.cui-text-lg .cui-journey-active-sub,
#cui-root.cui-text-lg .cui-digest-label,
#cui-root.cui-text-lg .cui-prac-home-label,
#cui-root.cui-text-lg .cui-prac-sub-score-denom,
#cui-root.cui-text-lg .cui-prac-breakdown-name,
#cui-root.cui-text-lg .cui-prac-no-session,
#cui-root.cui-text-lg .cui-prac-cta-body,
#cui-root.cui-text-lg .cui-prac-connect-body,
#cui-root.cui-text-lg .cui-metrics-card .cui-metric-detail-key,
#cui-root.cui-text-lg .cui-metrics-card .cui-metric-detail-val,
#cui-root.cui-text-lg .cui-health-note,
#cui-root.cui-text-lg .cui-milestone-card-title,
#cui-root.cui-text-lg .cui-bp-metric-label,
#cui-root.cui-text-lg .cui-ma-build-sub,
#cui-root.cui-text-lg .cui-streak-consistency,
#cui-root.cui-text-lg .cui-flash-dismiss,
#cui-root.cui-text-lg .cui-section-count { font-size: 17px !important; }

/* v1.35.1 — Profile head name scales too so it stays dominant
   over the email line at every text-size preference. */
#cui-root.cui-text-md .cui-profile-head-name { font-size: 26px !important; }
#cui-root.cui-text-lg .cui-profile-head-name { font-size: 30px !important; }

/* 13px base → md:16px lg:18px */
#cui-root.cui-text-md .cui-quick-title,
#cui-root.cui-text-md .cui-focus-body,
#cui-root.cui-text-md .cui-avg-arrow,
#cui-root.cui-text-md .cui-prac-name,
#cui-root.cui-text-md .cui-phase-guidance,
#cui-root.cui-text-md .cui-step-chevron,
#cui-root.cui-text-md .cui-check-label,
#cui-root.cui-text-md .cui-info-popup-title,
#cui-root.cui-text-md .cui-info-popup-body,
#cui-root.cui-text-md .cui-emergency-body,
#cui-root.cui-text-md .cui-health-question,
#cui-root.cui-text-md .cui-tc-check-label,
#cui-root.cui-text-md .cui-step-sub,
#cui-root.cui-text-md .cui-stepper-name,
#cui-root.cui-text-md .cui-journey-inactive-label,
#cui-root.cui-text-md .cui-nudge-text,
#cui-root.cui-text-md .cui-prac-home-name,
#cui-root.cui-text-md .cui-prac-metric-val,
#cui-root.cui-text-md .cui-prac-sub-score-title,
#cui-root.cui-text-md .cui-prac-pending-text,
#cui-root.cui-text-md .cui-prac-connect-title,
#cui-root.cui-text-md .cui-habits-section-title,
#cui-root.cui-text-md .cui-step-heading,
#cui-root.cui-text-md .cui-phase-nudge,
#cui-root.cui-text-md .cui-milestone-card-body,
#cui-root.cui-text-md .cui-empty-state,
#cui-root.cui-text-md .cui-bp-progress-heading,
#cui-root.cui-text-md .cui-value-unit,
#cui-root.cui-text-md .cui-dot-count,
#cui-root.cui-text-md .cui-section-title { font-size: 16px !important; }

#cui-root.cui-text-lg .cui-quick-title,
#cui-root.cui-text-lg .cui-focus-body,
#cui-root.cui-text-lg .cui-avg-arrow,
#cui-root.cui-text-lg .cui-prac-name,
#cui-root.cui-text-lg .cui-phase-guidance,
#cui-root.cui-text-lg .cui-step-chevron,
#cui-root.cui-text-lg .cui-check-label,
#cui-root.cui-text-lg .cui-info-popup-title,
#cui-root.cui-text-lg .cui-info-popup-body,
#cui-root.cui-text-lg .cui-emergency-body,
#cui-root.cui-text-lg .cui-health-question,
#cui-root.cui-text-lg .cui-tc-check-label,
#cui-root.cui-text-lg .cui-step-sub,
#cui-root.cui-text-lg .cui-stepper-name,
#cui-root.cui-text-lg .cui-journey-inactive-label,
#cui-root.cui-text-lg .cui-nudge-text,
#cui-root.cui-text-lg .cui-prac-home-name,
#cui-root.cui-text-lg .cui-prac-metric-val,
#cui-root.cui-text-lg .cui-prac-sub-score-title,
#cui-root.cui-text-lg .cui-prac-pending-text,
#cui-root.cui-text-lg .cui-prac-connect-title,
#cui-root.cui-text-lg .cui-habits-section-title,
#cui-root.cui-text-lg .cui-step-heading,
#cui-root.cui-text-lg .cui-phase-nudge,
#cui-root.cui-text-lg .cui-milestone-card-body,
#cui-root.cui-text-lg .cui-empty-state,
#cui-root.cui-text-lg .cui-bp-progress-heading,
#cui-root.cui-text-lg .cui-value-unit,
#cui-root.cui-text-lg .cui-dot-count,
#cui-root.cui-text-lg .cui-section-title { font-size: 18px !important; }

/* 14px base → md:18px lg:20px */
#cui-root.cui-text-md .cui-back-btn,
#cui-root.cui-text-md .cui-kit-text,
#cui-root.cui-text-md .cui-sex-label,
#cui-root.cui-text-md .cui-kit-card-body,
#cui-root.cui-text-md .cui-bp-result-unit,
#cui-root.cui-text-md .cui-bp-result-bpm,
#cui-root.cui-text-md .cui-ma-build-heading,
#cui-root.cui-text-md .cui-flash-body,
#cui-root.cui-text-md .cui-zone-value-unit,
#cui-root.cui-text-md .cui-zone-hr,
#cui-root.cui-text-md .cui-zone-message,
#cui-root.cui-text-md .cui-profile-prac-name { font-size: 18px !important; }

#cui-root.cui-text-lg .cui-back-btn,
#cui-root.cui-text-lg .cui-kit-text,
#cui-root.cui-text-lg .cui-sex-label,
#cui-root.cui-text-lg .cui-kit-card-body,
#cui-root.cui-text-lg .cui-bp-result-unit,
#cui-root.cui-text-lg .cui-bp-result-bpm,
#cui-root.cui-text-lg .cui-ma-build-heading,
#cui-root.cui-text-lg .cui-flash-body,
#cui-root.cui-text-lg .cui-zone-value-unit,
#cui-root.cui-text-lg .cui-zone-hr,
#cui-root.cui-text-lg .cui-zone-message,
#cui-root.cui-text-lg .cui-profile-prac-name { font-size: 20px !important; }

/* 15px base → md:19px lg:21px */
#cui-root.cui-text-md .cui-journey-active-label,
#cui-root.cui-text-md .cui-flash-title,
#cui-root.cui-text-md .cui-habit-row-label,
#cui-root.cui-text-md .cui-prac-cta-headline { font-size: 19px !important; }

#cui-root.cui-text-lg .cui-journey-active-label,
#cui-root.cui-text-lg .cui-flash-title,
#cui-root.cui-text-lg .cui-habit-row-label,
#cui-root.cui-text-lg .cui-prac-cta-headline { font-size: 21px !important; }

/* ── Orphan prevention — all guidance/body text containers ── */
#cui-root .cui-focus-body,
#cui-root .cui-phase-guidance,
#cui-root .cui-phase-nudge,
#cui-root .cui-result-note,
#cui-root .cui-emergency-body,
#cui-root .cui-info-popup-body,
#cui-root .cui-kit-card-body,
#cui-root .cui-prac-cta-body,
#cui-root .cui-prac-connect-body,
#cui-root .cui-tc-body,
#cui-root .cui-ma-build-sub {
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ── Fixed height → min-height for text containers ── */
#cui-root .cui-tc-scroll { max-height: 320px; overflow-y: auto; }

/* ── Section header labels (10px DM Mono) — scale at Medium and Large ── */
/* Medium: 10 → 12px */
#cui-root.cui-text-md .cui-card-label,
#cui-root.cui-text-md .cui-sec-head,
#cui-root.cui-text-md .cui-focus-label,
#cui-root.cui-text-md .cui-phase-label,
#cui-root.cui-text-md .cui-phase-badge-pre,
#cui-root.cui-text-md .cui-phase-badge-val,
#cui-root.cui-text-md .cui-result-title { font-size: 12px !important; }

/* Large: 10 → 14px */
#cui-root.cui-text-lg .cui-card-label,
#cui-root.cui-text-lg .cui-sec-head,
#cui-root.cui-text-lg .cui-focus-label,
#cui-root.cui-text-lg .cui-phase-label,
#cui-root.cui-text-lg .cui-phase-badge-pre,
#cui-root.cui-text-lg .cui-phase-badge-val,
#cui-root.cui-text-lg .cui-result-title { font-size: 14px !important; }

/* ── Override higher-specificity selectors for section headers ── */
/* cui-ma-gauge-head overrides cui-card-label with 9px !important — beat it */
#cui-root.cui-text-md .cui-ma-gauge-head .cui-card-label,
#cui-root.cui-text-md .cui-sparkline-head .cui-card-label { font-size: 12px !important; }

#cui-root.cui-text-lg .cui-ma-gauge-head .cui-card-label,
#cui-root.cui-text-lg .cui-sparkline-head .cui-card-label { font-size: 14px !important; }

/* ── ADDITIONAL SCALABLE CLASSES (v1.2.0) ───────────────
   28 classes missed in initial audit.
   Most impactful: buttons, "PM due" labels, habit chips.
   ─────────────────────────────────────────────────────── */

/* 11px base → md:14px lg:15px */
#cui-root.cui-text-md .cui-page-sub { font-size: 14px !important; }
#cui-root.cui-text-lg .cui-page-sub { font-size: 15px !important; }

/* 12px base → md:15px lg:17px */
#cui-root.cui-text-md .cui-btn-text,
#cui-root.cui-text-md .cui-btn-undo,
#cui-root.cui-text-md .cui-next-due,
#cui-root.cui-text-md .cui-habit-chip,
#cui-root.cui-text-md .cui-edit-goal-chip,
#cui-root.cui-text-md .cui-sleep-opt,
#cui-root.cui-text-md .cui-unit-btn,
#cui-root.cui-text-md .cui-wake-chip,
#cui-root.cui-text-md .cui-tc-highlight,
#cui-root.cui-text-md .cui-link-btn,
#cui-root.cui-text-md .cui-focus-action { font-size: 15px !important; }

#cui-root.cui-text-lg .cui-btn-text,
#cui-root.cui-text-lg .cui-btn-undo,
#cui-root.cui-text-lg .cui-next-due,
#cui-root.cui-text-lg .cui-habit-chip,
#cui-root.cui-text-lg .cui-edit-goal-chip,
#cui-root.cui-text-lg .cui-sleep-opt,
#cui-root.cui-text-lg .cui-unit-btn,
#cui-root.cui-text-lg .cui-wake-chip,
#cui-root.cui-text-lg .cui-tc-highlight,
#cui-root.cui-text-lg .cui-link-btn,
#cui-root.cui-text-lg .cui-focus-action { font-size: 17px !important; }

/* 13px base → md:16px lg:18px */
#cui-root.cui-text-md .cui-btn-soft,
#cui-root.cui-text-md .cui-edit-opt,
#cui-root.cui-text-md .cui-health-opt,
#cui-root.cui-text-md .cui-info-popup-close,
#cui-root.cui-text-md .cui-prac-connect-email,
#cui-root.cui-text-md .cui-prac-cta-btn,
#cui-root.cui-text-md .cui-prac-pending-btn,
#cui-root.cui-text-md .cui-journey-doughnut-centre,
#cui-root.cui-text-md .cui-top-btn { font-size: 16px !important; }

#cui-root.cui-text-lg .cui-btn-soft,
#cui-root.cui-text-lg .cui-edit-opt,
#cui-root.cui-text-lg .cui-health-opt,
#cui-root.cui-text-lg .cui-info-popup-close,
#cui-root.cui-text-lg .cui-prac-connect-email,
#cui-root.cui-text-lg .cui-prac-cta-btn,
#cui-root.cui-text-lg .cui-prac-pending-btn,
#cui-root.cui-text-lg .cui-journey-doughnut-centre,
#cui-root.cui-text-lg .cui-top-btn { font-size: 18px !important; }

/* 14px base → md:18px lg:20px */
#cui-root.cui-text-md .cui-btn-primary,
#cui-root.cui-text-md .cui-prac-score-denom,
#cui-root.cui-text-md .cui-quiz-card-title,
#cui-root.cui-text-md .cui-mode-btn,
#cui-root.cui-text-md .cui-step-btn { font-size: 18px !important; }

#cui-root.cui-text-lg .cui-btn-primary,
#cui-root.cui-text-lg .cui-prac-score-denom,
#cui-root.cui-text-lg .cui-quiz-card-title,
#cui-root.cui-text-lg .cui-mode-btn,
#cui-root.cui-text-lg .cui-step-btn { font-size: 20px !important; }

/* 15px base → md:19px lg:21px */
#cui-root.cui-text-md .cui-ob-footer { font-size: 19px !important; }
#cui-root.cui-text-lg .cui-ob-footer { font-size: 21px !important; }

/* 16px base → md:20px lg:22px */
#cui-root.cui-text-md .cui-emergency-title { font-size: 20px !important; }
#cui-root.cui-text-lg .cui-emergency-title { font-size: 22px !important; }

/* cui-metric-name — 14px base → md:16px lg:16px (capped — row wraps above 16px) */
#cui-root.cui-text-md .cui-metric-name { font-size: 16px !important; }
#cui-root.cui-text-lg .cui-metric-name { font-size: 16px !important; }

/* cui-metric-status — 13px base → md:15px lg:15px (not previously scaling) */
#cui-root.cui-text-md .cui-metric-status { font-size: 15px !important; }
#cui-root.cui-text-lg .cui-metric-status { font-size: 15px !important; }

/* cui-quick-sub — "PM due" / "AM due" under quick log buttons (10px base) */
#cui-root.cui-text-md .cui-quick-sub { font-size: 12px !important; }
#cui-root.cui-text-lg .cui-quick-sub { font-size: 12px !important; } /* capped — long string wraps above 12px */

/* cui-streak-label — "day streak" label (11px base) */
#cui-root.cui-text-md .cui-streak-label { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-streak-label { font-size: 14px !important; }

/* cui-streak-best — "Personal best: X days logged" (11px base) */
#cui-root.cui-text-md .cui-streak-best { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-streak-best { font-size: 14px !important; }

/* cui-milestone-msg — milestone text on streak card */
#cui-root.cui-text-md .cui-milestone-msg { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-milestone-msg { font-size: 14px !important; }

/* cui-prac-home-status — "Linked" status text */
#cui-root.cui-text-md .cui-prac-home-status { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-prac-home-status { font-size: 14px !important; }

/* cui-greeting-name — "Good morning, Tony" */
#cui-root.cui-text-md #screen-home .cui-greeting-name { font-size: 40px !important; }
#cui-root.cui-text-lg #screen-home .cui-greeting-name { font-size: 44px !important; }
#cui-root.cui-text-md .cui-greeting-name { font-size: 20px !important; }
#cui-root.cui-text-lg .cui-greeting-name { font-size: 22px !important; }

/* cui-greeting-sub — "Today · 22 Mar 2026 · Day 15" */
#cui-root.cui-text-md .cui-greeting-sub { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-greeting-sub { font-size: 14px !important; }

/* ── Jarvis chat screen scaling ──────────────────────────
   js-bub:    14px → md:16px lg:17px
   js-time:   10px → md:11px lg:12px
   js-avatar: 12px → md:13px lg:14px
   Input placeholder follows js-bub via font-size inherit
   ─────────────────────────────────────────────────────── */
#cui-root.cui-text-md #cui-jarvis-content .js-bub { font-size: 16px !important; }
#cui-root.cui-text-lg #cui-jarvis-content .js-bub { font-size: 17px !important; }

#cui-root.cui-text-md #cui-jarvis-content .js-time { font-size: 11px !important; }
#cui-root.cui-text-lg #cui-jarvis-content .js-time { font-size: 12px !important; }

#cui-root.cui-text-md #cui-jarvis-content .js-avatar { font-size: 13px !important; }
#cui-root.cui-text-lg #cui-jarvis-content .js-avatar { font-size: 14px !important; }

/* ── Logging screen scaling (BP + Glucose) ──────────────
   cui-page-title:  18px → md:21px lg:22px
   cui-page-sub:    11px → md:13px lg:14px
   cui-field-input: 16px → md:18px lg:20px
   cui-field-label: 11px → md:13px lg:14px
   cui-zone-pill:   13px → md:15px lg:16px
   cui-result-value:22px → md:25px lg:27px
   ─────────────────────────────────────────────────────── */
#cui-root.cui-text-md .cui-page-title { font-size: 21px !important; }
#cui-root.cui-text-lg .cui-page-title { font-size: 22px !important; }

#cui-root.cui-text-md .cui-page-sub { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-page-sub { font-size: 14px !important; }

#cui-root.cui-text-md .cui-field-input { font-size: 18px !important; }
#cui-root.cui-text-lg .cui-field-input { font-size: 20px !important; }

#cui-root.cui-text-md .cui-field-label { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-field-label { font-size: 14px !important; }

#cui-root.cui-text-md .cui-zone-pill { font-size: 15px !important; }
#cui-root.cui-text-lg .cui-zone-pill { font-size: 16px !important; }

#cui-root.cui-text-md .cui-result-value { font-size: 25px !important; }
#cui-root.cui-text-lg .cui-result-value { font-size: 27px !important; }

/* ── Settings seg buttons ───────────────────────────────
   13px → md:15px lg:16px — white-space:nowrap already set
   ─────────────────────────────────────────────────────── */
#cui-root.cui-text-md .cui-settings-seg-btn { font-size: 15px !important; }
#cui-root.cui-text-lg .cui-settings-seg-btn { font-size: 16px !important; }

/* ── Scan meal / Scan label button wrapping prevention ──
   white-space:nowrap prevents text wrap in two-column layout
   ─────────────────────────────────────────────────────── */
#cui-root .cui-btn-primary { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════
   ICON SCALING — containers and their SVGs
   Quick log icons, vitals icons, shop icons, nav icons,
   info buttons, back buttons all scale proportionally.
   ======================================================= */

/* Quick log icons (32px → 36px → 40px) */
#cui-root.cui-text-md .cui-quick-icon { width: 36px !important; height: 36px !important; }
#cui-root.cui-text-lg .cui-quick-icon { width: 40px !important; height: 40px !important; }

/* Vitals card icons (32px → 36px → 40px) */
#cui-root.cui-text-md .vc-icon { width: 28px !important; height: 28px !important; }
#cui-root.cui-text-lg .vc-icon { width: 30px !important; height: 30px !important; }

/* ── Vitals card ceiling caps ───────────────────────────
   At large, CUI_TD/CUI_TS produce sizes that dominate the card.
   These overrides enforce safe ceilings.
   ─────────────────────────────────────────────────────── */
#cui-root.cui-text-lg #screen-vitals .vc-val  { font-size: 36px !important; } /* cap 44→36 */
#cui-root.cui-text-lg #screen-vitals .vc-name { font-size: 18px !important; } /* cap 22→18 */
#cui-root.cui-text-lg #screen-vitals .vc-btn  { font-size: 16px !important; } /* cap 20→16 */
#cui-root.cui-text-lg #screen-vitals .vc-unit { font-size: 15px !important; } /* cap 18→15 */
#cui-root.cui-text-md #screen-vitals .vc-val  { font-size: 38px !important; } /* md cap */

/* SVGs inside quick and vitals icons */
#cui-root.cui-text-md .cui-quick-icon svg,
#cui-root.cui-text-md .vc-icon svg { width: 13px !important; height: 13px !important; }
#cui-root.cui-text-lg .cui-quick-icon svg,
#cui-root.cui-text-lg .vc-icon svg { width: 14px !important; height: 14px !important; }

/* Shop icons (36px → 40px → 44px) */
#cui-root.cui-text-md .cui-shop-icon { width: 40px !important; height: 40px !important; }
#cui-root.cui-text-lg .cui-shop-icon { width: 44px !important; height: 44px !important; }
#cui-root.cui-text-md .cui-shop-icon svg { width: 18px !important; height: 18px !important; }
#cui-root.cui-text-lg .cui-shop-icon svg { width: 20px !important; height: 20px !important; }

/* Info buttons — ⓘ icons */
#cui-root.cui-text-md .cui-info-btn { font-size: 14px !important; }
#cui-root.cui-text-lg .cui-info-btn { font-size: 16px !important; }

/* Vitals panel chevrons */
#cui-root.cui-text-md .vp-chev { width: 18px !important; height: 18px !important; }
#cui-root.cui-text-lg .vp-chev { width: 20px !important; height: 20px !important; }

/* Streak flame icon */
#cui-root.cui-text-md .cui-streak-flame svg { width: 26px !important; height: 26px !important; }
#cui-root.cui-text-lg .cui-streak-flame svg { width: 30px !important; height: 30px !important; }

/* Nav icons — fixed, never scale */

/* ═══════════════════════════════════════════════════════
   HEALTH DRIFT & TIME IN ZONE — small readable labels
   ======================================================= */

/* "Optimal" / "Referral" end labels on health drift bar (9px → 11px → 13px) */
#cui-root.cui-text-md #cui-health-drift-card [style*="font-size:9px"],
#cui-root.cui-text-md .cui-spectrum-footer { font-size: 11px !important; }
#cui-root.cui-text-lg #cui-health-drift-card [style*="font-size:9px"],
#cui-root.cui-text-lg .cui-spectrum-footer { font-size: 13px !important; }

/* TIZ legend items — "6% Optimal" etc (10px → 12px → 14px)
   Override the #screen-trends specificity */
#cui-root.cui-text-md #screen-trends .cui-tiz-item,
#cui-root.cui-text-md .cui-tiz-item { font-size: 12px !important; }
#cui-root.cui-text-lg #screen-trends .cui-tiz-item,
#cui-root.cui-text-lg .cui-tiz-item { font-size: 14px !important; }

/* TIZ dots scale with text */
#cui-root.cui-text-md .cui-tiz-dot { width: 10px !important; height: 10px !important; }
#cui-root.cui-text-lg .cui-tiz-dot { width: 12px !important; height: 12px !important; }

/* "Not enough readings yet" message */
#cui-root.cui-text-md .cui-tiz-empty { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-tiz-empty { font-size: 14px !important; }

/* Habits vs MetaScore chart legend */
#cui-root.cui-text-md .cui-hvm-legend { font-size: 12px !important; }
#cui-root.cui-text-lg .cui-hvm-legend { font-size: 13px !important; }

/* Trends range buttons (D/W/M/6M/Y) */
#cui-root.cui-text-md .cui-range-btn { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-range-btn { font-size: 14px !important; }

/* Sparkline trend label — "Improving" */
#cui-root.cui-text-md .cui-sparkline-trend { font-size: 13px !important; }
#cui-root.cui-text-lg .cui-sparkline-trend { font-size: 15px !important; }

/* ── MHI / FAI dropdown headers (10px DM Mono → 12px → 14px) ── */
#cui-root.cui-text-md .cui-prac-dd-title { font-size: 12px !important; }
#cui-root.cui-text-lg .cui-prac-dd-title { font-size: 14px !important; }

/* ── MHI / FAI dropdown chevron icons ── */
#cui-root.cui-text-md .cui-prac-dd-chevron { width: 18px !important; height: 18px !important; }
#cui-root.cui-text-lg .cui-prac-dd-chevron { width: 20px !important; height: 20px !important; }

/* ── MHI breakdown row — allow wrapping at larger sizes ── */
#cui-root.cui-text-md .cui-prac-breakdown-row,
#cui-root.cui-text-lg .cui-prac-breakdown-row {
  align-items: flex-start !important;
  padding: 10px 0 !important;
}

/* ── MHI zone pill — fixed size but ensure it doesn't clip ── */
#cui-root.cui-text-md .cui-prac-zone-pill,
#cui-root.cui-text-lg .cui-prac-zone-pill {
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px !important;
}

/* ── Journey inactive sub — "Daily readings — drift detected" etc ──
   11px base. #screen-trends overrides need higher specificity to beat. */
#cui-root.cui-text-md .cui-journey-inactive-sub,
#cui-root.cui-text-md #screen-trends .cui-journey-inactive-sub { font-size: 14px !important; }
#cui-root.cui-text-lg .cui-journey-inactive-sub,
#cui-root.cui-text-lg #screen-trends .cui-journey-inactive-sub { font-size: 15px !important; }

/* ── Journey active sub (12px base) already in block but trends override blocks it ── */
#cui-root.cui-text-md #screen-trends .cui-journey-active-sub { font-size: 15px !important; }
#cui-root.cui-text-lg #screen-trends .cui-journey-active-sub { font-size: 17px !important; }

/* ── Habits vs MetaScore legend dot — scale with legend text ── */
#cui-root.cui-text-md .cui-hvm-legend-dot { width: 10px !important; height: 10px !important; }
#cui-root.cui-text-lg .cui-hvm-legend-dot { width: 11px !important; height: 11px !important; }/* ═══════════════════════════════════════════════════════
   GLASS EFFECT — LIGHT MODE ONLY
   FILE:        Append to 30-cui-shell.css
   VERSION:     1.0.0
   DATE:        2026-03-23
   PURPOSE:     Frosted glass cards, animated bubbles, ring draw,
                stagger fade-up. Light mode only — dark mode untouched.
   ═══════════════════════════════════════════════════════ */


/* ── BUBBLE BACKGROUND ── */

#screen-home .cui-bubbles {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

#screen-home .cui-bubble {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  will-change: transform !important;
}

#screen-home .cui-bubble--1 {
  width: 160px !important; height: 160px !important;
  background: radial-gradient(circle, rgba(61,143,128,0.55), rgba(61,143,128,0.05)) !important;
  top: 10px !important; right: -20px !important;
  filter: blur(35px) !important;
  animation: cuiBubFloat1 12s ease-in-out infinite !important;
}
#screen-home .cui-bubble--2 {
  width: 180px !important; height: 180px !important;
  background: radial-gradient(circle, rgba(142,125,191,0.5), rgba(142,125,191,0.03)) !important;
  top: 400px !important; left: -40px !important;
  filter: blur(40px) !important;
  animation: cuiBubFloat2 15s ease-in-out infinite !important;
}
#screen-home .cui-bubble--3 {
  width: 130px !important; height: 130px !important;
  background: radial-gradient(circle, rgba(196,148,58,0.5), rgba(196,148,58,0.03)) !important;
  top: 200px !important; left: 70px !important;
  filter: blur(28px) !important;
  animation: cuiBubFloat3 10s ease-in-out infinite !important;
}
#screen-home .cui-bubble--4 {
  width: 160px !important; height: 160px !important;
  background: radial-gradient(circle, rgba(91,168,196,0.45), rgba(91,168,196,0.03)) !important;
  top: 650px !important; right: -25px !important;
  filter: blur(32px) !important;
  animation: cuiBubFloat4 13s ease-in-out infinite !important;
}
#screen-home .cui-bubble--5 {
  width: 110px !important; height: 110px !important;
  background: radial-gradient(circle, rgba(92,168,106,0.45), rgba(92,168,106,0.03)) !important;
  top: 900px !important; left: 30px !important;
  filter: blur(25px) !important;
  animation: cuiBubFloat1 11s ease-in-out infinite 2s !important;
}
#screen-home .cui-bubble--6 {
  width: 140px !important; height: 140px !important;
  background: radial-gradient(circle, rgba(196,181,253,0.4), rgba(196,181,253,0.02)) !important;
  top: 80px !important; left: -30px !important;
  filter: blur(30px) !important;
  animation: cuiBubFloat3 14s ease-in-out infinite 1s !important;
}
#screen-home .cui-bubble--7 {
  width: 100px !important; height: 100px !important;
  background: radial-gradient(circle, rgba(232,164,74,0.35), rgba(232,164,74,0.02)) !important;
  top: 540px !important; right: 50px !important;
  filter: blur(24px) !important;
  animation: cuiBubFloat2 9s ease-in-out infinite 3s !important;
}

@keyframes cuiBubFloat1 {
  0%   { transform: translate(0,0) scale(1); }
  25%  { transform: translate(30px,-40px) scale(1.1); }
  50%  { transform: translate(-20px,-80px) scale(0.9); }
  75%  { transform: translate(40px,-30px) scale(1.05); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes cuiBubFloat2 {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(-40px,30px) scale(1.15); }
  66%  { transform: translate(20px,-20px) scale(0.95); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes cuiBubFloat3 {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(25px,35px); }
  100% { transform: translate(0,0); }
}
@keyframes cuiBubFloat4 {
  0%   { transform: translate(0,0) scale(1); }
  40%  { transform: translate(-30px,-25px) scale(1.1); }
  80%  { transform: translate(15px,15px) scale(0.92); }
  100% { transform: translate(0,0) scale(1); }
}

/* Hide bubbles — clean look, no floating blobs */
#screen-home .cui-bubbles {
  display: none !important;
}


/* ── SCROLL CONTENT Z-INDEX ── */

#screen-home .cui-scroll {
  position: relative !important;
  z-index: 1 !important;
}


/* ── PAGE BACKGROUND — clean, warm off-white + hex texture ── */

#screen-home {
  background: #EDEAE5 !important;
  position: relative !important;
}
[data-theme="dark"] #screen-home {
  background: var(--bg) !important;
}

/* Hex molecular texture overlay — all screens, Shopify CDN image */
#cui-root::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("/cdn/shop/files/ChatGPT_Image_Mar_11_2026_03_27_16_PM_1.png?v=1774287406") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Dark mode — hide texture */
[data-theme="dark"] #cui-root::after {
  display: none !important;
}


/* ── CLEAN CARD ── */

#screen-home .cui-card:not(.cui-sect-act):not(.cui-sect-understand):not(.cui-sect-progress):not(.cui-sect-step) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 16px rgba(0,0,0,0.03) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Top light streak — disabled for clean card style */
#screen-home .cui-card::before {
  display: none !important;
}

/* Corner lens flare — disabled for clean card style */
#screen-home .cui-card::after {
  display: none !important;
}

/* Dark mode — revert glass to original surface */
[data-theme="dark"] #screen-home .cui-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--card-sh) !important;
}
[data-theme="dark"] #screen-home .cui-card::before,
[data-theme="dark"] #screen-home .cui-card::after {
  display: none !important;
}


/* ── TINTED CARDS — very subtle warm tints ── */

#screen-home #cui-focus-slot .cui-card {
  background: rgba(255,252,247,0.85) !important;
  border-color: rgba(186,117,23,0.10) !important;
}

#screen-home #cui-ma-stress-slot .cui-card {
  background: rgba(250,249,255,0.85) !important;
  border-color: rgba(127,119,221,0.08) !important;
}

#screen-home #cui-smallwin-slot .cui-card {
  background: rgba(248,252,244,0.85) !important;
  border-color: rgba(59,109,17,0.08) !important;
}

/* Dark mode — no tinting */
[data-theme="dark"] #screen-home #cui-focus-slot .cui-card,
[data-theme="dark"] #screen-home #cui-ma-stress-slot .cui-card,
[data-theme="dark"] #screen-home #cui-smallwin-slot .cui-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}


/* ── STAGGER FADE UP ── */

@keyframes cuiFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

#screen-home #cui-hero-slot .cui-card     { animation: cuiFadeUp 0.5s ease both !important; }
#screen-home #cui-focus-slot .cui-card    { animation: cuiFadeUp 0.5s ease 0.06s both !important; }
#screen-home #cui-latest-slot .cui-card   { animation: cuiFadeUp 0.5s ease 0.12s both !important; }
#screen-home #cui-pattern-slot            { animation: cuiFadeUp 0.5s ease 0.18s both !important; }
#screen-home #cui-ma-stress-slot .cui-card { animation: cuiFadeUp 0.5s ease 0.24s both !important; }
#screen-home #cui-smallwin-slot .cui-card  { animation: cuiFadeUp 0.5s ease 0.30s both !important; }
#screen-home #cui-breathe-slot > div      { animation: cuiFadeUp 0.5s ease 0.36s both !important; }
#screen-home #cui-admin-slot .cui-card    { animation: cuiFadeUp 0.4s ease 0.42s both !important; }
#screen-home #cui-admin-slot .cui-card:nth-child(2) { animation-delay: 0.46s !important; }
#screen-home #cui-admin-slot .cui-card:nth-child(3) { animation-delay: 0.50s !important; }
#screen-home #cui-admin-slot .cui-card:nth-child(4) { animation-delay: 0.54s !important; }
#screen-home #cui-admin-slot .cui-card:nth-child(5) { animation-delay: 0.58s !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #screen-home .cui-bubble { animation: none !important; }
  #screen-home .cui-card,
  #screen-home #cui-pattern-slot,
  #screen-home #cui-admin-slot .cui-card { animation: none !important; opacity: 1 !important; }
  .cui-ring-draw { animation: none !important; }
}


/* ── RING DRAW ANIMATION ── */

@keyframes cuiRingDraw {
  from { stroke-dashoffset: 264; }
}

.cui-ring-draw {
  animation: cuiRingDraw 1.2s ease both !important;
  animation-delay: 0.6s !important;
}


/* ── STATUS DOT GLOW ── */

#screen-home .cui-dot-glow {
  box-shadow: 0 0 8px currentColor !important;
}


/* ── LEFT ACCENT BARS ── */

#screen-home .cui-accent-left--amber::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 3.5px !important;
  height: 100% !important;
  background: linear-gradient(to bottom, #BA7517, rgba(186,117,23,0.15)) !important;
  border-radius: 3px 0 0 3px !important;
  z-index: 1 !important;
}

#screen-home .cui-accent-left--green::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 3.5px !important;
  height: 100% !important;
  background: linear-gradient(to bottom, #3B6D11, rgba(59,109,17,0.15)) !important;
  border-radius: 3px 0 0 3px !important;
  z-index: 1 !important;
}

[data-theme="dark"] #screen-home .cui-accent-left--amber::before {
  background: linear-gradient(to bottom, var(--amber), rgba(232,164,74,0.1)) !important;
}

[data-theme="dark"] #screen-home .cui-accent-left--green::before {
  background: linear-gradient(to bottom, var(--green), rgba(74,222,128,0.1)) !important;
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS SCREEN — layout (both themes) — v1.0.2 2026-03-26
   ═══════════════════════════════════════════════════════════ */

/* Layout — applies to both themes */
#screen-settings .cui-scroll {
  padding: 4px 22px 112px !important;
}
#screen-settings .cui-card {
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
}
#screen-settings .cui-summary-row { align-items: center !important; padding: 14px 0 !important; }
#screen-settings .cui-btn-soft {
  margin-bottom: 12px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}
#screen-settings .cui-btn-soft:last-child { margin-bottom: 0 !important; }
#screen-settings .cui-card + .cui-btn-soft { margin-top: 6px !important; }

/* Segmented controls — both themes */
.cui-settings-control { display: flex; align-items: center; }
.cui-settings-seg {
  display: flex; gap: 3px;
  background: var(--elevated); border-radius: 10px; padding: 4px;
}
.cui-settings-seg-btn {
  padding: 10px 18px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--muted);
  transition: all 0.2s; white-space: nowrap; font-family: inherit;
  line-height: 1;
}
.cui-settings-seg-btn.active {
  background: var(--teal); color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}

/* Buttons colour — light mode only */
[data-theme="light"] #screen-settings .cui-btn-soft {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: var(--on-teal) !important;
}
[data-theme="light"] #screen-settings .cui-btn-soft.cui-btn-soft--danger {
  background: transparent !important;
  border-color: var(--danger-border) !important;
  color: var(--danger) !important;
}


/* ═══════════════════════════════════════════════════════════
   HOME SCREEN — SECTION COLOUR IDENTITY — light mode only
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .cui-sect-act { background: var(--teal-soft) !important; }
[data-theme="light"] .cui-sect-understand { background: var(--blue-soft) !important; }
[data-theme="light"] .cui-sect-progress { background: var(--purple-soft) !important; }
[data-theme="light"] .cui-sect-step { background: var(--amber-soft) !important; }
[data-theme="light"] .cui-sect-step-breathe { background: var(--amber-soft) !important; }


/* ═══════════════════════════════════════════════════════════
   SCREEN COLOUR IDENTITY — light mode only — v1.0.0 2026-03-26
   Vitals=teal  Trends=purple  Tools=amber  Settings=blue
   ═══════════════════════════════════════════════════════════ */

/* Vitals — .vc (BP/Glucose/SpO2) and .vp (advanced items) */
[data-theme="light"] #screen-vitals .vc {
  background: var(--teal-soft) !important;
}
[data-theme="light"] #screen-vitals .vp {
  background: var(--teal-soft) !important;
}

/* Trends */
[data-theme="light"] #screen-trends .cui-card {
  background: var(--purple-soft) !important;
}

/* Tools (profile screen) */
[data-theme="light"] #screen-profile .cui-card,
[data-theme="light"] #screen-profile .cui-sect-step-breathe {
  background: var(--amber-soft) !important;
}

/* Settings (cog screen) */
[data-theme="light"] #screen-settings .cui-card {
  background: var(--blue-soft) !important;
}


/* Jarvis back button — dark in light mode for legibility */
/* Jarvis chat screen — no nav bar, no bottom clearance needed */
#cui-jarvis-scroll.cui-scroll {
  padding: 0 !important;
  overflow: hidden !important;
}

[data-theme="light"] #screen-jarvis .cui-back-btn {
  color: var(--text) !important;
}

/* Jarvis screen — top bar pinned: sticky, z-indexed, safe-area padded.
   position:sticky keeps it visible through slide animations and iOS scroll.
   background:var(--bg) ensures it is never transparent. */
/* Jarvis top bar — env() padding works in both normal flow AND
   slide-animation (position:absolute) states. z-index above content. */
#screen-jarvis .cui-top-bar {
  padding-top: calc(env(safe-area-inset-top, 44px) + 10px) !important;
  z-index: 5 !important;
  background: var(--bg) !important;
  position: relative !important;
}


/* ═══════════════════════════════════════════════════════════
   HOME NOTES — sticky note board — v1.0.0 2026-03-26
   ═══════════════════════════════════════════════════════════ */

/* In dark mode sticky notes use surface colour — no yellow/green/orange */
[data-theme="dark"] #cui-notes-slot [data-nav],
[data-theme="dark"] #cui-notes-slot div[style*="border-radius:2px"] {
  background: var(--surface) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] #cui-notes-slot span[style*="color:#2a2a2a"] {
  color: var(--text) !important;
}