/* ============================================================
   Bramba — iOS Design System
   Font: SF Pro via system stack | Palette: Bramba Blue
   ============================================================ */

:root {
  --accent:        #007AFF;
  --accent-mid:    #0066D6;
  --accent-dark:   #0057B8;
  --accent-bg:     #EAF3FF;
  --accent-bg2:    #D6E9FF;
  --blue:          #007AFF;
  --blue-bg:       #EAF3FF;
  --red:           #FF3B30;
  --red-bg:        #FFE9E8;
  --amber:         #FF9500;
  --amber-bg:      #FFF3E0;
  --warm:          #E08A2B;   /* streak / refill / milestone amber */
  --warm-bg:       rgba(224,138,43,0.13);
  --warm-text:     #B96B16;   /* warm text that needs AA on light bg */
  --gold:          #C9961F;   /* Bramba Plus premium accent */
  --gold-deep:     #A6781A;   /* gradient end / solid fills */
  --gold-text:     #8A6300;   /* gold text that holds AA on light bg */
  --gold-bg:       #FBF1D9;   /* soft gold tint surface */
  --gold-bg2:      #F1DFB2;   /* deeper gold tint / borders */
  --positive:      #0066D6;   /* success / in-plan / good-insight — score-card blue */
  --positive-strong:#0057B8;  /* deeper blue for solid fills w/ white text (AA) */
  --positive-bg:   #EAF3FF;
  --page-bg:       #F2F2F7;
  --card-bg:       #FFFFFF;
  --card-bg2:      #F8F8FA;
  --text-primary:  #1C1C1E;
  --text-secondary:#6D6D72;
  --text-tertiary: #AEAEB2;
  --border:        rgba(60,60,67,0.12);
  --border-med:    rgba(60,60,67,0.20);
  --shadow-card:   0 1px 3px rgba(0,82,204,0.06), 0 4px 16px rgba(0,82,204,0.05);
  --shadow-float:  0 8px 32px rgba(0,0,0,0.13);
  --radius-sm:     10px;
  --radius-md:     14px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --nav-height:    82px;
  --safe-bottom:   env(safe-area-inset-bottom, 16px);
  /* Motion vocabulary: strong custom curves, used app-wide so everything shares
     the same rhythm. --ease-out for enter/press feedback, --ease-in-out for
     on-screen movement. */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
}

/* ─── DARK THEME ─────────────────────────────────────────── */
body.theme-dark {
  --page-bg:       #000000;
  --card-bg:       #1C1C1E;
  --card-bg2:      #2C2C2E;
  --text-primary:  #FFFFFF;
  --text-secondary:#EBEBF599;
  --text-tertiary: #EBEBF54D;
  --border:        rgba(255,255,255,0.10);
  --border-med:    rgba(255,255,255,0.18);
  --accent-bg:     #0D2042;
  --accent-bg2:    #12315F;
  --blue-bg:       #0D2042;
  --red-bg:        #3A1210;
  --amber-bg:      #3A2400;
  --warm:          #F0A84D;
  --warm-bg:       rgba(240,168,77,0.18);
  --warm-text:     #F0A84D;
  --gold:          #E5B84B;
  --gold-deep:     #C9961F;
  --gold-text:     #E8C063;
  --gold-bg:       rgba(201,150,31,0.16);
  --gold-bg2:      rgba(201,150,31,0.26);
  --positive:      #4DA3FF;
  --positive-strong:#0A84FF;
  --positive-bg:   rgba(0,122,255,0.20);
}

/* ─── SPLASH / LAUNCH SCREEN ─────────────────────────────── */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 500;               /* above all in-app layers during boot */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  opacity: 1;
  transition: opacity 0.4s ease;
}
.splash-screen.splash-hide { opacity: 0; pointer-events: none; }

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.splash-icon {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  animation: splashPulse 1.8s ease-in-out infinite;
}
.splash-wordmark {
  width: 150px;
  height: auto;
  opacity: 0.96;
}
@keyframes splashPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-icon { animation: none; }
}

/* ─── RESET & BASE ───────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Kill the ~300ms tap delay on every interactive element so taps register
   instantly (double-tap-zoom is rarely wanted inside an app shell). */
button, a, select, label, [role="button"],
.choice-card, .settings-menu-card, .compact-vitamin-card, .bottom-nav button {
  touch-action: manipulation;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
  font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: var(--page-bg);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ─── DOCTOR SUMMARY (print only) ────────────────────────── */
.doctor-summary-print { display: none; }
@media print {
  body > *:not(.doctor-summary-print) { display: none !important; }
  .doctor-summary-print { display: block !important; }
  .ds-doc { color: #000; font-family: -apple-system, system-ui, "Segoe UI", sans-serif; padding: 8px 4px; }
  .ds-title { font-size: 20px; margin: 0 0 4px; }
  .ds-meta { font-size: 12px; color: #333; margin: 0 0 2px; }
  .ds-h2 { font-size: 14px; margin: 18px 0 8px; }
  .ds-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .ds-table th, .ds-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #ccc; vertical-align: top; }
  .ds-table th { border-bottom: 2px solid #000; }
  .ds-note { margin-top: 18px; font-size: 10px; color: #555; }
}

/* ─── INLINE SVG ICONS ───────────────────────────────────── */
.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.app-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 20px 16px 8px;
}

/* .page entrance animation lives in the ANIMATIONS section (single source). */

/* ─── SECTION HEADERS ────────────────────────────────────── */
.section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.section-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

/* ─── HERO / PAGE HEADER ─────────────────────────────────── */
.hero-section {
  padding: 8px 4px 20px;
  margin-bottom: 0;
}

.hero-section h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin: 0 0 4px;
  color: var(--text-primary);
  text-wrap: balance;
}

.hero-section p {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
  display: block;
}

.hero-eyebrow,
.hero-section p.hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 2px;
}

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 18px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
}

.card h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0 0 14px;
  color: var(--text-primary);
  text-wrap: balance;
}

.card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-primary);
}

/* Legacy class aliases so JS-injected HTML still works */
.summary-card,
.progress-card,
.vitamin-card,
.onboarding-card,
.profile-card,
.auth-card,
.search-card,
.dashboard-card,
.dashboard-main-card,
.history-card,
.weekly-card,
.log-card,
.settings-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
}

.summary-card h2,
.progress-card h2,
.vitamin-card h2,
.onboarding-card h2,
.profile-card h2,
.auth-card h2,
.search-card h2,
.dashboard-main-card h2,
.history-card h2,
.weekly-card h2,
.log-card h2,
.settings-card h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0 0 14px;
  color: var(--text-primary);
  text-wrap: balance;
}

/* ─── MUTED TEXT ─────────────────────────────────────────── */
.muted-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

button:active { opacity: 0.75; transform: scale(0.97) translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Every button presses: instant tactile scale on :active (the global
   tap-highlight is transparent, so this is the only touch feedback), plus a
   smooth, explicit transition. Hover is gated so taps don't leave a stuck state. */
.primary-button,
.secondary-button,
.small-secondary-button,
.reset-button,
.danger-button {
  transition: transform 150ms var(--ease-out), background 150ms ease, opacity 150ms ease;
  touch-action: manipulation;
}
.primary-button:active,
.secondary-button:active,
.small-secondary-button:active,
.reset-button:active,
.danger-button:active { transform: scale(0.97); }

.primary-button {
  width: 100%;
  margin-top: 10px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.1px;
  padding: 15px;
}

.secondary-button {
  width: 100%;
  margin-top: 10px;
  background: var(--accent-bg);
  color: var(--accent-dark);
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  padding: 13px;
}

.reset-button {
  width: 100%;
  margin-top: 10px;
  background: var(--blue-bg);
  color: var(--blue);
  font-weight: 600;
}

.danger-button {
  width: 100%;
  margin-top: 10px;
  background: var(--red-bg);
  color: var(--red);
  font-weight: 600;
}

.small-secondary-button {
  white-space: nowrap;
  background: var(--accent-bg);
  color: var(--accent-dark);
  border: none;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
}

@media (hover: hover) {
  .primary-button:hover { background: var(--accent-mid); }
  .secondary-button:hover { background: var(--accent-bg2); }
  .small-secondary-button:hover { background: var(--accent-bg2); }
  .reset-button:hover { opacity: 0.8; }
  .danger-button:hover { opacity: 0.8; }
}

/* ─── INPUTS ─────────────────────────────────────────────── */
input, textarea, select {
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--card-bg2);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.18);
}

.auth-card input {
  width: 100%;
  display: block;
  margin-bottom: 12px;
}

.auth-switch-text {
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
  margin: 14px 0 0;
}

.text-link {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.text-link:hover { text-decoration: underline; }

.forgot-password-row {
  text-align: right;
  margin: 4px 0 2px;
}
.forgot-password-link {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 13px;
  cursor: pointer;
}

/* ─── AUTH CARD SPECIAL STYLING ──────────────────────────── */
.auth-page {
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 0 28px;
}

.auth-hero {
  text-align: center;
  padding: 22px 24px 24px;
}

.auth-hero .app-logo {
  width: 92px;
  height: 92px;
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 12px 32px rgba(0,122,255,0.18);
  overflow: hidden;
}

.auth-hero .app-logo img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}

.auth-hero .app-logo span {
  font-size: 36px;
  line-height: 1;
}

.auth-hero h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 0 0 6px;
  color: var(--text-primary);
}

.auth-hero p {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

.auth-card {
  padding: 22px 18px 18px;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.auth-card h2 {
  font-size: 22px;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
}

.auth-card .primary-button {
  margin-top: 4px;
}

/* ─── AUTH: password toggle, inline error, loading ──────────── */
.password-field {
  position: relative;
  margin-bottom: 12px;
}

.password-field input {
  margin-bottom: 0;
  padding-right: 66px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: auto;
}

.password-toggle:hover {
  background: var(--accent-bg);
}

.auth-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  color: var(--red);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.primary-button.is-loading {
  opacity: 0.75;
}

.primary-button:disabled {
  cursor: default;
}

.auth-wordmark-title {
  margin: 0 0 8px;
  line-height: 0;
}

.auth-wordmark {
  width: min(250px, 82vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.auth-wordmark-light {
  display: none;
}

.auth-signup-page .app-logo {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
  box-shadow: 0 12px 34px rgba(0,122,255,0.22);
}

.auth-signup-page .auth-card {
  border-color: rgba(0,122,255,0.22);
  box-shadow: 0 12px 34px rgba(0,122,255,0.12);
}

body.theme-dark .auth-hero .app-logo {
  background: linear-gradient(180deg, #1C1C1E 0%, #111214 100%);
  border-color: rgba(77,163,255,0.22);
  box-shadow: 0 12px 34px rgba(77,163,255,0.12);
}

body.theme-dark .auth-wordmark-dark {
  display: none;
}

body.theme-dark .auth-wordmark-light {
  display: block;
}

body.theme-dark .auth-signup-page .auth-card {
  border-color: rgba(77,163,255,0.14);
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}

/* ─── DASHBOARD SCORE CARD ───────────────────────────────── */
.dashboard-score-card {
  background:
    radial-gradient(ellipse at 22% 28%, rgba(255,255,255,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #007AFF 0%, #0066D6 50%, #0057B8 100%);
  border-radius: var(--radius-xl);
  padding: 22px 20px;
  margin-bottom: 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.score-card-text {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.score-ring {
  position: relative;
  z-index: 1;
  width: 98px;
  height: 98px;
  flex-shrink: 0;
}

.score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.25);
  stroke-width: 9;
}

.score-ring-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 213.6;
  stroke-dashoffset: 213.6;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.dashboard-score-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}

.dashboard-score-card::after {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 100px; height: 100px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}

.dashboard-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.85;
}

.dashboard-score-card .dashboard-label { color: rgba(255,255,255,0.8); }

.dashboard-score-card h2 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -2px;
  margin: 4px 0 2px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.dashboard-score-subtext {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin: 4px 0 0;
}

/* ─── DASHBOARD GRID ─────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dashboard-card .dashboard-label { color: var(--text-secondary); }

.dashboard-card h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 5px 0 3px;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

/* Best Progress holds a supplement name, not a number — size it to fit */
.dashboard-card h2#home-best-progress {
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  margin: 8px 0 5px;
}

.dashboard-card p {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0;
}

.home-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.home-hero-text {
  min-width: 0;
}

.home-hero-text h1 {
  margin: 0 0 2px;
}

.home-hero-text p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.home-streak-badge {
  flex-shrink: 0;
  background: var(--amber-bg);
  border: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.12s ease;
}

.home-streak-badge:hover { opacity: 0.82; }
.home-streak-badge:active { transform: scale(0.94); }

/* ─── DASHBOARD MAIN CARD ────────────────────────────────── */
.dashboard-main-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
}

.home-attention-card {
  padding: 18px;
}

.home-attention-card .section-header-row {
  margin-bottom: 12px;
}

.home-attention-card .muted-text {
  margin: 3px 0 0;
}

.home-attention-list {
  display: grid;
  gap: 9px;
}

.home-attention-item {
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}

.home-attention-main {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.home-attention-main strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.home-attention-main span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

.home-attention-main button {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.home-attention-bar {
  height: 6px;
  margin-top: 10px;
  background: var(--accent-bg);
  border-radius: 999px;
  overflow: hidden;
}

.home-attention-bar div {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.home-attention-empty {
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
  background: var(--card-bg2);
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  font-size: 14px;
}

.home-attention-empty button {
  justify-self: center;
  background: var(--accent-bg);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
}

.home-attention-empty p { margin: 0; line-height: 1.5; }
.home-attention-empty strong { color: var(--text-primary); }

.home-attention-upcoming {
  margin: 10px 2px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-tertiary);
}

/* ─── SECTION HEADER ROW ─────────────────────────────────── */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.section-header-row h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0;
  color: var(--text-primary);
}

/* ─── ONBOARDING ─────────────────────────────────────────── */
.onboarding-hero {
  padding-bottom: 14px;
}

.onboarding-progress {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}

.onboarding-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

#onboarding-step-title {
  color: var(--accent-dark);
}

.onboarding-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--card-bg2);
}

#onboarding-progress-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform: scaleX(0.14);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.onboarding-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 22px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
}

.onboarding-card h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.25px;
  margin: 0 0 6px;
  color: var(--text-primary);
}

.onboarding-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.choice-grid {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.choice-card,
.goal-card,
.radio-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1.5px solid var(--border-med);
  border-radius: var(--radius-md);
  padding: 15px 16px;
  cursor: pointer;
  color: var(--text-primary);
  background: var(--card-bg);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .choice-card:hover,
  .goal-card:hover,
  .radio-card:hover {
    transform: translateY(-1px);
  }
}

.choice-card:has(input:checked),
.goal-card:has(input:checked),
.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent-dark);
}

/* Visible custom checkbox / radio that fills in on select. Deliberately does
   NOT rely on :has(), so the checked state is obvious on every browser. */
.choice-card input,
.goal-card input,
.radio-card input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid var(--border-med);
  border-radius: 6px;
  background: var(--card-bg);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.radio-card input { border-radius: 50%; }

.choice-card input:checked,
.goal-card input:checked,
.radio-card input:checked {
  border-color: var(--accent);
  background-color: var(--accent);
}

/* White check (checkbox) / dot (radio) drawn via background-image, which works
   reliably on inputs where ::after pseudo-elements do not. */
.choice-card input[type="checkbox"]:checked,
.goal-card input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-position: center;
  background-repeat: no-repeat;
}
.radio-card input[type="radio"]:checked {
  background-image: radial-gradient(circle at center, #fff 0 3.5px, transparent 4.5px);
}

.choice-card span,
.goal-card span,
.radio-card span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.choice-card strong,
.goal-card strong,
.radio-card strong {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 600;
}

.choice-card small,
.goal-card small,
.radio-card small {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.onboarding-card select {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  margin-top: 10px;
}

/* ─── ONBOARDING: starter set + shelf ───────────────────────── */
.onboarding-suggestion-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

/* The shelf list can be long — let it scroll within the step. */
#onboarding-shelf-list {
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Suggestion cards are full-width rows (not the 2-col choice grid). */
.suggestion-card {
  width: 100%;
}

.onboarding-shelf-search {
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  margin: 4px 0 12px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
}

.onboarding-shelf-search:focus {
  outline: none;
  border-color: var(--accent);
}

.shelf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.shelf-item.is-added {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.shelf-item-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shelf-item-name strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.shelf-item-name small {
  font-size: 12px;
  color: var(--text-secondary);
}

.shelf-add-btn {
  flex: 0 0 auto;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 150ms var(--ease-out), background 150ms ease;
}
.shelf-add-btn:active { transform: scale(0.94); }

.shelf-add-btn.added {
  background: var(--card-bg);
  color: var(--accent-dark);
}

@media (hover: hover) {
  .shelf-add-btn:hover { background: var(--accent-mid); }
  .shelf-add-btn.added:hover { background: var(--accent-bg2); }
}

.onboarding-actions {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  margin-bottom: 14px;
}

.onboarding-actions .primary-button,
.onboarding-actions .secondary-button {
  margin-top: 0;
}

.onboarding-actions .primary-button:only-child {
  grid-column: 1 / -1;
}

#onboarding-finish-button {
  grid-column: 1 / -1;
}

@media (max-width: 380px) {
  .choice-card:has(input:checked)::after,
  .goal-card:has(input:checked)::after,
  .radio-card:has(input:checked)::after {
    content: "";
    width: 10px;
    height: 10px;
    padding: 0;
    margin-top: 5px;
  }
}

/* ─── TRACKER — COMPACT VITAMIN CARDS ───────────────────── */
.vitamin-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.tracker-card-shell {
  position: relative;
  border-radius: var(--radius-lg);
}

.compact-vitamin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card-remove-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  background: var(--card-bg2);
  color: var(--text-tertiary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
}

.card-remove-button svg { width: 17px; height: 17px; }

.card-remove-button:hover,
.card-remove-button:active {
  background: var(--red-bg);
  color: var(--red);
  border-color: transparent;
}

.compact-vitamin-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 14px 14px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
}

.compact-vitamin-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.compact-vitamin-top h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.compact-vitamin-top p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.compact-vitamin-top .dose-summary-text {
  color: var(--text-tertiary);
}

.compact-vitamin-top .card-quick-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  touch-action: manipulation;
  transition: transform 150ms var(--ease-out), background 150ms ease;
}
.compact-vitamin-top .card-quick-add:active { transform: scale(0.93); }
@media (hover: hover) {
  .compact-vitamin-top .card-quick-add:hover { background: var(--accent-mid); }
}

.compact-input-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.compact-input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}

.compact-input-row button {
  background: var(--accent-bg);
  color: var(--accent-dark);
  border: none;
  padding: 10px 13px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.compact-input-row button:hover { background: var(--accent-bg2); }

/* ─── IN-CARD PROGRESS ───────────────────────────────────── */
.card-progress { margin-top: 12px; }
.card-progress-track {
  width: 100%;
  height: 7px;
  background: var(--accent-bg);
  border-radius: 999px;
  overflow: hidden;
}
.card-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease;
}
.card-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.card-progress-percent { font-weight: 600; color: var(--text-tertiary); }
/* Completed = a calm success blue, deeper than the action accent */
.card-progress.is-done .card-progress-fill { background: var(--positive-strong); }
.card-progress.is-done .card-progress-percent { color: var(--positive); }

/* ─── TRACKER SECTION HEADS + SLIM CONTROLS ──────────────── */
.tracker-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tracker-section-head h2 { margin: 0; }
.tracker-done-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tracker-done-count.is-complete { color: var(--positive-strong); font-weight: 600; }
.tracker-undo-button {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.tracker-undo-button:hover { text-decoration: underline; }
.tracker-footer-actions {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 4px 0 8px;
}
.tracker-text-action {
  background: none;
  border: none;
  padding: 8px 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.tracker-text-action:hover { color: var(--text-primary); }
.tracker-text-action.danger { color: var(--text-tertiary); }
.tracker-text-action.danger:hover { color: var(--red); }

/* ─── DETAIL MODAL: LOG A DOSE ───────────────────────────── */
.detail-log-section { margin: 2px 0 16px; }
.detail-log-row { display: flex; gap: 8px; margin-bottom: 12px; }
.detail-log-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.detail-log-row .secondary-button {
  flex-shrink: 0;
  width: auto;
  min-width: 76px;
}
.detail-timing-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}
.detail-timing-select {
  width: 100%;
  padding: 11px 12px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}

.detail-refill-row { margin-top: 14px; }
.detail-refill-row input {
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  font-size: 14px;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.detail-refill-status { margin: 8px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.detail-refill-status.low { color: var(--warm-text); font-weight: 600; }
.detail-refill-status.out { color: var(--red); font-weight: 600; }

/* ─── TIME PICKER + REMINDER PROMPT ──────────────────────── */
.time-picker-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;                 /* >=16px avoids iOS zoom-on-focus */
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-primary);
}
.onboarding-time-row { margin: 6px 0 14px; }
.onboarding-no-reminder,
.reminder-prompt-dontshow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
}
.onboarding-no-reminder input,
.reminder-prompt-dontshow input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.reminder-prompt-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.reminder-prompt-actions .primary-button,
.reminder-prompt-actions .secondary-button { flex: 1; }

/* ─── EMAIL VERIFICATION ─────────────────────────────────── */
.auth-confirm { text-align: center; }
.auth-confirm p:not(.auth-switch-text) {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 10px 0 18px;
}
/* margin only — never set `display` here, or it would beat .hidden's display:none */
#login-resend-button { margin: 0 0 12px; }

/* ─── TWO-FACTOR AUTH ────────────────────────────────────── */
.mfa-qr {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
}
.mfa-qr img,
.mfa-qr svg {
  width: 184px;
  height: 184px;
  background: #fff;
  padding: 8px;
  border-radius: var(--radius-md);
}
.mfa-secret-line {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-secondary);
}
.mfa-secret-line code {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--card-bg2);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 1px;
  word-break: break-all;
  user-select: all;
}
.mfa-code-input {
  width: 100%;
  margin-bottom: 6px;
  padding: 12px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 8px;
  font-variant-numeric: tabular-nums;
}

/* Method-choice buttons. (Panels are plain divs toggled by .hidden — never set
   `display` on .mfa-panel or it would beat .hidden's display:none.) */
.mfa-method-button {
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--border-med);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
@media (hover: hover) { .mfa-method-button:hover { transform: translateY(-1px); border-color: var(--accent); } }
.mfa-method-button:active { transform: scale(0.99); }
.mfa-method-button strong {
  display: block;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.mfa-method-button span {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.mfa-back-link { display: inline-block; margin-top: 10px; }

/* "Running low" badge on tracker cards */
.card-refill-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.card-refill-badge.low { background: var(--warm-bg); color: var(--warm-text); }
.card-refill-badge.out { background: var(--red-bg, rgba(255, 59, 48, 0.1)); color: var(--red); }

/* ─── MOTION ─────────────────────────────────────────────── */
/* Easing: ease-out-quint — natural deceleration, no bounce. */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Staggered entrance — one-shot per navigation (JS toggles .page-enter). */
.page-enter .dashboard-score-card,
.page-enter .dashboard-main-card,
.page-enter .compact-vitamin-card {
  animation: cardEnter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Tactile press + (desktop) hover lift on cards. */
.compact-vitamin-card,
.settings-menu-card,
.product-result-card {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s ease,
              background-color 0.2s ease,
              border-color 0.2s ease;
}
.compact-vitamin-card:active,
.settings-menu-card:active,
.product-result-card:active { transform: scale(0.985); }
@media (hover: hover) {
  .compact-vitamin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
}

/* Tactile press on buttons. */
.primary-button,
.secondary-button,
.small-secondary-button,
.reset-button,
.danger-button {
  transition: transform 0.12s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.primary-button:active,
.secondary-button:active,
.small-secondary-button:active,
.reset-button:active,
.danger-button:active { transform: scale(0.97); }

/* Smooth value changes. */
.card-progress-fill { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .page-enter .dashboard-score-card,
  .page-enter .dashboard-main-card,
  .page-enter .compact-vitamin-card { animation: none; }
  .compact-vitamin-card,
  .settings-menu-card,
  .product-result-card,
  .primary-button,
  .secondary-button,
  .small-secondary-button,
  .reset-button,
  .danger-button { transition: none; }
  .compact-vitamin-card:active,
  .settings-menu-card:active,
  .product-result-card:active,
  .primary-button:active,
  .secondary-button:active,
  .small-secondary-button:active,
  .reset-button:active,
  .danger-button:active,
  .shelf-add-btn:active,
  .compact-vitamin-top .card-quick-add:active,
  .bottom-nav button:active,
  .side-menu-item:active,
  .profile-text-action:active { transform: none; }
  .card-progress-fill { transition: none; }
}

.timing-row select {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.dose-button-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.dose-button-row button {
  min-width: 0;
  padding: 9px 7px;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.tracker-action-row {
  display: grid;
  margin-top: 9px;
}

.compact-skip-button {
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}

.remove-plan-button, .compact-remove-button {
  width: 100%;
  margin-top: 10px;
  background: var(--red-bg);
  color: var(--red);
  font-weight: 600;
}

/* ─── PROGRESS BARS ──────────────────────────────────────── */
.progress-item { margin-bottom: 18px; }

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--accent-bg);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  width: 100%;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.progress-details {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}

.dose-progress-panel {
  margin-top: 10px;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
}

.dose-progress-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.dose-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 0.5px solid var(--border);
}

.dose-progress-row strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
}

.dose-progress-row span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

.skipped-dose-row span { color: var(--amber); }

.dose-mini-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent-bg);
}

.dose-mini-bar div {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

#detailed-goals-container {
  display: grid;
  gap: 10px;
}

.detailed-goal-card {
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px;
}

.detailed-goal-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.detailed-goal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.detailed-goal-header p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.detailed-goal-header strong {
  flex-shrink: 0;
  color: var(--accent-dark);
  font-size: 13px;
  text-align: right;
}

/* ─── SEARCH ─────────────────────────────────────────────── */
.search-tab-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 18px;
}

.search-tab {
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  padding: 10px;
}

.search-tab:hover { background: rgba(0,122,255,0.08); color: var(--accent-dark); }

.search-tab.active-search-tab {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.search-tab-content { animation: pageFadeIn 0.2s ease; }

.product-search-tools {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--card-bg);
  padding: 2px 0 10px;
}

.search-card input {
  width: 100%;
  display: block;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 15px;
}

.category-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
  scrollbar-width: none;
}

.category-filter-row::-webkit-scrollbar { display: none; }

.category-filter {
  white-space: nowrap;
  background: var(--card-bg2);
  color: var(--text-secondary);
  border: 0.5px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.category-filter:hover { background: var(--accent-bg); color: var(--accent-dark); }

.category-filter.active-filter {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.search-results {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.search-result-card {
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--card-bg2);
  transition: background 0.15s;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.search-result-card:hover { background: var(--accent-bg); }

.product-search-card {
  cursor: pointer;
}

.product-search-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.search-result-card h3 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: break-word;
  word-break: normal;
}

.search-result-card p {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: normal;
}

.search-result-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Compact, right-aligned plan action — replaces the heavy full-width button. */
.search-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.search-result-head h3 { margin: 0; flex: 1; min-width: 0; }
.search-plan-btn {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform 150ms var(--ease-out), background 150ms ease;
}
.search-plan-btn:active { transform: scale(0.93); }
.search-plan-btn.is-add { background: var(--accent); color: #fff; }
.search-plan-btn.is-added { background: var(--accent-bg); color: var(--accent-dark); }
.search-plan-btn.is-starter { background: var(--card-bg2); color: var(--text-tertiary); }
@media (hover: hover) { .search-plan-btn.is-add:hover { background: var(--accent-mid); } }

.search-card { margin-bottom: 14px; }

#supplement-search-content, #product-search-content { margin-top: 14px; }

/* ─── PRODUCT FILTERS ────────────────────────────────────── */
/* The filter bar: a Filters toggle (with active count) on the left and the
   result count on the right. Filters themselves live in a collapsible panel. */
.product-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}

.product-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  width: auto;
  background: var(--card-bg2);
  border: 0.5px solid var(--border-med);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.product-filter-toggle svg { width: 17px; height: 17px; }

.product-filter-toggle:hover {
  background: var(--accent-bg);
  color: var(--accent-dark);
}

.product-filter-toggle.is-open,
.product-filter-toggle.has-active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.product-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.product-filter-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  animation: pageFadeIn 0.18s ease;
}

.product-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.product-filter-grid select {
  min-width: 0;
  padding: 10px 12px;
  font-size: 13px;
}

.product-quick-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.product-trackable-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.product-trackable-toggle input {
  width: auto;
  display: inline-block;
  margin: 0;
}

.product-search-summary {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.recent-products-section {
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}

.recent-products-header {
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 8px;
}

.recent-products-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.recent-products-list::-webkit-scrollbar { display: none; }

.recent-product-chip {
  flex: 0 0 auto;
  max-width: 220px;
  background: var(--card-bg);
  color: var(--text-primary);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── PRODUCT BADGES ─────────────────────────────────────── */
.product-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--blue-bg);
  color: var(--blue);
  border: none;
}

.product-status-badge.verified {
  background: var(--accent-bg);
  color: var(--accent-dark);
}

.product-status-badge.sample {
  background: var(--amber-bg);
  color: var(--amber);
}

.product-status-badge.in-plan {
  background: var(--positive-bg);
  color: var(--positive-strong);
}

/* ─── PRODUCT RESULT HEADER ──────────────────────────────── */
.product-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.product-result-header > div {
  min-width: 0;
  max-width: 100%;
}

.product-result-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.product-result-header p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.product-result-header span {
  background: var(--blue-bg);
  color: var(--blue);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.product-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.product-company { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }

/* ─── PRODUCT CARD LAYOUT ────────────────────────────────── */
.product-card-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.product-card-image-wrap { width: 86px; flex-shrink: 0; }

.product-card-image {
  width: 86px;
  height: 104px;
  object-fit: contain;
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-sizing: border-box;
}

.product-card-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.product-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  background: var(--card-bg2);
  font-size: 12px;
  text-align: center;
}

.product-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.product-search-card .product-card-actions {
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.product-show-more-button {
  width: 100%;
  margin-top: 2px;
}

@media (max-width: 380px) {
  .product-card-layout { gap: 8px; }
  .product-card-image-wrap { width: 72px; }
  .product-card-image { width: 72px; height: 88px; }
  .product-result-header {
    flex-direction: column;
    gap: 6px;
  }
  .product-result-header span {
    align-self: flex-start;
  }
  .product-card-actions { grid-template-columns: 1fr; }
}

/* ─── PROFILE ─────────────────────────────────────────────── */
.profile-info-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
}

.profile-info-row:last-child { border-bottom: none; }

.profile-info-row span { color: var(--text-secondary); font-size: 14px; }

.profile-info-row strong {
  color: var(--text-primary);
  text-align: right;
  font-size: 14px;
  font-weight: 600;
}

/* ─── PROFILE (redesigned) ───────────────────────────────── */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 18px;
}
.profile-hero-avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #007AFF 0%, #0066D6 50%, #0057B8 100%);
  box-shadow: 0 4px 14px rgba(0,82,204,0.28);
}
.profile-hero-id { min-width: 0; display: grid; gap: 2px; }
.profile-hero-id strong { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; color: var(--text-primary); }
.profile-hero-id span {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-stats { margin-bottom: 14px; }

.profile-streak-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(255,255,255,0.16) 0%, transparent 55%),
    linear-gradient(135deg, #007AFF 0%, #0066D6 55%, #0057B8 100%);
  box-shadow: var(--shadow-card);
}
.profile-streak-flame { flex: 0 0 auto; line-height: 0; color: #FFD60A; }
.profile-streak-main { flex: 1; display: flex; align-items: baseline; gap: 7px; }
.profile-streak-main strong { font-size: 34px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.profile-streak-main span { font-size: 14px; opacity: 0.9; }
.profile-streak-best {
  flex: 0 0 auto;
  text-align: center;
  padding: 7px 13px;
  border-radius: 12px;
  background: rgba(255,255,255,0.16);
}
.profile-streak-best strong { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.profile-streak-best span { font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }

.profile-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  display: grid;
  gap: 2px;
}
.profile-stat-icon { color: var(--accent); line-height: 0; margin-bottom: 4px; }
.profile-stat strong { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.profile-stat span { font-size: 12.5px; color: var(--text-secondary); }

.profile-goals-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.profile-goal-chip {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 600;
}

.profile-actions-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 14px;
}
.profile-action-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border-bottom: 0.5px solid var(--border);
  text-align: left;
  touch-action: manipulation;
  transition: background 150ms ease;
}
.profile-actions-card .profile-action-row:last-child { border-bottom: none; }
.profile-action-row:active { background: var(--card-bg2); }
@media (hover: hover) { .profile-action-row:hover { background: var(--card-bg2); } }
.profile-action-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent-dark);
}
.profile-action-label { flex: 1; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.profile-action-chevron { flex: 0 0 auto; color: var(--text-tertiary); line-height: 0; }

.profile-danger-zone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.profile-text-action {
  width: 100%;
  padding: 13px;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-dark);
  touch-action: manipulation;
  transition: background 150ms ease, transform 150ms var(--ease-out);
}
.profile-text-action:active { transform: scale(0.98); }
.profile-text-action.is-danger { color: var(--red); }
@media (hover: hover) {
  .profile-text-action:hover { background: var(--accent-bg); }
  .profile-text-action.is-danger:hover { background: var(--red-bg); }
}

/* ─── MY PRODUCTS ────────────────────────────────────────── */
.my-product-card {
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, transform 150ms var(--ease-out);
}
.my-product-card:active { transform: scale(0.99); }

@media (hover: hover) and (pointer: fine) {
  .my-product-card:hover {
    background: var(--accent-bg);
    transform: translateY(-1px);
  }
}

.my-product-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.my-product-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.my-product-image-wrap {
  width: 64px;
  flex-shrink: 0;
}

.my-product-image {
  width: 64px;
  height: 78px;
  object-fit: contain;
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px;
  box-sizing: border-box;
}

.my-product-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  background: var(--card-bg);
  font-size: 11px;
  text-align: center;
}

.my-product-content {
  flex: 1;
  min-width: 0;
}

.my-product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.my-product-card h3 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.my-product-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.my-product-meta {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 6px;
}

.my-product-used-for {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.my-product-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.my-product-remove-button {
  width: 100%;
  margin-top: 12px;
}

/* ─── SHARED EMPTY STATE ─────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 38px 24px;
  background: var(--card-bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: var(--accent-bg);
  color: var(--accent);
}
.empty-state-icon svg { width: 26px; height: 26px; }
.empty-state h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}
.empty-state p {
  margin: 0;
  max-width: 32ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.empty-state .primary-button { margin-top: 16px; }

/* Lightweight secondary empty (targets, goals, schedules — no CTA) */
.empty-plan-card {
  text-align: center;
  padding: 28px 22px;
  background: var(--card-bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.empty-plan-card h3 {
  margin: 0 0 5px;
  font-size: 15.5px;
  color: var(--text-primary);
}
.empty-plan-card p {
  margin: 0 auto;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.empty-plan-card .primary-button { margin-top: 16px; }

/* ─── GOAL SETTINGS ──────────────────────────────────────── */
/* ─── DAILY TARGETS (redesigned) ─────────────────────────────── */
.daily-targets-summary {
  margin: -4px 4px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.target-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-bottom: 14px;
}

.target-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.target-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent-dark);
  font-size: 16px;
  font-weight: 700;
}
.target-card-titles { flex: 1; min-width: 0; display: grid; gap: 1px; }
.target-card-titles strong { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.target-card-titles small { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.target-pct {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--positive-strong);
  font-variant-numeric: tabular-nums;
}

.target-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--card-bg2);
  overflow: hidden;
  margin-bottom: 4px;
}
.target-progress-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--positive);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.target-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 0.5px solid var(--border);
}
.target-control:first-of-type { border-top: none; }
.target-control-stacked { flex-direction: column; align-items: stretch; gap: 9px; }
.target-control-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.target-stepper { display: flex; align-items: center; gap: 8px; }
.target-step {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-dark);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: transform 150ms var(--ease-out), background 150ms ease;
}
.target-step:active { transform: scale(0.9); }
@media (hover: hover) { .target-step:hover { background: var(--accent-bg2); } }

.target-goal-input {
  width: 66px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.target-goal-input::-webkit-inner-spin-button,
.target-goal-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.target-unit { font-size: 12px; color: var(--text-tertiary); min-width: 64px; }

.target-time {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.target-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--card-bg2);
  border-radius: 11px;
}
.target-seg-pill {
  flex: 1;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 9px;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform 150ms var(--ease-out), background 150ms ease, color 150ms ease;
}
.target-seg-pill:active { transform: scale(0.96); }
.target-seg-pill.is-active {
  background: var(--card-bg);
  color: var(--accent-dark);
  box-shadow: 0 1px 3px rgba(0,82,204,0.12);
}

.target-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 13px;
  text-align: left;
  background: var(--positive-bg);
  border-radius: var(--radius-md);
  touch-action: manipulation;
  transition: transform 150ms var(--ease-out), filter 150ms ease;
}
.target-suggestion:active { transform: scale(0.99); }
.target-suggestion-bulb { flex: 0 0 auto; line-height: 0; color: var(--positive-strong); }
.target-suggestion-bulb .ico { width: 17px; height: 17px; }
.target-suggestion-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.target-suggestion-text strong { font-size: 13px; font-weight: 600; color: var(--positive-strong); }
.target-suggestion-text small { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.target-suggestion-apply {
  flex: 0 0 auto;
  align-self: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--positive-strong);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.daily-targets-save { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .target-step:active,
  .target-seg-pill:active,
  .target-suggestion:active { transform: none; }
  .target-progress-fill { transition: none; }
}

/* ─── SETTINGS TOGGLES ───────────────────────────────────── */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
}

.settings-row:last-of-type { border-bottom: none; }

.settings-row strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.settings-row p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.settings-row select, .settings-row input[type="time"] {
  min-width: 120px;
  padding: 9px 12px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}

.settings-view {
  animation: pageFadeIn 0.2s ease;
}

.settings-menu-card {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 18px;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.settings-menu-card strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.settings-menu-card span {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.settings-menu-card .settings-menu-arrow {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.12s;
}
.settings-menu-card:hover .settings-menu-arrow { color: var(--accent); }

.settings-back-button {
  width: auto;
  margin: 0 0 16px;
  padding: 8px 12px 8px 8px;
  background: transparent;
  color: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s;
}
.settings-back-button:hover { background: var(--accent-bg); }

/* ─── PRIVACY & DATA PAGE ────────────────────────────────── */
.privacy-lead {
  margin: 4px 0 4px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.privacy-promises {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.privacy-promise {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 0.5px solid var(--border);
}
.privacy-promise:last-child { border-bottom: none; }
.privacy-promise-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  color: var(--accent);
}
.privacy-promise-icon svg { width: 22px; height: 22px; }
.privacy-promise-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.privacy-promise-text strong {
  display: block;
  font-size: 14.5px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.privacy-data-points {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.privacy-data-points li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.privacy-data-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 15px;
  height: 15px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.privacy-data-points-negative li { color: var(--text-secondary); }
.privacy-data-points-negative li::before {
  background-color: var(--text-tertiary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.privacy-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
}
.privacy-control-row:last-child { border-bottom: none; }
.privacy-control-row > div { flex: 1; min-width: 0; }
.privacy-control-row strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.privacy-control-row p {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.privacy-control-row .secondary-button {
  flex-shrink: 0;
  width: auto;
  min-width: 96px;
  padding-left: 22px;
  padding-right: 22px;
}

.privacy-updated {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

.privacy-data-summary {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.privacy-data-summary-empty,
.privacy-data-summary-item {
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 14px;
}

.privacy-data-summary-item strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 5px;
}

.privacy-data-summary-item span,
.privacy-data-summary-empty {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}

/* iOS-style switch */
.switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #E5E5EA;
  transition: background-color 0.2s ease;
  border-radius: 999px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 27px; width: 27px;
  left: 2px; bottom: 2px;
  background: #fff;
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* ─── HISTORY ─────────────────────────────────────────────── */
.history-record {
  border: 0.5px solid var(--border);
  background: var(--card-bg2);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
}

.history-record h3 {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.history-record p {
  margin: 5px 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.history-vitamin-list {
  margin-top: 10px;
  padding-left: 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

.history-empty {
  color: var(--text-secondary);
  background: var(--card-bg2);
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  font-size: 14px;
}

/* ─── TODAY'S LOG ────────────────────────────────────────── */
.calendar-heading {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

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

.calendar-weekdays {
  margin-bottom: 6px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.calendar-day {
  min-height: 44px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg2);
  display: grid;
  place-items: center;
  color: var(--text-primary);
  font-size: 13px;
}

.calendar-day span {
  font-weight: 600;
  color: inherit;
}

.calendar-day strong {
  color: var(--text-primary);
  font-size: 13px;
}

.calendar-day small {
  color: var(--text-tertiary);
  font-size: 10px;
}

.empty-calendar-day {
  background: transparent;
  border-color: transparent;
}

/* Calm single-hue completion ramp (deeper blue = better day). */
.strong-day { background: var(--positive-strong); border-color: var(--positive-strong); color: #fff; }
.medium-day { background: color-mix(in srgb, var(--positive) 38%, transparent); border-color: transparent; }
.low-day    { background: color-mix(in srgb, var(--positive) 14%, transparent); border-color: transparent; }

.log-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
}

.log-card h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.log-card .muted-text { margin: 0 0 14px; }

#today-log-list { display: grid; gap: 8px; }

.log-empty {
  color: var(--text-secondary);
  background: var(--card-bg2);
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 0.5px solid var(--border);
  background: var(--card-bg2);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
}

.skipped-log-item {
  background: var(--amber-bg);
  border-color: rgba(255, 149, 0, 0.3);
}

.log-item-main { min-width: 0; flex: 1; }

.log-item-main strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.log-item-main span {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
}

.log-actions { display: flex; gap: 6px; flex-shrink: 0; }

.log-edit-button, .log-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.log-edit-button { background: var(--blue-bg); color: var(--blue); }
.log-edit-button:hover { opacity: 0.8; }
.log-delete-button { background: var(--red-bg); color: var(--red); }
.log-delete-button:hover { opacity: 0.8; }

@media (max-width: 380px) {
  .log-item { flex-direction: column; align-items: flex-start; }
  .log-actions { width: 100%; }
  .log-edit-button, .log-delete-button { flex: 1; }
}

/* ─── WEEKLY SUMMARY ─────────────────────────────────────── */
/* Stat strip under the chart — three columns split by thin dividers. */
.weekly-stats-row {
  display: flex;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
}

.weekly-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.weekly-stat + .weekly-stat { border-left: 0.5px solid var(--border); }

.weekly-stat-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.weekly-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.weekly-insight {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ─── MODAL / BOTTOM SHEET ───────────────────────────────── */
.adherence-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 0.5px solid var(--border);
  background: var(--card-bg2);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
}

.adherence-card strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 3px;
}

.adherence-card span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
}

.adherence-score {
  min-width: 54px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  backdrop-filter: blur(4px);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 100%;
  max-width: 430px;
  background: var(--card-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 8px 20px 32px;
  box-shadow: var(--shadow-float);
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}

.modal-overlay.open .modal-card {
  transform: translateY(0);
  opacity: 1;
}

/* Modal drag handle */
.modal-card::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--border-med);
  border-radius: 999px;
  margin: 8px auto 18px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 2px;
}

.modal-header h2 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.modal-category {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.modal-close-button {
  position: relative;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 50%;
  background: var(--card-bg2);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  flex-shrink: 0;
  border: 0.5px solid var(--border);
}

/* Keep the 32px visual but extend the tap area to ~48px (HIG 44pt min). */
.modal-close-button::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.modal-close-button:hover { background: var(--border); }

.modal-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  margin: 14px 0;
}

.modal-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.modal-stat {
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px;
}

.modal-stat p { margin: 0; color: var(--text-secondary); font-size: 12px; }
.modal-stat h3 { margin: 5px 0 0; color: var(--text-primary); font-size: 20px; font-weight: 700; }

/* ─── SUPPLEMENT (BROWSE) DETAIL MODAL ───────────────────── */
.supplement-search-card { cursor: pointer; }

.supplement-search-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.supplement-detail-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.supplement-detail-goal-row strong {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.modal-subtle-label {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.supplement-detail-goals-section { margin-bottom: 16px; }

.supplement-detail-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplement-goal-chip {
  background: var(--accent-bg);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

.modal-progress-section { margin-bottom: 14px; }

/* Note section */
.note-section { margin: 12px 0 16px; }
.note-section label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; display: block; }
.note-section textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  min-height: 80px;
  resize: vertical;
  border-radius: var(--radius-sm);
}

/* ─── PRODUCT DETAIL MODAL ───────────────────────────────── */
.product-detail-info {
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px;
  margin: 12px 0;
}

.product-detail-info p {
  margin: 6px 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.product-detail-info strong { color: var(--text-primary); }

.product-ingredient-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 14px;
  padding: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  list-style: none;
}

.product-ingredient-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.product-ingredient-list li span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.product-ingredient-list li strong {
  flex-shrink: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.product-ingredient-list .product-ingredient-group-label {
  display: block;
  background: transparent;
  border: none;
  padding: 6px 0 0;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.product-detail-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  box-sizing: border-box;
  margin: 10px 0;
}

.product-photo-candidates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

.product-photo-choice {
  border: 0.5px solid var(--border);
  background: var(--card-bg2);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.product-photo-choice img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  background: var(--card-bg);
  border-radius: 8px;
  margin-bottom: 6px;
}

.product-photo-choice p {
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.product-photo-choice button {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
}

/* ─── HEALTH CANADA IMPORT ───────────────────────────────── */
.health-canada-import-panel {
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: 16px;
}

.health-canada-import-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.health-canada-import-panel .muted-text { font-size: 12.5px; line-height: 1.45; }

.health-canada-import-panel input {
  width: 100%;
  display: block;
  padding: 12px 14px;
  margin: 10px 0;
}

/* ─── SETTINGS GROUPS ────────────────────────────────────── */
.settings-group-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin: 0 0 2px;
}

.settings-group { margin-top: 26px; }
.settings-group:first-of-type { margin-top: 8px; }

.settings-save-button { margin-top: 26px; }

.settings-advanced-group { margin-top: 30px; }

/* Leading icon on the settings-home menu cards */
/* Scoped to beat ".settings-menu-card span" (which would otherwise force the
   icon span to display:block and the secondary text color). */
.settings-menu-card .settings-menu-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--accent-bg);
  color: var(--accent);
}
.settings-menu-card-body { flex: 1; min-width: 0; }

/* ─── ACCOUNT VIEW ───────────────────────────────────────── */
.account-current-line { margin: 2px 0 12px; }
.account-current-line strong { color: var(--text-primary); }
#settings-account-view input[type="email"],
#settings-account-view input[type="password"] {
  width: 100%;
  display: block;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.account-action-button { margin-top: 2px; }
.account-hint { margin-top: 10px; font-size: 12.5px; line-height: 1.45; }

.account-danger-panel {
  background: var(--red-bg, rgba(255, 59, 48, 0.06));
  border: 0.5px solid rgba(255, 59, 48, 0.22);
  border-radius: var(--radius-lg, 14px);
  padding: 16px;
}
.account-danger-panel strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 4px;
}
.account-danger-panel .muted-text { font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; }
.account-danger-panel .danger-button { width: 100%; }

/* ─── ABOUT VIEW ─────────────────────────────────────────── */
.about-version-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.about-link-list {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.about-link-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  background: none;
  border: none;
  border-bottom: 0.5px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s;
}
.about-link-row:last-child { border-bottom: none; }
.about-link-row svg { color: var(--text-tertiary); flex-shrink: 0; transition: color 0.12s; }
.about-link-row:hover { color: var(--accent); }
.about-link-row:hover svg { color: var(--accent); }
.about-disclaimer {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* ─── LEGAL + FEEDBACK MODALS ────────────────────────────── */
.legal-modal-body {
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 4px;
  padding-right: 4px;
}
.legal-modal-body .legal-effective {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
.legal-modal-body h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 0 5px;
}
.legal-modal-body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 4px;
}
.legal-modal-body a { color: var(--accent); }

.feedback-category {
  width: 100%;
  display: block;
  padding: 11px 14px;
  margin-bottom: 10px;
}
.feedback-textarea {
  width: 100%;
  display: block;
  padding: 12px 14px;
  margin-bottom: 14px;
  font: inherit;
  resize: vertical;
  min-height: 110px;
  border-radius: var(--radius-sm, 10px);
  border: 0.5px solid var(--border);
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
}
.feedback-textarea:focus { outline: none; border-color: var(--accent); }

/* ─── SIDE MENU ──────────────────────────────────────────── */
.side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
  backdrop-filter: blur(3px);
}

.side-menu {
  position: fixed;
  top: 0; right: 0;
  width: 300px;
  height: 100%;
  background: var(--card-bg);
  z-index: 45;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 0.5px solid var(--border);
}

.side-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 20px 16px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}

.side-menu-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.side-menu-label { display: none; }

.side-menu-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-bg2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.side-menu-close:hover { background: var(--border-med); color: var(--text-primary); }

.side-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 24px;
  flex: 1;
  gap: 2px;
}

.side-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 10px;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  transition: background 0.12s, transform 150ms var(--ease-out);
}
.side-menu-item:active { transform: scale(0.98); }

.side-menu-item:hover { background: var(--accent-bg); }
.side-menu-item:hover .side-menu-item-title { color: var(--accent-dark); }
.side-menu-item:hover .side-menu-item-chevron { color: var(--accent); }
.side-menu-item:hover .side-menu-item-icon { background: var(--accent-bg2); border-color: rgba(0,122,255,0.2); color: var(--accent-dark); }

.side-menu-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.side-menu-item-content {
  flex: 1;
  min-width: 0;
}

.side-menu-item-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.12s;
}

.side-menu-item-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 1px;
}

.side-menu-item-chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: color 0.12s;
}

/* ─── TOAST ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px);
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--card-bg);
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  opacity: 1;
  /* Transition (not a keyframe) so a fast follow-up toast retargets from the
     current position instead of restarting from zero. */
  transition: opacity 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@starting-style {
  .toast:not(.hidden) {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.94);
  }
}

.toast span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-action-button {
  flex-shrink: 0;
  background: var(--card-bg);
  color: var(--accent-dark);
  border: none;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

/* ─── BOTTOM NAVIGATION ──────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 398px;
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 50px;
  padding: 8px;
  display: flex;
  gap: 6px;
  box-shadow: var(--shadow-float);
  z-index: 10;
}

.bottom-nav button {
  flex: 1;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 6px;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  letter-spacing: -0.1px;
  transition: transform 150ms var(--ease-out), background 150ms ease, color 150ms ease;
}
.bottom-nav button:active { transform: scale(0.9); }

.bottom-nav button .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1px;
}

.bottom-nav button .nav-icon svg {
  width: 21px;
  height: 21px;
}

@media (hover: hover) {
  .bottom-nav button:hover { background: var(--card-bg2); color: var(--text-primary); }
  .bottom-nav button.active-nav:hover { background: var(--accent-bg2); }
}

.bottom-nav button.active-nav {
  background: var(--accent-bg);
  color: var(--accent-light);
}

/* ─── MENU BUTTON ────────────────────────────────────────── */
.menu-button {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--border);
  z-index: 8;
}

.menu-button svg {
  width: 18px;
  height: 18px;
}

.menu-button:hover { background: var(--card-bg2); }

/* ─── HOVER LIFT ─────────────────────────────────────────── */
/* .compact-vitamin-card:hover is handled (gated, -2px + shadow) near the card
   styles — kept out of this list to avoid a conflicting override. */
@media (hover: hover) and (pointer: fine) {
  .goal-card:hover,
  .radio-card:hover,
  .search-result-card:hover,
  .dashboard-card:hover,
  .history-record:hover {
    transform: translateY(-1px);
    transition: transform 0.15s ease;
  }
}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
/* Tab/page switches happen tens of times a day — keep it a crisp, fast
   opacity fade with a strong ease-out rather than a slow lift. */
.page { animation: pageFadeIn 0.18s cubic-bezier(0.23, 1, 0.32, 1); }

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-overlay:not(.hidden) { animation: overlayFadeIn 0.2s ease; }

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Toast enter is handled by the @starting-style + transition on .toast above. */

.side-menu:not(.hidden) { animation: sideSlide 0.25s ease; }

@keyframes sideSlide {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.progress-fill { transition: transform 0.45s cubic-bezier(0.25,1,0.5,1); }

/* Reduced motion = fewer/gentler, not zero. Near-instant durations remove the
   movement while leaving transitions in place (so JS awaiting transitionend
   still fires, and opacity/colour changes stay legible). Movement-heavy pieces
   (splash pulse, card entrance, milestone, streak modal) keep their own
   reduced-motion overrides nearby. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── STREAK LEVEL BADGE ─────────────────────────────────── */
.home-streak-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.home-streak-flame {
  display: flex;
  align-items: center;
  color: var(--warm);
}
.home-streak-flame .ico { width: 19px; height: 19px; }

.home-streak-num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.home-streak-badge strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.home-streak-badge small {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  color: var(--text-tertiary);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ─── TODAY'S LOG — TIMING GROUPS ───────────────────────── */
.log-summary-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.log-summary-stat {
  display: flex;
  align-items: center;
  gap: 5px;
}

.log-summary-stat strong {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
}

.log-summary-skipped strong { color: var(--amber); }

.log-timing-group { margin-top: 10px; }
.log-timing-group:first-of-type { margin-top: 0; }

.log-timing-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  padding: 0 2px;
}

.log-amount {
  font-weight: 500;
  color: var(--accent);
}

/* ─── CALENDAR NAVIGATION ────────────────────────────────── */
.calendar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.calendar-month-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  text-align: center;
}

.calendar-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.calendar-nav-btn:hover { background: var(--accent-bg); color: var(--accent); }

.today-day {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ─── HISTORY RECORD CARDS (improved) ───────────────────── */
.history-record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.history-record-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.history-record-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.history-score-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.history-score-badge.score-strong { background: var(--positive-strong); color: #fff; }
.history-score-badge.score-medium { background: color-mix(in srgb, var(--positive) 20%, transparent); color: var(--positive-strong); }
.history-score-badge.score-low    { background: var(--card-bg2); color: var(--text-secondary); }

.history-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 6px;
}

.history-pills-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
}

.history-pill {
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.history-pill-missed {
  background: var(--red-bg);
  color: var(--red);
}

/* ─── 7-DAY BAR CHART ────────────────────────────────────── */
#weekly-bar-chart {
  margin-bottom: 16px;
}

.weekly-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 100px;
  padding-bottom: 0;
}

.weekly-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
}

.weekly-bar-track {
  flex: 1;
  width: 100%;
  background: var(--card-bg2);
  border: 0.5px solid var(--border);
  border-radius: 5px 5px 0 0;
  position: relative;
  overflow: hidden;
}

.weekly-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 4px 4px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.weekly-bar-fill.bar-strong { background: var(--positive-strong); }
.weekly-bar-fill.bar-medium { background: color-mix(in srgb, var(--positive) 55%, transparent); }
.weekly-bar-fill.bar-low    { background: color-mix(in srgb, var(--positive) 28%, transparent); }
.weekly-bar-fill.bar-empty  { transform: scaleY(0) !important; }

.weekly-bar-col.bar-today .weekly-bar-track {
  border-color: var(--accent);
}

.weekly-bar-day-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
}

.bar-today .weekly-bar-day-label { color: var(--accent); }

.weekly-bar-score-label {
  font-size: 9px;
  color: var(--text-tertiary);
  min-height: 12px;
}

/* ─── ADHERENCE BARS (weekly) ────────────────────────────── */
.adherence-bar-track {
  flex: 1;
  height: 5px;
  background: var(--card-bg2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.adherence-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: var(--positive-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.adherence-bar-fill.adherence-low { background: color-mix(in srgb, var(--positive) 25%, transparent); }
.adherence-bar-fill.adherence-mid { background: color-mix(in srgb, var(--positive) 55%, transparent); }

/* ─── REMINDER SETTINGS ──────────────────────────────────── */
#reminder-status-text { transition: color 0.2s ease; }

.reminders-active #reminder-status-text { color: var(--accent); }

#reminder-time-row,
#evening-reminder-row {
  transition: opacity 0.2s ease;
}

#reminder-time-row.reminders-hidden,
#evening-reminder-row.reminders-hidden {
  opacity: 0.4;
  pointer-events: none;
}

/* ─── VITAMIN SECTION HEADER ─────────────────────────────── */
.vitamin-section h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin: 0 0 12px;
}

/* ─── BARCODE SCANNER ────────────────────────────────────── */
.product-search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.product-search-row input {
  flex: 1;
  min-width: 0;
}

.barcode-scan-button {
  flex-shrink: 0;
  width: 52px;
  background: var(--card-bg2);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.barcode-scan-button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.barcode-scan-button svg {
  width: 24px;
  height: 24px;
}

.barcode-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 60;
  animation: overlayFadeIn 0.2s ease;
}

.barcode-modal {
  width: 100%;
  max-width: 400px;
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-float);
}

.barcode-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.barcode-modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.barcode-close {
  background: var(--card-bg2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.barcode-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.barcode-status {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 12px 0;
  min-height: 18px;
}

.barcode-status-error {
  color: var(--red);
}

.barcode-manual-row {
  display: flex;
  gap: 8px;
}

.barcode-manual-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 15px;
}

.barcode-manual-row .barcode-manual-go {
  flex-shrink: 0;
  width: auto;
  padding: 10px 16px;
  margin: 0;
}

/* ─── Tier 2: Safety & Coverage insights (home page) ──────────── */
.home-insights-list,
.home-gaps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insight-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--card-bg2);
  border: 1px solid var(--border);
}

.insight-row.insight-warn {
  background: var(--amber-bg);
  border-color: rgba(255,149,0,0.25);
}

.insight-row.insight-good {
  background: var(--positive-bg);
  border-color: color-mix(in srgb, var(--positive) 30%, transparent);
}

.insight-row.insight-tip {
  background: var(--accent-bg);
  border-color: rgba(0,122,255,0.2);
}

.insight-icon {
  flex-shrink: 0;
  line-height: 0;
  margin-top: 1px;
}
.insight-icon .ico { width: 18px; height: 18px; }
.insight-warn .insight-icon { color: var(--red); }
.insight-good .insight-icon { color: var(--positive); }
.insight-tip .insight-icon { color: var(--accent); }

.insight-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}

.insight-text p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Light-touch (advanced/pro): keep the one-liner title, collapse the
   explanation behind a tap. A chevron hints that the row expands. */
body.education-light .insight-row {
  cursor: pointer;
  position: relative;
  padding-right: 34px;
}
body.education-light .insight-row .insight-text p {
  display: none;
  margin-top: 5px;
}
body.education-light .insight-row.revealed .insight-text p {
  display: block;
}
body.education-light .insight-row::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
body.education-light .insight-row.revealed::after {
  transform: rotate(-135deg);
}

/* ─── HOME: personalized schedule timeline ──────────────────── */
.schedule-summary {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.schedule-timeline { position: relative; }

.schedule-slot {
  position: relative;
  margin-left: 6px;
  padding: 0 0 18px 20px;
  border-left: 2px solid var(--border-med);
}
.schedule-slot:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.schedule-slot-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}
.schedule-slot-head::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--card-bg);
  box-shadow: 0 0 0 2px var(--accent-bg2);
}
.schedule-slot-time {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
}
.schedule-slot-titles { display: grid; gap: 1px; }
.schedule-slot-titles strong { font-size: 14.5px; color: var(--text-primary); }
.schedule-slot-titles small { font-size: 12px; color: var(--text-tertiary); }

.schedule-slot-items { display: grid; gap: 7px; }
.schedule-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--card-bg2);
}
.schedule-item-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--positive);
}
.schedule-item-text { display: grid; gap: 1px; min-width: 0; }
.schedule-item-text strong { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.schedule-item-note { font-size: 12px; color: var(--positive-strong); }

.gap-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--card-bg2);
}

.gap-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}

.gap-text p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.gap-row .small-secondary-button {
  flex-shrink: 0;
}

/* ─── Streak Modal (bottom sheet) ─────────────────────────── */
.streak-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease forwards;
}

.streak-modal-overlay.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.streak-modal-sheet {
  background: var(--card-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 12px 24px calc(28px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
  border-top: 0.5px solid var(--border);
}

.streak-modal-overlay.open .streak-modal-sheet {
  transform: translateY(0);
}

.streak-modal-handle {
  width: 36px;
  height: 4px;
  background: var(--border-med);
  border-radius: 2px;
  margin: 0 auto 22px;
}

.streak-modal-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 22px;
  text-align: center;
}

.streak-modal-big-icon {
  line-height: 0;
  margin-bottom: 6px;
  color: var(--warm);
}
.streak-modal-big-icon .ico { width: 46px; height: 46px; }

.streak-modal-number-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.streak-modal-number-row strong {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text-primary);
  line-height: 1;
}

.streak-modal-number-row span {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 500;
}

.streak-level-badge-pill {
  display: inline-block;
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-top: 2px;
}

/* weekly dots */
.streak-modal-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

.streak-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.streak-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card-bg2);
  border: 1.5px solid var(--border-med);
  transition: background 0.2s ease;
}

.streak-dot.active {
  background: var(--amber);
  border-color: var(--amber);
}

.streak-dot.today-ring {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
}

.streak-dot-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.streak-dot-label.today {
  color: var(--accent);
}

/* stats row */
.streak-modal-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 16px 0;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 18px;
}

.streak-modal-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.streak-modal-stat strong {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  line-height: 1;
}

.streak-modal-stat span {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.streak-modal-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border-med);
}

.streak-modal-status {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 20px;
}

.streak-modal-freeze-note {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
  margin: -8px 0 16px;
}

/* ─── MILESTONE CELEBRATION ──────────────────────────────── */
.milestone-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 14, 28, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.milestone-overlay.open { opacity: 1; }

.milestone-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 36px 28px 26px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 40, 120, 0.28);
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.milestone-overlay.open .milestone-card { transform: none; opacity: 1; }

.milestone-emoji { line-height: 0; color: var(--warm); }
.milestone-emoji .ico { width: 54px; height: 54px; }
/* Log + history icons */
.log-summary-stat .ico { width: 14px; height: 14px; vertical-align: -2px; }
.log-timing-header .ico { width: 15px; height: 15px; vertical-align: -2px; }
.history-flame { width: 13px; height: 13px; color: var(--warm); vertical-align: -1px; }
.milestone-days {
  margin-top: 10px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.milestone-days span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.milestone-title { margin: 14px 0 4px; font-size: 22px; letter-spacing: -0.01em; }
.milestone-sub {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.milestone-button { width: 100%; }

.milestone-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 24px;
}
.milestone-confetti span {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  opacity: 0;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-14px) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(420px) rotate(560deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-overlay { transition: opacity 0.2s ease; }
  .milestone-card { transition: opacity 0.2s ease; transform: none; }
  .milestone-confetti { display: none; }
}

.streak-modal-done {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .streak-modal-overlay { animation: none; }
  .streak-modal-sheet { transition: none; }
}

/* ─── MY PRODUCTS CTA ────────────────────────────────────── */
.add-products-cta {
  background: var(--accent-bg);
  border-color: rgba(0,122,255,0.15);
}
.add-products-cta h2 { color: var(--accent-dark); margin-bottom: 8px; }
.add-products-cta .muted-text { color: var(--accent-dark); opacity: 0.7; }
.add-products-cta .primary-button { margin-top: 14px; }

/* ─── SETTINGS MENU CARD HOVER ───────────────────────────── */
.settings-menu-card:hover { background: var(--card-bg2); }

/* ─── PERSONALIZED SEARCH NOTICE ─────────────────────────── */
.personalized-search-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  margin-bottom: 14px;
  background: rgba(0, 82, 204, 0.05);
  border: 1px solid rgba(0, 82, 204, 0.14);
  border-radius: 10px;
  font-size: 13px;
}
.personalized-search-notice span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent, #0052cc);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.personalized-search-notice button {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--text-secondary, #666);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.personalized-search-notice button:hover { color: var(--text-primary, #111); }

/* ─── BARCODE CONTRIBUTION BANNER ────────────────────────── */
.barcode-contribution-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(0, 82, 204, 0.05);
  border: 1px solid rgba(0, 82, 204, 0.16);
  border-radius: 12px;
}
.barcode-contribution-banner.hidden { display: none; }
.barcode-contribution-text {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--accent, #0052cc);
}
.barcode-contribution-text svg { flex-shrink: 0; margin-top: 2px; }
.barcode-contribution-text > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.barcode-contribution-text strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary, #111);
  letter-spacing: -0.01em;
}
.barcode-contribution-text span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary, #666);
}
.barcode-contribution-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary, #999);
  cursor: pointer;
}
.barcode-contribution-dismiss:hover { color: var(--text-primary, #111); }

/* ============================================================
   Bramba Plus — settings entry + upgrade paywall sheet
   ============================================================ */

/* Sidebar "Bramba Plus" item (gold premium accent + free/active copy swap) */
.side-menu-item-plus {
  border: 1px solid var(--gold-bg2);
  background: linear-gradient(135deg, var(--gold-bg) 0%, var(--gold-bg2) 100%);
}
.side-menu-item-plus .side-menu-item-icon {
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
}
.side-menu-item-plus .side-menu-item-title { color: var(--gold-text); }
.side-menu-item-plus:hover { background: linear-gradient(135deg, var(--gold-bg2) 0%, var(--gold-bg2) 100%); }
.side-menu-item-plus:hover .side-menu-item-title { color: var(--gold-text); }
.side-menu-item-plus:hover .side-menu-item-icon {
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
}

.plus-menu-active { display: none; }
body.is-plus .plus-menu-free { display: none; }
body.is-plus .plus-menu-active { display: block; }

/* Overlay + bottom sheet */
.plus-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 300ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.plus-overlay.open { background: rgba(0, 0, 0, 0.45); }
body.plus-open { overflow: hidden; }

.plus-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 22px calc(22px + var(--safe-bottom));
  background: var(--card-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-float);
  transform: translateY(100%);
  /* iOS drawer curve (Ionic) — settles up, snaps down. */
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.plus-overlay.open .plus-sheet { transform: translateY(0); }

.plus-grabber {
  width: 36px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 3px;
  background: var(--border-med);
}

.plus-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--card-bg2);
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.plus-close::after { content: ""; position: absolute; inset: -8px; } /* hitSlop → 46px */

.plus-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.plus-title {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.plus-subtitle {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Feature list (staggered entrance) */
.plus-feature-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plus-feature {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(8px);
}
.plus-overlay.open .plus-feature {
  animation: plusFeatureIn 360ms var(--ease-out) forwards;
}
.plus-overlay.open .plus-feature:nth-child(1) { animation-delay: 60ms; }
.plus-overlay.open .plus-feature:nth-child(2) { animation-delay: 110ms; }
.plus-overlay.open .plus-feature:nth-child(3) { animation-delay: 160ms; }
.plus-overlay.open .plus-feature:nth-child(4) { animation-delay: 210ms; }
@keyframes plusFeatureIn { to { opacity: 1; transform: translateY(0); } }

.plus-feature-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--gold-bg);
  color: var(--gold-text);
}
.plus-feature-body { display: flex; flex-direction: column; gap: 2px; }
.plus-feature-body strong { font-size: 15px; color: var(--text-primary); }
.plus-feature-body span { font-size: 13.5px; line-height: 1.35; color: var(--text-secondary); }

/* Billing-period segmented toggle */
.plus-period-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.plus-period-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  text-align: left;
  border: 1.5px solid var(--border-med);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.plus-period-option:active { transform: scale(0.98); }
.plus-period-option.is-selected { border-color: var(--gold); background: var(--gold-bg); }
.plus-period-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.plus-period-note { font-size: 13px; color: var(--text-secondary); }
.plus-period-badge {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: #2A2000;
  font-size: 10.5px;
  font-weight: 700;
}

/* Price + CTA */
.plus-price { text-align: center; margin-bottom: 14px; }
.plus-price-amount {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.plus-price-cadence { margin-left: 2px; font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.plus-price-sub { margin-top: 2px; font-size: 13px; color: var(--text-secondary); }

.plus-cta {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #2A2000;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(166, 120, 26, 0.30);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out), opacity 140ms var(--ease-out);
}
.plus-cta:active { transform: scale(0.97); }
.plus-cta:disabled { opacity: 0.6; cursor: default; }

.plus-fine {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-tertiary);
}
.plus-restore {
  display: block;
  width: 100%;
  margin: 14px auto 0;
  padding: 6px;
  border: none;
  background: none;
  color: var(--gold-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.plus-restore:active { opacity: 0.6; }

/* Reduced motion: fade only, no slide/stagger. */
@media (prefers-reduced-motion: reduce) {
  .plus-sheet { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .plus-overlay.open .plus-sheet { transform: none; opacity: 1; }
  .plus-overlay.open .plus-feature { animation: none; opacity: 1; transform: none; }
}