*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

:root {
  --bg: #f3e5f5;
  --bg2: #edd9f0;
  --card: #faf7f2;
  --card2: #faf7f2;
  --sage: #a8b5a0;
  --sage-dark: #7a8e6a;
  --sage-light: #c5d4bb;
  --pink: #d4a5a5;
  --pink-light: #f5d0d0;
  --coral: #d4a5a5;
  --coral-light: #f5c4b0;
  --purple: #e0d7e5;
  --purple-light: #edd9f0;
  --amber: #e8dcc4;
  --amber-light: #f0dfa0;
  --teal: #6aabaa;
  --teal-light: #c0dedd;
  --text: #3d3d3d;
  --text2: #706c6c;
  --text3: #bdbdbd;
  --border: rgba(0, 0, 0, 0.08);
  --success: #81c784;
  --error: #e57373;
  --accent: #e8dcc4;
  --divider: #e0d7e5;
  --surface: #faf7f2;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);

  /* Soft purple background system — light mode only */
  --app-cream: #fff8f1;
  --app-cream-2: #faf2fb;
  --app-pink-glow: rgba(212, 165, 165, 0.2);
  --app-lavender-glow: rgba(128, 86, 170, 0.14);
  --app-purple-wash: rgba(237, 217, 240, 0.34);
  --app-grid: rgba(128, 86, 170, 0.045);
  --glass-card: #faf7f2;
  --glass-card-strong: #faf7f2;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 50px;

  /* ── Semantic insight colors ── */
  --conf-high: #7aaf90;
  --conf-medium: #b09060;
  --conf-low: #b07080;
  --insight-sage-bg: var(--insight-sage-bg);
  --insight-sage-fg: #5a7a50;
  --lh-peak-bg: rgba(192, 48, 96, 0.08);
  --lh-peak-fg: #c03060;
  --lh-high-bg: rgba(200, 160, 32, 0.12);
  --lh-high-fg: #906820;
  --lh-neg-bg: rgba(0, 0, 0, 0.04);
  --lh-neg-fg: #888;
  --mucus-dry-bg: #f0ede8;
  --mucus-dry-fg: #806050;
  --mucus-sticky-bg: #f5e8c0;
  --mucus-sticky-fg: #806020;
  --mucus-creamy-bg: #e8f0d0;
  --mucus-creamy-fg: #507030;
  --mucus-watery-bg: #d0e8f8;
  --mucus-watery-fg: #305080;
  --mucus-ew-bg: #c0d8f8;
  --mucus-ew-fg: #204070;
  --period-active-bg: var(--period-active-bg);
  --period-active-fg: var(--pink);
  --pred-range-bg: #d9cdf0;
  --pred-range-fg: #5a3090;
  --pred-range-sub: #8a70b0;

  /* ── Motion tokens ── */
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-standard: 260ms;
  --dur-modal: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2d2831;
    --bg2: #252130;
    --card: #3d3542;
    --card2: #4a4250;
    --sage: #a8b5a0;
    --sage-dark: #8aaa78;
    --sage-light: #4a5a44;
    --pink: #d4a5a5;
    --pink-light: #7a4a4a;
    --coral: #d4a5a5;
    --coral-light: #7a4840;
    --purple: #4a4250;
    --purple-light: #3d3542;
    --amber: #e8dcc4;
    --amber-light: #7a6a44;
    --teal: #6aabaa;
    --teal-light: #2a5a58;
    --text: #faf7f2;
    --text2: #c5b9c9;
    --text3: #7d7482;
    --border: rgba(197, 185, 201, 0.34);
    --success: #a5d6a7;
    --error: #cf6679;
    --accent: #e8dcc4;
    --divider: rgba(197, 185, 201, 0.28);
    --surface: #faf7f2;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* Website-inspired soft background system — dark mode */
    --app-cream: #2d2831;
    --app-cream-2: #252130;
    --app-pink-glow: rgba(123, 49, 95, 0.26);
    --app-lavender-glow: rgba(104, 80, 143, 0.22);
    --app-purple-wash: transparent;
    --app-grid: rgba(255, 255, 255, 0.025);
    --glass-card: #3d3542;
    --glass-card-strong: #4a4250;

    /* ── Semantic insight colors — dark mode ── */
    --conf-high: #7ec8a0;
    --conf-medium: #d4a86a;
    --conf-low: #d47090;
    --insight-sage-bg: rgba(138, 170, 120, 0.2);
    --insight-sage-fg: #a8d098;
    --lh-peak-bg: rgba(212, 80, 120, 0.2);
    --lh-peak-fg: #f09ab8;
    --lh-high-bg: rgba(220, 170, 60, 0.2);
    --lh-high-fg: #e8c878;
    --lh-neg-bg: rgba(255, 255, 255, 0.05);
    --lh-neg-fg: #7d7482;
    --mucus-dry-bg: rgba(160, 120, 80, 0.2);
    --mucus-dry-fg: #d4a880;
    --mucus-sticky-bg: rgba(180, 150, 40, 0.2);
    --mucus-sticky-fg: #d8c070;
    --mucus-creamy-bg: rgba(100, 150, 60, 0.2);
    --mucus-creamy-fg: #a8d080;
    --mucus-watery-bg: rgba(60, 120, 180, 0.2);
    --mucus-watery-fg: #80b8e8;
    --mucus-ew-bg: rgba(40, 100, 200, 0.2);
    --mucus-ew-fg: #80a8f0;
    --period-active-bg: rgba(212, 96, 112, 0.2);
    --period-active-fg: #f0a8b8;
    --pred-range-bg: rgba(120, 80, 180, 0.38);
    --pred-range-fg: #c0a0f0;
    --pred-range-sub: #a080d0;
  }
}

@media (prefers-color-scheme: dark) {
  .nav-bar {
    background: rgba(45, 40, 49, 0.97) !important;
  }
  .option-btn {
    background: var(--card2);
    color: var(--text2);
    border-color: var(--border);
  }
  .option-btn.selected {
    background: var(--sage-dark);
    color: white;
    border-color: var(--sage);
  }
  .lh-option {
    background: var(--card2);
    color: var(--text2);
    border-color: var(--border);
  }
  .lh-option.active {
    background: var(--sage-dark);
    color: white;
  }
  .chip {
    background: var(--card2);
    color: var(--text2);
    border-color: var(--border);
  }
  .chip.selected {
    background: var(--sage-dark);
    color: white;
  }
  .period-btn.start {
    background: var(--pink) !important;
    color: #1a1a1a !important;
  }
  .period-btn.end {
    background: var(--card2) !important;
    color: var(--text2) !important;
  }
  .status-chip {
    background: var(--card2);
    color: var(--text2);
    border-color: var(--border);
  }
  .status-chip.pink {
    background: #5a2a2a;
    color: #d4a5a5;
  }
  .icon-circle {
    filter: brightness(0.65) saturate(0.75);
  }
  #reminder-banner {
    background: linear-gradient(135deg, #4a4250, #3d3542) !important;
  }
  #log-date-picker-modal > div {
    background: var(--card) !important;
  }
  #log-date-picker-input {
    color-scheme: dark;
  }
  [style*="background: #EEE8F5"],
  [style*="background:var(--pred-range-bg)"] {
    background: #5d4e70 !important;
  }

  [style*="background:#c8e8d6"] {
    background: #2a4a38 !important;
  }
  [style*="background: #FFF8E8"],
  [style*="background:#FFF8E8"] {
    background: #3a2e10 !important;
  }
  [style*="background: #FFF0E8"],
  [style*="background:#FFF0E8"] {
    background: #3a2010 !important;
  }
  [style*="color: #2E7D5A"],
  [style*="color:#2E7D5A"] {
    color: #a5d6a7 !important;
  }
  [style*="color: #8A7020"],
  [style*="color:#8A7020"] {
    color: #e8dcc4 !important;
  }
  [style*="color: #6A3A9B"],
  [style*="color:#6A3A9B"],
  [style*="color: #5A3090"],
  [style*="color:var(--pred-range-fg)"],
  [style*="color: #8A70B0"],
  [style*="color:var(--pred-range-sub)"] {
    color: #c5b9c9 !important;
  }
  input,
  textarea,
  select {
    color-scheme: dark;
  }
  * {
    scrollbar-color: var(--card2) var(--bg);
  }
}
html {
  background: var(--bg);
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  font-family: "Nunito", "DM Sans", sans-serif;
  background:
    radial-gradient(circle at 0% 50%, var(--app-pink-glow), transparent 34rem),
    radial-gradient(
      circle at 100% 50%,
      var(--app-lavender-glow),
      transparent 34rem
    ),
    radial-gradient(
      circle at 50% 55%,
      var(--app-purple-wash),
      transparent 36rem
    ),
    linear-gradient(
      90deg,
      var(--app-cream),
      var(--app-cream-2) 50%,
      var(--app-cream)
    );
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--app-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--app-grid) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 68%);
  z-index: -1;
}

.app {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  /* Push content below the transparent iOS status bar */
  padding-top: env(safe-area-inset-top, 0px);
  background:
    radial-gradient(circle at 0% 50%, var(--app-pink-glow), transparent 28rem),
    radial-gradient(
      circle at 100% 50%,
      var(--app-lavender-glow),
      transparent 26rem
    ),
    radial-gradient(
      circle at 50% 55%,
      var(--app-purple-wash),
      transparent 24rem
    ),
    linear-gradient(
      90deg,
      var(--app-cream),
      var(--app-cream-2) 50%,
      var(--app-cream)
    );
  position: relative;
  overflow: hidden;
}

.app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--app-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--app-grid) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 58%);
  z-index: 0;
}

.screen,
.nav-bar {
  position: relative;
  z-index: 1;
}

/* SCREEN SYSTEM */
.screen {
  display: none !important;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 0 90px;
  animation: screenIn 0.34s var(--ease-out) both;
}
.screen.active {
  display: flex !important;
}
/* Insights content length varies — let it end at its natural height */
#screen-insights {
  min-height: auto;
}
/* Allow .app to shrink on insights so body gradient covers the rest */
.app:has(#screen-insights.active) {
  min-height: 0;
}
/* Release overflow clipping for full-screen fixed LH screens so iOS
         Safari doesn't clip them behind .app { overflow: hidden } */
.app:has(#screen-lh-scan.active),
.app:has(#screen-lh-result.active),
.app:has(#screen-lh-history.active) {
  overflow: visible;
}
@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* TYPOGRAPHY */
h1 {
  font-family: "DM Serif Display", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}
h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
p {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.5;
  margin: 0;
}
.icon-circle + div h3,
.icon-circle + div > h3 {
  margin-bottom: 2px;
}
.icon-circle + div p {
  margin-top: 2px;
}

/* CARDS */
.card {
  background: var(--glass-card-strong);
  border: 1px solid rgba(123, 49, 95, 0.08);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* .card + .card {
        margin-top: 12px;
      } */

/* BUTTONS */
.btn-primary {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #b2c4a6 0%, #89aa79 100%);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  box-shadow:
    0 4px 16px rgba(110, 148, 90, 0.26),
    0 1px 4px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(110, 148, 90, 0.18);
  background: linear-gradient(135deg, #a0b494 0%, #7a9a6e 100%);
}

.btn-outline {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--coral);
  border: 1.5px solid var(--coral);
  border-radius: var(--radius-pill);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ghost {
  background: none;
  border: none;
  color: var(--sage);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

/* CHIPS / TAGS */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--card2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-instant) ease,
    box-shadow var(--dur-fast) ease;
  color: var(--text2);
  white-space: nowrap;
}
.chip.selected {
  background: #d4537e;
  border-color: #d4537e;
  color: white;
}
.chip::before {
  content: "+ ";
  color: var(--text3);
}
.chip.selected::before {
  content: "✓ ";
}
.chip.selected .chip-plus {
  display: none;
}
.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* INPUTS */
.input-group {
  margin-bottom: 16px;
}
.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 6px;
}
.input-field {
  width: 100%;
  padding: 14px 16px 14px 42px;
  background: var(--glass-card);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.input-field:focus {
  border-color: var(--sage);
}
.input-field::placeholder {
  color: var(--text3);
}
.input-wrap {
  position: relative;
}
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text3);
}

/* FORM ROW */
.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.form-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--sage);
}
.form-row label {
  font-size: 13px;
  color: var(--text2);
}

/* SECTION HEADER */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--text3);
  /* text-transform: uppercase; */
}

/* ICON CIRCLE */
.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* NAVIGATION BAR */
.nav-bar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 398px;
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 24px;
  display: none;
  padding: 8px 0 10px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* iOS modal stacking fix: hide bottom nav while insight detail sheet is open */
body.insight-modal-open {
  overflow: hidden;
  touch-action: none;
}
body.insight-modal-open .nav-bar {
  display: none !important;
}
.insight-detail-backdrop {
  z-index: 9000 !important;
}
.insight-detail-panel {
  z-index: 9001 !important;
  isolation: isolate;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text3);
}
.nav-item.active {
  color: #a8b5a0;
}
.nav-label {
  font-size: 10px;
  font-weight: 500;
}

/* TOP BAR */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 10px;
}
.top-bar-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.back-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text2);
  padding: 4px;
}

/* AVATAR */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--sage-dark);
  cursor: pointer;
}

/* SLIDER */
.slider-wrap {
  margin: 16px 0 8px;
}
input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--sage) 50%, var(--border) 50%);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sage);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: 2px solid var(--card);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sage);
  cursor: pointer;
  border: 2px solid var(--card);
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text3);
  margin-top: 6px;
}

/* TOGGLE */
.toggle {
  position: relative;
  width: 44px;
  height: 26px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 13px;
  transition: 0.3s;
  cursor: pointer;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle input:checked + .toggle-slider {
  background: var(--sage);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* PILL OPTION BUTTONS */
.option-btn {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--card2);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-instant) ease,
    box-shadow var(--dur-fast) ease;
}
.option-btn.selected {
  background: var(--sage);
  border-color: var(--sage);
  color: white;
}
.option-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* INSIGHT CARD */
.insight-card {
  background: var(--glass-card-strong);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.insight-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sage-light);
  color: var(--sage-dark);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* STATUS CHIP */
.status-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid;
}
.status-chip.outline {
  background: transparent;
  border-color: var(--text3);
  color: var(--text2);
}
.status-chip.green {
  background: var(--sage-light);
  border-color: var(--sage);
  color: var(--sage-dark);
}
.status-chip.pink {
  background: var(--pink-light);
  border-color: var(--pink);
  color: #c06060;
}
.status-chip.primary {
  font-weight: 700;
}
.status-chip.secondary {
  background: var(--card2);
  border-color: var(--border);
  color: var(--text2);
}
.status-chip.utility {
  font-weight: 600;
}
.status-chip.chip-red {
  background: #fce8e8;
  border-color: #f2b8b8;
  color: #9f4f4f;
}
.status-chip.chip-yellow {
  background: #fff4cc;
  border-color: #f1d47d;
  color: #7a5a14;
}
.status-chip.chip-green {
  background: #eaf5e7;
  border-color: #c7ddbf;
  color: #5a7d4b;
}
.status-chip.chip-mint {
  background: #e4f5f0;
  border-color: #b7dcd3;
  color: #3c7568;
}
.status-chip.chip-blue {
  background: #e8f1ff;
  border-color: #bdd3f3;
  color: #456b9a;
}
.status-chip.chip-purple {
  background: #f0e9ff;
  border-color: #d5c4f4;
  color: #68508f;
}
.status-chip.chip-neutral {
  background: #f5f1f7;
  border-color: #ded7e5;
  color: #6f6575;
}
@media (prefers-color-scheme: dark) {
  .status-chip.chip-red {
    background: rgba(212, 105, 105, 0.18);
    border-color: rgba(212, 165, 165, 0.45);
    color: #f0b3b3;
  }
  .status-chip.chip-yellow {
    background: rgba(232, 198, 96, 0.16);
    border-color: rgba(232, 220, 196, 0.38);
    color: #f2d98a;
  }
  .status-chip.chip-green {
    background: rgba(126, 200, 160, 0.16);
    border-color: rgba(168, 181, 160, 0.42);
    color: #a8d098;
  }
  .status-chip.chip-mint {
    background: rgba(106, 171, 170, 0.18);
    border-color: rgba(106, 171, 170, 0.46);
    color: #9ddbd7;
  }
  .status-chip.chip-blue {
    background: rgba(96, 145, 220, 0.18);
    border-color: rgba(128, 184, 232, 0.4);
    color: #9cc8f0;
  }
  .status-chip.chip-purple {
    background: rgba(160, 128, 208, 0.2);
    border-color: rgba(192, 160, 240, 0.4);
    color: #ccb0f6;
  }
  .status-chip.chip-neutral {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(197, 185, 201, 0.28);
    color: #c5b9c9;
  }
}

/* SETTING ROW */
.setting-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child {
  border-bottom: none;
}
.setting-info {
  flex: 1;
}
.setting-info strong {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.setting-info span {
  display: block;
  font-size: 12px;
  color: var(--text3);
}

/* TREND MINI CHART */
.mini-chart {
  background: var(--card2);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.mini-chart-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mini-chart-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mini-chart-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(224, 215, 229, 0.68);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
}
@media (prefers-color-scheme: dark) {
  .mini-chart-icon {
    background: var(--card2);
    border-color: rgba(255, 255, 255, 0.06);
  }
}

/* PROGRESS DOTS */
.progress-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.dot {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.dot.active {
  background: var(--sage);
}

/* LH OPTION CARDS */
.lh-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  background: var(--card2);
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) ease;
  color: var(--text2);
}
.lh-option.active-lh {
  border-width: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
  transform: scale(1.06);
  font-weight: 600;
}
.lh-option.active-lh.peak {
  border-color: var(--sage);
  color: var(--sage-dark);
  background: var(--sage-light);
}
.lh-option.active-lh.high {
  border-color: #e8a06a;
  color: #c07040;
  background: #f5dcc0;
}
.lh-option.active-lh.negative {
  border-color: var(--coral);
  color: var(--coral);
  background: var(--coral-light);
}

/* AFFIRMATION CARD */
.affirmation {
  background: linear-gradient(135deg, var(--pink-light), var(--purple-light));
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.affirmation p {
  color: #7a6090;
  font-size: 15px;
  font-weight: 500;
}

/* TEXTAREA */
textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--card2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 14px;
  color: var(--text);
  resize: none;
  outline: none;
  min-height: 80px;
}
textarea:focus {
  border-color: var(--sage);
}

/* SCROLLABLE */
.scroll-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Timeline sticky label always on top */
.timeline-scroll [style*="position:sticky"],
#timeline-scroll [style*="position:sticky"] {
  isolation: isolate;
}
/* Timeline scrollbar - always visible and easy to grab */
.timeline-scroll::-webkit-scrollbar,
#timeline-scroll::-webkit-scrollbar {
  height: 6px;
}
.timeline-scroll::-webkit-scrollbar-track,
#timeline-scroll::-webkit-scrollbar-track {
  background: var(--border);
  border-radius: 3px;
}
.timeline-scroll::-webkit-scrollbar-thumb,
#timeline-scroll::-webkit-scrollbar-thumb {
  background: var(--text3);
  border-radius: 3px;
}
.timeline-scroll,
#timeline-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--text3) var(--border);
}

/* INSIGHTS DASHBOARD */
.insights-dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.insights-dashboard-intro {
  margin: 2px 0 0;
}
.insights-dashboard-intro .section-label {
  margin-bottom: 5px;
}
.insights-dashboard-intro h2 {
  font-size: 23px;
  line-height: 1.15;
  margin: 0;
}
.insights-dashboard-intro p {
  font-size: 13px;
  color: var(--text3);
  margin-top: 5px;
}
.featured-insight-card {
  padding: 18px;
  margin: 0 !important;
}
.featured-insight-card.prediction-hero {
  padding: 19px 18px 18px;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 181, 160, 0.34),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(224, 215, 229, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 72%),
    var(--card);
  border: 1px solid rgba(168, 181, 160, 0.32);
  box-shadow: var(--shadow-lg);
}
.featured-insight-card.prediction-hero.prediction-theme-menstrual {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(212, 165, 165, 0.46),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 232, 232, 0.68),
      rgba(224, 215, 229, 0.22) 58%,
      transparent
    ),
    var(--card);
  border-color: rgba(212, 165, 165, 0.38);
}
.featured-insight-card.prediction-hero.prediction-theme-high,
.featured-insight-card.prediction-hero.prediction-theme-ovulation {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(126, 200, 160, 0.5),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.78),
      rgba(245, 200, 66, 0.16) 58%,
      transparent
    ),
    var(--card);
  border-color: rgba(126, 200, 160, 0.42);
}
.featured-insight-card.prediction-hero.prediction-theme-rising {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 181, 160, 0.48),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.62),
      rgba(224, 215, 229, 0.28) 60%,
      transparent
    ),
    var(--card);
  border-color: rgba(168, 181, 160, 0.42);
}
.featured-insight-card.prediction-hero.prediction-theme-low {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(224, 215, 229, 0.56),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(244, 239, 247, 0.84),
      rgba(168, 181, 160, 0.16) 60%,
      transparent
    ),
    var(--card);
  border-color: rgba(224, 215, 229, 0.44);
}
.featured-insight-card.prediction-hero.prediction-theme-building {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(224, 215, 229, 0.48),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(242, 240, 244, 0.72),
      rgba(168, 181, 160, 0.18) 62%,
      transparent
    ),
    var(--card);
}
.featured-insight-card.timeline-card {
  padding: 16px;
}
.featured-insight-card.pattern-card {
  padding: 15px 16px;
  background:
    linear-gradient(135deg, rgba(224, 215, 229, 0.15), transparent 66%),
    var(--card);
  border: 1px solid rgba(224, 215, 229, 0.28);
  box-shadow: var(--shadow);
}
.featured-insight-header,
.supporting-grid-header,
.insight-detail-source-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.featured-insight-header {
  margin-bottom: 11px;
}
.prediction-hero .featured-insight-header {
  justify-content: space-between;
  margin-bottom: 12px;
}
.prediction-hero-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.prediction-hero .dashboard-icon {
  background:
    radial-gradient(
      circle at 30% 22%,
      rgba(255, 255, 255, 0.86),
      transparent 42%
    ),
    rgba(224, 215, 229, 0.82);
  border-color: rgba(168, 145, 176, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 6px rgba(80, 63, 87, 0.08);
  color: #8b6f91;
}
.prediction-hero.prediction-theme-menstrual .dashboard-icon {
  background:
    radial-gradient(
      circle at 30% 22%,
      rgba(255, 255, 255, 0.86),
      transparent 42%
    ),
    rgba(212, 165, 165, 0.72);
  border-color: rgba(177, 112, 112, 0.34);
  color: #9b6868;
}
.prediction-hero.prediction-theme-high .dashboard-icon,
.prediction-hero.prediction-theme-ovulation .dashboard-icon {
  background:
    radial-gradient(
      circle at 30% 22%,
      rgba(255, 255, 255, 0.84),
      transparent 42%
    ),
    linear-gradient(135deg, rgba(126, 200, 160, 0.72), rgba(245, 200, 66, 0.34));
  border-color: rgba(83, 151, 113, 0.34);
  color: #4d8767;
}
.prediction-hero.prediction-theme-rising .dashboard-icon {
  background:
    radial-gradient(
      circle at 30% 22%,
      rgba(255, 255, 255, 0.84),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(168, 181, 160, 0.72),
      rgba(224, 215, 229, 0.44)
    );
  border-color: rgba(122, 141, 113, 0.34);
  color: #6f7d67;
}
.prediction-hero.prediction-theme-low .dashboard-icon,
.prediction-hero.prediction-theme-building .dashboard-icon {
  background:
    radial-gradient(
      circle at 30% 22%,
      rgba(255, 255, 255, 0.86),
      transparent 42%
    ),
    rgba(224, 215, 229, 0.82);
  border-color: rgba(168, 145, 176, 0.34);
  color: #8b6f91;
}
.prediction-confidence-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 48%;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 1;
}
.prediction-confidence-pill-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-hero .featured-insight-header {
  gap: 8px;
}
.prediction-hero-title {
  flex: 1;
  min-width: 0;
}
.prediction-hero-state {
  font-size: clamp(26px, 8vw, 38px);
  line-height: 1.05;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0;
  margin: 4px 0 8px;
}
.prediction-hero-substate {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.45;
  margin-bottom: 12px;
}
.prediction-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.prediction-meta-item {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  min-width: 0;
}
.prediction-meta-label {
  font-size: 10px;
  color: var(--text2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.prediction-meta-value {
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
  line-height: 1.25;
}
.prediction-quick-note {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
  margin: 2px 0 0;
}
.prediction-detail-toggle,
.timeline-toggle-btn.dashboard-link {
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prediction-detail-panel {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dashboard-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(224, 215, 229, 0.68);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.dashboard-icon.sage {
  background: #e8f5ee;
  border-color: rgba(168, 181, 160, 0.22);
  color: var(--sage-dark);
}
.dashboard-icon.pink {
  background: rgba(212, 165, 165, 0.2);
  border-color: rgba(212, 165, 165, 0.28);
  color: var(--pink);
}
.supporting-grid-header {
  justify-content: space-between;
  margin: 5px 0 0;
}
.supporting-grid-header h3 {
  font-size: 16px;
}
.supporting-grid-subtitle {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}
.supporting-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.supporting-insight-card {
  --support-accent-border: rgba(168, 181, 160, 0.5);
  --support-accent-icon-bg: rgba(168, 181, 160, 0.17);
  --support-accent-icon-border: rgba(168, 181, 160, 0.26);
  --support-accent-text: var(--sage-dark);
  --support-accent-badge-bg: rgba(168, 181, 160, 0.16);
  --support-priority-gradient:
    radial-gradient(
      circle at 12% 6%,
      rgba(168, 181, 160, 0.2),
      transparent 38%
    ),
    linear-gradient(135deg, rgba(168, 181, 160, 0.12), transparent 72%);
  position: relative;
  min-height: 132px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-card);
  box-shadow: var(--shadow);
  padding: 13px 12px 12px;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.supporting-insight-card:active {
  transform: scale(0.98);
}
.supporting-insight-card.is-priority {
  border-color: var(--support-accent-border);
  background: var(--support-priority-gradient), var(--card);
}
.supporting-insight-card.is-priority .supporting-card-icon {
  color: var(--support-accent-text);
  background: var(--support-accent-icon-bg);
  border-color: var(--support-accent-icon-border);
}
.supporting-card-symptoms {
  --support-accent-border: rgba(212, 165, 165, 0.52);
  --support-accent-icon-bg: rgba(212, 165, 165, 0.18);
  --support-accent-icon-border: rgba(212, 165, 165, 0.28);
  --support-accent-text: #9b6868;
  --support-accent-badge-bg: rgba(212, 165, 165, 0.18);
  --support-priority-gradient:
    radial-gradient(
      circle at 12% 6%,
      rgba(212, 165, 165, 0.28),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255, 232, 232, 0.36),
      rgba(224, 215, 229, 0.12) 72%,
      transparent
    );
}
.supporting-card-energy {
  --support-accent-border: rgba(226, 194, 75, 0.5);
  --support-accent-icon-bg: rgba(245, 200, 66, 0.18);
  --support-accent-icon-border: rgba(226, 194, 75, 0.3);
  --support-accent-text: #8f7524;
  --support-accent-badge-bg: rgba(245, 200, 66, 0.18);
  --support-priority-gradient:
    radial-gradient(
      circle at 12% 6%,
      rgba(245, 200, 66, 0.26),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255, 246, 204, 0.34),
      rgba(168, 181, 160, 0.1) 72%,
      transparent
    );
}
.supporting-card-lh {
  --support-accent-border: rgba(126, 200, 160, 0.5);
  --support-accent-icon-bg: rgba(126, 200, 160, 0.18);
  --support-accent-icon-border: rgba(126, 200, 160, 0.3);
  --support-accent-text: #4d8767;
  --support-accent-badge-bg: rgba(126, 200, 160, 0.18);
  --support-priority-gradient:
    radial-gradient(
      circle at 12% 6%,
      rgba(126, 200, 160, 0.28),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.42),
      rgba(245, 200, 66, 0.1) 72%,
      transparent
    );
}
.supporting-card-mucus {
  --support-accent-border: rgba(116, 173, 204, 0.48);
  --support-accent-icon-bg: rgba(116, 173, 204, 0.17);
  --support-accent-icon-border: rgba(116, 173, 204, 0.28);
  --support-accent-text: #4f7d95;
  --support-accent-badge-bg: rgba(116, 173, 204, 0.16);
  --support-priority-gradient:
    radial-gradient(
      circle at 12% 6%,
      rgba(116, 173, 204, 0.24),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(225, 241, 248, 0.38),
      rgba(224, 215, 229, 0.1) 72%,
      transparent
    );
}
.supporting-card-bbt {
  --support-accent-border: rgba(212, 165, 165, 0.48);
  --support-accent-icon-bg: rgba(212, 165, 165, 0.17);
  --support-accent-icon-border: rgba(212, 165, 165, 0.27);
  --support-accent-text: #9b6868;
  --support-accent-badge-bg: rgba(212, 165, 165, 0.17);
  --support-priority-gradient:
    radial-gradient(
      circle at 12% 6%,
      rgba(212, 165, 165, 0.24),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255, 232, 232, 0.28),
      rgba(168, 181, 160, 0.12) 72%,
      transparent
    );
}
.supporting-card-history {
  --support-accent-border: rgba(196, 105, 105, 0.44);
  --support-accent-icon-bg: rgba(212, 165, 165, 0.18);
  --support-accent-icon-border: rgba(196, 105, 105, 0.25);
  --support-accent-text: #9b5d5d;
  --support-accent-badge-bg: rgba(212, 165, 165, 0.17);
  --support-priority-gradient:
    radial-gradient(
      circle at 12% 6%,
      rgba(196, 105, 105, 0.22),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255, 232, 232, 0.3),
      rgba(224, 215, 229, 0.1) 72%,
      transparent
    );
}
.supporting-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.supporting-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(224, 215, 229, 0.68);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.supporting-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  min-width: 0;
}
.supporting-card-badge {
  display: none;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--support-accent-text);
  background: var(--support-accent-badge-bg);
}
.supporting-insight-card.is-priority .supporting-card-badge {
  display: inline-flex;
}
.supporting-card-copy {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.35;
  min-height: 32px;
}
.supporting-card-preview {
  min-height: 24px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: auto;
}
.supporting-card-chevron {
  position: absolute;
  right: 11px;
  bottom: 9px;
  font-size: 19px;
  color: var(--text3);
  line-height: 1;
}
.supporting-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.supporting-preview-bar {
  width: 8px;
  min-height: 4px;
  border-radius: 3px 3px 1px 1px;
  background: var(--sage);
  flex-shrink: 0;
}
.health-check-card {
  --health-accent: #c0924a;
  --health-accent-soft: rgba(245, 200, 66, 0.16);
  display: none;
  padding: 15px 16px;
  border: 1px solid rgba(192, 146, 74, 0.28);
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(245, 200, 66, 0.22),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 248, 232, 0.74),
      rgba(224, 215, 229, 0.12) 72%,
      transparent
    ),
    var(--card);
}
.health-check-card.visible {
  display: block;
}
.health-check-card.priority {
  border-color: rgba(192, 146, 74, 0.42);
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(245, 200, 66, 0.28),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 241, 204, 0.82),
      rgba(212, 165, 165, 0.13) 72%,
      transparent
    ),
    var(--card);
}
.health-check-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.health-check-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--health-accent-soft);
  border: 1px solid rgba(192, 146, 74, 0.22);
  color: var(--health-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.health-check-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.health-check-level {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--health-accent-soft);
  color: var(--health-accent);
  font-size: 10px;
  font-weight: 800;
}
.health-check-message {
  color: var(--text2);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.health-check-reasons {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.health-check-reasons li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.35;
}
.health-check-reasons li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--health-accent);
  opacity: 0.72;
  flex-shrink: 0;
}
.health-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.health-check-disclaimer,
.doctor-report-privacy {
  color: var(--text2);
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
}
.doctor-report-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1210;
  background: rgba(36, 26, 48, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.doctor-report-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.doctor-report-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 1211;
  max-height: calc(86vh - 16px);
  max-height: calc(86dvh - 16px);
  background: var(--glass-card-strong);
  border-radius: 22px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.18);
  transform: translate3d(0, calc(100% + 28px), 0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.26s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.18s ease;
  display: flex;
  flex-direction: column;
}
.doctor-report-panel.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}
.period-cycle-timeline-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1230;
  background: rgba(36, 26, 48, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.period-cycle-timeline-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.period-cycle-timeline-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 1231;
  max-height: calc(86vh - 16px);
  max-height: calc(86dvh - 16px);
  background: var(--glass-card-strong);
  border-radius: 22px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.18);
  transform: translate3d(0, calc(100% + 28px), 0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.26s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.18s ease;
  display: flex;
  flex-direction: column;
}
.period-cycle-timeline-panel.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}
.doctor-report-body {
  padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.period-cycle-timeline-body {
  padding: 14px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.doctor-report-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.doctor-report-section h4 {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
  text-transform: none;
}
.doctor-report-section p,
.doctor-report-section li {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
}
.doctor-report-heading {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 2px;
}
.doctor-report-heading h2 {
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.doctor-report-meta {
  display: grid;
  gap: 2px;
  color: var(--text2);
  font-size: 12px;
}
.doctor-report-range-controls {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card2);
}
.doctor-report-range-label {
  color: var(--text3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.doctor-report-range-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.doctor-report-range-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  cursor: pointer;
}
.doctor-report-range-btn.active {
  background: var(--sage);
  border-color: var(--sage);
  color: white;
}
.doctor-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text2);
}
.doctor-report-table th,
.doctor-report-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.doctor-report-table th {
  color: var(--text);
  font-weight: 800;
}
.doctor-report-list {
  margin: 0;
  padding-left: 17px;
}
.report-action-btn {
  border: none;
  border-radius: var(--radius-pill);
  background: var(--sage);
  color: white;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 12px;
  cursor: pointer;
}
.report-action-btn.secondary {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
}
.insight-detail-source {
  display: none;
}
.insight-detail-source-heading {
  margin-bottom: 13px;
}
.insight-detail-source-heading p {
  font-size: 12px;
  color: var(--text3);
  margin-top: 5px;
}
.insight-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(36, 26, 48, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.insight-detail-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 1201;
  max-height: calc(86vh - 16px);
  max-height: calc(86dvh - 16px);
  background: var(--glass-card-strong);
  border-radius: 22px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.18);
  transform: translate3d(0, calc(100% + 28px), 0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.26s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.18s ease;
  display: flex;
  flex-direction: column;
}
.insight-detail-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.insight-detail-panel.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}

/* iOS tap highlight fix inside insight/period history popouts */
.insight-detail-panel *,
.period-history-item,
.period-history-item * {
  -webkit-tap-highlight-color: transparent;
}

.period-history-item,
button {
  -webkit-touch-callout: none;
}

/* Stronger iOS pressed/focus colour reset for period history details */
.insight-detail-panel button,
.insight-detail-panel [role="button"],
.insight-detail-panel [onclick],
.insight-detail-panel summary,
.insight-detail-panel details,
.period-history-item,
.period-history-item * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none;
  outline: none !important;
}

.insight-detail-panel button:active,
.insight-detail-panel button:focus,
.insight-detail-panel button:focus-visible,
.insight-detail-panel [role="button"]:active,
.insight-detail-panel [role="button"]:focus,
.insight-detail-panel [onclick]:active,
.insight-detail-panel [onclick]:focus,
.period-history-item:active,
.period-history-item:focus,
.period-history-item:focus-visible {
  background-color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

.insight-detail-panel *::selection {
  background: transparent;
}

.insight-detail-handle {
  width: 38px;
  height: 4px;
  border-radius: 3px;
  background: var(--border);
  margin: 12px auto 4px;
  flex-shrink: 0;
}
.insight-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.insight-detail-header h3 {
  font-size: 18px;
}
.insight-detail-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--card2);
  color: var(--text3);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.insight-detail-body {
  padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(160, 160, 160, 0.55) transparent;
}

/* WebKit */
.insight-detail-body::-webkit-scrollbar {
  width: 8px;
}

.insight-detail-body::-webkit-scrollbar-track {
  background: transparent;
}

.insight-detail-body::-webkit-scrollbar-thumb {
  background: rgba(140, 130, 150, 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.insight-detail-body::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 130, 150, 0.7);
}
.timeline-compact {
  border: 1px solid var(--border);
  background: var(--card2);
  border-radius: var(--radius-sm);
  padding: 10px 10px 8px;
  overflow: hidden;
}
.timeline-compact-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1px 0 6px;
}
.timeline-compact-day {
  width: auto;
  min-width: 32px;
  flex: 1 0 32px;
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  padding: 5px 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.timeline-compact-day.is-today {
  border-color: rgba(168, 181, 160, 0.65);
  background: rgba(168, 181, 160, 0.13);
}
.timeline-compact-day.is-period {
  background: rgba(212, 165, 165, 0.15);
}
.timeline-compact-label {
  font-size: 8px;
  font-weight: 800;
  color: var(--text3);
  line-height: 1;
}
.timeline-compact-date {
  font-size: 8px;
  color: var(--text3);
  line-height: 1;
}
.timeline-marker-stack {
  min-height: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}
.timeline-marker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.timeline-marker-pill {
  min-width: 12px;
  height: 12px;
  border-radius: 4px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 800;
  color: white;
  line-height: 1;
}
.timeline-toggle-btn {
  width: 100%;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.timeline-interpretation {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
  margin-top: 9px;
}
.timeline-full-detail {
  display: none;
  margin-top: 12px;
}
.dashboard-disclaimer {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.6;
  font-style: italic;
  text-align: center;
  padding: 2px 8px 20px;
}
@media (max-width: 340px) {
  .supporting-insight-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 760px) {
  .app:has(#screen-insights.active) {
    max-width: 920px;
  }
  .app:has(#screen-insights.active) .nav-bar {
    max-width: 860px;
  }
  #screen-insights .top-bar,
  #screen-insights .insights-dashboard {
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  .supporting-insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .insight-detail-panel {
    left: 50%;
    right: auto;
    bottom: 50%;
    width: min(640px, calc(100vw - 48px));
    max-height: min(760px, calc(100vh - 72px));
    border-radius: var(--radius);
    transform: translate(-50%, calc(50% + 100vh));
  }
  .insight-detail-panel.open {
    transform: translate(-50%, 50%);
  }
  .doctor-report-panel {
    left: 50%;
    right: auto;
    bottom: 50%;
    width: min(680px, calc(100vw - 48px));
    max-height: min(760px, calc(100vh - 72px));
    border-radius: var(--radius);
    transform: translate(-50%, calc(50% + 100vh));
  }
  .doctor-report-panel.open {
    transform: translate(-50%, 50%);
  }
  .period-cycle-timeline-panel {
    left: 50%;
    right: auto;
    bottom: 50%;
    width: min(720px, calc(100vw - 48px));
    max-height: min(760px, calc(100vh - 72px));
    border-radius: var(--radius);
    transform: translate(-50%, calc(50% + 100vh));
  }
  .period-cycle-timeline-panel.open {
    transform: translate(-50%, 50%);
  }
  .insight-detail-handle {
    display: none;
  }
}
@media (prefers-color-scheme: dark) {
  .dashboard-icon,
  .supporting-card-icon {
    background: var(--card2);
    border-color: rgba(255, 255, 255, 0.06);
  }
  .dashboard-icon.sage {
    background: rgba(168, 181, 160, 0.16);
    border-color: rgba(168, 181, 160, 0.24);
  }
  .dashboard-icon.pink {
    background: rgba(212, 165, 165, 0.16);
    border-color: rgba(212, 165, 165, 0.24);
  }
  .prediction-confidence-pill,
  .prediction-meta-item {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
  }
  .featured-insight-card.prediction-hero {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(168, 181, 160, 0.34),
        transparent 38%
      ),
      linear-gradient(
        135deg,
        rgba(74, 66, 80, 0.34),
        rgba(168, 181, 160, 0.12) 62%,
        transparent
      ),
      var(--card);
    border-color: rgba(168, 181, 160, 0.28);
  }
  .featured-insight-card.prediction-hero.prediction-theme-menstrual {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(212, 165, 165, 0.42),
        transparent 38%
      ),
      linear-gradient(
        135deg,
        rgba(115, 50, 62, 0.44),
        rgba(74, 66, 80, 0.24) 60%,
        transparent
      ),
      var(--card);
    border-color: rgba(212, 165, 165, 0.32);
  }
  .featured-insight-card.prediction-hero.prediction-theme-high,
  .featured-insight-card.prediction-hero.prediction-theme-ovulation {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(126, 200, 160, 0.42),
        transparent 38%
      ),
      linear-gradient(
        135deg,
        rgba(46, 125, 90, 0.38),
        rgba(200, 146, 74, 0.18) 58%,
        transparent
      ),
      var(--card);
    border-color: rgba(126, 200, 160, 0.34);
  }
  .featured-insight-card.prediction-hero.prediction-theme-rising {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(168, 181, 160, 0.4),
        transparent 38%
      ),
      linear-gradient(
        135deg,
        rgba(168, 181, 160, 0.28),
        rgba(96, 82, 112, 0.24) 60%,
        transparent
      ),
      var(--card);
    border-color: rgba(168, 181, 160, 0.32);
  }
  .featured-insight-card.prediction-hero.prediction-theme-low,
  .featured-insight-card.prediction-hero.prediction-theme-building {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(224, 215, 229, 0.36),
        transparent 38%
      ),
      linear-gradient(
        135deg,
        rgba(96, 82, 112, 0.34),
        rgba(168, 181, 160, 0.13) 62%,
        transparent
      ),
      var(--card);
    border-color: rgba(224, 215, 229, 0.28);
  }
  .prediction-hero .dashboard-icon {
    background:
      radial-gradient(
        circle at 30% 22%,
        rgba(255, 255, 255, 0.18),
        transparent 45%
      ),
      rgba(224, 215, 229, 0.24);
    border-color: rgba(224, 215, 229, 0.3);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.16);
    color: #d8c8de;
  }
  .prediction-hero.prediction-theme-menstrual .dashboard-icon {
    background:
      radial-gradient(
        circle at 30% 22%,
        rgba(255, 255, 255, 0.17),
        transparent 45%
      ),
      rgba(212, 165, 165, 0.28);
    border-color: rgba(212, 165, 165, 0.36);
    color: #dcb4b4;
  }
  .prediction-hero.prediction-theme-high .dashboard-icon,
  .prediction-hero.prediction-theme-ovulation .dashboard-icon {
    background:
      radial-gradient(
        circle at 30% 22%,
        rgba(255, 255, 255, 0.16),
        transparent 45%
      ),
      linear-gradient(
        135deg,
        rgba(126, 200, 160, 0.3),
        rgba(245, 200, 66, 0.14)
      );
    border-color: rgba(126, 200, 160, 0.36);
    color: #a8d9bf;
  }
  .prediction-hero.prediction-theme-rising .dashboard-icon {
    background:
      radial-gradient(
        circle at 30% 22%,
        rgba(255, 255, 255, 0.16),
        transparent 45%
      ),
      linear-gradient(
        135deg,
        rgba(168, 181, 160, 0.3),
        rgba(224, 215, 229, 0.14)
      );
    border-color: rgba(168, 181, 160, 0.34);
    color: #c7d2c0;
  }
  .prediction-hero.prediction-theme-low .dashboard-icon,
  .prediction-hero.prediction-theme-building .dashboard-icon {
    background:
      radial-gradient(
        circle at 30% 22%,
        rgba(255, 255, 255, 0.18),
        transparent 45%
      ),
      rgba(224, 215, 229, 0.24);
    border-color: rgba(224, 215, 229, 0.3);
    color: #d8c8de;
  }
  .supporting-insight-card {
    --support-accent-border: rgba(168, 181, 160, 0.36);
    --support-accent-icon-bg: rgba(168, 181, 160, 0.14);
    --support-accent-icon-border: rgba(168, 181, 160, 0.22);
    --support-accent-text: #b5c4ae;
    --support-accent-badge-bg: rgba(168, 181, 160, 0.14);
    --support-priority-gradient:
      radial-gradient(
        circle at 12% 6%,
        rgba(168, 181, 160, 0.2),
        transparent 42%
      ),
      linear-gradient(135deg, rgba(168, 181, 160, 0.12), transparent 72%);
  }
  .supporting-card-symptoms {
    --support-accent-border: rgba(212, 165, 165, 0.36);
    --support-accent-icon-bg: rgba(212, 165, 165, 0.15);
    --support-accent-icon-border: rgba(212, 165, 165, 0.24);
    --support-accent-text: #dcb4b4;
    --support-accent-badge-bg: rgba(212, 165, 165, 0.14);
    --support-priority-gradient:
      radial-gradient(
        circle at 12% 6%,
        rgba(212, 165, 165, 0.24),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(116, 60, 72, 0.22),
        rgba(96, 82, 112, 0.1) 72%,
        transparent
      );
  }
  .supporting-card-energy {
    --support-accent-border: rgba(245, 200, 66, 0.34);
    --support-accent-icon-bg: rgba(245, 200, 66, 0.14);
    --support-accent-icon-border: rgba(245, 200, 66, 0.22);
    --support-accent-text: #e8d27a;
    --support-accent-badge-bg: rgba(245, 200, 66, 0.13);
    --support-priority-gradient:
      radial-gradient(
        circle at 12% 6%,
        rgba(245, 200, 66, 0.21),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(111, 92, 34, 0.2),
        rgba(168, 181, 160, 0.08) 72%,
        transparent
      );
  }
  .supporting-card-lh {
    --support-accent-border: rgba(126, 200, 160, 0.36);
    --support-accent-icon-bg: rgba(126, 200, 160, 0.14);
    --support-accent-icon-border: rgba(126, 200, 160, 0.24);
    --support-accent-text: #a8d9bf;
    --support-accent-badge-bg: rgba(126, 200, 160, 0.13);
    --support-priority-gradient:
      radial-gradient(
        circle at 12% 6%,
        rgba(126, 200, 160, 0.23),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(46, 125, 90, 0.2),
        rgba(200, 146, 74, 0.08) 72%,
        transparent
      );
  }
  .supporting-card-mucus {
    --support-accent-border: rgba(116, 173, 204, 0.36);
    --support-accent-icon-bg: rgba(116, 173, 204, 0.14);
    --support-accent-icon-border: rgba(116, 173, 204, 0.22);
    --support-accent-text: #aad2e5;
    --support-accent-badge-bg: rgba(116, 173, 204, 0.13);
    --support-priority-gradient:
      radial-gradient(
        circle at 12% 6%,
        rgba(116, 173, 204, 0.22),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(45, 92, 118, 0.2),
        rgba(96, 82, 112, 0.09) 72%,
        transparent
      );
  }
  .supporting-card-bbt {
    --support-accent-border: rgba(212, 165, 165, 0.34);
    --support-accent-icon-bg: rgba(212, 165, 165, 0.14);
    --support-accent-icon-border: rgba(212, 165, 165, 0.22);
    --support-accent-text: #dcb4b4;
    --support-accent-badge-bg: rgba(212, 165, 165, 0.13);
    --support-priority-gradient:
      radial-gradient(
        circle at 12% 6%,
        rgba(212, 165, 165, 0.21),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(116, 60, 72, 0.18),
        rgba(168, 181, 160, 0.08) 72%,
        transparent
      );
  }
  .supporting-card-history {
    --support-accent-border: rgba(212, 125, 125, 0.34);
    --support-accent-icon-bg: rgba(212, 125, 125, 0.14);
    --support-accent-icon-border: rgba(212, 125, 125, 0.22);
    --support-accent-text: #e0a3a3;
    --support-accent-badge-bg: rgba(212, 125, 125, 0.13);
    --support-priority-gradient:
      radial-gradient(
        circle at 12% 6%,
        rgba(212, 125, 125, 0.2),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(120, 48, 58, 0.18),
        rgba(96, 82, 112, 0.1) 72%,
        transparent
      );
  }
  .health-check-card {
    --health-accent: #e0c36d;
    --health-accent-soft: rgba(245, 200, 66, 0.13);
    border-color: rgba(245, 200, 66, 0.22);
    background:
      radial-gradient(
        circle at 10% 0%,
        rgba(245, 200, 66, 0.2),
        transparent 38%
      ),
      linear-gradient(
        135deg,
        rgba(111, 92, 34, 0.18),
        rgba(96, 82, 112, 0.12) 72%,
        transparent
      ),
      var(--card);
  }
  .health-check-card.priority {
    border-color: rgba(245, 200, 66, 0.3);
    background:
      radial-gradient(
        circle at 10% 0%,
        rgba(245, 200, 66, 0.24),
        transparent 38%
      ),
      linear-gradient(
        135deg,
        rgba(126, 91, 36, 0.23),
        rgba(115, 50, 62, 0.1) 72%,
        transparent
      ),
      var(--card);
  }
}

/* DIVIDER */
.divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* SOCIAL BUTTONS */
.social-btn {
  flex: 1;
  padding: 14px;
  background: var(--glass-card-strong);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
}

/* CHART SVG STYLES */
.chart-area {
  width: 100%;
  overflow: hidden;
}

/* PERIOD BUTTONS */
.period-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-pill);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.period-btn.start {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}
.period-btn.end {
  background: transparent;
  border-color: var(--border);
  color: var(--text2);
}

/* LOGO BOX */
.logo-box {
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  box-shadow: none;
}
.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  display: block;
}

/* TEMP INPUT */
.temp-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.temp-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  background: var(--card2);
  border: 1.5px solid var(--sage-light);
  border-radius: var(--radius-sm);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 15px;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
}
.temp-unit-toggle {
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.temp-unit {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--card2);
  color: var(--text3);
  border: none;
  font-family: "Nunito", "DM Sans", sans-serif;
  transition: all 0.15s;
}
.temp-unit.active {
  background: var(--sage);
  color: white;
}

/* PROFILE STAT GRID */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.stat-card {
  background: var(--glass-card-strong);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.stat-card .label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
  margin-bottom: 4px;
}
.stat-card .value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

/* TEXT LINK */
.text-link {
  color: var(--sage);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

/* WELCOME */
.welcome-screen {
  padding: 20px 24px 30px !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
}
.welcome-screen.active .logo-box {
  animation: welcomeRise 0.55s ease both;
}
.welcome-screen .logo-box {
  width: 90px;
  height: 90px;
  margin: 0 auto 3px;
  border-radius: 0;
}
.welcome-content {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.welcome-title {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 12px;
}
.welcome-screen.active .welcome-title {
  animation: welcomeRise 0.55s ease 0.08s both;
}
.welcome-subtitle {
  font-size: 14px;
  line-height: 1.38;
  font-weight: 600;
  color: var(--text2);
  max-width: 330px;
  margin: 0 auto 18px;
}
.welcome-screen.active .welcome-subtitle {
  animation: welcomeRise 0.55s ease 0.14s both;
}
.welcome-product-preview {
  background:
    radial-gradient(
      circle at 86% 12%,
      rgba(255, 213, 166, 0.22),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 249, 0.52),
      rgba(240, 233, 245, 0.44)
    );
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(200, 185, 210, 0.28);
  border-radius: 21px;
  box-shadow:
    0 8px 28px rgba(96, 76, 91, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  padding: 9px;
  margin: 0 14px 24px;
  text-align: left;
}
.welcome-screen.active .welcome-product-preview {
  animation:
    welcomeRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
    welcomeFloat 7s ease-in-out 1.1s infinite;
}
.welcome-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.welcome-preview-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.welcome-preview-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(166, 129, 169, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.welcome-preview-badge {
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  background: rgba(168, 181, 160, 0.12);
  color: rgba(113, 135, 104, 0.74);
  font-size: 11px;
  font-weight: 750;
}
.welcome-screen.active .welcome-preview-badge {
  animation: welcomeBadgeGlow 4.8s ease-in-out 1.4s infinite;
}
.welcome-preview-card {
  background: rgba(255, 253, 249, 0.9);
  border: 1px solid rgba(168, 181, 160, 0.2);
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 6px;
  box-shadow: 0 6px 18px rgba(96, 76, 91, 0.07);
}
.welcome-preview-kicker {
  color: var(--text3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.welcome-preview-value {
  color: var(--text);
  font-size: 18px;
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 5px;
}
.welcome-preview-caption {
  color: var(--text2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
}
.welcome-confidence-line {
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(168, 181, 160, 0.18);
  overflow: hidden;
}
.welcome-confidence-line span {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sage), #d7a6b2);
  overflow: hidden;
  position: relative;
  transform-origin: left center;
}
.welcome-confidence-line span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
  transform: translateX(-120%);
}
.welcome-screen.active .welcome-confidence-line span {
  animation: welcomeProgress 1.15s ease 0.72s both;
}
.welcome-screen.active .welcome-confidence-line span::after {
  animation: welcomeShimmer 3.8s ease-in-out 1.5s infinite;
}
.welcome-mini-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 7px;
  margin: 0 0 8px;
  padding: 4px 3px 1px;
}
.welcome-timeline-day {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.welcome-timeline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(215, 166, 178, 0.72);
}
.welcome-screen.active .welcome-timeline-dot {
  animation: welcomeDot 0.6s ease-out both;
}
.welcome-screen.active
  .welcome-timeline-day:nth-child(2)
  .welcome-timeline-dot {
  animation-delay: 0.12s;
}
.welcome-screen.active
  .welcome-timeline-day:nth-child(3)
  .welcome-timeline-dot {
  animation-delay: 0.24s;
}
.welcome-screen.active
  .welcome-timeline-day:nth-child(4)
  .welcome-timeline-dot {
  animation-delay: 0.36s;
}
.welcome-screen.active
  .welcome-timeline-day:nth-child(5)
  .welcome-timeline-dot {
  animation-delay: 0.48s;
}
.welcome-screen.active
  .welcome-timeline-day:nth-child(6)
  .welcome-timeline-dot {
  animation-delay: 0.6s;
}
.welcome-timeline-day:nth-child(2) .welcome-timeline-dot,
.welcome-timeline-day:nth-child(3) .welcome-timeline-dot {
  background: rgba(241, 198, 90, 0.76);
}
.welcome-timeline-day:nth-child(6) .welcome-timeline-dot {
  background: rgba(168, 181, 160, 0.82);
}
.welcome-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.welcome-signal-chip {
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--text2);
  border: 1px solid rgba(168, 181, 160, 0.2);
  font-size: 10px;
  font-weight: 800;
}
.welcome-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  justify-items: center;
  margin: 2px auto 28px;
  max-width: 420px;
}
.welcome-screen.active .welcome-benefits {
  animation: welcomeRise 0.55s ease 0.28s both;
}
.welcome-screen.active .welcome-benefit {
  animation: welcomeBenefitIn 0.45s ease both;
}
.welcome-screen.active .welcome-benefit:nth-child(1) {
  animation-delay: 0.42s;
}
.welcome-screen.active .welcome-benefit:nth-child(2) {
  animation-delay: 0.54s;
}
.welcome-screen.active .welcome-benefit:nth-child(3) {
  animation-delay: 0.66s;
}
.welcome-screen.active .welcome-benefit:nth-child(4) {
  animation-delay: 0.78s;
}
.welcome-screen.active .welcome-benefit:nth-child(5) {
  animation-delay: 0.9s;
}
.welcome-screen.active .welcome-benefit:nth-child(6) {
  animation-delay: 1.02s;
}
.welcome-screen.active .welcome-benefit::before {
  animation: welcomeCheckPop 0.45s ease both;
}
.welcome-screen.active .welcome-benefit:nth-child(1)::before {
  animation-delay: 0.48s;
}
.welcome-screen.active .welcome-benefit:nth-child(2)::before {
  animation-delay: 0.6s;
}
.welcome-screen.active .welcome-benefit:nth-child(3)::before {
  animation-delay: 0.72s;
}
.welcome-screen.active .welcome-benefit:nth-child(4)::before {
  animation-delay: 0.84s;
}
.welcome-screen.active .welcome-benefit:nth-child(5)::before {
  animation-delay: 0.96s;
}
.welcome-screen.active .welcome-benefit:nth-child(6)::before {
  animation-delay: 1.08s;
}
.welcome-benefit {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  box-shadow: none;
  width: 100%;
}
.welcome-benefit::before {
  content: "✓";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(168, 181, 160, 0.1);
  color: rgba(113, 135, 104, 0.62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex: 0 0 auto;
}
.welcome-helper {
  color: var(--text3);
  font-size: 11px;
  font-weight: 500;
  margin: 12px 0 6px;
}
.welcome-login {
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}
@media (max-width: 430px) {
  .welcome-benefits {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 260px;
  }
  .welcome-benefit {
    justify-content: flex-start;
    text-align: left;
  }
}
.welcome-screen.active .btn-primary {
  animation: welcomeRise 0.55s ease 0.5s both;
}
.welcome-screen.active .welcome-helper {
  animation: welcomeRise 0.5s ease 0.58s both;
}
.welcome-screen.active .welcome-login {
  animation: welcomeRise 0.5s ease 0.64s both;
}

@keyframes welcomeRise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes welcomeFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes welcomeProgress {
  from {
    transform: scaleX(0.28);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes welcomeDot {
  from {
    transform: scale(0.72);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 0.76;
  }
}
@keyframes welcomeBenefitIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes welcomeCheckPop {
  from {
    opacity: 0;
    transform: scale(0.76);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes welcomeShimmer {
  0%,
  45% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@keyframes welcomeBadgeGlow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(168, 181, 160, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(168, 181, 160, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-screen.active .logo-box,
  .welcome-screen.active .welcome-title,
  .welcome-screen.active .welcome-subtitle,
  .welcome-screen.active .wc-orbit-wrap,
  .welcome-screen.active .wc-chips,
  .welcome-screen.active .btn-primary,
  .welcome-screen.active .welcome-helper,
  .welcome-screen.active .welcome-login {
    animation: none;
  }
  .wc-orbit-card {
    transition: none;
  }
}

@media (max-height: 700px) {
  .welcome-screen {
    padding-top: 16px !important;
  }
  .welcome-screen .logo-box {
    width: 68px;
    height: 68px;
    margin-bottom: 6px;
  }
  .welcome-title {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .welcome-subtitle {
    margin-bottom: 12px;
    font-size: 13px;
  }
  .wc-orbit-wrap {
    height: 184px;
    margin-bottom: 10px;
  }
  .wc-orbit-track {
    height: 162px;
  }
  .wc-orbit-card {
    height: 160px;
    width: 172px;
    left: calc(50% - 86px);
    padding: 11px 12px 10px;
  }
  .wco-trend-chart {
    height: 44px;
  }
  .wc-chips {
    margin-bottom: 14px;
  }
}

@media (prefers-color-scheme: dark) {
  .welcome-product-preview {
    background:
      radial-gradient(
        circle at 18% 12%,
        rgba(241, 198, 90, 0.16),
        transparent 38%
      ),
      linear-gradient(145deg, rgba(63, 51, 70, 0.96), rgba(48, 41, 55, 0.92));
    border-color: rgba(210, 192, 214, 0.16);
  }
  .welcome-preview-card,
  .welcome-signal-chip {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .welcome-preview-badge {
    background: rgba(168, 181, 160, 0.14);
    color: rgba(205, 217, 197, 0.78);
  }
  .welcome-benefit::before {
    background: rgba(168, 181, 160, 0.1);
    color: rgba(205, 217, 197, 0.68);
  }
}

/* ── Welcome orbit carousel ─────────────────────────────────── */
.wc-orbit-wrap {
  position: relative;
  width: 100%;
  height: 212px;
  margin: 0 0 14px;
  overflow: hidden;
  touch-action: pan-y;
}
.wc-orbit-track {
  position: relative;
  width: 100%;
  height: 192px;
}
.wc-orbit-card {
  position: absolute;
  width: 186px;
  height: 188px;
  left: calc(50% - 93px);
  top: 2px;
  border-radius: 20px;
  padding: 13px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.055);
  box-shadow: 0 6px 20px rgba(80, 60, 90, 0.09);
  transition:
    transform 0.46s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.36s ease;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
.wc-orbit-card.wco-active {
  box-shadow: 0 10px 30px rgba(80, 60, 90, 0.15);
  pointer-events: auto;
}

/* Per-card accent gradients — light mode */
.wco-c0 {
  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(200, 178, 215, 0.48),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(244, 239, 248, 0.97),
      rgba(232, 222, 240, 0.92)
    );
}
.wco-c1 {
  background:
    radial-gradient(
      circle at 22% 14%,
      rgba(155, 175, 148, 0.42),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(236, 243, 233, 0.97),
      rgba(222, 234, 218, 0.92)
    );
}
.wco-c2 {
  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(224, 210, 170, 0.48),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(251, 246, 236, 0.97),
      rgba(240, 230, 208, 0.92)
    );
}
.wco-c3 {
  background:
    radial-gradient(
      circle at 22% 78%,
      rgba(210, 155, 163, 0.44),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(249, 237, 239, 0.97),
      rgba(238, 220, 224, 0.92)
    );
}
.wco-c4 {
  background:
    radial-gradient(
      circle at 78% 78%,
      rgba(148, 194, 176, 0.42),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(232, 245, 238, 0.97),
      rgba(216, 236, 226, 0.92)
    );
}
.wco-c5 {
  background:
    radial-gradient(
      circle at 50% 14%,
      rgba(180, 162, 216, 0.48),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(238, 234, 249, 0.97),
      rgba(226, 218, 244, 0.92)
    );
}

/* Card header */
.wco-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.wco-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.52);
  color: var(--text2);
}
.wco-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.wco-kicker {
  color: var(--text3);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.wco-value {
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 5px;
}
.wco-sub {
  color: var(--text2);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.wco-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
  margin-top: auto;
}
.wco-bar span {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sage), #d7a6b2);
}

/* LH list */
.wco-lh-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.wco-lh-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wco-lh-date {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
}
.wco-lh-badge {
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}
.wco-peak {
  background: rgba(192, 48, 96, 0.1);
  color: #c03060;
}
.wco-high {
  background: rgba(180, 136, 24, 0.12);
  color: #906820;
}
.wco-neg {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text3);
}

/* Fertility trend chart */
.wco-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 58px;
  padding: 0 2px;
  flex: 1;
  margin-bottom: 6px;
}
.wco-trend-chart span {
  flex: 1;
  border-radius: 3px 3px 2px 2px;
  min-height: 8px;
  background: var(--sage-light);
}
.wco-trend-chart span:nth-child(4) {
  background: #d4849a;
}

/* Symptom tags */
.wco-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  align-content: flex-start;
  padding-top: 2px;
}
.wco-tag {
  font-size: 10px;
  font-weight: 750;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(0, 0, 0, 0.065);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
}

/* Doctor report stats */
.wco-stats {
  display: flex;
  gap: 0;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}
.wco-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.wco-stat-val {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.wco-stat-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.wco-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(0, 0, 0, 0.07);
  flex: 0 0 auto;
}

/* Timeline strip */
.wco-tl-strip {
  display: flex;
  gap: 4px;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}
.wco-tday {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text3);
  border: 1px solid rgba(0, 0, 0, 0.055);
  flex: 0 0 auto;
}
.wco-t-menses {
  background: rgba(212, 165, 165, 0.35);
  color: #9a5050;
  border-color: rgba(212, 165, 165, 0.28);
}
.wco-t-follic {
  background: rgba(168, 181, 160, 0.28);
  color: #5a7a50;
  border-color: rgba(168, 181, 160, 0.22);
}
.wco-t-today {
  background: rgba(96, 76, 140, 0.14);
  color: #60508a;
  border-color: rgba(96, 76, 140, 0.22);
  box-shadow: 0 0 0 2px rgba(96, 76, 140, 0.1);
}

/* Dots */
.wco-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.wco-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.14);
  transition:
    width 0.3s ease,
    background 0.3s ease;
  flex: 0 0 auto;
}
.wco-dot.wco-dot-active {
  width: 18px;
  background: rgba(100, 80, 150, 0.48);
}

/* Benefit chips */
.wc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  align-content: center;
  margin: 0 auto 22px;
  min-height: 70px;
  transition: opacity 0.26s ease;
  will-change: opacity;
}
.wc-chips.wco-chips-out {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .wc-chips {
    transition: opacity 0.18s ease;
  }
}
.wc-chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  white-space: nowrap;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

/* Per-card chip accent — light mode */
.wc-chips[data-accent="0"] .wc-chip {
  background: rgba(200, 178, 215, 0.2);
  border-color: rgba(155, 118, 198, 0.32);
  color: #6a4890;
}
.wc-chips[data-accent="1"] .wc-chip {
  background: rgba(155, 175, 148, 0.2);
  border-color: rgba(110, 140, 100, 0.32);
  color: #4a6840;
}
.wc-chips[data-accent="2"] .wc-chip {
  background: rgba(224, 210, 170, 0.22);
  border-color: rgba(180, 145, 70, 0.32);
  color: #7a5820;
}
.wc-chips[data-accent="3"] .wc-chip {
  background: rgba(210, 155, 163, 0.2);
  border-color: rgba(175, 110, 120, 0.32);
  color: #8a4050;
}
.wc-chips[data-accent="4"] .wc-chip {
  background: rgba(148, 194, 176, 0.2);
  border-color: rgba(80, 148, 124, 0.32);
  color: #386858;
}
.wc-chips[data-accent="5"] .wc-chip {
  background: rgba(180, 162, 216, 0.2);
  border-color: rgba(130, 100, 195, 0.32);
  color: #5a3888;
}

/* Per-card chip accent — system dark */
@media (prefers-color-scheme: dark) {
  .wc-chips[data-accent="0"] .wc-chip {
    background: rgba(160, 120, 200, 0.18);
    border-color: rgba(160, 120, 200, 0.36);
    color: #c0a0e0;
  }
  .wc-chips[data-accent="1"] .wc-chip {
    background: rgba(120, 150, 112, 0.18);
    border-color: rgba(120, 150, 112, 0.36);
    color: #90c080;
  }
  .wc-chips[data-accent="2"] .wc-chip {
    background: rgba(200, 170, 100, 0.18);
    border-color: rgba(200, 170, 100, 0.36);
    color: #d0b070;
  }
  .wc-chips[data-accent="3"] .wc-chip {
    background: rgba(190, 120, 130, 0.18);
    border-color: rgba(190, 120, 130, 0.36);
    color: #e09898;
  }
  .wc-chips[data-accent="4"] .wc-chip {
    background: rgba(100, 170, 148, 0.18);
    border-color: rgba(100, 170, 148, 0.36);
    color: #80c8a8;
  }
  .wc-chips[data-accent="5"] .wc-chip {
    background: rgba(150, 130, 205, 0.18);
    border-color: rgba(150, 130, 205, 0.36);
    color: #b8a0e0;
  }
}

/* Active-state entrance animations */
.welcome-screen.active .wc-orbit-wrap {
  animation: welcomeRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.welcome-screen.active .wc-chips {
  animation: welcomeRise 0.55s ease 0.3s both;
}

/* PRODUCT-LED ONBOARDING */
.onboard-product-screen {
  padding: 30px 24px 40px !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
.onboard-product-content {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.onboard-step-label {
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  margin: 0 0 18px;
  letter-spacing: 0.3px;
}
.onboard-insight-preview {
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(255, 213, 166, 0.24),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 85%,
      rgba(200, 178, 215, 0.16),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 249, 0.52),
      rgba(240, 232, 242, 0.44)
    );
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(200, 185, 210, 0.28);
  border-radius: 22px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 28px rgba(96, 76, 91, 0.08),
    0 4px 12px rgba(96, 76, 91, 0.04);
  padding: 16px 16px 18px;
  margin: 2px auto 20px;
  max-width: 310px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.onboard-insight-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.onboard-insight-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.onboard-insight-orb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(166, 129, 169, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onboard-insight-badge {
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  background: rgba(168, 181, 160, 0.12);
  color: rgba(113, 135, 104, 0.74);
  font-size: 11px;
  font-weight: 750;
}
.onboard-insight-card {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 15px;
  padding: 10px 12px 12px;
  box-shadow: 0 2px 8px rgba(96, 76, 91, 0.06);
  overflow: hidden;
  position: relative;
}
.onboard-insight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.34),
    transparent
  );
  opacity: 0.28;
  pointer-events: none;
  transform: translateX(-120%);
}
.onboard-insight-title {
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 4px;
}
.onboard-insight-copy {
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 10px;
}
.onboard-insight-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.onboard-insight-chip {
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--text2);
  border: 1px solid rgba(168, 181, 160, 0.2);
  font-size: 10px;
  font-weight: 800;
}
.onboard-product-title {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.2px;
  text-align: center;
  margin: 0 0 10px;
  color: var(--text);
}
.onboard-product-subtitle {
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text2);
  font-weight: 600;
  margin: 0 auto 18px;
  max-width: 300px;
}
.onboard-track-card {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(255, 213, 166, 0.18),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(252, 249, 246, 0.97),
      rgba(245, 240, 248, 0.92)
    );
  border: 1px solid rgba(200, 188, 210, 0.24);
  border-radius: 20px;
  box-shadow:
    0 8px 24px rgba(96, 76, 91, 0.08),
    0 2px 0 rgba(255, 255, 255, 0.7) inset;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.onboard-track-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.onboard-track-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.onboard-track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 9px 0;
}
.onboard-track-item::before {
  display: none;
}

/* ── ob1 capsule progress ── */
.ob1-progress {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 0 0 6px;
}
.ob1-seg {
  height: 5px;
  width: 28px;
  border-radius: 99px;
  background: rgba(155, 118, 198, 0.18);
  transition:
    background 0.3s ease,
    width 0.3s ease;
}
.ob1-seg-active {
  width: 44px;
  background: linear-gradient(
    90deg,
    rgba(155, 118, 198, 0.85),
    rgba(200, 178, 215, 0.75)
  );
}
.ob1-seg-clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ob1-seg-clickable:hover {
  opacity: 0.7;
}
.ob1-seg-clickable:active {
  opacity: 0.5;
}

/* ── hero glow ── */
.ob1-hero-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 50% -10%,
    rgba(200, 178, 215, 0.35) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* ── wave line ── */
.ob1-wave-line {
  margin-bottom: 6px;
  opacity: 0.9;
  animation: ob1WavePulse 3.6s ease-in-out infinite;
}

/* ── insight chips (coloured) ── */
.ob1-chip-period {
  background: rgba(232, 107, 135, 0.12) !important;
  border-color: rgba(232, 107, 135, 0.28) !important;
  color: #c0466a !important;
}
.ob1-chip-symptom {
  background: rgba(155, 118, 198, 0.12) !important;
  border-color: rgba(155, 118, 198, 0.28) !important;
  color: #6e44a8 !important;
}
.ob1-chip-lh {
  background: rgba(255, 179, 71, 0.13) !important;
  border-color: rgba(220, 150, 40, 0.28) !important;
  color: #a06818 !important;
}
.ob1-chip-insight {
  background: rgba(113, 155, 104, 0.12) !important;
  border-color: rgba(113, 155, 104, 0.28) !important;
  color: #3d7535 !important;
}

/* ── track dots ── */
.ob1-track-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.ob1-track-period .ob1-track-dot {
  background: rgba(232, 107, 135, 0.85);
  box-shadow: 0 0 0 3px rgba(232, 107, 135, 0.14);
}
.ob1-track-symptom .ob1-track-dot {
  background: rgba(155, 118, 198, 0.85);
  box-shadow: 0 0 0 3px rgba(155, 118, 198, 0.14);
}
.ob1-track-lh .ob1-track-dot {
  background: rgba(255, 179, 71, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.16);
}

/* ── track text ── */
.ob1-track-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ob1-track-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.ob1-track-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  opacity: 0.78;
  line-height: 1.3;
}

/* ── track divider ── */
.ob1-track-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 181, 160, 0.22),
    transparent
  );
  margin: 0 4px;
}

/* ── keyframes ── */
@keyframes ob1Float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes ob1WavePulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.onboard-helper-line {
  text-align: center;
  color: var(--text3);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.68;
  margin: 0 0 22px;
}
.onboard-product-screen .btn-ghost {
  color: var(--text3);
  font-size: 13px;
  font-weight: 500;
  opacity: 0.78;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.onboard-product-screen.active .ob1-progress,
.onboard-product-screen.active .onboard-step-label,
.onboard-product-screen.active .onboard-insight-preview,
.onboard-product-screen.active .onboard-product-title,
.onboard-product-screen.active .onboard-product-subtitle,
.onboard-product-screen.active .onboard-track-card,
.onboard-product-screen.active .onboard-helper-line,
.onboard-product-screen.active .btn-primary,
.onboard-product-screen.active .btn-ghost {
  animation: welcomeRise 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.onboard-product-screen.active .ob1-progress {
  animation-delay: 0s;
}
.onboard-product-screen.active .onboard-step-label {
  animation-delay: 0.05s;
}
.onboard-product-screen.active .onboard-insight-preview {
  animation-delay: 0.14s;
  animation:
    welcomeRise 0.56s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both,
    ob1Float 5s ease-in-out 1.2s infinite;
}
.onboard-product-screen.active .ob1-wave-line {
  animation: ob1WavePulse 3.6s ease-in-out 1.5s infinite;
}
.onboard-product-screen.active .onboard-insight-card::after {
  animation: welcomeShimmer 4.8s ease-in-out 1.15s infinite;
}
.onboard-product-screen.active .onboard-product-title {
  animation-delay: 0.24s;
}
.onboard-product-screen.active .onboard-product-subtitle {
  animation-delay: 0.31s;
}
.onboard-product-screen.active .onboard-track-card {
  animation-delay: 0.39s;
}
.onboard-product-screen.active .onboard-track-item {
  animation: welcomeBenefitIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.onboard-product-screen.active .onboard-track-item:nth-child(1) {
  animation-delay: 0.49s;
}
.onboard-product-screen.active .onboard-track-item:nth-child(2) {
  animation-delay: 0.59s;
}
.onboard-product-screen.active .onboard-track-item:nth-child(3) {
  animation-delay: 0.69s;
}
.onboard-product-screen.active .onboard-helper-line {
  animation-delay: 0.78s;
}
.onboard-product-screen.active .btn-primary {
  animation-delay: 0.88s;
}
.onboard-product-screen.active .btn-ghost {
  animation-delay: 0.96s;
}

@media (prefers-reduced-motion: reduce) {
  .onboard-product-screen.active .ob1-progress,
  .onboard-product-screen.active .onboard-step-label,
  .onboard-product-screen.active .onboard-insight-preview,
  .onboard-product-screen.active .onboard-product-title,
  .onboard-product-screen.active .onboard-product-subtitle,
  .onboard-product-screen.active .onboard-track-card,
  .onboard-product-screen.active .onboard-track-item,
  .onboard-product-screen.active .onboard-helper-line,
  .onboard-product-screen.active .onboard-insight-card::after,
  .onboard-product-screen.active .ob1-wave-line,
  .onboard-product-screen.active .btn-primary,
  .onboard-product-screen.active .btn-ghost {
    animation: none;
  }
}

@media (prefers-color-scheme: dark) {
  .onboard-insight-preview {
    background:
      radial-gradient(
        circle at 84% 14%,
        rgba(241, 198, 90, 0.14),
        transparent 34%
      ),
      linear-gradient(145deg, rgba(63, 51, 70, 0.96), rgba(48, 41, 55, 0.92));
    border-color: rgba(210, 192, 214, 0.16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  }
  .onboard-insight-chip {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .onboard-insight-card {
    background: transparent;
    border-color: transparent;
  }
  .onboard-insight-orb {
    background: rgba(210, 192, 214, 0.12);
  }
  .onboard-insight-badge {
    background: rgba(168, 181, 160, 0.14);
    color: rgba(205, 217, 197, 0.78);
  }
  .onboard-track-card {
    background:
      radial-gradient(
        circle at 92% 8%,
        rgba(255, 179, 71, 0.07),
        transparent 38%
      ),
      linear-gradient(145deg, rgba(52, 40, 64, 0.98), rgba(44, 34, 56, 0.96));
    border-color: rgba(210, 192, 214, 0.14);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .onboard-track-item::before {
    background: rgba(168, 181, 160, 0.58);
  }
  .ob1-seg {
    background: rgba(200, 178, 215, 0.12);
  }
  .ob1-seg-active {
    background: linear-gradient(
      90deg,
      rgba(155, 118, 198, 0.7),
      rgba(200, 178, 215, 0.5)
    );
  }
  .ob1-track-divider {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(200, 178, 215, 0.14),
      transparent
    );
  }
  .ob1-track-name {
    color: rgba(240, 230, 248, 0.92);
  }
  .ob1-track-sub {
    color: rgba(200, 185, 215, 0.56);
  }
  .ob1-chip-period {
    background: rgba(232, 107, 135, 0.1) !important;
    border-color: rgba(232, 107, 135, 0.22) !important;
    color: rgba(232, 140, 160, 0.9) !important;
  }
  .ob1-chip-symptom {
    background: rgba(155, 118, 198, 0.1) !important;
    border-color: rgba(155, 118, 198, 0.22) !important;
    color: rgba(190, 160, 225, 0.9) !important;
  }
  .ob1-chip-lh {
    background: rgba(255, 179, 71, 0.09) !important;
    border-color: rgba(220, 150, 40, 0.2) !important;
    color: rgba(230, 185, 110, 0.9) !important;
  }
  .ob1-chip-insight {
    background: rgba(113, 155, 104, 0.09) !important;
    border-color: rgba(113, 155, 104, 0.2) !important;
    color: rgba(150, 195, 140, 0.9) !important;
  }
}

/* ONBOARDING SETUP POLISH */
/* ═══════════════════════════════════════════════
         ONBOARDING QUESTION SCREENS (steps 2 & 3)
      ═══════════════════════════════════════════════ */
.ob-q-screen {
  padding: 32px 24px 44px !important;
  justify-content: center;
  background: transparent !important;
}
.ob-q-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* ── 3-step capsule progress ── */
.ob3-progress {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 0 0 6px;
}
.ob3-seg {
  height: 5px;
  width: 26px;
  border-radius: 99px;
  background: rgba(155, 118, 198, 0.14);
  transition:
    background 0.35s ease,
    width 0.35s ease;
}
.ob3-seg-done {
  background: rgba(155, 118, 198, 0.42);
}
.ob3-seg-active {
  width: 42px;
  background: linear-gradient(
    90deg,
    rgba(155, 118, 198, 0.88),
    rgba(200, 178, 215, 0.75)
  );
}
.ob3-seg-clickable {
  cursor: pointer;
  transition:
    background 0.35s ease,
    width 0.35s ease,
    opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ob3-seg-clickable:hover {
  opacity: 0.7;
}
.ob3-seg-clickable:active {
  opacity: 0.5;
  transform: scaleY(1.3);
}

/* ── step label ── */
.ob-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.4px;
  margin: 0 0 18px;
  text-align: center;
}

/* ── page title + subtitle ── */
.ob-q-title {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.2px;
  text-align: center;
  color: var(--text);
  margin: 0 0 10px;
  width: 100%;
}
.ob-q-sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  text-align: center;
  line-height: 1.45;
  margin: 0 0 22px;
  max-width: 290px;
}

/* ── question cards ── */
.ob-card {
  width: 100%;
  background:
    radial-gradient(
      circle at 94% 6%,
      rgba(255, 213, 166, 0.14),
      transparent 38%
    ),
    linear-gradient(145deg, rgba(253, 250, 247, 0.97), rgba(246, 241, 252, 0.9));
  border: 1px solid rgba(200, 188, 210, 0.22);
  border-radius: 22px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.82) inset,
    0 12px 28px rgba(96, 76, 91, 0.08),
    0 3px 8px rgba(96, 76, 91, 0.04);
  padding: 18px 18px 20px;
  margin-bottom: 14px;
}
.ob-card-q {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 5px;
}
.ob-card-hint {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text3);
  opacity: 0.72;
  margin: 0 0 14px;
  line-height: 1.4;
}

/* ── option containers ── */
.ob-options {
  display: flex;
  gap: 9px;
  margin: 0;
  flex-wrap: wrap;
}
.ob-options.ob-options-row {
  flex-direction: row;
}
.ob-options.ob-options-col {
  flex-direction: column;
  gap: 8px;
}

/* ── individual option button ── */
.ob-option {
  flex: 1;
  min-height: 48px;
  padding: 11px 14px;
  background: rgba(255, 253, 250, 0.78);
  border: 1.5px solid rgba(200, 185, 210, 0.22);
  border-radius: 14px;
  color: var(--text2);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(96, 76, 91, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: "Nunito", "DM Sans", sans-serif;
}
.ob-option.ob-option-full {
  flex: none;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  min-height: 52px;
}
.ob-option:active {
  transform: scale(0.97);
}
.ob-option.selected {
  background: linear-gradient(
    135deg,
    rgba(155, 118, 198, 0.16),
    rgba(168, 181, 160, 0.12)
  );
  border-color: rgba(155, 118, 198, 0.5);
  color: var(--text);
  box-shadow:
    0 0 0 3px rgba(155, 118, 198, 0.09),
    0 4px 14px rgba(155, 118, 198, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  transform: scale(1.02);
}
.ob-option.selected:active {
  transform: scale(0.98);
}

/* ── CTA & skip ── */
.ob-q-screen .btn-primary {
  width: 100%;
  max-width: 380px;
  margin-top: 4px;
}
.ob-q-screen .btn-ghost {
  color: var(--text3);
  font-size: 13px;
  opacity: 0.76;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── entrance animations ── */
.ob-q-screen.active .ob3-progress,
.ob-q-screen.active .ob-step-label,
.ob-q-screen.active .ob-q-title,
.ob-q-screen.active .ob-q-sub,
.ob-q-screen.active .ob-card,
.ob-q-screen.active .btn-primary,
.ob-q-screen.active .btn-ghost {
  animation: welcomeRise 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ob-q-screen.active .ob3-progress {
  animation-delay: 0s;
}
.ob-q-screen.active .ob-step-label {
  animation-delay: 0.05s;
}
.ob-q-screen.active .ob-q-title {
  animation-delay: 0.12s;
}
.ob-q-screen.active .ob-q-sub {
  animation-delay: 0.19s;
}
.ob-q-screen.active #ob2-card-cycle,
.ob-q-screen.active #ob3-card-lh {
  animation-delay: 0.28s;
}
.ob-q-screen.active #ob2-card-goal,
.ob-q-screen.active #ob3-card-bbt {
  animation-delay: 0.4s;
}
.ob-q-screen.active .btn-primary {
  animation-delay: 0.5s;
}
.ob-q-screen.active .btn-ghost {
  animation-delay: 0.58s;
}

@media (prefers-reduced-motion: reduce) {
  .ob-q-screen.active .ob3-progress,
  .ob-q-screen.active .ob-step-label,
  .ob-q-screen.active .ob-q-title,
  .ob-q-screen.active .ob-q-sub,
  .ob-q-screen.active .ob-card,
  .ob-q-screen.active .btn-primary,
  .ob-q-screen.active .btn-ghost {
    animation: none;
  }
  .ob-option {
    transition:
      background 0.15s ease,
      border-color 0.15s ease;
  }
}

@media (prefers-color-scheme: dark) {
  .ob-card {
    background:
      radial-gradient(
        circle at 94% 6%,
        rgba(200, 165, 70, 0.07),
        transparent 38%
      ),
      linear-gradient(145deg, rgba(58, 48, 68, 0.96), rgba(48, 40, 58, 0.9));
    border-color: rgba(210, 192, 214, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  }
  .ob-option {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text2);
  }
  .ob-option.selected {
    background: linear-gradient(
      135deg,
      rgba(155, 118, 198, 0.26),
      rgba(168, 181, 160, 0.16)
    );
    border-color: rgba(155, 118, 198, 0.48);
    color: rgba(240, 230, 248, 0.95);
    box-shadow:
      0 0 0 3px rgba(155, 118, 198, 0.1),
      0 4px 14px rgba(155, 118, 198, 0.16);
  }
}

/* AUTH SCREEN POLISH */
#screen-signup,
#screen-login {
  align-items: center;
}
#screen-signup {
  padding: 28px 24px 40px !important;
}
#screen-login {
  padding: 46px 24px 40px !important;
}
#screen-signup > *,
#screen-login > * {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
#screen-signup > div:first-child {
  padding: 0 0 18px !important;
  position: relative;
}
#screen-signup .back-btn {
  position: absolute;
  left: 0;
  top: 0;
  float: none !important;
  margin-top: 0 !important;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.58);
  border: 1px solid rgba(168, 181, 160, 0.16);
  color: var(--text2);
}
#screen-signup h2,
#screen-login h2 {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
}
#screen-signup h2 {
  margin-bottom: 8px !important;
}
#screen-login h2 {
  margin-bottom: 8px !important;
}
#screen-signup h2 + p,
#screen-login h2 + p {
  color: var(--text2);
  font-size: 14px;
  line-height: 1.38;
  font-weight: 600;
}
#screen-login h2 + p {
  margin-bottom: 26px !important;
}
#screen-signup > .logo-box,
#screen-login > .logo-box {
  width: 150px;
  height: 150px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#screen-signup > .logo-box {
  margin-bottom: 1px !important;
}
#screen-login > .logo-box {
  margin-bottom: 1px !important;
}
#screen-signup > .logo-box img,
#screen-login > .logo-box img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}
#screen-signup .input-group,
#screen-login .input-group {
  margin-bottom: 14px;
}
#screen-signup .input-group label,
#screen-login .input-group label {
  color: var(--text2);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 7px;
}
#screen-signup .input-field,
#screen-login .input-field {
  background: rgba(255, 253, 249, 0.76);
  border: 1px solid rgba(168, 181, 160, 0.2);
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(96, 76, 91, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
#screen-signup .input-field:focus,
#screen-login .input-field:focus {
  background: rgba(255, 253, 249, 0.94);
  border-color: rgba(168, 181, 160, 0.72);
  box-shadow: 0 0 0 4px rgba(168, 181, 160, 0.12);
}
#screen-signup .input-icon,
#screen-login .input-icon {
  opacity: 0.68;
}
#screen-signup .form-row {
  align-items: flex-start;
  background: rgba(255, 253, 249, 0.46);
  border: 1px solid rgba(168, 181, 160, 0.14);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 20px !important;
}
#screen-signup .form-row label {
  line-height: 1.35;
}
#screen-signup > p,
#screen-login p {
  font-weight: 600;
}
#screen-signup > .btn-primary,
#screen-login .btn-primary {
  margin-bottom: 14px !important;
}
#screen-signup .or-row,
#screen-login .or-row {
  margin: 16px auto;
}
#screen-signup .social-btn,
#screen-login .social-btn {
  background: rgba(255, 253, 249, 0.68);
  border: 1px solid rgba(168, 181, 160, 0.2);
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(96, 76, 91, 0.04);
  font-weight: 800;
}
#screen-login > div:not(.logo-box) {
  max-width: 360px;
}
#screen-signup.active > div:first-child,
#screen-signup.active > .logo-box,
#screen-signup.active > .input-group,
#screen-signup.active > form,
#screen-signup.active > .form-row,
#screen-signup.active > .btn-primary,
#screen-signup.active > p,
#screen-signup.active > .or-row,
#screen-signup.active > div:last-child,
#screen-login.active > .logo-box,
#screen-login.active > h2,
#screen-login.active > p,
#screen-login.active > div {
  animation: welcomeRise 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#screen-signup.active > div:first-child,
#screen-login.active > .logo-box {
  animation-delay: 0s;
}
#screen-signup.active > .logo-box,
#screen-login.active > h2 {
  animation-delay: 0.08s;
}
#screen-signup.active > .input-group:nth-of-type(1),
#screen-login.active > p {
  animation-delay: 0.16s;
}
#screen-signup.active > .input-group:nth-of-type(2),
#screen-login.active > div {
  animation-delay: 0.24s;
}
#screen-signup.active > form {
  animation-delay: 0.32s;
}
#screen-signup.active > .form-row {
  animation-delay: 0.4s;
}
#screen-signup.active > .btn-primary {
  animation-delay: 0.48s;
}
#screen-signup.active > p {
  animation-delay: 0.56s;
}
#screen-signup.active > .or-row {
  animation-delay: 0.64s;
}
#screen-signup.active > div:last-child {
  animation-delay: 0.72s;
}
@media (prefers-reduced-motion: reduce) {
  #screen-signup.active > div:first-child,
  #screen-signup.active > .logo-box,
  #screen-signup.active > .input-group,
  #screen-signup.active > form,
  #screen-signup.active > .form-row,
  #screen-signup.active > .btn-primary,
  #screen-signup.active > p,
  #screen-signup.active > .or-row,
  #screen-signup.active > div:last-child,
  #screen-login.active > .logo-box,
  #screen-login.active > h2,
  #screen-login.active > p,
  #screen-login.active > div {
    animation: none;
    transition: none;
  }
}
@media (prefers-color-scheme: dark) {
  #screen-signup .back-btn,
  #screen-signup .input-field,
  #screen-login .input-field,
  #screen-signup .form-row,
  #screen-signup .social-btn,
  #screen-login .social-btn {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
  }
  #screen-signup .input-field:focus,
  #screen-login .input-field:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(205, 217, 197, 0.34);
    box-shadow: 0 0 0 4px rgba(168, 181, 160, 0.1);
  }
}

/* RESET / CHANGE PASSWORD POLISH */
#screen-reset,
#screen-change-password {
  align-items: center;
}
#screen-reset {
  padding: 46px 24px 40px !important;
}
#screen-change-password {
  padding: 0 24px 40px !important;
}
#screen-reset > *,
#screen-change-password > * {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
#screen-reset > .logo-box {
  width: 150px;
  height: 150px;
  border-radius: 0;
  background: transparent;
  margin-bottom: 22px !important;
  box-shadow: none;
}
#screen-reset > .logo-box img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}
#screen-reset h2 {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 8px !important;
}
#screen-reset h2 + p,
#screen-change-password > p {
  color: var(--text2);
  font-size: 14px;
  line-height: 1.38;
  font-weight: 600;
}
#screen-reset h2 + p {
  margin-bottom: 26px !important;
}
#screen-change-password .top-bar {
  padding: 24px 0 18px !important;
}
#screen-change-password .back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.58);
  border: 1px solid rgba(168, 181, 160, 0.16);
  color: var(--text2);
}
#screen-change-password .top-bar-title {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
}
#screen-change-password > p {
  max-width: 320px;
  margin-bottom: 24px !important;
  text-align: center;
}
#screen-reset .input-group,
#screen-change-password .input-group {
  margin-bottom: 14px;
}
#screen-reset .input-group label,
#screen-change-password .input-group label {
  color: var(--text2);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 7px;
}
#screen-reset .input-field,
#screen-change-password .input-field {
  background: rgba(255, 253, 249, 0.76);
  border: 1px solid rgba(168, 181, 160, 0.2);
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(96, 76, 91, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
#screen-reset .input-field:focus,
#screen-change-password .input-field:focus {
  background: rgba(255, 253, 249, 0.94);
  border-color: rgba(168, 181, 160, 0.72);
  box-shadow: 0 0 0 4px rgba(168, 181, 160, 0.12);
}
#screen-reset .input-icon,
#screen-change-password .input-icon {
  opacity: 0.68;
}
#screen-reset .btn-primary,
#screen-change-password .btn-primary {
  margin-bottom: 14px !important;
}
#reset-success,
#change-success {
  background: rgba(120, 160, 110, 0.22) !important;
  border: 1px solid rgba(100, 145, 90, 0.4);
  border-radius: 18px !important;
  box-shadow: 0 6px 18px rgba(96, 76, 91, 0.05);
}
#reset-success p,
#change-success p {
  color: #1c4a28 !important;
  font-weight: 700 !important;
}
#screen-reset.active > .logo-box,
#screen-reset.active > h2,
#screen-reset.active > p,
#screen-reset.active > div:not(.logo-box),
#screen-change-password.active > .top-bar,
#screen-change-password.active > p,
#screen-change-password.active > form,
#screen-change-password.active > .btn-primary,
#screen-change-password.active > #change-success {
  animation: welcomeRise 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#screen-reset.active > .logo-box,
#screen-change-password.active > .top-bar {
  animation-delay: 0s;
}
#screen-reset.active > h2,
#screen-change-password.active > p {
  animation-delay: 0.08s;
}
#screen-reset.active > p,
#screen-change-password.active > form {
  animation-delay: 0.16s;
}
#screen-reset.active > div:not(.logo-box),
#screen-change-password.active > .btn-primary {
  animation-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  #screen-reset.active > .logo-box,
  #screen-reset.active > h2,
  #screen-reset.active > p,
  #screen-reset.active > div:not(.logo-box),
  #screen-change-password.active > .top-bar,
  #screen-change-password.active > p,
  #screen-change-password.active > form,
  #screen-change-password.active > .btn-primary,
  #screen-change-password.active > #change-success {
    animation: none;
    transition: none;
  }
}
@media (prefers-color-scheme: dark) {
  #screen-reset .input-field,
  #screen-change-password .input-field,
  #screen-change-password .back-btn {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
  }
  #screen-reset .input-field:focus,
  #screen-change-password .input-field:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(205, 217, 197, 0.34);
    box-shadow: 0 0 0 4px rgba(168, 181, 160, 0.1);
  }
  #reset-success,
  #change-success {
    background: rgba(205, 217, 197, 0.2) !important;
    border-color: rgba(205, 217, 197, 0.3);
    box-shadow: none;
  }
  #reset-success p,
  #change-success p {
    color: #cdd9c5 !important;
  }
}

/* OR DIVIDER */
.or-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}
.or-row::before,
.or-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.or-row span {
  font-size: 12px;
  color: var(--text3);
}

/* SCROLL NO SCROLLBAR */
.scroll-content::-webkit-scrollbar {
  display: none;
}

/* ONBOARDING IMAGE CIRCLE */
.onboard-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-light), var(--purple-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  margin: 0 auto 32px;
  overflow: hidden;
}

/* ── LH SCANNER ── */
.lh-scan-option {
  background: var(--card2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  transition: all 0.15s;
  color: var(--text);
  display: block;
  width: 100%;
}
.lh-scan-option:active {
  transform: scale(0.97);
}

.lh-scan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  margin-top: 10px;
  border: 1.5px solid rgba(110, 142, 120, 0.28);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #f8fbf4 0%, #e7f2e4 100%);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--sage-dark);
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(82, 111, 86, 0.12);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.lh-scan-btn:active {
  transform: scale(0.98);
  box-shadow: 0 3px 10px rgba(82, 111, 86, 0.14);
}
.lh-scan-btn.secondary,
.lh-scan-btn-inline {
  background: var(--glass-card);
  border-color: var(--border);
  color: var(--text2);
  box-shadow: none;
}
.lh-scan-btn-inline {
  margin-top: 12px;
}
.lh-scan-btn-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(168, 181, 160, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sage-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}

.lh-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--border);
  border-top-color: var(--sage);
  border-radius: 50%;
  animation: lhSpin 0.75s linear infinite;
  margin: 0 auto;
}
@keyframes lhSpin {
  to {
    transform: rotate(360deg);
  }
}

.lh-result-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 14px;
}

.lh-guide-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  height: 68%;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  pointer-events: none;
}
.lh-guide-label {
  position: absolute;
  bottom: calc(16% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
}

.lh-history-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}
.lh-history-stat {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(72, 88, 72, 0.08);
}
.lh-history-stat strong {
  display: block;
  font-size: 20px;
  color: var(--text);
  line-height: 1.1;
}
.lh-history-stat span {
  display: block;
  margin-top: 3px;
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.lh-history-hero {
  margin-top: 16px;
  margin-bottom: 10px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(168, 181, 160, 0.28);
  border-radius: var(--radius);
  background:
    linear-gradient(
      135deg,
      rgba(255, 247, 232, 0.78),
      rgba(231, 242, 228, 0.92)
    ),
    var(--card);
  box-shadow: 0 12px 32px rgba(84, 94, 76, 0.12);
}
.lh-history-hero-top {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
}
.lh-history-hero-main {
  min-width: 0;
}
.lh-history-kicker {
  color: var(--sage-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  margin-bottom: 4px;
}
.lh-history-hero h3,
.lh-history-section h3 {
  margin-bottom: 3px;
}
.lh-history-copy {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}
.lh-history-scan-btn {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  white-space: nowrap;
}
.lh-history-section {
  margin-bottom: 10px;
  padding: 16px;
  border: 1px solid rgba(168, 181, 160, 0.16);
}
.lh-history-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.lh-section-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--card2);
  color: var(--sage-dark);
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}
.lh-progression-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 8px;
}
.lh-progression-day {
  min-width: 54px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--glass-card);
  padding: 8px 7px;
  text-align: center;
  flex-shrink: 0;
}
.lh-progression-day .day {
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.lh-progression-day .result {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.lh-result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.lh-result-badge.negative,
.lh-progression-day.negative {
  background: var(--card2);
  color: var(--text2);
}
.lh-result-badge.high,
.lh-progression-day.high {
  background: #fff3d8;
  color: #9a6718;
  border-color: #f0d38a;
}
.lh-result-badge.peak,
.lh-progression-day.peak {
  background: #e5f4ea;
  color: #2d6f4d;
  border-color: #b8d8c3;
}
.lh-scan-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass-card);
  margin-bottom: 10px;
}
.lh-scan-thumb,
.lh-compare-image {
  width: 100%;
  border-radius: 8px;
  background: var(--card2);
  border: 1px solid var(--border);
  object-fit: contain;
}
.lh-scan-thumb {
  height: 76px;
}
.lh-no-photo {
  width: 100%;
  height: 76px;
  border-radius: 8px;
  background: var(--card2);
  border: 1px dashed var(--border);
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  line-height: 1.25;
}
.lh-scan-card-main {
  min-width: 0;
}
.lh-scan-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.lh-scan-meta {
  color: var(--text3);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 4px;
}
.lh-scan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.lh-inline-action {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 9px;
  cursor: pointer;
}
.lh-inline-action.danger {
  color: #b25b5b;
}
.lh-scan-detail {
  grid-column: 1 / -1;
  display: none;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}
.lh-compare-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
#lh-compare-output {
  margin-top: 14px;
}
.lh-compare-controls select {
  width: 100%;
  border: 1px solid rgba(168, 181, 160, 0.28);
  background: var(--card2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 11px;
}
.lh-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.lh-compare-panel {
  background: var(--glass-card);
  border: 1px solid rgba(168, 181, 160, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px;
  box-shadow: 0 8px 20px rgba(60, 66, 56, 0.07);
}
.lh-compare-image {
  height: 118px;
}
.lh-privacy-note {
  color: var(--text3);
  font-size: 11px;
  line-height: 1.35;
  font-style: italic;
}
.lh-history-hero {
  padding: 12px 14px 11px;
  box-shadow: 0 8px 24px rgba(84, 94, 76, 0.09);
}
.lh-history-hero-top {
  align-items: stretch;
}
.lh-history-hero h3 {
  font-size: 16px;
  line-height: 1.2;
}
.lh-history-copy {
  font-size: 11.5px;
  line-height: 1.45;
}
.lh-history-summary {
  gap: 6px;
  margin-top: 8px;
}
.lh-history-stat {
  padding: 8px 7px;
  border-radius: 8px;
  box-shadow: none;
}
.lh-history-stat strong {
  font-size: 14px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lh-history-stat span {
  font-size: 9px;
  margin-top: 2px;
}
.lh-history-scan-btn {
  min-width: 0;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--sage);
  border-color: var(--sage);
  color: white;
  box-shadow: 0 8px 18px rgba(84, 114, 86, 0.18);
}
.lh-history-scan-btn .lh-scan-btn-icon {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.22);
  color: white;
  font-size: 15px;
  line-height: 1;
}
.lh-history-section {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}
.lh-history-section h3 {
  font-size: 15px;
  line-height: 1.25;
}
.lh-section-chip {
  min-width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 12px;
}
.lh-empty-state {
  border: 1px dashed rgba(168, 181, 160, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(168, 181, 160, 0.08);
  padding: 14px;
  color: var(--text2);
  animation: lhFadeIn 0.22s ease both;
}
.lh-empty-state strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 3px;
}
.lh-empty-state span {
  font-size: 12px;
  line-height: 1.45;
}
.lh-progression-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3px 0 7px;
}
.lh-progress-step {
  position: relative;
  min-width: 50px;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--text3);
  flex-shrink: 0;
  animation: lhFadeUp 0.24s ease both;
}
.lh-progress-step::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.lh-progress-step:first-child::before {
  left: 50%;
}
.lh-progress-step:last-child::before {
  right: 50%;
}
.lh-progress-dot {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--card);
  background: var(--border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.lh-progress-step.has-result .lh-progress-dot {
  transform: scale(1.03);
}
.lh-progress-step.negative .lh-progress-dot {
  background: #c8d8c0;
}
.lh-progress-step.high .lh-progress-dot {
  background: #f5c842;
}
.lh-progress-step.peak .lh-progress-dot {
  background: #8fb99a;
  box-shadow: 0 0 0 3px rgba(143, 185, 154, 0.22);
}
.lh-progress-step.missing .lh-progress-dot {
  background: transparent;
  border-color: var(--border);
  border-style: dashed;
}
.lh-progress-label {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: var(--text3);
}
.lh-progress-result {
  min-height: 12px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: var(--text2);
}
.lh-progression-legend {
  color: var(--text3);
  font-size: 10.5px;
  line-height: 1.35;
  margin-top: 2px;
}
.lh-history-filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1px 0 10px;
  margin-top: -1px;
}
#lh-history-list {
  max-height: min(430px, 48vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  margin-right: -4px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 142, 106, 0.45) transparent;
}
#lh-history-list::-webkit-scrollbar {
  width: 5px;
}
#lh-history-list::-webkit-scrollbar-track {
  background: transparent;
}
#lh-history-list::-webkit-scrollbar-thumb {
  background: rgba(122, 142, 106, 0.35);
  border-radius: 999px;
}
.lh-filter-tab {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 7px 10px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}
.lh-filter-tab.active {
  background: var(--sage);
  border-color: var(--sage);
  color: white;
}
.lh-scan-card {
  grid-template-columns: 88px minmax(0, 1fr);
  padding: 10px;
  gap: 11px;
  border-color: rgba(168, 181, 160, 0.18);
  box-shadow: 0 6px 18px rgba(65, 70, 60, 0.06);
  animation: lhFadeUp 0.24s ease both;
}
.lh-thumb-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  width: 88px;
  height: 68px;
  border-radius: 9px;
  overflow: hidden;
}
.lh-scan-thumb,
.lh-no-photo {
  width: 88px;
  height: 68px;
  border-radius: 9px;
}
.lh-scan-thumb,
.lh-compare-image {
  object-fit: contain;
  object-position: center;
}
.lh-no-photo {
  font-size: 10.5px;
  background: rgba(168, 181, 160, 0.08);
}
.lh-scan-meta {
  font-size: 11px;
  margin-top: 5px;
}
.lh-scan-support {
  margin-top: 4px;
  color: var(--text3);
  font-size: 10.5px;
  line-height: 1.35;
}
.lh-scan-actions {
  gap: 5px;
  margin-top: 8px;
}
.lh-inline-action {
  padding: 5px 8px;
  font-size: 10.5px;
  background: var(--card2);
}
.lh-inline-action.danger {
  background: transparent;
  border-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}
.lh-compare-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lh-compare-chevron {
  transition: transform 0.2s ease;
}
.lh-section-toggle-control {
  display: grid;
  grid-template-columns: auto 22px;
  align-items: center;
  justify-content: flex-end;
  justify-items: center;
  column-gap: 7px;
  min-height: 24px;
}
.lh-section-toggle-label {
  display: block;
  color: var(--text3);
  font-size: 10px;
  font-weight: 800;
  line-height: 24px;
}
.lh-section-toggle-control .lh-section-chip {
  min-width: 22px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  line-height: 1;
  transform: translateY(-1px);
}
.lh-compare-section.open .lh-compare-chevron,
.lh-saved-scans-section.open .lh-compare-chevron {
  transform: translateY(-1px) rotate(180deg);
}
.lh-compare-body,
.lh-saved-scans-body {
  display: none;
  animation: lhFadeUp 0.22s ease both;
}
.lh-compare-section.open .lh-compare-body,
.lh-saved-scans-section.open .lh-saved-scans-body {
  display: block;
}
.lh-compare-grid {
  gap: 8px;
}
.lh-compare-panel {
  padding: 8px;
}
.lh-compare-image,
.lh-compare-panel .lh-no-photo {
  height: 82px !important;
  border-radius: 8px;
}
.lh-image-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(24, 16, 36, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lh-image-viewer-backdrop.open {
  display: flex;
  animation: lhFadeIn 0.18s ease both;
}
.lh-image-viewer-panel {
  width: min(100%, 420px);
  background: var(--glass-card);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.lh-image-viewer-panel img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--card2);
}
.lh-image-viewer-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
}
.lh-action-modal {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 18px max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  background: rgba(36, 26, 48, 0.5);
}
.lh-action-modal.open {
  display: flex;
  animation: lhFadeIn 0.18s ease both;
}
.lh-action-modal-panel {
  width: min(100%, 430px);
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  padding: 22px 20px 20px;
  border-radius: var(--radius);
  background: var(--glass-card);
  box-shadow: var(--shadow-lg);
  animation: lhFadeUp 0.2s ease both;
}
.lh-action-modal-title {
  font-size: 17px;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 7px;
}
.lh-action-modal-copy {
  color: var(--text2);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.lh-action-modal-note {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text3);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.lh-action-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lh-action-modal-cancel,
.lh-action-modal-danger {
  border-radius: var(--radius-pill);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.lh-action-modal-cancel {
  border: 1.5px solid var(--border);
  background: var(--glass-card);
  color: var(--text2);
}
.lh-action-modal-danger {
  border: 1.5px solid rgba(178, 91, 91, 0.2);
  background: #b25b5b;
  color: white;
}
.lh-action-modal-danger:disabled {
  opacity: 0.65;
  cursor: default;
}
.lh-latest-insight,
.lh-compare-preview {
  margin-top: 7px;
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
}
.lh-latest-insight {
  display: none;
  padding: 7px 9px;
  border: 1px solid rgba(168, 181, 160, 0.2);
  border-radius: 9px;
  background: rgba(168, 181, 160, 0.08);
}
.lh-compare-preview {
  color: var(--text3);
  font-weight: 800;
}
.lh-progress-step {
  min-width: 48px;
  gap: 4px;
}
.lh-progress-today {
  min-height: 10px;
  color: var(--sage-dark);
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;
}
.lh-progress-dot {
  width: 20px;
  height: 20px;
}
.lh-progress-step::before {
  top: 24px;
}
.lh-progress-step.latest .lh-progress-dot {
  transform: scale(1.16);
  box-shadow:
    0 0 0 3px rgba(168, 181, 160, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.lh-progress-step.latest.peak .lh-progress-dot {
  box-shadow:
    0 0 0 4px rgba(143, 185, 154, 0.28),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.lh-progress-label {
  font-size: 9.5px;
  line-height: 1.1;
}
.lh-progress-result {
  font-size: 8.5px;
  line-height: 1.15;
}
.lh-progress-latest {
  min-height: 10px;
  color: var(--sage-dark);
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;
}
.lh-scan-card {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
  margin-bottom: 8px;
  border-color: rgba(168, 181, 160, 0.2);
  box-shadow: 0 5px 14px rgba(65, 70, 60, 0.045);
}
.lh-thumb-button,
.lh-scan-thumb,
.lh-no-photo {
  width: 78px;
  height: 58px;
  border-radius: 8px;
}
.lh-thumb-button {
  min-height: 58px;
}
.lh-no-photo {
  flex-direction: column;
  gap: 4px;
  border-color: rgba(168, 181, 160, 0.34);
  color: var(--text2);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.12;
  background: rgba(168, 181, 160, 0.075);
}
.lh-no-photo-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
  border: 1.6px solid currentColor;
  border-radius: 4px;
  opacity: 0.55;
}
.lh-no-photo-icon::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform: translateY(-50%);
}
.lh-result-badge {
  min-height: 22px;
  padding: 4px 8px;
  font-size: 10.5px;
}
.lh-scan-meta {
  margin-top: 3px;
  font-size: 10.7px;
  line-height: 1.25;
  color: var(--text2);
}
.lh-scan-support {
  margin-top: 2px;
  font-size: 10.2px;
  line-height: 1.22;
}
.lh-scan-actions {
  margin-top: 6px;
  gap: 5px;
}
.lh-inline-action {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(65, 70, 60, 0.035);
}
.lh-inline-action.danger {
  box-shadow: none;
  opacity: 0.82;
}
@keyframes lhFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lhFadeUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-color-scheme: dark) {
  #screen-lh-scan,
  #screen-lh-result,
  #screen-lh-history {
    background:
      radial-gradient(
        circle at 0% 50%,
        var(--app-pink-glow),
        transparent 28rem
      ),
      radial-gradient(
        circle at 100% 50%,
        var(--app-lavender-glow),
        transparent 26rem
      ),
      radial-gradient(
        circle at 50% 55%,
        var(--app-purple-wash),
        transparent 24rem
      ),
      linear-gradient(
        90deg,
        var(--app-cream),
        var(--app-cream-2) 50%,
        var(--app-cream)
      );
  }
  #screen-lh-history {
    background:
      radial-gradient(
        circle at 50% 55%,
        rgba(138, 170, 120, 0.07),
        transparent 34%
      ),
      radial-gradient(
        circle at 0% 50%,
        var(--app-pink-glow),
        transparent 28rem
      ),
      radial-gradient(
        circle at 100% 50%,
        var(--app-lavender-glow),
        transparent 26rem
      ),
      linear-gradient(
        90deg,
        var(--app-cream),
        var(--app-cream-2) 50%,
        var(--app-cream)
      );
  }
  .lh-history-hero {
    background:
      linear-gradient(135deg, rgba(76, 62, 43, 0.46), rgba(52, 77, 58, 0.58)),
      var(--card);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .lh-history-section {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  }
  .lh-history-stat,
  .lh-compare-panel {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .lh-scan-card {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }
  .lh-empty-state,
  .lh-no-photo {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.16);
    color: #bfb7c4;
  }
  .lh-filter-tab {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.13);
    color: #c8becd;
  }
  .lh-filter-tab.active {
    background: var(--sage-dark);
    border-color: var(--sage);
    color: #fff;
  }
  .lh-section-chip {
    background: rgba(255, 255, 255, 0.07);
    color: #c9d9c1;
  }
  .lh-inline-action {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.13);
    color: #d8cedc;
  }
  .lh-inline-action.danger {
    color: #e0a0a0;
    background: transparent;
    border-color: transparent;
  }
  .lh-scan-meta,
  .lh-progress-result,
  .lh-latest-insight {
    color: #d0c6d4;
  }
  .lh-scan-support,
  .lh-compare-preview,
  .lh-progression-legend,
  .lh-progress-label {
    color: #aaa0af;
  }
  .lh-latest-insight {
    background: rgba(138, 170, 120, 0.12);
    border-color: rgba(138, 170, 120, 0.22);
  }
  .lh-progress-dot {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.045);
  }
  .lh-progress-step::before {
    background: rgba(255, 255, 255, 0.11);
  }
  #lh-history-list {
    scrollbar-color: rgba(200, 190, 205, 0.38) transparent;
  }
  #lh-history-list::-webkit-scrollbar-thumb {
    background: rgba(200, 190, 205, 0.28);
  }
}

#screen-lh-scan,
#screen-lh-result,
#screen-lh-history {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 0% 50%, var(--app-pink-glow), transparent 28rem),
    radial-gradient(
      circle at 100% 50%,
      var(--app-lavender-glow),
      transparent 26rem
    ),
    radial-gradient(
      circle at 50% 55%,
      var(--app-purple-wash),
      transparent 24rem
    ),
    linear-gradient(
      90deg,
      var(--app-cream),
      var(--app-cream-2) 50%,
      var(--app-cream)
    );
}

#screen-lh-scan.active,
#screen-lh-result.active {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 850;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#screen-lh-history.active {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: lhHistoryFadeIn 0.22s ease;
}
@keyframes lhHistoryFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
         GLASS MODAL SYSTEM — Soft premium glassmorphism
         Matches PCOSense onboarding & welcome screen aesthetic
      ═══════════════════════════════════════════════════════════════ */

/* Warm plum backdrops — override HTML inline-style backgrounds */
#edit-period-modal,
#delete-period-modal,
#delete-dialog,
#log-date-picker-modal {
  background: rgba(36, 26, 48, 0.46) !important;
}

/* Bottom-sheet panels and centered modal inner divs: warm frosted glass */
.doctor-report-panel,
.period-cycle-timeline-panel,
.insight-detail-panel,
#edit-period-modal > div,
#delete-period-modal > div,
#log-date-picker-modal > div,
#delete-dialog > div {
  background: linear-gradient(
    160deg,
    rgba(255, 252, 250, 0.88) 0%,
    rgba(247, 240, 252, 0.84) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid rgba(210, 195, 218, 0.38) !important;
  box-shadow:
    0 -8px 40px rgba(80, 40, 100, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

/* Centered floating panels: glass with drop shadow */
.lh-image-viewer-panel,
.lh-action-modal-panel {
  background: linear-gradient(
    160deg,
    rgba(255, 252, 250, 0.9) 0%,
    rgba(247, 240, 252, 0.86) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid rgba(210, 195, 218, 0.38) !important;
  box-shadow:
    0 8px 40px rgba(80, 40, 100, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

/* Dark mode: deep plum glass */
@media (prefers-color-scheme: dark) {
  .doctor-report-panel,
  .period-cycle-timeline-panel,
  .insight-detail-panel,
  #edit-period-modal > div,
  #delete-period-modal > div,
  #log-date-picker-modal > div,
  #delete-dialog > div {
    background: linear-gradient(
      160deg,
      rgba(58, 44, 72, 0.88) 0%,
      rgba(46, 34, 58, 0.84) 100%
    ) !important;
  }
  .log-saved-card {
    background: linear-gradient(
      160deg,
      rgba(58, 44, 72, 0.96) 0%,
      rgba(40, 30, 55, 0.92) 100%
    );
    border-color: rgba(197, 185, 201, 0.22);
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .lh-image-viewer-panel,
  .lh-action-modal-panel {
    background: linear-gradient(
      160deg,
      rgba(58, 44, 72, 0.9) 0%,
      rgba(46, 34, 58, 0.86) 100%
    ) !important;
  }
}

/* Dark mode border visibility fix: keeps light mode untouched */
@media (prefers-color-scheme: dark) {
  .card,
  .insight-card,
  .featured-insight-card,
  .supporting-insight-card,
  .health-check-card,
  .mini-chart,
  .prediction-meta-item,
  .doctor-report-panel,
  .period-cycle-timeline-panel,
  .insight-detail-panel,
  .doctor-report-range-controls,
  .lh-scan-card,
  .lh-scan-thumb,
  .lh-compare-image,
  .lh-no-photo {
    border: 1px solid rgba(197, 185, 201, 0.34) !important;
  }

  .nav-bar {
    border-color: rgba(197, 185, 201, 0.34) !important;
  }

  .btn-outline,
  .option-btn,
  .lh-option,
  .chip,
  .status-chip,
  .lh-inline-action,
  .prediction-confidence-pill,
  .period-btn,
  textarea,
  select,
  input[type="date"],
  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="number"],
  .input-field {
    border-color: rgba(197, 185, 201, 0.38) !important;
  }

  .btn-outline:active,
  .option-btn:active,
  .lh-option:active,
  .chip:active,
  .lh-inline-action:active {
    border-color: rgba(232, 220, 196, 0.58) !important;
  }

  .doctor-report-section,
  .doctor-report-heading,
  .prediction-detail-panel,
  .lh-scan-detail,
  .setting-row {
    border-color: rgba(197, 185, 201, 0.28) !important;
  }
}

/* Dark mode graph + popout line visibility fix */
@media (prefers-color-scheme: dark) {
  :root {
    --border: rgba(197, 185, 201, 0.34);
    --divider: rgba(197, 185, 201, 0.28);
  }

  /* Pop-out panel outer edges */
  .doctor-report-panel,
  .period-cycle-timeline-panel,
  .insight-detail-panel,
  #edit-period-modal > div,
  #delete-period-modal > div,
  #log-date-picker-modal > div,
  #log-saved-msg > div,
  #delete-dialog > div {
    border: 1px solid rgba(197, 185, 201, 0.22) !important;
    box-shadow:
      0 -8px 40px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  .lh-image-viewer-panel,
  .lh-action-modal-panel {
    border: 1px solid rgba(197, 185, 201, 0.22) !important;
    box-shadow:
      0 8px 40px rgba(0, 0, 0, 0.52),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  /* Pop-out internal divider lines */
  .doctor-report-section,
  .doctor-report-heading,
  .doctor-report-range-controls,
  .period-cycle-timeline-body [style*="border-bottom"],
  .period-cycle-timeline-body [style*="border-top"],
  .insight-detail-panel [style*="border-bottom"],
  .insight-detail-panel [style*="border-top"],
  .prediction-detail-panel,
  .setting-row,
  .lh-scan-detail,
  .lh-action-modal-note {
    border-color: rgba(197, 185, 201, 0.32) !important;
  }

  /* Graph/timeline grid lines that use SVG strokes */
  svg line[stroke="var(--border)"],
  svg circle[stroke="var(--text3)"],
  svg rect[stroke="var(--text3)"] {
    stroke: rgba(197, 185, 201, 0.42) !important;
  }

  /* Mini graph containers and timeline rows */
  .mini-chart,
  .timeline-scroll,
  #timeline-scroll,
  .tl-cells-row {
    border-color: rgba(197, 185, 201, 0.3) !important;
  }

  /* Buttons with inline border:none still need visible close/action borders in dark mode */
  .insight-detail-panel button,
  .doctor-report-panel button,
  .period-cycle-timeline-panel button,
  .lh-action-modal-panel button,
  #edit-period-modal button,
  #log-date-picker-modal button {
    border-color: rgba(197, 185, 201, 0.36) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
         HOME SCREEN — Refined Modern Design System
         Mirrors design language from Cycle Insights & LH Scan History
      ═══════════════════════════════════════════════════════════════ */

/* ── Header ── */
.home-header {
  padding: 18px 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-greeting {
  font-size: 23px;
  font-weight: 700;
  margin: 3px 0 0;
  color: var(--text);
  line-height: 1.2;
}

/* ── Notification banners ── */
.home-notif-banner {
  display: flex;
  background: var(--glass-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  align-items: flex-start;
  gap: 10px;
}
.home-notif-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.home-notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.home-notif-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}
.home-notif-dismiss {
  background: none;
  border: none;
  padding: 4px;
  color: var(--text3);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}
.home-reminder-banner {
  display: flex;
  background: linear-gradient(
    135deg,
    rgba(237, 217, 240, 0.6),
    rgba(224, 215, 229, 0.5)
  );
  border: 1px solid rgba(168, 145, 176, 0.22);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 12px;
  align-items: center;
  gap: 10px;
}
.home-reminder-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.home-reminder-sub {
  font-size: 12px;
  color: var(--text2);
}
.home-reminder-btn {
  background: var(--sage);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.home-reminder-dismiss {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--text3);
  cursor: pointer;
  font-family: inherit;
}

/* ── Hero Card ── */
.home-hero-card {
  border-radius: var(--radius);
  padding: 19px 18px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(168, 181, 160, 0.28);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(224, 215, 229, 0.48),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(242, 240, 244, 0.72),
      rgba(168, 181, 160, 0.18) 62%,
      transparent
    ),
    var(--card);
}
.home-hero-card.home-hero-low {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(224, 215, 229, 0.56),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(244, 239, 247, 0.84),
      rgba(168, 181, 160, 0.16) 60%,
      transparent
    ),
    var(--card);
  border-color: rgba(224, 215, 229, 0.44);
}
.home-hero-card.home-hero-rising {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 181, 160, 0.48),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.62),
      rgba(224, 215, 229, 0.28) 60%,
      transparent
    ),
    var(--card);
  border-color: rgba(168, 181, 160, 0.42);
}
.home-hero-card.home-hero-high {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(126, 200, 160, 0.5),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.78),
      rgba(245, 200, 66, 0.16) 58%,
      transparent
    ),
    var(--card);
  border-color: rgba(126, 200, 160, 0.42);
}
.home-hero-card.home-hero-ovulation {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(240, 184, 110, 0.44),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(248, 238, 218, 0.72),
      rgba(232, 220, 196, 0.36) 58%,
      transparent
    ),
    var(--card);
  border-color: rgba(232, 184, 96, 0.36);
}
.home-hero-card.home-hero-menstrual {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(212, 165, 165, 0.46),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 232, 232, 0.68),
      rgba(224, 215, 229, 0.22) 58%,
      transparent
    ),
    var(--card);
  border-color: rgba(212, 165, 165, 0.38);
}

.home-hero-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.home-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 11px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid var(--border);
  color: var(--text2);
  /* JS overrides bg/color per fertility status */
}
.home-hero-title {
  font-size: clamp(19px, 5.5vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--text);
  letter-spacing: -0.3px;
}
.home-hero-sub {
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: 14px;
}
.home-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.home-hero-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 10px;
}
.home-hero-disclaimer {
  font-size: 11px;
  color: var(--text2);
  font-style: italic;
  margin: 0;
}

/* ── Section label row ── */
.home-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 7px;
}

/* ── Period Card ── */
.home-period-card {
  padding: 16px !important;
}
.home-period-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.home-period-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(212, 165, 165, 0.14);
  border: 1px solid rgba(212, 165, 165, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.home-period-started {
  font-size: 11px;
  color: var(--text3);
  margin: 0 0 1px;
}
.home-period-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.home-flow-btn {
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(212, 165, 165, 0.12);
  border: 1.5px solid var(--coral);
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.home-period-day {
  font-size: 14px;
  font-weight: 600;
  color: var(--coral);
}
.home-period-flow-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}
.home-view-link {
  font-size: 12px;
  color: var(--sage);
  cursor: pointer;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.home-period-actions {
  display: flex;
  gap: 8px;
}
.home-prev-period-btn {
  margin-top: 8px;
  width: 100%;
  border: 1px solid rgba(192, 80, 100, 0.22);
  background: rgba(192, 80, 100, 0.05);
  color: rgba(170, 60, 80, 0.76);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-prev-period-btn:active {
  background: rgba(192, 80, 100, 0.1);
  border-color: rgba(192, 80, 100, 0.36);
  transform: scale(0.98);
}

@media (prefers-color-scheme: dark) {
  .home-prev-period-btn {
    border-color: rgba(232, 150, 160, 0.22);
    background: rgba(232, 150, 160, 0.07);
    color: rgba(220, 160, 168, 0.82);
  }
  .home-prev-period-btn:active {
    background: rgba(232, 150, 160, 0.13);
    border-color: rgba(232, 150, 160, 0.36);
  }
}

[data-theme="light"] .home-prev-period-btn {
  border-color: rgba(192, 80, 100, 0.22) !important;
  background: rgba(192, 80, 100, 0.05) !important;
  color: rgba(170, 60, 80, 0.76) !important;
}
[data-theme="dark"] .home-prev-period-btn {
  border-color: rgba(232, 150, 160, 0.22) !important;
  background: rgba(232, 150, 160, 0.07) !important;
  color: rgba(220, 160, 168, 0.82) !important;
}

/* ── Period calendar action buttons ── */
.period-cal-toggle,
.period-cal-confirm,
.period-cal-cancel {
  padding: 11px 10px;
  border-radius: var(--radius-pill);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Unselected toggle + Cancel: frosted glass ghost */
.period-cal-toggle,
.period-cal-cancel {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(168, 181, 160, 0.26);
  color: var(--text2);
}

/* Selected toggle + Confirm: sage glass primary */
.period-cal-toggle.active,
.period-cal-confirm {
  background: linear-gradient(135deg, #b2c4a6 0%, #89aa79 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border: none;
  font-size: 14px;
  padding: 12px 10px;
  box-shadow:
    0 4px 14px rgba(110, 148, 90, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.period-cal-cancel {
  font-size: 14px;
  padding: 12px 10px;
}

.period-cal-toggle:active,
.period-cal-confirm:active,
.period-cal-cancel:active {
  transform: scale(0.97);
}

@media (prefers-color-scheme: dark) {
  .period-cal-toggle,
  .period-cal-cancel {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(197, 185, 201, 0.22);
  }
  .period-cal-toggle.active,
  .period-cal-confirm {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

[data-theme="light"] .period-cal-toggle:not(.active),
[data-theme="light"] .period-cal-cancel {
  background: rgba(255, 255, 255, 0.52) !important;
  border-color: rgba(168, 181, 160, 0.26) !important;
  color: var(--text2) !important;
}
[data-theme="light"] .period-cal-toggle.active,
[data-theme="light"] .period-cal-confirm {
  background: linear-gradient(135deg, #b2c4a6 0%, #89aa79 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow:
    0 4px 14px rgba(110, 148, 90, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
[data-theme="dark"] .period-cal-toggle:not(.active),
[data-theme="dark"] .period-cal-cancel {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(197, 185, 201, 0.22) !important;
  color: var(--text2) !important;
}
[data-theme="dark"] .period-cal-toggle.active,
[data-theme="dark"] .period-cal-confirm {
  background: linear-gradient(135deg, #b2c4a6 0%, #89aa79 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ── LH Card ── */
.home-lh-card {
  background: var(--glass-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid rgba(106, 171, 170, 0.18);
  box-shadow: var(--shadow);
}
.home-lh-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.home-lh-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
}
.home-lh-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.home-add-btn {
  font-size: 20px;
  color: var(--text3);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  background: none;
  border: none;
  padding: 4px;
  font-family: inherit;
}
.home-lh-question {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 10px;
}
.home-lh-panel {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.home-lh-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.home-lh-actions .lh-scan-btn {
  flex: 1;
  margin-top: 0 !important;
}

/* ── Quick Log Grid ── */
.home-quick-log-grid {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.home-quick-log-item {
  flex: 1;
  background: var(--glass-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.home-quick-log-item:active {
  transform: scale(0.96);
  box-shadow: none;
}
.home-quick-log-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.home-quick-log-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.home-quick-log-hint {
  font-size: 10px;
  color: var(--text3);
  line-height: 1.2;
}
.home-quick-log-add {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 15px;
  color: var(--text3);
  line-height: 1;
  pointer-events: none;
}

/* ── Trends grid ── */
.home-trends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

/* ── Affirmation ── */
.home-affirmation-wrap {
  text-align: center;
  padding: 8px 12px 6px;
}
.home-affirmation {
  font-size: 13px;
  color: var(--text3);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .home-hero-card {
    border-color: rgba(197, 185, 201, 0.18);
  }
  .home-hero-card.home-hero-low {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(104, 80, 143, 0.42),
        transparent 36%
      ),
      linear-gradient(
        135deg,
        rgba(61, 53, 66, 0.95),
        rgba(45, 36, 69, 0.85) 60%
      ),
      var(--card);
    border-color: rgba(104, 80, 143, 0.28);
  }
  .home-hero-card.home-hero-rising {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(100, 150, 100, 0.38),
        transparent 36%
      ),
      linear-gradient(
        135deg,
        rgba(35, 58, 38, 0.95),
        rgba(26, 48, 32, 0.88) 60%
      ),
      var(--card);
    border-color: rgba(100, 150, 100, 0.24);
  }
  .home-hero-card.home-hero-high {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(60, 140, 120, 0.42),
        transparent 36%
      ),
      linear-gradient(
        135deg,
        rgba(24, 52, 48, 0.95),
        rgba(30, 80, 72, 0.88) 60%
      ),
      var(--card);
    border-color: rgba(60, 140, 120, 0.24);
  }
  .home-hero-card.home-hero-ovulation {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(200, 150, 50, 0.38),
        transparent 36%
      ),
      linear-gradient(
        135deg,
        rgba(48, 36, 16, 0.95),
        rgba(80, 52, 24, 0.88) 60%
      ),
      var(--card);
    border-color: rgba(200, 150, 50, 0.22);
  }
  .home-hero-card.home-hero-menstrual {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(180, 80, 90, 0.4),
        transparent 36%
      ),
      linear-gradient(
        135deg,
        rgba(56, 24, 24, 0.95),
        rgba(88, 40, 40, 0.88) 60%
      ),
      var(--card);
    border-color: rgba(180, 80, 90, 0.24);
  }
  .home-hero-tag {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .home-period-icon {
    background: rgba(212, 165, 165, 0.1);
    border-color: rgba(212, 165, 165, 0.16);
    filter: brightness(0.85) saturate(0.75);
  }
  .home-lh-card {
    background: var(--card);
    border-color: rgba(106, 171, 170, 0.12);
  }
  .home-quick-log-item {
    background: var(--card);
  }
  .home-quick-log-icon-wrap {
    filter: brightness(0.7) saturate(0.7);
  }
  .home-reminder-banner {
    background: linear-gradient(
      135deg,
      rgba(74, 66, 80, 0.8),
      rgba(61, 53, 66, 0.8)
    );
    border-color: rgba(197, 185, 201, 0.14);
  }
}

/* ═══════════════════════════════════════════════════════════════
         LOG SCREEN — Refined Modern Design System
         Mirrors design language from Cycle Insights & LH Scan History
      ═══════════════════════════════════════════════════════════════ */

/* ── Page heading ── */
.log-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}
.log-page-sub {
  font-size: 13px;
  color: var(--text2);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ── Tip banner ── */
.log-tip-banner {
  background: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.log-tip-icon {
  color: var(--sage);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.log-tip-text {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.5;
  margin: 0;
}

/* ── Log card override (tighter padding) ── */
.log-card {
  padding: 15px 16px !important;
  margin-bottom: 10px;
}

/* ── Card header ── */
.log-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.log-icon-chip {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.log-icon-chip.blood {
  background: rgba(212, 165, 165, 0.14);
  border-color: rgba(212, 165, 165, 0.26);
}
.log-icon-chip.teal {
  background: rgba(106, 171, 170, 0.12);
  border-color: rgba(106, 171, 170, 0.24);
}
.log-icon-chip.sage {
  background: rgba(168, 181, 160, 0.14);
  border-color: rgba(168, 181, 160, 0.28);
}
.log-icon-chip.mint {
  background: rgba(100, 200, 160, 0.12);
  border-color: rgba(100, 200, 160, 0.22);
}
.log-icon-chip.purple {
  background: rgba(155, 53, 212, 0.09);
  border-color: rgba(155, 53, 212, 0.18);
}
.log-icon-chip.energy {
  background: rgba(240, 184, 110, 0.14);
  border-color: rgba(240, 184, 110, 0.26);
}
.log-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.log-card-sub {
  font-size: 11.5px;
  color: var(--text3);
  margin: 0;
  line-height: 1.4;
}

/* ── Gradient accent cards ── */
.log-lh-card {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(106, 171, 170, 0.2),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(238, 248, 246, 0.7),
      rgba(210, 238, 234, 0.28) 60%,
      transparent
    ),
    var(--card);
  border-color: rgba(106, 171, 170, 0.28) !important;
}
.log-flow-card {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(212, 165, 165, 0.22),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(255, 238, 238, 0.68),
      rgba(248, 218, 218, 0.2) 60%,
      transparent
    ),
    var(--card);
  border-color: rgba(212, 165, 165, 0.28) !important;
}

/* ── Flow insight box ── */
.log-flow-insight {
  background: rgba(255, 232, 230, 0.55);
  border: 1px solid rgba(212, 165, 165, 0.22);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.log-flow-insight-text {
  font-size: 12px;
  color: #a05040;
  margin: 0;
  line-height: 1.5;
}

/* ── LH insight row ── */
.log-lh-insight {
  display: flex;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 500;
  align-items: center;
  gap: 8px;
  background: rgba(106, 171, 170, 0.1);
  border: 1px solid rgba(106, 171, 170, 0.2);
  color: var(--sage);
  margin-bottom: 10px;
}

/* ── Mucus insight row ── */
.log-mucus-insight {
  background: var(--card2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Input label ── */
.log-input-label {
  font-size: 11.5px;
  color: var(--sage);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 7px;
  display: block;
}

/* ── Checkbox row ── */
.log-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.log-checkbox-label {
  font-size: 12.5px;
  color: var(--text2);
}

/* ── Notes card ── */
.log-notes-card {
  margin-bottom: 20px !important;
}
.log-notes-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}

/* ── Save button (elevated) ── */
#log-save-btn {
  background: linear-gradient(135deg, #a8b5a0 0%, #8fa887 100%);
  box-shadow: 0 4px 18px rgba(168, 181, 160, 0.4);
  font-weight: 700;
  letter-spacing: 0.2px;
}
#log-save-btn:active {
  box-shadow: 0 2px 8px rgba(168, 181, 160, 0.2);
}

/* ── Log screen dark mode ── */
@media (prefers-color-scheme: dark) {
  .log-tip-banner {
    background: var(--card);
    border-color: rgba(197, 185, 201, 0.12);
  }
  .log-lh-card {
    background:
      radial-gradient(
        circle at 88% 12%,
        rgba(60, 120, 120, 0.3),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(20, 42, 40, 0.9),
        rgba(14, 32, 30, 0.6) 60%,
        transparent
      ),
      var(--card);
    border-color: rgba(60, 120, 120, 0.22) !important;
  }
  .log-flow-card {
    background:
      radial-gradient(
        circle at 88% 12%,
        rgba(160, 80, 80, 0.3),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        rgba(44, 20, 20, 0.92),
        rgba(52, 24, 24, 0.6) 60%,
        transparent
      ),
      var(--card);
    border-color: rgba(160, 80, 80, 0.22) !important;
  }
  .log-lh-insight {
    background: rgba(60, 120, 120, 0.16);
    border-color: rgba(60, 120, 120, 0.2);
  }
  .log-flow-insight {
    background: rgba(160, 80, 80, 0.14);
    border-color: rgba(160, 80, 80, 0.2);
  }
  .log-flow-insight-text {
    color: #d08070;
  }
  .log-icon-chip.blood {
    background: rgba(180, 100, 100, 0.18);
    border-color: rgba(180, 100, 100, 0.24);
  }
  .log-icon-chip.teal {
    background: rgba(60, 120, 120, 0.2);
    border-color: rgba(60, 120, 120, 0.28);
  }
  .log-icon-chip.sage {
    background: rgba(100, 130, 100, 0.2);
    border-color: rgba(100, 130, 100, 0.28);
  }
  .log-icon-chip.mint {
    background: rgba(60, 160, 120, 0.18);
    border-color: rgba(60, 160, 120, 0.26);
  }
  .log-icon-chip.purple {
    background: rgba(100, 40, 160, 0.18);
    border-color: rgba(100, 40, 160, 0.26);
  }
  .log-icon-chip.energy {
    background: rgba(180, 120, 40, 0.18);
    border-color: rgba(180, 120, 40, 0.26);
  }
  #log-save-btn {
    background: linear-gradient(135deg, #7a8f74 0%, #637a5e 100%);
    box-shadow: 0 4px 16px rgba(100, 130, 100, 0.26);
  }
}

/* ═══════════════════════════════════════════════════════════════
         PROFILE SCREEN — Premium Glass Design System
         Mirrors design language from Cycle Insights & LH Scan History
      ═══════════════════════════════════════════════════════════════ */

/* ── Profile header card ── */
.prof-header-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 22px 20px 18px;
  margin-bottom: 14px;
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(224, 215, 229, 0.52),
      transparent 46%
    ),
    linear-gradient(
      135deg,
      rgba(244, 241, 248, 0.9),
      rgba(168, 181, 160, 0.14) 68%,
      transparent
    ),
    var(--card);
  border: 1px solid rgba(168, 145, 176, 0.22);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.prof-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--sage-light),
    rgba(148, 161, 140, 0.85)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
  box-shadow: 0 4px 14px rgba(168, 181, 160, 0.38);
  border: 2.5px solid rgba(255, 255, 255, 0.72);
  flex-shrink: 0;
}
.prof-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
  letter-spacing: -0.1px;
}
.prof-email {
  font-size: 12px;
  color: var(--text3);
  margin: 0;
}
.prof-edit-btn {
  position: absolute;
  top: 13px;
  right: 13px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  font-family: "Nunito", "DM Sans", sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.prof-edit-btn:active {
  opacity: 0.7;
}

/* ── Stats grid ── */
.prof-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.prof-stat-card {
  background: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  box-shadow: var(--shadow);
}
.prof-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 4px;
}
.prof-stat-value {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

/* ── Section labels ── */
.prof-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text3);
  text-transform: uppercase;
  margin: 6px 0 6px 2px;
}

/* ── Settings cards ── */
.prof-settings-card {
  padding: 0 !important;
  margin-bottom: 14px;
  overflow: hidden;
}

/* ── Setting rows ── */
.prof-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.prof-row:last-child {
  border-bottom: none;
}
.prof-row.tappable {
  cursor: pointer;
}
.prof-row.tappable:active {
  background: var(--card2);
}

/* ── Profile icon chips ── */
.prof-icon-chip {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.prof-icon-chip.sage {
  background: rgba(168, 181, 160, 0.14);
  border-color: rgba(168, 181, 160, 0.26);
}
.prof-icon-chip.teal {
  background: rgba(106, 171, 170, 0.12);
  border-color: rgba(106, 171, 170, 0.24);
}
.prof-icon-chip.purple {
  background: rgba(155, 53, 212, 0.09);
  border-color: rgba(155, 53, 212, 0.18);
}
.prof-icon-chip.amber {
  background: rgba(240, 184, 110, 0.14);
  border-color: rgba(240, 184, 110, 0.26);
}
.prof-icon-chip.blue {
  background: rgba(100, 140, 220, 0.12);
  border-color: rgba(100, 140, 220, 0.2);
}
.prof-icon-chip.coral {
  background: rgba(240, 78, 94, 0.09);
  border-color: rgba(240, 78, 94, 0.18);
}
.prof-icon-chip.mint {
  background: rgba(100, 200, 160, 0.12);
  border-color: rgba(100, 200, 160, 0.22);
}
.prof-icon-chip.danger {
  background: rgba(220, 70, 70, 0.09);
  border-color: rgba(220, 70, 70, 0.18);
}
.prof-icon-chip.lavender {
  background: rgba(224, 215, 229, 0.3);
  border-color: rgba(168, 145, 176, 0.2);
}

/* ── Row info ── */
.prof-row-info {
  flex: 1;
  min-width: 0;
}
.prof-row-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1px;
  line-height: 1.3;
}
.prof-row-sub {
  font-size: 11.5px;
  color: var(--text3);
  margin: 0;
  line-height: 1.4;
}
.prof-row-sub.danger {
  color: var(--error);
}

/* ── Chevron ── */
.prof-chevron {
  font-size: 17px;
  color: var(--text3);
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.55;
}

/* ── Reminder time picker ── */
.prof-time-expanded {
  padding: 12px 15px 14px;
  border-top: 1px solid var(--border);
}
.prof-time-hint {
  font-size: 11.5px;
  color: var(--text3);
  margin: 0 0 8px;
}
.prof-time-note {
  font-size: 11.5px;
  font-style: italic;
  color: var(--text3);
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ── Logout button ── */
.prof-logout-btn {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--coral);
  border: 1.5px solid rgba(240, 78, 94, 0.38);
  border-radius: var(--radius-pill);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.2px;
}
.prof-logout-btn:active {
  background: rgba(240, 78, 94, 0.06);
  transform: scale(0.98);
}

/* ── Version footer ── */
.prof-version {
  text-align: center;
  font-size: 11.5px;
  color: var(--text3);
  margin: 0;
  padding-bottom: 2px;
}

/* ── Profile dark mode ── */
@media (prefers-color-scheme: dark) {
  .prof-header-card {
    background:
      radial-gradient(
        circle at 85% 12%,
        rgba(104, 80, 143, 0.4),
        transparent 46%
      ),
      linear-gradient(
        135deg,
        rgba(54, 46, 62, 0.96),
        rgba(38, 30, 54, 0.92) 68%
      ),
      var(--card);
    border-color: rgba(104, 80, 143, 0.24);
  }
  .prof-avatar {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .prof-edit-btn {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text3);
    backdrop-filter: none;
  }
  .prof-stat-card {
    background: var(--card);
  }
  .prof-settings-card {
    border-color: rgba(197, 185, 201, 0.12);
  }
  .prof-row.tappable:active {
    background: rgba(255, 255, 255, 0.04);
  }
  .prof-icon-chip.sage {
    background: rgba(100, 130, 100, 0.2);
    border-color: rgba(100, 130, 100, 0.28);
  }
  .prof-icon-chip.teal {
    background: rgba(60, 120, 120, 0.2);
    border-color: rgba(60, 120, 120, 0.28);
  }
  .prof-icon-chip.purple {
    background: rgba(100, 40, 160, 0.18);
    border-color: rgba(100, 40, 160, 0.26);
  }
  .prof-icon-chip.amber {
    background: rgba(180, 120, 40, 0.18);
    border-color: rgba(180, 120, 40, 0.26);
  }
  .prof-icon-chip.blue {
    background: rgba(60, 100, 180, 0.16);
    border-color: rgba(60, 100, 180, 0.22);
  }
  .prof-icon-chip.coral {
    background: rgba(200, 60, 70, 0.14);
    border-color: rgba(200, 60, 70, 0.22);
  }
  .prof-icon-chip.mint {
    background: rgba(60, 160, 120, 0.18);
    border-color: rgba(60, 160, 120, 0.26);
  }
  .prof-icon-chip.danger {
    background: rgba(180, 60, 60, 0.16);
    border-color: rgba(180, 60, 60, 0.24);
  }
  .prof-icon-chip.lavender {
    background: rgba(104, 80, 143, 0.18);
    border-color: rgba(104, 80, 143, 0.26);
  }
  .prof-logout-btn {
    border-color: rgba(240, 78, 94, 0.28);
  }
}

/* ═══════════════════════════════════════════════════════════════
         EDIT PROFILE SCREEN — matches Profile design language
      ═══════════════════════════════════════════════════════════════ */

/* ── Avatar section ── */
.edit-avatar-section {
  text-align: center;
  padding: 16px 0 22px;
}
.edit-avatar-circle {
  width: 72px !important;
  height: 72px !important;
  font-size: 32px !important;
  cursor: pointer;
  overflow: hidden;
}
.edit-avatar-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 24px;
  height: 24px;
  background: var(--sage);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 2px solid var(--card);
  cursor: pointer;
  pointer-events: none;
}
.edit-avatar-hint {
  font-size: 12px;
  color: var(--text3);
  margin: 8px 0 0;
}

/* ── Inline input inside prof-row ── */
.edit-inline-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  padding: 0;
  -webkit-appearance: none;
}
.edit-inline-input::placeholder {
  color: var(--text3);
  font-weight: 400;
}
.edit-field-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0 0 3px;
}

/* ── Options card (padded, for option-group) ── */
.edit-options-card {
  padding: 14px 15px !important;
  margin-bottom: 14px;
}

/* ── Save button ── */
.edit-save-btn {
  background: linear-gradient(135deg, #a8b5a0 0%, #8fa887 100%) !important;
  box-shadow: 0 4px 18px rgba(168, 181, 160, 0.4);
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  margin-bottom: 12px;
}
.edit-save-btn:active {
  box-shadow: 0 2px 8px rgba(168, 181, 160, 0.2) !important;
  transform: scale(0.98);
}

/* ── Success message ── */
.edit-saved-msg {
  background: var(--glass-card);
  border: 1px solid rgba(168, 181, 160, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 2px;
  text-align: center;
}
.edit-saved-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--sage-dark);
  margin: 0;
}

/* ── Edit profile dark mode ── */
@media (prefers-color-scheme: dark) {
  .edit-avatar-badge {
    border-color: var(--card);
  }
  .edit-saved-msg {
    border-color: rgba(100, 130, 100, 0.2);
  }
  .edit-saved-text {
    color: var(--sage);
  }
}

/* ═══════════════════════════════════════════════════════════════
         LH SCAN & RESULT PAGES — Premium Glass Design System
         Mirrors design language from Cycle Insights & LH Scan History
      ═══════════════════════════════════════════════════════════════ */

/* ── Scan page intro ── */
.lhs-intro {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 20px;
  text-align: center;
}

/* ── Option grid ── */
.lhs-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* Refined scan option cards */
.lh-scan-option {
  background: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px 18px;
  text-align: center;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
  box-shadow: var(--shadow);
  display: block;
  width: 100%;
}
.lh-scan-option:active {
  transform: scale(0.96);
  box-shadow: none;
}
.lhs-option-icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
}
.lhs-option-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  border: 1px solid transparent;
}
.lhs-icon-sage {
  background: rgba(168, 181, 160, 0.16);
  border-color: rgba(168, 181, 160, 0.3);
  color: var(--sage-dark);
}
.lhs-icon-teal {
  background: rgba(106, 171, 170, 0.13);
  border-color: rgba(106, 171, 170, 0.26);
  color: #4a9e9d;
}
@media (prefers-color-scheme: dark) {
  .lhs-icon-sage {
    background: rgba(100, 130, 100, 0.22);
    border-color: rgba(100, 130, 100, 0.3);
    color: #a8c4a0;
  }
  .lhs-icon-teal {
    background: rgba(60, 120, 120, 0.22);
    border-color: rgba(60, 120, 120, 0.3);
    color: #6ab8b8;
  }
}
.lhs-option-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}
.lhs-option-sub {
  font-size: 11.5px;
  color: var(--text3);
  display: block;
}

/* ── Tip card ── */
.lhs-tip-card {
  background: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.lhs-tip-text {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.7;
  margin: 0 0 7px;
}
.lhs-privacy-text {
  font-size: 11.5px;
  color: var(--text3);
  margin: 0;
  line-height: 1.55;
  font-style: italic;
}

/* ── Preview container ── */
.lhs-preview-container {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #111;
  line-height: 0;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lhs-preview-hint {
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.5;
}
.lhs-preview-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Analyse button (elevated) ── */
.lhs-analyse-btn {
  background: linear-gradient(135deg, #a8b5a0 0%, #8fa887 100%) !important;
  box-shadow: 0 4px 18px rgba(168, 181, 160, 0.4);
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}
.lhs-analyse-btn:active {
  box-shadow: 0 2px 8px rgba(168, 181, 160, 0.2) !important;
  transform: scale(0.98);
}

/* ── Outline secondary button ── */
.lhs-outline-btn {
  width: 100%;
  background: var(--glass-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  font-family: "Nunito", "DM Sans", sans-serif;
  margin-bottom: 8px;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.lhs-outline-btn:active {
  background: var(--card2);
  transform: scale(0.98);
}

/* ── Ghost text button ── */
.lhs-ghost-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 10px;
  font-size: 13px;
  color: var(--text3);
  cursor: pointer;
  font-family: "Nunito", "DM Sans", sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Analyzing state ── */
.lhs-analyzing-wrap {
  text-align: center;
  padding-top: 72px;
}
.lhs-analyzing-title {
  font-size: 15px;
  color: var(--text2);
  margin: 20px 0 0;
  font-weight: 600;
}
.lhs-analyzing-sub {
  font-size: 12px;
  color: var(--text3);
  margin: 6px 0 0;
}

/* ── Result card (atmospheric glass) ── */
.lhs-result-card {
  border-radius: var(--radius);
  padding: 22px 20px 18px;
  margin-bottom: 12px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  flex-shrink: 0;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(106, 171, 170, 0.22),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      rgba(238, 248, 246, 0.78),
      rgba(210, 238, 234, 0.3) 60%,
      transparent
    ),
    var(--card);
  border: 1px solid rgba(106, 171, 170, 0.22);
}

/* ── Confidence row ── */
.lhs-confidence-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.lhs-confidence-label {
  font-size: 12px;
  color: var(--text3);
}

/* ── Quality note ── */
.lhs-quality-note {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
  margin: -4px 0 10px;
}

/* ── Explanation ── */
.lhs-explanation {
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 12px;
}

/* ── Disclaimer ── */
.lhs-disclaimer {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}

/* ── Thumbnail frame ── */
.lhs-thumb-frame {
  text-align: center;
  margin-bottom: 12px;
}
.lhs-thumb-frame img {
  height: 70px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  opacity: 0.72;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ── Result action groups ── */
.lhs-actions {
  display: flex;
  flex-direction: column;
}

/* ── Unclear reason card ── */
.lhs-unclear-card {
  background: var(--glass-card);
  border: 1px solid rgba(200, 175, 110, 0.28);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.lhs-unclear-reason {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  margin: 0 0 6px;
}
.lhs-unclear-tip {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.6;
  margin: 0;
}

/* ── Manual edit panel ── */
.lhs-manual-panel {
  margin-top: 10px;
  padding: 14px 15px !important;
}
.lhs-manual-label {
  font-size: 12.5px;
  color: var(--text2);
  margin: 0 0 10px;
  font-weight: 500;
}

/* ── LH scan/result dark mode ── */
@media (prefers-color-scheme: dark) {
  .lh-scan-option {
    background: var(--card);
    border-color: rgba(197, 185, 201, 0.14);
    box-shadow: none;
  }
  .lhs-tip-card {
    background: var(--card);
    border-color: rgba(197, 185, 201, 0.12);
  }
  .lhs-result-card {
    background:
      radial-gradient(
        circle at 88% 12%,
        rgba(60, 120, 120, 0.3),
        transparent 44%
      ),
      linear-gradient(
        135deg,
        rgba(20, 42, 40, 0.92),
        rgba(14, 32, 30, 0.7) 60%,
        transparent
      ),
      var(--card);
    border-color: rgba(60, 120, 120, 0.2);
  }
  .lhs-outline-btn {
    background: var(--card);
    border-color: rgba(197, 185, 201, 0.14);
  }
  .lhs-unclear-card {
    background: var(--card);
    border-color: rgba(180, 140, 60, 0.18);
  }
  .lhs-thumb-frame img {
    border-color: rgba(197, 185, 201, 0.16);
    opacity: 0.6;
  }
}

/* ══════════════════════════════════════════════════════════════
         AUTH DESIGN SYSTEM — glass-inspired
         Matches Cycle Insights / LH History visual standard
         ══════════════════════════════════════════════════════════════ */

/* ── Screen layout resets ── */
#screen-login,
#screen-signup,
#screen-reset {
  padding: 0 !important;
  align-items: stretch !important;
  text-align: left !important;
  justify-content: flex-start;
  overflow-y: auto;
}
#screen-change-password {
  padding: 0 !important;
  align-items: stretch !important;
  overflow-y: auto;
}

/* Prevent old staggered auth animations from firing on wrapper */
.auth-wrap {
  animation: none !important;
}

/* ── Auth wrap — centers content ── */
.auth-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 22px 44px;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  gap: 0;
}
.auth-wrap-padded {
  justify-content: flex-start;
  padding-top: 0;
}

/* ── Logo / header ── */
.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 360px;
  margin-bottom: 16px;
  position: relative;
}
.auth-header-signup {
  margin-bottom: 14px;
}
.auth-logo {
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
  flex-shrink: 0;
}
.auth-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
.auth-title {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.1;
}
.auth-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  line-height: 1.42;
  margin: 0;
  max-width: 280px;
}

/* ── Glass auth card ── */
.auth-card {
  width: 100%;
  max-width: 360px;
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(224, 215, 229, 0.44),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(244, 241, 248, 0.94) 0%,
      rgba(168, 181, 160, 0.1) 65%,
      transparent
    ),
    var(--card);
  border: 1px solid rgba(168, 145, 176, 0.18);
  border-radius: var(--radius);
  box-shadow:
    0 12px 36px rgba(84, 70, 100, 0.09),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 20px 18px 18px;
}

/* ── Input overrides inside auth card ── */
.auth-input-group {
  margin-bottom: 12px !important;
}
.auth-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--text3) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px !important;
  display: block;
}
.auth-input {
  background: rgba(255, 253, 249, 0.68) !important;
  border: 1px solid rgba(168, 181, 160, 0.2) !important;
  border-radius: 12px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  font-size: 14px !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
  box-shadow: 0 2px 6px rgba(96, 76, 91, 0.04) !important;
}
.auth-input:focus {
  background: rgba(255, 253, 249, 0.98) !important;
  border-color: rgba(168, 181, 160, 0.65) !important;
  box-shadow:
    0 0 0 3px rgba(168, 181, 160, 0.14),
    0 2px 6px rgba(96, 76, 91, 0.04) !important;
  outline: none;
}
.auth-field-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  display: flex;
  align-items: center;
  font-size: 0;
  pointer-events: none;
  opacity: 0.75;
}

/* ── Primary action button ── */
.auth-btn-primary {
  width: 100%;
  padding: 13px 16px;
  background: linear-gradient(135deg, #b2c4a6 0%, #89aa79 100%);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.15px;
  box-shadow:
    0 4px 16px rgba(110, 148, 90, 0.26),
    0 1px 4px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
  margin-top: 4px;
  margin-bottom: 12px;
  -webkit-tap-highlight-color: transparent;
}
.auth-btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(110, 148, 90, 0.18);
  background: linear-gradient(135deg, #a0b494 0%, #7a9a6e 100%);
}
.auth-btn-primary:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  transform: none;
}
.auth-btn-primary.loading {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.btn-spinner {
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite !important;
  flex-shrink: 0;
}
.btn-spinner-purple {
  display: block;
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(124, 79, 160, 0.25);
  border-top-color: #7c4fa0;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
  margin: 0 auto;
}
@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Helper / switch text ── */
.auth-switch-text {
  text-align: center;
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
  margin: 0 0 2px;
  line-height: 1.5;
}
.auth-forgot-row {
  text-align: right;
  margin: 0 0 12px;
}
.auth-forgot-row .text-link {
  font-size: 12px;
  color: var(--text3);
  font-weight: 700;
  transition: color 0.12s ease;
}
.auth-forgot-row .text-link:active {
  color: var(--sage);
}

/* ── Or divider ── */
.auth-or-row {
  margin: 10px 0 10px !important;
  opacity: 0.85;
}

/* ── Social auth ── */
.auth-social-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-social-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 16px;
  background: rgba(255, 253, 249, 0.7);
  border: 1px solid rgba(168, 181, 160, 0.2);
  border-radius: 12px;
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(96, 76, 91, 0.05);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.auth-social-btn:active {
  transform: scale(0.97);
  box-shadow: none;
  background: rgba(255, 253, 249, 0.5);
}

/* ── Back button (absolute, for header) ── */
.auth-back-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.62);
  border: 1px solid rgba(168, 181, 160, 0.18);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.auth-back-btn:active {
  background: rgba(168, 181, 160, 0.2);
}
/* Inline back button (not absolute) */
.auth-back-inline {
  position: static;
  flex-shrink: 0;
}

/* ── Top bar for change password ── */
.auth-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 360px;
  padding: 28px 0 14px;
}
.auth-top-bar-title {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.1px;
  flex: 1;
}
.auth-page-desc {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
  text-align: center;
  max-width: 300px;
  line-height: 1.45;
  margin: 0 auto 14px;
}

/* ── Terms row ── */
.auth-terms-row {
  background: rgba(255, 253, 249, 0.46) !important;
  border: 1px solid rgba(168, 181, 160, 0.14) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin-bottom: 14px !important;
  align-items: flex-start !important;
}

/* ── Success message ── */
.auth-success-msg {
  background: rgba(120, 160, 110, 0.22);
  border: 1px solid rgba(100, 145, 90, 0.4);
  border-radius: 12px;
  padding: 11px 14px;
  margin: 0 0 8px;
}
.auth-success-msg p {
  color: #1c4a28;
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

/* ── Entry animations ── */
#screen-login.active .auth-header,
#screen-signup.active .auth-header,
#screen-reset.active .auth-header {
  animation: welcomeRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0s !important;
}
#screen-login.active .auth-card,
#screen-signup.active .auth-card,
#screen-reset.active .auth-card {
  animation: welcomeRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0.11s !important;
}
#screen-change-password.active .auth-top-bar {
  animation: welcomeRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0s !important;
}
#screen-change-password.active .auth-page-desc {
  animation: welcomeRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0.08s !important;
}
#screen-change-password.active .auth-card {
  animation: welcomeRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 0.16s !important;
}
@media (prefers-reduced-motion: reduce) {
  #screen-login.active .auth-header,
  #screen-login.active .auth-card,
  #screen-signup.active .auth-header,
  #screen-signup.active .auth-card,
  #screen-reset.active .auth-header,
  #screen-reset.active .auth-card,
  #screen-change-password.active .auth-top-bar,
  #screen-change-password.active .auth-page-desc,
  #screen-change-password.active .auth-card {
    animation: none !important;
  }
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .auth-card {
    background:
      radial-gradient(
        circle at 88% 10%,
        rgba(100, 80, 120, 0.3),
        transparent 44%
      ),
      linear-gradient(
        135deg,
        rgba(80, 70, 95, 0.88) 0%,
        rgba(62, 55, 72, 0.6) 65%,
        transparent
      ),
      var(--card);
    border-color: rgba(197, 185, 201, 0.13);
    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .auth-input {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(197, 185, 201, 0.13) !important;
    color: var(--text) !important;
    box-shadow: none !important;
  }
  .auth-input:focus {
    background: rgba(255, 255, 255, 0.085) !important;
    border-color: rgba(205, 217, 197, 0.36) !important;
    box-shadow: 0 0 0 3px rgba(168, 181, 160, 0.12) !important;
  }
  .auth-social-btn {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(197, 185, 201, 0.13);
    color: var(--text);
    box-shadow: none;
  }
  .auth-social-btn:active {
    background: rgba(255, 255, 255, 0.085);
  }
  .auth-back-btn {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(197, 185, 201, 0.13);
    color: var(--text2);
  }
  .auth-back-btn:active {
    background: rgba(255, 255, 255, 0.085);
  }
  .auth-terms-row {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(197, 185, 201, 0.12) !important;
  }
  .auth-success-msg {
    background: rgba(168, 181, 160, 0.24);
    border-color: rgba(168, 181, 160, 0.36);
  }
  .auth-success-msg p {
    color: #cdd9c5;
  }
  .auth-forgot-row .text-link {
    color: var(--text3);
  }
  .auth-or-row {
    opacity: 0.6;
  }
  .auth-btn-primary,
  .btn-primary {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.32),
      0 1px 4px rgba(0, 0, 0, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* ── Forced LIGHT theme (data-theme="light") ─────────────────────────── */
:root[data-theme="light"] {
  --bg: #f3e5f5;
  --bg2: #edd9f0;
  --card: #faf7f2;
  --card2: #faf7f2;
  --sage: #a8b5a0;
  --sage-dark: #7a8e6a;
  --sage-light: #c5d4bb;
  --pink: #d4a5a5;
  --pink-light: #f5d0d0;
  --coral: #d4a5a5;
  --coral-light: #f5c4b0;
  --purple: #e0d7e5;
  --purple-light: #edd9f0;
  --amber: #e8dcc4;
  --amber-light: #f0dfa0;
  --teal: #6aabaa;
  --teal-light: #c0dedd;
  --text: #3d3d3d;
  --text2: #706c6c;
  --text3: #bdbdbd;
  --border: rgba(0, 0, 0, 0.08);
  --success: #81c784;
  --error: #e57373;
  --accent: #e8dcc4;
  --divider: #e0d7e5;
  --surface: #faf7f2;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --app-cream: #fff8f1;
  --app-cream-2: #faf2fb;
  --app-pink-glow: rgba(212, 165, 165, 0.2);
  --app-lavender-glow: rgba(128, 86, 170, 0.14);
  --app-purple-wash: rgba(237, 217, 240, 0.34);
  --app-grid: rgba(128, 86, 170, 0.045);
  --glass-card: #faf7f2;
  --glass-card-strong: #faf7f2;
  --conf-high: #7aaf90;
  --conf-medium: #b09060;
  --conf-low: #b07080;
  --insight-sage-bg: rgba(168, 193, 150, 0.2);
  --insight-sage-fg: #5a7a50;
  --lh-peak-bg: rgba(192, 48, 96, 0.08);
  --lh-peak-fg: #c03060;
  --lh-high-bg: rgba(200, 160, 32, 0.12);
  --lh-high-fg: #906820;
  --lh-neg-bg: rgba(0, 0, 0, 0.04);
  --lh-neg-fg: #888;
  --mucus-dry-bg: #f0ede8;
  --mucus-dry-fg: #806050;
  --mucus-sticky-bg: #f5e8c0;
  --mucus-sticky-fg: #806020;
  --mucus-creamy-bg: #e8f0d0;
  --mucus-creamy-fg: #507030;
  --mucus-watery-bg: #d0e8f8;
  --mucus-watery-fg: #305080;
  --mucus-ew-bg: #c0d8f8;
  --mucus-ew-fg: #204070;
  --period-active-bg: rgba(212, 96, 112, 0.12);
  --period-active-fg: #d4a5a5;
  --pred-range-bg: #d9cdf0;
  --pred-range-fg: #5a3090;
  --pred-range-sub: #8a70b0;
}
[data-theme="light"] .nav-bar {
  background: rgba(250, 247, 242, 0.97) !important;
}
[data-theme="light"] .option-btn {
  background: white;
  color: #3d3d3d;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .option-btn.selected {
  background: var(--sage-dark);
  color: white;
  border-color: var(--sage);
}
[data-theme="light"] .lh-option {
  background: white;
  color: #3d3d3d;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .lh-option.active {
  background: var(--sage-dark);
  color: white;
}
[data-theme="light"] .chip {
  background: white;
  color: #3d3d3d;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .chip.selected {
  background: var(--sage-dark);
  color: white;
}
[data-theme="light"] .period-btn.start {
  background: var(--pink) !important;
  color: white !important;
}
[data-theme="light"] .period-btn.end {
  background: white !important;
  color: #3d3d3d !important;
}
[data-theme="light"] .status-chip {
  background: white;
  color: #3d3d3d;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .status-chip.pink {
  background: #f5d0d0;
  color: #c03060;
}
[data-theme="light"] .status-chip.chip-red {
  background: #fce8e8 !important;
  border-color: #f2b8b8 !important;
  color: #9f4f4f !important;
}
[data-theme="light"] .status-chip.chip-yellow {
  background: #fff4cc !important;
  border-color: #f1d47d !important;
  color: #7a5a14 !important;
}
[data-theme="light"] .status-chip.chip-green {
  background: #eaf5e7 !important;
  border-color: #c7ddbf !important;
  color: #5a7d4b !important;
}
[data-theme="light"] .status-chip.chip-mint {
  background: #e4f5f0 !important;
  border-color: #b7dcd3 !important;
  color: #3c7568 !important;
}
[data-theme="light"] .status-chip.chip-blue {
  background: #e8f1ff !important;
  border-color: #bdd3f3 !important;
  color: #456b9a !important;
}
[data-theme="light"] .status-chip.chip-purple {
  background: #f0e9ff !important;
  border-color: #d5c4f4 !important;
  color: #68508f !important;
}
[data-theme="light"] .status-chip.chip-neutral {
  background: #f5f1f7 !important;
  border-color: #ded7e5 !important;
  color: #6f6575 !important;
}
[data-theme="light"] .icon-circle {
  filter: none;
}
[data-theme="light"] #reminder-banner {
  background: linear-gradient(135deg, #edd9f0, #e0d7e5) !important;
}
[data-theme="light"] .doctor-report-panel,
[data-theme="light"] .period-cycle-timeline-panel,
[data-theme="light"] .insight-detail-panel,
[data-theme="light"] .lh-image-viewer-panel,
[data-theme="light"] .lh-action-modal-panel,
[data-theme="light"] #edit-period-modal > div,
[data-theme="light"] #delete-period-modal > div,
[data-theme="light"] #log-date-picker-modal > div,
[data-theme="light"] #delete-dialog > div {
  background: linear-gradient(
    160deg,
    rgba(255, 252, 250, 0.88) 0%,
    rgba(247, 240, 252, 0.84) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid rgba(210, 195, 218, 0.38) !important;
  box-shadow:
    0 -8px 40px rgba(80, 40, 100, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
[data-theme="light"] #edit-period-modal,
[data-theme="light"] #delete-period-modal,
[data-theme="light"] #delete-dialog,
[data-theme="light"] #log-date-picker-modal {
  background: rgba(36, 26, 48, 0.46) !important;
}
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  color-scheme: light;
}
[data-theme="light"] * {
  scrollbar-color: var(--card2) var(--bg);
}
/* Profile section — undo dark media query overrides */
[data-theme="light"] .prof-header-card {
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(224, 215, 229, 0.52),
      transparent 46%
    ),
    linear-gradient(
      135deg,
      rgba(244, 241, 248, 0.9),
      rgba(168, 181, 160, 0.14) 68%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(168, 145, 176, 0.22) !important;
}
[data-theme="light"] .prof-avatar {
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 4px 14px rgba(168, 181, 160, 0.38) !important;
}
[data-theme="light"] .prof-edit-btn {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
[data-theme="light"] .prof-stat-card {
  background: var(--glass-card) !important;
}
[data-theme="light"] .prof-settings-card {
  border-color: rgba(168, 145, 176, 0.14) !important;
}
[data-theme="light"] .prof-row.tappable:active {
  background: rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .prof-icon-chip.sage {
  background: rgba(168, 181, 160, 0.18) !important;
  border-color: rgba(168, 181, 160, 0.28) !important;
}
[data-theme="light"] .prof-icon-chip.teal {
  background: rgba(106, 171, 170, 0.18) !important;
  border-color: rgba(106, 171, 170, 0.28) !important;
}
[data-theme="light"] .prof-icon-chip.purple {
  background: rgba(128, 86, 170, 0.1) !important;
  border-color: rgba(128, 86, 170, 0.18) !important;
}
[data-theme="light"] .prof-icon-chip.amber {
  background: rgba(232, 220, 196, 0.4) !important;
  border-color: rgba(200, 160, 80, 0.28) !important;
}
[data-theme="light"] .prof-icon-chip.blue {
  background: rgba(60, 100, 180, 0.1) !important;
  border-color: rgba(60, 100, 180, 0.18) !important;
}
[data-theme="light"] .prof-icon-chip.coral {
  background: rgba(200, 60, 70, 0.1) !important;
  border-color: rgba(200, 60, 70, 0.16) !important;
}
[data-theme="light"] .prof-icon-chip.mint {
  background: rgba(60, 160, 120, 0.1) !important;
  border-color: rgba(60, 160, 120, 0.18) !important;
}
[data-theme="light"] .prof-icon-chip.danger {
  background: rgba(180, 60, 60, 0.1) !important;
  border-color: rgba(180, 60, 60, 0.18) !important;
}
[data-theme="light"] .prof-icon-chip.lavender {
  background: rgba(128, 86, 170, 0.1) !important;
  border-color: rgba(128, 86, 170, 0.18) !important;
}
[data-theme="light"] .prof-logout-btn {
  border-color: rgba(240, 78, 94, 0.22) !important;
}
/* Log page cards — undo dark media query gradients */
[data-theme="light"] .log-lh-card {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(106, 171, 170, 0.2),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(238, 248, 246, 0.7),
      rgba(210, 238, 234, 0.28) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(106, 171, 170, 0.28) !important;
}
[data-theme="light"] .log-flow-card {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(212, 165, 165, 0.22),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(255, 238, 238, 0.68),
      rgba(248, 218, 218, 0.2) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(212, 165, 165, 0.28) !important;
}
[data-theme="light"] .log-lh-insight {
  background: rgba(106, 171, 170, 0.1) !important;
  border-color: rgba(106, 171, 170, 0.2) !important;
}
[data-theme="light"] .log-flow-insight {
  background: rgba(255, 232, 230, 0.55) !important;
  border-color: rgba(212, 165, 165, 0.22) !important;
}
[data-theme="light"] .log-flow-insight-text {
  color: #a05040 !important;
}
[data-theme="light"] .log-icon-chip.blood {
  background: rgba(212, 165, 165, 0.18) !important;
  border-color: rgba(212, 165, 165, 0.24) !important;
}
[data-theme="light"] .log-icon-chip.teal {
  background: rgba(106, 171, 170, 0.16) !important;
  border-color: rgba(106, 171, 170, 0.24) !important;
}
[data-theme="light"] .log-icon-chip.sage {
  background: rgba(168, 181, 160, 0.18) !important;
  border-color: rgba(168, 181, 160, 0.28) !important;
}
[data-theme="light"] .log-icon-chip.mint {
  background: rgba(60, 160, 120, 0.12) !important;
  border-color: rgba(60, 160, 120, 0.2) !important;
}
[data-theme="light"] .log-icon-chip.purple {
  background: rgba(128, 86, 170, 0.1) !important;
  border-color: rgba(128, 86, 170, 0.18) !important;
}
[data-theme="light"] .log-icon-chip.energy {
  background: rgba(232, 220, 196, 0.4) !important;
  border-color: rgba(200, 160, 80, 0.28) !important;
}
[data-theme="light"] #log-save-btn {
  background: linear-gradient(135deg, #9aaf94 0%, #7a9074 100%) !important;
  box-shadow: 0 4px 16px rgba(140, 170, 130, 0.3) !important;
}
/* Home page LH card & banners */
[data-theme="light"] .home-lh-card {
  background: var(--glass-card) !important;
  border-color: rgba(106, 171, 170, 0.18) !important;
}
[data-theme="light"] .home-quick-log-item {
  background: var(--card) !important;
}
[data-theme="light"] .home-quick-log-icon-wrap {
  filter: none !important;
}
[data-theme="light"] .home-reminder-banner {
  background: linear-gradient(
    135deg,
    rgba(237, 217, 240, 0.85),
    rgba(224, 215, 229, 0.8)
  ) !important;
  border-color: rgba(168, 145, 176, 0.18) !important;
}
/* LH Scan History — undo dark media query overrides */
[data-theme="light"] .lh-history-hero {
  background:
    linear-gradient(
      135deg,
      rgba(255, 247, 232, 0.78),
      rgba(231, 242, 228, 0.92)
    ),
    var(--card) !important;
  border-color: rgba(168, 181, 160, 0.28) !important;
}
[data-theme="light"] .lh-history-section {
  background: var(--glass-card) !important;
  border-color: rgba(168, 181, 160, 0.16) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="light"] .lh-history-stat,
[data-theme="light"] .lh-compare-panel {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.68) !important;
}
[data-theme="light"] .lh-scan-card {
  background: var(--glass-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="light"] .lh-empty-state,
[data-theme="light"] .lh-no-photo {
  background: rgba(168, 181, 160, 0.08) !important;
  border-color: rgba(168, 181, 160, 0.4) !important;
  color: var(--text2) !important;
}
[data-theme="light"] .lh-filter-tab {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
[data-theme="light"] .lh-filter-tab.active {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
  color: white !important;
}
[data-theme="light"] .lh-section-chip {
  background: var(--card2) !important;
  color: var(--sage-dark) !important;
}
[data-theme="light"] .lh-inline-action {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
[data-theme="light"] .lh-scan-meta,
[data-theme="light"] .lh-progress-result,
[data-theme="light"] .lh-latest-insight {
  color: var(--text2) !important;
}
[data-theme="light"] .lh-scan-support,
[data-theme="light"] .lh-compare-preview,
[data-theme="light"] .lh-progression-legend,
[data-theme="light"] .lh-progress-label {
  color: var(--text3) !important;
}
[data-theme="light"] .lh-latest-insight {
  background: rgba(168, 181, 160, 0.08) !important;
  border-color: rgba(168, 181, 160, 0.2) !important;
}
[data-theme="light"] .lh-progress-dot {
  border-color: var(--card) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .lh-progress-step::before {
  background: var(--border) !important;
}
/* Cycle Prediction card — undo dark hero gradients */
[data-theme="light"] .featured-insight-card.prediction-hero {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 181, 160, 0.34),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(224, 215, 229, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 72%),
    var(--card) !important;
  border-color: rgba(168, 181, 160, 0.32) !important;
}
[data-theme="light"]
  .featured-insight-card.prediction-hero.prediction-theme-menstrual {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(212, 165, 165, 0.46),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 232, 232, 0.68),
      rgba(224, 215, 229, 0.22) 58%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(212, 165, 165, 0.38) !important;
}
[data-theme="light"]
  .featured-insight-card.prediction-hero.prediction-theme-high,
[data-theme="light"]
  .featured-insight-card.prediction-hero.prediction-theme-ovulation {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(126, 200, 160, 0.5),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.78),
      rgba(245, 200, 66, 0.16) 58%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(126, 200, 160, 0.42) !important;
}
[data-theme="light"]
  .featured-insight-card.prediction-hero.prediction-theme-rising {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 181, 160, 0.48),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.62),
      rgba(224, 215, 229, 0.28) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(168, 181, 160, 0.42) !important;
}
[data-theme="light"]
  .featured-insight-card.prediction-hero.prediction-theme-low,
[data-theme="light"]
  .featured-insight-card.prediction-hero.prediction-theme-building {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(224, 215, 229, 0.56),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(244, 239, 247, 0.84),
      rgba(168, 181, 160, 0.16) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(224, 215, 229, 0.44) !important;
}
[data-theme="light"] .prediction-confidence-pill,
[data-theme="light"] .prediction-meta-item {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: var(--border) !important;
  backdrop-filter: none !important;
}
/* Auth screens — undo dark media query overrides */
[data-theme="light"] .auth-card {
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(224, 215, 229, 0.44),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(244, 241, 248, 0.94) 0%,
      rgba(168, 181, 160, 0.1) 65%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(168, 145, 176, 0.18) !important;
  box-shadow:
    0 12px 36px rgba(84, 70, 100, 0.09),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
[data-theme="light"] .auth-input {
  background: rgba(255, 253, 249, 0.68) !important;
  border-color: rgba(168, 181, 160, 0.2) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 6px rgba(96, 76, 91, 0.04) !important;
}
[data-theme="light"] .auth-input:focus {
  background: rgba(255, 253, 249, 0.98) !important;
  border-color: rgba(168, 181, 160, 0.65) !important;
  box-shadow:
    0 0 0 3px rgba(168, 181, 160, 0.14),
    0 2px 6px rgba(96, 76, 91, 0.04) !important;
}
[data-theme="light"] .auth-social-btn {
  background: rgba(255, 253, 249, 0.7) !important;
  border-color: rgba(168, 181, 160, 0.2) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(96, 76, 91, 0.05) !important;
}
[data-theme="light"] .auth-back-btn {
  background: rgba(255, 253, 249, 0.62) !important;
  border-color: rgba(168, 181, 160, 0.18) !important;
  color: var(--text2) !important;
}
[data-theme="light"] .auth-terms-row {
  background: rgba(255, 253, 249, 0.46) !important;
  border-color: rgba(168, 181, 160, 0.14) !important;
}
[data-theme="light"] .auth-success-msg {
  background: rgba(120, 160, 110, 0.22) !important;
  border-color: rgba(100, 145, 90, 0.4) !important;
}
[data-theme="light"] .auth-success-msg p {
  color: #1c4a28 !important;
}
[data-theme="light"] #reset-success,
[data-theme="light"] #change-success {
  background: rgba(120, 160, 110, 0.22) !important;
  border-color: rgba(100, 145, 90, 0.4) !important;
}
[data-theme="light"] #reset-success p,
[data-theme="light"] #change-success p {
  color: #1c4a28 !important;
}
[data-theme="light"] .auth-forgot-row .text-link {
  color: var(--sage-dark) !important;
}
[data-theme="light"] .auth-or-row {
  opacity: 1 !important;
}
[data-theme="light"] .auth-btn-primary,
[data-theme="light"] .btn-primary {
  box-shadow:
    0 4px 16px rgba(84, 70, 100, 0.13),
    0 1px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
/* LH Scan Result card — undo dark gradient */
[data-theme="light"] .lhs-result-card {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(106, 171, 170, 0.22),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      rgba(238, 248, 246, 0.78),
      rgba(210, 238, 234, 0.3) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(106, 171, 170, 0.22) !important;
}
[data-theme="light"] .lhs-outline-btn {
  background: white !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .lhs-unclear-card {
  background: var(--glass-card) !important;
  border-color: rgba(200, 175, 110, 0.28) !important;
}
[data-theme="light"] .lhs-thumb-frame img {
  border-color: var(--border) !important;
  opacity: 0.72 !important;
}
[data-theme="light"] .lhs-tip-card {
  background: var(--glass-card) !important;
  border-color: rgba(168, 181, 160, 0.2) !important;
}
/* Onboarding preview card — undo dark gradient */
[data-theme="light"] .onboard-insight-preview {
  background:
    radial-gradient(
      circle at 84% 14%,
      rgba(255, 213, 166, 0.32),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(250, 247, 242, 0.96),
      rgba(239, 232, 241, 0.86)
    ) !important;
  border-color: rgba(168, 181, 160, 0.3) !important;
  box-shadow: 0 14px 30px rgba(96, 76, 91, 0.09) !important;
}
[data-theme="light"] .onboard-insight-chip {
  background: rgba(255, 253, 249, 0.78) !important;
  border-color: rgba(168, 181, 160, 0.2) !important;
}
[data-theme="light"] .onboard-insight-orb {
  background: rgba(166, 129, 169, 0.16) !important;
}
[data-theme="light"] .onboard-insight-badge {
  background: rgba(168, 181, 160, 0.12) !important;
  color: rgba(113, 135, 104, 0.74) !important;
}
[data-theme="light"] .onboard-track-card {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(255, 213, 166, 0.18),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(252, 249, 246, 0.97),
      rgba(245, 240, 248, 0.92)
    ) !important;
  border-color: rgba(200, 188, 210, 0.24) !important;
  box-shadow:
    0 8px 24px rgba(96, 76, 91, 0.08),
    0 2px 0 rgba(255, 255, 255, 0.7) inset !important;
}
[data-theme="light"] .onboard-track-item::before {
  background: rgba(168, 181, 160, 0.5) !important;
}
[data-theme="light"] .ob1-seg {
  background: rgba(155, 118, 198, 0.18) !important;
}
[data-theme="light"] .ob1-seg-active {
  background: linear-gradient(
    90deg,
    rgba(155, 118, 198, 0.85),
    rgba(200, 178, 215, 0.75)
  ) !important;
}
[data-theme="light"] .ob1-track-name {
  color: var(--text) !important;
}
[data-theme="light"] .ob1-track-sub {
  color: var(--text3) !important;
}
[data-theme="light"] .ob1-track-divider {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 181, 160, 0.22),
    transparent
  ) !important;
}
[data-theme="light"] .ob1-chip-period {
  background: rgba(232, 107, 135, 0.12) !important;
  border-color: rgba(232, 107, 135, 0.28) !important;
  color: #c0466a !important;
}
[data-theme="light"] .ob1-chip-symptom {
  background: rgba(155, 118, 198, 0.12) !important;
  border-color: rgba(155, 118, 198, 0.28) !important;
  color: #6e44a8 !important;
}
[data-theme="light"] .ob1-chip-lh {
  background: rgba(255, 179, 71, 0.13) !important;
  border-color: rgba(220, 150, 40, 0.28) !important;
  color: #a06818 !important;
}
[data-theme="light"] .ob1-chip-insight {
  background: rgba(113, 155, 104, 0.12) !important;
  border-color: rgba(113, 155, 104, 0.28) !important;
  color: #3d7535 !important;
}
/* ob-q-screen (onboarding steps 2 & 3) — light forced */
[data-theme="light"] .ob-q-screen {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(212, 185, 222, 0.22) 0%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 90% 52%,
      rgba(255, 200, 178, 0.13) 0%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 10% 82%,
      rgba(168, 195, 160, 0.11) 0%,
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(248, 241, 251, 0.94) 0%,
      rgba(243, 235, 248, 0.9) 100%
    ) !important;
}
[data-theme="light"] .ob-card {
  background:
    radial-gradient(
      circle at 94% 6%,
      rgba(255, 213, 166, 0.14),
      transparent 38%
    ),
    linear-gradient(145deg, rgba(253, 250, 247, 0.97), rgba(246, 241, 252, 0.9)) !important;
  border-color: rgba(200, 188, 210, 0.22) !important;
}
[data-theme="light"] .ob-option {
  background: rgba(255, 253, 250, 0.78) !important;
  border-color: rgba(200, 185, 210, 0.22) !important;
  color: var(--text2) !important;
}
[data-theme="light"] .ob-option.selected {
  background: linear-gradient(
    135deg,
    rgba(155, 118, 198, 0.16),
    rgba(168, 181, 160, 0.12)
  ) !important;
  border-color: rgba(155, 118, 198, 0.5) !important;
  color: var(--text) !important;
}
[data-theme="light"] .ob3-seg {
  background: rgba(155, 118, 198, 0.14) !important;
}
[data-theme="light"] .ob3-seg-done {
  background: rgba(155, 118, 198, 0.42) !important;
}
[data-theme="light"] .ob3-seg-active {
  background: linear-gradient(
    90deg,
    rgba(155, 118, 198, 0.88),
    rgba(200, 178, 215, 0.75)
  ) !important;
}
/* Welcome screen product preview — undo dark gradient */
[data-theme="light"] .welcome-product-preview {
  background:
    radial-gradient(
      circle at 86% 12%,
      rgba(255, 213, 166, 0.34),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(250, 247, 242, 0.97),
      rgba(239, 232, 241, 0.86)
    ) !important;
  border-color: rgba(168, 181, 160, 0.32) !important;
}
[data-theme="light"] .welcome-preview-card,
[data-theme="light"] .welcome-signal-chip {
  background: rgba(255, 253, 249, 0.9) !important;
  border-color: rgba(168, 181, 160, 0.2) !important;
}
[data-theme="light"] .welcome-preview-badge {
  background: rgba(168, 181, 160, 0.12) !important;
  color: rgba(113, 135, 104, 0.74) !important;
}
[data-theme="light"] .welcome-benefit::before {
  background: rgba(168, 181, 160, 0.14) !important;
  color: rgba(113, 135, 104, 0.8) !important;
}
/* Health check card — undo dark gradient */
/* Home hero card — undo dark near-black gradients */
[data-theme="light"] .home-hero-card {
  border-color: rgba(168, 181, 160, 0.28) !important;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(224, 215, 229, 0.48),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(242, 240, 244, 0.72),
      rgba(168, 181, 160, 0.18) 62%,
      transparent
    ),
    var(--card) !important;
}
[data-theme="light"] .home-hero-card.home-hero-low {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(224, 215, 229, 0.56),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(244, 239, 247, 0.84),
      rgba(168, 181, 160, 0.16) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(224, 215, 229, 0.44) !important;
}
[data-theme="light"] .home-hero-card.home-hero-rising {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 181, 160, 0.48),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.62),
      rgba(224, 215, 229, 0.28) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(168, 181, 160, 0.42) !important;
}
[data-theme="light"] .home-hero-card.home-hero-high {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(126, 200, 160, 0.5),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(232, 245, 238, 0.78),
      rgba(245, 200, 66, 0.16) 58%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(126, 200, 160, 0.42) !important;
}
[data-theme="light"] .home-hero-card.home-hero-ovulation {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(240, 184, 110, 0.44),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(248, 238, 218, 0.72),
      rgba(232, 220, 196, 0.36) 58%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(232, 184, 96, 0.36) !important;
}
[data-theme="light"] .home-hero-card.home-hero-menstrual {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(212, 165, 165, 0.46),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 232, 232, 0.68),
      rgba(224, 215, 229, 0.22) 58%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(212, 165, 165, 0.38) !important;
}
[data-theme="light"] .home-hero-tag {
  background: rgba(255, 255, 255, 0.52) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .health-check-card {
  --health-accent: #c0924a;
  --health-accent-soft: rgba(245, 200, 66, 0.16);
  border-color: rgba(192, 146, 74, 0.28) !important;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(245, 200, 66, 0.22),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 248, 232, 0.74),
      rgba(224, 215, 229, 0.12) 72%,
      transparent
    ),
    var(--card) !important;
}
[data-theme="light"] .health-check-card.priority {
  border-color: rgba(192, 146, 74, 0.42) !important;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(245, 200, 66, 0.28),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 241, 204, 0.82),
      rgba(212, 165, 165, 0.13) 72%,
      transparent
    ),
    var(--card) !important;
}

/* ── Forced DARK theme (data-theme="dark") ───────────────────────────── */
:root[data-theme="dark"] {
  --bg: #2d2831;
  --bg2: #252130;
  --card: #3d3542;
  --card2: #4a4250;
  --sage: #a8b5a0;
  --sage-dark: #8aaa78;
  --sage-light: #4a5a44;
  --pink: #d4a5a5;
  --pink-light: #7a4a4a;
  --coral: #d4a5a5;
  --coral-light: #7a4840;
  --purple: #4a4250;
  --purple-light: #3d3542;
  --amber: #e8dcc4;
  --amber-light: #7a6a44;
  --teal: #6aabaa;
  --teal-light: #2a5a58;
  --text: #faf7f2;
  --text2: #c5b9c9;
  --text3: #7d7482;
  --border: rgba(197, 185, 201, 0.34);
  --success: #a5d6a7;
  --error: #cf6679;
  --accent: #e8dcc4;
  --divider: rgba(197, 185, 201, 0.28);
  --surface: #faf7f2;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --app-cream: #2d2831;
  --app-cream-2: #252130;
  --app-pink-glow: rgba(123, 49, 95, 0.26);
  --app-lavender-glow: rgba(104, 80, 143, 0.22);
  --app-purple-wash: transparent;
  --app-grid: rgba(255, 255, 255, 0.025);
  --glass-card: #3d3542;
  --glass-card-strong: #4a4250;
  --conf-high: #7ec8a0;
  --conf-medium: #d4a86a;
  --conf-low: #d47090;
  --insight-sage-bg: rgba(138, 170, 120, 0.2);
  --insight-sage-fg: #a8d098;
  --lh-peak-bg: rgba(212, 80, 120, 0.2);
  --lh-peak-fg: #f09ab8;
  --lh-high-bg: rgba(220, 170, 60, 0.2);
  --lh-high-fg: #e8c878;
  --lh-neg-bg: rgba(255, 255, 255, 0.05);
  --lh-neg-fg: #7d7482;
  --mucus-dry-bg: rgba(160, 120, 80, 0.2);
  --mucus-dry-fg: #d4a880;
  --mucus-sticky-bg: rgba(180, 150, 40, 0.2);
  --mucus-sticky-fg: #d8c070;
  --mucus-creamy-bg: rgba(100, 150, 60, 0.2);
  --mucus-creamy-fg: #a8d080;
  --mucus-watery-bg: rgba(60, 120, 180, 0.2);
  --mucus-watery-fg: #80b8e8;
  --mucus-ew-bg: rgba(40, 100, 200, 0.2);
  --mucus-ew-fg: #80a8f0;
  --period-active-bg: rgba(212, 96, 112, 0.2);
  --period-active-fg: #f0a8b8;
  --pred-range-bg: rgba(120, 80, 180, 0.38);
  --pred-range-fg: #c0a0f0;
  --pred-range-sub: #a080d0;
}
[data-theme="dark"] .nav-bar {
  background: rgba(45, 40, 49, 0.97) !important;
}
[data-theme="dark"] .option-btn {
  background: var(--card2);
  color: var(--text2);
  border-color: var(--border);
}
[data-theme="dark"] .option-btn.selected {
  background: var(--sage-dark);
  color: white;
  border-color: var(--sage);
}
[data-theme="dark"] .lh-option {
  background: var(--card2);
  color: var(--text2);
  border-color: var(--border);
}
[data-theme="dark"] .lh-option.active {
  background: var(--sage-dark);
  color: white;
}
[data-theme="dark"] .chip {
  background: var(--card2);
  color: var(--text2);
  border-color: var(--border);
}
[data-theme="dark"] .chip.selected {
  background: var(--sage-dark);
  color: white;
}
[data-theme="dark"] .period-btn.start {
  background: var(--pink) !important;
  color: #1a1a1a !important;
}
[data-theme="dark"] .period-btn.end {
  background: var(--card2) !important;
  color: var(--text2) !important;
}
[data-theme="dark"] .status-chip {
  background: var(--card2);
  color: var(--text2);
  border-color: var(--border);
}
[data-theme="dark"] .status-chip.pink {
  background: #5a2a2a;
  color: #d4a5a5;
}
[data-theme="dark"] .status-chip.chip-red {
  background: rgba(212, 105, 105, 0.18) !important;
  border-color: rgba(212, 165, 165, 0.45) !important;
  color: #f0b3b3 !important;
}
[data-theme="dark"] .status-chip.chip-yellow {
  background: rgba(232, 198, 96, 0.16) !important;
  border-color: rgba(232, 220, 196, 0.38) !important;
  color: #f2d98a !important;
}
[data-theme="dark"] .status-chip.chip-green {
  background: rgba(126, 200, 160, 0.16) !important;
  border-color: rgba(168, 181, 160, 0.42) !important;
  color: #a8d098 !important;
}
[data-theme="dark"] .status-chip.chip-mint {
  background: rgba(106, 171, 170, 0.18) !important;
  border-color: rgba(106, 171, 170, 0.46) !important;
  color: #9ddbd7 !important;
}
[data-theme="dark"] .status-chip.chip-blue {
  background: rgba(96, 145, 220, 0.18) !important;
  border-color: rgba(128, 184, 232, 0.4) !important;
  color: #9cc8f0 !important;
}
[data-theme="dark"] .status-chip.chip-purple {
  background: rgba(160, 128, 208, 0.2) !important;
  border-color: rgba(192, 160, 240, 0.4) !important;
  color: #ccb0f6 !important;
}
[data-theme="dark"] .status-chip.chip-neutral {
  background: rgba(180, 170, 190, 0.14) !important;
  border-color: rgba(180, 170, 190, 0.3) !important;
  color: #b8aec4 !important;
}
[data-theme="dark"] .icon-circle {
  filter: brightness(0.65) saturate(0.75);
}
[data-theme="dark"] #reminder-banner {
  background: linear-gradient(135deg, #4a4250, #3d3542) !important;
}
[data-theme="dark"] .doctor-report-panel,
[data-theme="dark"] .period-cycle-timeline-panel,
[data-theme="dark"] .insight-detail-panel,
[data-theme="dark"] .lh-image-viewer-panel,
[data-theme="dark"] .lh-action-modal-panel,
[data-theme="dark"] #edit-period-modal > div,
[data-theme="dark"] #delete-period-modal > div,
[data-theme="dark"] #log-date-picker-modal > div,
[data-theme="dark"] #delete-dialog > div {
  background: linear-gradient(
    160deg,
    rgba(58, 44, 72, 0.88) 0%,
    rgba(46, 34, 58, 0.84) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid rgba(197, 185, 201, 0.22) !important;
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] #edit-period-modal,
[data-theme="dark"] #delete-period-modal,
[data-theme="dark"] #delete-dialog,
[data-theme="dark"] #log-date-picker-modal {
  background: rgba(18, 12, 28, 0.6) !important;
}
[data-theme="dark"] .log-saved-card {
  background: linear-gradient(
    160deg,
    rgba(58, 44, 72, 0.96) 0%,
    rgba(40, 30, 55, 0.92) 100%
  );
  border-color: rgba(197, 185, 201, 0.22);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] #log-date-picker-input {
  color-scheme: dark;
}
[data-theme="dark"] [style*="background: #EEE8F5"],
[data-theme="dark"] [style*="background:var(--pred-range-bg)"] {
  background: #5d4e70 !important;
}
[data-theme="dark"] [style*="background:#c8e8d6"] {
  background: #2a4a38 !important;
}
[data-theme="dark"] [style*="background: #FFF8E8"],
[data-theme="dark"] [style*="background:#FFF8E8"] {
  background: #3a2e10 !important;
}
[data-theme="dark"] [style*="background: #FFF0E8"],
[data-theme="dark"] [style*="background:#FFF0E8"] {
  background: #3a2010 !important;
}
[data-theme="dark"] [style*="color: #2E7D5A"],
[data-theme="dark"] [style*="color:#2E7D5A"] {
  color: #a5d6a7 !important;
}
[data-theme="dark"] [style*="color: #8A7020"],
[data-theme="dark"] [style*="color:#8A7020"] {
  color: #e8dcc4 !important;
}
[data-theme="dark"] [style*="color: #6A3A9B"],
[data-theme="dark"] [style*="color:#6A3A9B"],
[data-theme="dark"] [style*="color: #5A3090"],
[data-theme="dark"] [style*="color:var(--pred-range-fg)"],
[data-theme="dark"] [style*="color: #8A70B0"],
[data-theme="dark"] [style*="color:var(--pred-range-sub)"] {
  color: #c5b9c9 !important;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  color-scheme: dark;
}
[data-theme="dark"] * {
  scrollbar-color: var(--card2) var(--bg);
}
/* Profile section — apply dark overrides even when system is light */
[data-theme="dark"] .prof-header-card {
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(104, 80, 143, 0.4),
      transparent 46%
    ),
    linear-gradient(135deg, rgba(54, 46, 62, 0.96), rgba(38, 30, 54, 0.92) 68%),
    var(--card) !important;
  border-color: rgba(104, 80, 143, 0.24) !important;
}
[data-theme="dark"] .prof-avatar {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .prof-edit-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .prof-stat-card {
  background: var(--card) !important;
}
[data-theme="dark"] .prof-settings-card {
  border-color: rgba(197, 185, 201, 0.12) !important;
}
[data-theme="dark"] .prof-row.tappable:active {
  background: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .prof-icon-chip.sage {
  background: rgba(100, 130, 100, 0.2) !important;
  border-color: rgba(100, 130, 100, 0.28) !important;
}
[data-theme="dark"] .prof-icon-chip.teal {
  background: rgba(60, 120, 120, 0.2) !important;
  border-color: rgba(60, 120, 120, 0.28) !important;
}
[data-theme="dark"] .prof-icon-chip.purple {
  background: rgba(100, 40, 160, 0.18) !important;
  border-color: rgba(100, 40, 160, 0.26) !important;
}
[data-theme="dark"] .prof-icon-chip.amber {
  background: rgba(180, 120, 40, 0.18) !important;
  border-color: rgba(180, 120, 40, 0.26) !important;
}
[data-theme="dark"] .prof-icon-chip.blue {
  background: rgba(60, 100, 180, 0.16) !important;
  border-color: rgba(60, 100, 180, 0.22) !important;
}
[data-theme="dark"] .prof-icon-chip.coral {
  background: rgba(200, 60, 70, 0.14) !important;
  border-color: rgba(200, 60, 70, 0.22) !important;
}
[data-theme="dark"] .prof-icon-chip.mint {
  background: rgba(60, 160, 120, 0.18) !important;
  border-color: rgba(60, 160, 120, 0.26) !important;
}
[data-theme="dark"] .prof-icon-chip.danger {
  background: rgba(180, 60, 60, 0.16) !important;
  border-color: rgba(180, 60, 60, 0.24) !important;
}
[data-theme="dark"] .prof-icon-chip.lavender {
  background: rgba(104, 80, 143, 0.18) !important;
  border-color: rgba(104, 80, 143, 0.26) !important;
}
[data-theme="dark"] .prof-logout-btn {
  border-color: rgba(240, 78, 94, 0.28) !important;
}
/* Log page cards — apply dark gradients even when system is light */
[data-theme="dark"] .log-lh-card {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(60, 120, 120, 0.3),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(20, 42, 40, 0.9),
      rgba(14, 32, 30, 0.6) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(60, 120, 120, 0.22) !important;
}
[data-theme="dark"] .log-flow-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(160, 80, 80, 0.3), transparent 42%),
    linear-gradient(
      135deg,
      rgba(44, 20, 20, 0.92),
      rgba(52, 24, 24, 0.6) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(160, 80, 80, 0.22) !important;
}
[data-theme="dark"] .log-lh-insight {
  background: rgba(60, 120, 120, 0.16) !important;
  border-color: rgba(60, 120, 120, 0.2) !important;
}
[data-theme="dark"] .log-flow-insight {
  background: rgba(160, 80, 80, 0.14) !important;
  border-color: rgba(160, 80, 80, 0.2) !important;
}
[data-theme="dark"] .log-flow-insight-text {
  color: #d08070 !important;
}
[data-theme="dark"] .log-icon-chip.blood {
  background: rgba(180, 100, 100, 0.18) !important;
  border-color: rgba(180, 100, 100, 0.24) !important;
}
[data-theme="dark"] .log-icon-chip.teal {
  background: rgba(60, 120, 120, 0.2) !important;
  border-color: rgba(60, 120, 120, 0.28) !important;
}
[data-theme="dark"] .log-icon-chip.sage {
  background: rgba(100, 130, 100, 0.2) !important;
  border-color: rgba(100, 130, 100, 0.28) !important;
}
[data-theme="dark"] .log-icon-chip.mint {
  background: rgba(60, 160, 120, 0.18) !important;
  border-color: rgba(60, 160, 120, 0.26) !important;
}
[data-theme="dark"] .log-icon-chip.purple {
  background: rgba(100, 40, 160, 0.18) !important;
  border-color: rgba(100, 40, 160, 0.26) !important;
}
[data-theme="dark"] .log-icon-chip.energy {
  background: rgba(180, 120, 40, 0.18) !important;
  border-color: rgba(180, 120, 40, 0.26) !important;
}
[data-theme="dark"] #log-save-btn {
  background: linear-gradient(135deg, #7a8f74 0%, #637a5e 100%) !important;
  box-shadow: 0 4px 16px rgba(100, 130, 100, 0.26) !important;
}
/* Home page LH card & banners */
[data-theme="dark"] .home-lh-card {
  background: var(--card) !important;
  border-color: rgba(106, 171, 170, 0.12) !important;
}
[data-theme="dark"] .home-quick-log-item {
  background: var(--card) !important;
}
[data-theme="dark"] .home-quick-log-icon-wrap {
  filter: brightness(0.7) saturate(0.7) !important;
}
[data-theme="dark"] .home-reminder-banner {
  background: linear-gradient(
    135deg,
    rgba(74, 66, 80, 0.8),
    rgba(61, 53, 66, 0.8)
  ) !important;
  border-color: rgba(197, 185, 201, 0.14) !important;
}
/* LH Scan History — apply dark overrides even when system is light */
[data-theme="dark"] .lh-history-hero {
  background:
    linear-gradient(135deg, rgba(76, 62, 43, 0.46), rgba(52, 77, 58, 0.58)),
    var(--card) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .lh-history-section {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="dark"] .lh-history-stat,
[data-theme="dark"] .lh-compare-panel {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .lh-scan-card {
  background: rgba(255, 255, 255, 0.065) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="dark"] .lh-empty-state,
[data-theme="dark"] .lh-no-photo {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #bfb7c4 !important;
}
[data-theme="dark"] .lh-filter-tab {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #c8becd !important;
}
[data-theme="dark"] .lh-filter-tab.active {
  background: var(--sage-dark) !important;
  border-color: var(--sage) !important;
  color: white !important;
}
[data-theme="dark"] .lh-section-chip {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #c9d9c1 !important;
}
[data-theme="dark"] .lh-inline-action {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: #d8cedc !important;
}
[data-theme="dark"] .lh-scan-meta,
[data-theme="dark"] .lh-progress-result,
[data-theme="dark"] .lh-latest-insight {
  color: #d0c6d4 !important;
}
[data-theme="dark"] .lh-scan-support,
[data-theme="dark"] .lh-compare-preview,
[data-theme="dark"] .lh-progression-legend,
[data-theme="dark"] .lh-progress-label {
  color: #aaa0af !important;
}
[data-theme="dark"] .lh-latest-insight {
  background: rgba(138, 170, 120, 0.12) !important;
  border-color: rgba(138, 170, 120, 0.22) !important;
}
[data-theme="dark"] .lh-progress-dot {
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}
[data-theme="dark"] .lh-progress-step::before {
  background: rgba(255, 255, 255, 0.11) !important;
}
/* Cycle Prediction card — apply dark hero gradients when system is light */
[data-theme="dark"] .featured-insight-card.prediction-hero {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 181, 160, 0.34),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(74, 66, 80, 0.34),
      rgba(168, 181, 160, 0.12) 62%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(168, 181, 160, 0.28) !important;
}
[data-theme="dark"]
  .featured-insight-card.prediction-hero.prediction-theme-menstrual {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(212, 165, 165, 0.42),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(115, 50, 62, 0.44),
      rgba(74, 66, 80, 0.24) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(212, 165, 165, 0.32) !important;
}
[data-theme="dark"]
  .featured-insight-card.prediction-hero.prediction-theme-high,
[data-theme="dark"]
  .featured-insight-card.prediction-hero.prediction-theme-ovulation {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(126, 200, 160, 0.42),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(46, 125, 90, 0.38),
      rgba(200, 146, 74, 0.18) 58%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(126, 200, 160, 0.34) !important;
}
[data-theme="dark"]
  .featured-insight-card.prediction-hero.prediction-theme-rising {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(168, 181, 160, 0.4),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(168, 181, 160, 0.28),
      rgba(96, 82, 112, 0.24) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(168, 181, 160, 0.32) !important;
}
[data-theme="dark"] .featured-insight-card.prediction-hero.prediction-theme-low,
[data-theme="dark"]
  .featured-insight-card.prediction-hero.prediction-theme-building {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(224, 215, 229, 0.36),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(96, 82, 112, 0.34),
      rgba(168, 181, 160, 0.13) 62%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(224, 215, 229, 0.28) !important;
}
[data-theme="dark"] .prediction-confidence-pill,
[data-theme="dark"] .prediction-meta-item {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(10px) !important;
}
/* Auth screens — apply dark styles even when system is light */
[data-theme="dark"] .auth-card {
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(100, 80, 120, 0.3),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      rgba(80, 70, 95, 0.88) 0%,
      rgba(62, 55, 72, 0.6) 65%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(197, 185, 201, 0.13) !important;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .auth-input {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(197, 185, 201, 0.13) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .auth-input:focus {
  background: rgba(255, 255, 255, 0.085) !important;
  border-color: rgba(205, 217, 197, 0.36) !important;
  box-shadow: 0 0 0 3px rgba(168, 181, 160, 0.12) !important;
}
[data-theme="dark"] .auth-social-btn {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(197, 185, 201, 0.13) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .auth-back-btn {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(197, 185, 201, 0.13) !important;
  color: var(--text2) !important;
}
[data-theme="dark"] .auth-terms-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(197, 185, 201, 0.12) !important;
}
[data-theme="dark"] .auth-success-msg {
  background: rgba(168, 181, 160, 0.24) !important;
  border-color: rgba(168, 181, 160, 0.36) !important;
}
[data-theme="dark"] .auth-success-msg p {
  color: #cdd9c5 !important;
}
[data-theme="dark"] #reset-success,
[data-theme="dark"] #change-success {
  background: rgba(168, 181, 160, 0.24) !important;
  border-color: rgba(168, 181, 160, 0.36) !important;
}
[data-theme="dark"] #reset-success p,
[data-theme="dark"] #change-success p {
  color: #cdd9c5 !important;
}
[data-theme="dark"] .auth-forgot-row .text-link {
  color: var(--text3) !important;
}
[data-theme="dark"] .auth-or-row {
  opacity: 0.6 !important;
}
[data-theme="dark"] .auth-btn-primary,
[data-theme="dark"] .btn-primary {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.32),
    0 1px 4px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
/* LH Scan Result card — apply dark gradient even when system is light */
[data-theme="dark"] .lhs-result-card {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(60, 120, 120, 0.3),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      rgba(20, 42, 40, 0.92),
      rgba(14, 32, 30, 0.7) 60%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(60, 120, 120, 0.2) !important;
}
[data-theme="dark"] .lhs-outline-btn {
  background: var(--card) !important;
  border-color: rgba(197, 185, 201, 0.14) !important;
}
[data-theme="dark"] .lhs-unclear-card {
  background: var(--card) !important;
  border-color: rgba(180, 140, 60, 0.18) !important;
}
[data-theme="dark"] .lhs-thumb-frame img {
  border-color: rgba(197, 185, 201, 0.16) !important;
  opacity: 0.6 !important;
}
[data-theme="dark"] .lhs-tip-card {
  background: var(--card) !important;
  border-color: rgba(197, 185, 201, 0.12) !important;
}
/* Onboarding preview card — apply dark gradient when system is light */
[data-theme="dark"] .onboard-insight-preview {
  background:
    radial-gradient(
      circle at 84% 14%,
      rgba(241, 198, 90, 0.14),
      transparent 34%
    ),
    linear-gradient(145deg, rgba(63, 51, 70, 0.96), rgba(48, 41, 55, 0.92)) !important;
  border-color: rgba(210, 192, 214, 0.16) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}
[data-theme="dark"] .onboard-insight-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-theme="dark"] .onboard-insight-chip {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .onboard-insight-orb {
  background: rgba(210, 192, 214, 0.12) !important;
}
[data-theme="dark"] .onboard-insight-badge {
  background: rgba(168, 181, 160, 0.14) !important;
  color: rgba(205, 217, 197, 0.78) !important;
}
[data-theme="dark"] .onboard-track-card {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(255, 179, 71, 0.07),
      transparent 38%
    ),
    linear-gradient(145deg, rgba(52, 40, 64, 0.98), rgba(44, 34, 56, 0.96)) !important;
  border-color: rgba(210, 192, 214, 0.14) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .onboard-track-item::before {
  background: rgba(168, 181, 160, 0.58) !important;
}
[data-theme="dark"] .ob1-seg {
  background: rgba(200, 178, 215, 0.12) !important;
}
[data-theme="dark"] .ob1-seg-active {
  background: linear-gradient(
    90deg,
    rgba(155, 118, 198, 0.7),
    rgba(200, 178, 215, 0.5)
  ) !important;
}
[data-theme="dark"] .ob1-track-name {
  color: rgba(240, 230, 248, 0.92) !important;
}
[data-theme="dark"] .ob1-track-sub {
  color: rgba(200, 185, 215, 0.56) !important;
}
[data-theme="dark"] .ob1-track-divider {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 178, 215, 0.14),
    transparent
  ) !important;
}
[data-theme="dark"] .ob1-chip-period {
  background: rgba(232, 107, 135, 0.1) !important;
  border-color: rgba(232, 107, 135, 0.22) !important;
  color: rgba(232, 140, 160, 0.9) !important;
}
[data-theme="dark"] .ob1-chip-symptom {
  background: rgba(155, 118, 198, 0.1) !important;
  border-color: rgba(155, 118, 198, 0.22) !important;
  color: rgba(190, 160, 225, 0.9) !important;
}
[data-theme="dark"] .ob1-chip-lh {
  background: rgba(255, 179, 71, 0.09) !important;
  border-color: rgba(220, 150, 40, 0.2) !important;
  color: rgba(230, 185, 110, 0.9) !important;
}
[data-theme="dark"] .ob1-chip-insight {
  background: rgba(113, 155, 104, 0.09) !important;
  border-color: rgba(113, 155, 104, 0.2) !important;
  color: rgba(150, 195, 140, 0.9) !important;
}
/* onboard page 1 — dark forced */
[data-theme="dark"] .onboard-product-screen {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(155, 100, 200, 0.2) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 88% 48%,
      rgba(180, 120, 100, 0.1) 0%,
      transparent 44%
    ),
    radial-gradient(
      ellipse at 12% 78%,
      rgba(100, 150, 120, 0.08) 0%,
      transparent 40%
    ),
    var(--bg) !important;
}

/* ob-q-screen (onboarding steps 2 & 3) — dark forced */
[data-theme="dark"] .ob-q-screen {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(130, 100, 160, 0.18) 0%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 90% 52%,
      rgba(180, 130, 110, 0.1) 0%,
      transparent 42%
    ),
    var(--bg) !important;
}
[data-theme="dark"] .ob-card {
  background:
    radial-gradient(
      circle at 94% 6%,
      rgba(200, 165, 70, 0.07),
      transparent 38%
    ),
    linear-gradient(145deg, rgba(58, 48, 68, 0.96), rgba(48, 40, 58, 0.9)) !important;
  border-color: rgba(210, 192, 214, 0.12) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}
[data-theme="dark"] .ob-option {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text2) !important;
}
[data-theme="dark"] .ob-option.selected {
  background: linear-gradient(
    135deg,
    rgba(155, 118, 198, 0.26),
    rgba(168, 181, 160, 0.16)
  ) !important;
  border-color: rgba(155, 118, 198, 0.48) !important;
  color: rgba(240, 230, 248, 0.95) !important;
  box-shadow:
    0 0 0 3px rgba(155, 118, 198, 0.1),
    0 4px 14px rgba(155, 118, 198, 0.16) !important;
}
[data-theme="dark"] .ob3-seg {
  background: rgba(200, 178, 215, 0.12) !important;
}
[data-theme="dark"] .ob3-seg-done {
  background: rgba(155, 118, 198, 0.42) !important;
}
[data-theme="dark"] .ob3-seg-active {
  background: linear-gradient(
    90deg,
    rgba(155, 118, 198, 0.7),
    rgba(200, 178, 215, 0.5)
  ) !important;
}
/* Welcome screen product preview — apply dark gradient when system is light */
[data-theme="dark"] .welcome-product-preview {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(241, 198, 90, 0.16),
      transparent 38%
    ),
    linear-gradient(145deg, rgba(63, 51, 70, 0.96), rgba(48, 41, 55, 0.92)) !important;
  border-color: rgba(210, 192, 214, 0.16) !important;
}
[data-theme="dark"] .welcome-preview-card,
[data-theme="dark"] .welcome-signal-chip {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .welcome-preview-badge {
  background: rgba(168, 181, 160, 0.14) !important;
  color: rgba(205, 217, 197, 0.78) !important;
}
[data-theme="dark"] .welcome-benefit::before {
  background: rgba(168, 181, 160, 0.1) !important;
  color: rgba(205, 217, 197, 0.68) !important;
}
/* Health check card — apply dark gradient when system is light */
/* Home hero card — apply dark near-black gradients when system is light */
[data-theme="dark"] .home-hero-card {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(104, 80, 143, 0.16),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(50, 44, 58, 0.55),
      rgba(38, 32, 50, 0.35) 62%,
      transparent
    ),
    var(--card) !important;
  border-color: rgba(197, 185, 201, 0.18) !important;
}
[data-theme="dark"] .home-hero-card.home-hero-low {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(104, 80, 143, 0.42),
      transparent 36%
    ),
    linear-gradient(135deg, rgba(61, 53, 66, 0.95), rgba(45, 36, 69, 0.85) 60%),
    var(--card) !important;
  border-color: rgba(104, 80, 143, 0.28) !important;
}
[data-theme="dark"] .home-hero-card.home-hero-rising {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(100, 150, 100, 0.38),
      transparent 36%
    ),
    linear-gradient(135deg, rgba(35, 58, 38, 0.95), rgba(26, 48, 32, 0.88) 60%),
    var(--card) !important;
  border-color: rgba(100, 150, 100, 0.24) !important;
}
[data-theme="dark"] .home-hero-card.home-hero-high {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(60, 140, 120, 0.42),
      transparent 36%
    ),
    linear-gradient(135deg, rgba(24, 52, 48, 0.95), rgba(30, 80, 72, 0.88) 60%),
    var(--card) !important;
  border-color: rgba(60, 140, 120, 0.24) !important;
}
[data-theme="dark"] .home-hero-card.home-hero-ovulation {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(200, 150, 50, 0.38),
      transparent 36%
    ),
    linear-gradient(135deg, rgba(48, 36, 16, 0.95), rgba(80, 52, 24, 0.88) 60%),
    var(--card) !important;
  border-color: rgba(200, 150, 50, 0.22) !important;
}
[data-theme="dark"] .home-hero-card.home-hero-menstrual {
  background:
    radial-gradient(circle at 12% 0%, rgba(180, 80, 90, 0.4), transparent 36%),
    linear-gradient(135deg, rgba(56, 24, 24, 0.95), rgba(88, 40, 40, 0.88) 60%),
    var(--card) !important;
  border-color: rgba(180, 80, 90, 0.24) !important;
}
[data-theme="dark"] .home-hero-tag {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
[data-theme="dark"] .health-check-card {
  --health-accent: #e0c36d;
  --health-accent-soft: rgba(245, 200, 66, 0.13);
  border-color: rgba(245, 200, 66, 0.22) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(245, 200, 66, 0.2), transparent 38%),
    linear-gradient(
      135deg,
      rgba(111, 92, 34, 0.18),
      rgba(96, 82, 112, 0.12) 72%,
      transparent
    ),
    var(--card) !important;
}
[data-theme="dark"] .health-check-card.priority {
  border-color: rgba(245, 200, 66, 0.3) !important;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(245, 200, 66, 0.24),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(126, 91, 36, 0.23),
      rgba(115, 50, 62, 0.1) 72%,
      transparent
    ),
    var(--card) !important;
}

/* ── Orbit carousel — dark mode (system) ───────────────────────────── */
@media (prefers-color-scheme: dark) {
  .wco-c0 {
    background:
      radial-gradient(
        circle at 78% 14%,
        rgba(120, 88, 145, 0.3),
        transparent 46%
      ),
      linear-gradient(148deg, rgba(52, 42, 62, 0.97), rgba(42, 34, 54, 0.94));
  }
  .wco-c1 {
    background:
      radial-gradient(
        circle at 22% 14%,
        rgba(76, 100, 72, 0.3),
        transparent 46%
      ),
      linear-gradient(148deg, rgba(34, 48, 33, 0.97), rgba(26, 40, 26, 0.94));
  }
  .wco-c2 {
    background:
      radial-gradient(
        circle at 78% 14%,
        rgba(118, 96, 58, 0.32),
        transparent 46%
      ),
      linear-gradient(148deg, rgba(56, 44, 30, 0.97), rgba(44, 36, 24, 0.94));
  }
  .wco-c3 {
    background:
      radial-gradient(
        circle at 22% 78%,
        rgba(110, 60, 70, 0.34),
        transparent 46%
      ),
      linear-gradient(148deg, rgba(56, 34, 38, 0.97), rgba(44, 27, 32, 0.94));
  }
  .wco-c4 {
    background:
      radial-gradient(
        circle at 78% 78%,
        rgba(58, 100, 84, 0.32),
        transparent 46%
      ),
      linear-gradient(148deg, rgba(28, 48, 42, 0.97), rgba(22, 40, 36, 0.94));
  }
  .wco-c5 {
    background:
      radial-gradient(
        circle at 50% 14%,
        rgba(90, 72, 120, 0.34),
        transparent 46%
      ),
      linear-gradient(148deg, rgba(42, 36, 58, 0.97), rgba(34, 27, 48, 0.94));
  }
  .wc-orbit-card {
    border-color: rgba(210, 192, 214, 0.14);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
  }
  .wc-orbit-card.wco-active {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.44);
  }
  .wco-icon {
    background: rgba(255, 255, 255, 0.09);
  }
  .wco-tag {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .wc-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .wco-dot {
    background: rgba(255, 255, 255, 0.18);
  }
  .wco-dot.wco-dot-active {
    background: rgba(180, 155, 215, 0.6);
  }
  .wco-bar {
    background: rgba(255, 255, 255, 0.1);
  }
  .wco-stat-divider {
    background: rgba(255, 255, 255, 0.1);
  }
  .wco-tday {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .wco-t-menses {
    background: rgba(180, 100, 100, 0.28);
    color: #d4a0a0;
    border-color: rgba(180, 100, 100, 0.22);
  }
  .wco-t-follic {
    background: rgba(120, 140, 115, 0.22);
    color: #8aaa80;
    border-color: rgba(120, 140, 115, 0.18);
  }
  .wco-t-today {
    background: rgba(100, 80, 155, 0.24);
    color: #a090d0;
    border-color: rgba(100, 80, 155, 0.32);
    box-shadow: 0 0 0 2px rgba(100, 80, 155, 0.16);
  }
  .wco-neg {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text3);
  }
  .wco-peak {
    background: rgba(192, 48, 96, 0.18);
    color: #e09090;
  }
  .wco-high {
    background: rgba(180, 136, 24, 0.2);
    color: #c0a050;
  }
}

/* ── Orbit carousel — dark mode (forced) ───────────────────────────── */
[data-theme="dark"] .wco-c0 {
  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(120, 88, 145, 0.3),
      transparent 46%
    ),
    linear-gradient(148deg, rgba(52, 42, 62, 0.97), rgba(42, 34, 54, 0.94)) !important;
}
[data-theme="dark"] .wco-c1 {
  background:
    radial-gradient(circle at 22% 14%, rgba(76, 100, 72, 0.3), transparent 46%),
    linear-gradient(148deg, rgba(34, 48, 33, 0.97), rgba(26, 40, 26, 0.94)) !important;
}
[data-theme="dark"] .wco-c2 {
  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(118, 96, 58, 0.32),
      transparent 46%
    ),
    linear-gradient(148deg, rgba(56, 44, 30, 0.97), rgba(44, 36, 24, 0.94)) !important;
}
[data-theme="dark"] .wco-c3 {
  background:
    radial-gradient(
      circle at 22% 78%,
      rgba(110, 60, 70, 0.34),
      transparent 46%
    ),
    linear-gradient(148deg, rgba(56, 34, 38, 0.97), rgba(44, 27, 32, 0.94)) !important;
}
[data-theme="dark"] .wco-c4 {
  background:
    radial-gradient(
      circle at 78% 78%,
      rgba(58, 100, 84, 0.32),
      transparent 46%
    ),
    linear-gradient(148deg, rgba(28, 48, 42, 0.97), rgba(22, 40, 36, 0.94)) !important;
}
[data-theme="dark"] .wco-c5 {
  background:
    radial-gradient(
      circle at 50% 14%,
      rgba(90, 72, 120, 0.34),
      transparent 46%
    ),
    linear-gradient(148deg, rgba(42, 36, 58, 0.97), rgba(34, 27, 48, 0.94)) !important;
}
[data-theme="dark"] .wc-orbit-card {
  border-color: rgba(210, 192, 214, 0.14) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32) !important;
}
[data-theme="dark"] .wc-orbit-card.wco-active {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.44) !important;
}
[data-theme="dark"] .wco-icon {
  background: rgba(255, 255, 255, 0.09) !important;
}
[data-theme="dark"] .wco-tag {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .wc-chips[data-accent="0"] .wc-chip {
  background: rgba(160, 120, 200, 0.18) !important;
  border-color: rgba(160, 120, 200, 0.36) !important;
  color: #c0a0e0 !important;
}
[data-theme="dark"] .wc-chips[data-accent="1"] .wc-chip {
  background: rgba(120, 150, 112, 0.18) !important;
  border-color: rgba(120, 150, 112, 0.36) !important;
  color: #90c080 !important;
}
[data-theme="dark"] .wc-chips[data-accent="2"] .wc-chip {
  background: rgba(200, 170, 100, 0.18) !important;
  border-color: rgba(200, 170, 100, 0.36) !important;
  color: #d0b070 !important;
}
[data-theme="dark"] .wc-chips[data-accent="3"] .wc-chip {
  background: rgba(190, 120, 130, 0.18) !important;
  border-color: rgba(190, 120, 130, 0.36) !important;
  color: #e09898 !important;
}
[data-theme="dark"] .wc-chips[data-accent="4"] .wc-chip {
  background: rgba(100, 170, 148, 0.18) !important;
  border-color: rgba(100, 170, 148, 0.36) !important;
  color: #80c8a8 !important;
}
[data-theme="dark"] .wc-chips[data-accent="5"] .wc-chip {
  background: rgba(150, 130, 205, 0.18) !important;
  border-color: rgba(150, 130, 205, 0.36) !important;
  color: #b8a0e0 !important;
}
[data-theme="dark"] .wco-dot {
  background: rgba(255, 255, 255, 0.18) !important;
}
[data-theme="dark"] .wco-dot.wco-dot-active {
  background: rgba(180, 155, 215, 0.6) !important;
}
[data-theme="dark"] .wco-bar {
  background: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .wco-stat-divider {
  background: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .wco-tday {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .wco-t-menses {
  background: rgba(180, 100, 100, 0.28) !important;
  color: #d4a0a0 !important;
  border-color: rgba(180, 100, 100, 0.22) !important;
}
[data-theme="dark"] .wco-t-follic {
  background: rgba(120, 140, 115, 0.22) !important;
  color: #8aaa80 !important;
  border-color: rgba(120, 140, 115, 0.18) !important;
}
[data-theme="dark"] .wco-t-today {
  background: rgba(100, 80, 155, 0.24) !important;
  color: #a090d0 !important;
  border-color: rgba(100, 80, 155, 0.32) !important;
  box-shadow: 0 0 0 2px rgba(100, 80, 155, 0.16) !important;
}
[data-theme="dark"] .wco-neg {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--text3) !important;
}
[data-theme="dark"] .wco-peak {
  background: rgba(192, 48, 96, 0.18) !important;
  color: #e09090 !important;
}
[data-theme="dark"] .wco-high {
  background: rgba(180, 136, 24, 0.2) !important;
  color: #c0a050 !important;
}

/* ── Orbit carousel — forced light mode (overrides dark media query) ── */
[data-theme="light"] .wco-c0 {
  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(200, 178, 215, 0.48),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(244, 239, 248, 0.97),
      rgba(232, 222, 240, 0.92)
    ) !important;
}
[data-theme="light"] .wco-c1 {
  background:
    radial-gradient(
      circle at 22% 14%,
      rgba(155, 175, 148, 0.42),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(236, 243, 233, 0.97),
      rgba(222, 234, 218, 0.92)
    ) !important;
}
[data-theme="light"] .wco-c2 {
  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(224, 210, 170, 0.48),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(251, 246, 236, 0.97),
      rgba(240, 230, 208, 0.92)
    ) !important;
}
[data-theme="light"] .wco-c3 {
  background:
    radial-gradient(
      circle at 22% 78%,
      rgba(210, 155, 163, 0.44),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(249, 237, 239, 0.97),
      rgba(238, 220, 224, 0.92)
    ) !important;
}
[data-theme="light"] .wco-c4 {
  background:
    radial-gradient(
      circle at 78% 78%,
      rgba(148, 194, 176, 0.42),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(232, 245, 238, 0.97),
      rgba(216, 236, 226, 0.92)
    ) !important;
}
[data-theme="light"] .wco-c5 {
  background:
    radial-gradient(
      circle at 50% 14%,
      rgba(180, 162, 216, 0.48),
      transparent 46%
    ),
    linear-gradient(
      148deg,
      rgba(238, 234, 249, 0.97),
      rgba(226, 218, 244, 0.92)
    ) !important;
}
[data-theme="light"] .wc-orbit-card {
  border-color: rgba(0, 0, 0, 0.055) !important;
  box-shadow: 0 6px 20px rgba(80, 60, 90, 0.09) !important;
}
[data-theme="light"] .wc-orbit-card.wco-active {
  box-shadow: 0 10px 30px rgba(80, 60, 90, 0.15) !important;
}
[data-theme="light"] .wco-title {
  color: #3d3d3d !important;
}
[data-theme="light"] .wco-kicker {
  color: #bdbdbd !important;
}
[data-theme="light"] .wco-value {
  color: #3d3d3d !important;
}
[data-theme="light"] .wco-sub {
  color: #706c6c !important;
}
[data-theme="light"] .wco-icon {
  background: rgba(255, 255, 255, 0.52) !important;
  color: #706c6c !important;
}
[data-theme="light"] .wco-lh-date {
  color: #706c6c !important;
}
[data-theme="light"] .wco-tag {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(0, 0, 0, 0.065) !important;
  color: #706c6c !important;
}
[data-theme="light"] .wc-chips[data-accent="0"] .wc-chip {
  background: rgba(200, 178, 215, 0.2) !important;
  border-color: rgba(155, 118, 198, 0.32) !important;
  color: #6a4890 !important;
}
[data-theme="light"] .wc-chips[data-accent="1"] .wc-chip {
  background: rgba(155, 175, 148, 0.2) !important;
  border-color: rgba(110, 140, 100, 0.32) !important;
  color: #4a6840 !important;
}
[data-theme="light"] .wc-chips[data-accent="2"] .wc-chip {
  background: rgba(224, 210, 170, 0.22) !important;
  border-color: rgba(180, 145, 70, 0.32) !important;
  color: #7a5820 !important;
}
[data-theme="light"] .wc-chips[data-accent="3"] .wc-chip {
  background: rgba(210, 155, 163, 0.2) !important;
  border-color: rgba(175, 110, 120, 0.32) !important;
  color: #8a4050 !important;
}
[data-theme="light"] .wc-chips[data-accent="4"] .wc-chip {
  background: rgba(148, 194, 176, 0.2) !important;
  border-color: rgba(80, 148, 124, 0.32) !important;
  color: #386858 !important;
}
[data-theme="light"] .wc-chips[data-accent="5"] .wc-chip {
  background: rgba(180, 162, 216, 0.2) !important;
  border-color: rgba(130, 100, 195, 0.32) !important;
  color: #5a3888 !important;
}
[data-theme="light"] .wco-dot {
  background: rgba(0, 0, 0, 0.14) !important;
}
[data-theme="light"] .wco-dot.wco-dot-active {
  background: rgba(100, 80, 150, 0.48) !important;
}
[data-theme="light"] .wco-bar {
  background: rgba(0, 0, 0, 0.07) !important;
}
[data-theme="light"] .wco-trend-chart span {
  background: #c5d4bb !important;
}
[data-theme="light"] .wco-trend-chart span:nth-child(4) {
  background: #d4849a !important;
}
[data-theme="light"] .wco-stat-val {
  color: #3d3d3d !important;
}
[data-theme="light"] .wco-stat-label {
  color: #bdbdbd !important;
}
[data-theme="light"] .wco-stat-divider {
  background: rgba(0, 0, 0, 0.07) !important;
}
[data-theme="light"] .wco-tday {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.055) !important;
  color: #bdbdbd !important;
}
[data-theme="light"] .wco-t-menses {
  background: rgba(212, 165, 165, 0.35) !important;
  color: #9a5050 !important;
  border-color: rgba(212, 165, 165, 0.28) !important;
}
[data-theme="light"] .wco-t-follic {
  background: rgba(168, 181, 160, 0.28) !important;
  color: #5a7a50 !important;
  border-color: rgba(168, 181, 160, 0.22) !important;
}
[data-theme="light"] .wco-t-today {
  background: rgba(96, 76, 140, 0.14) !important;
  color: #60508a !important;
  border-color: rgba(96, 76, 140, 0.22) !important;
  box-shadow: 0 0 0 2px rgba(96, 76, 140, 0.1) !important;
}
[data-theme="light"] .wco-neg {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #bdbdbd !important;
}
[data-theme="light"] .wco-peak {
  background: rgba(192, 48, 96, 0.1) !important;
  color: #c03060 !important;
}
[data-theme="light"] .wco-high {
  background: rgba(180, 136, 24, 0.12) !important;
  color: #906820 !important;
}

/* ── Appearance segmented control ───────────────────────────────────── */
.appearance-seg {
  display: flex;
  background: var(--bg2);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.appearance-seg-btn {
  flex: 1;
  padding: 8px 4px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s;
  background: transparent;
  color: var(--text2);
}
.appearance-seg-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ══════════════════════════════════════════════════════════════════════
         ANIMATION SYSTEM PHASE 2 — Staggered screen entrances + missing states
         Uses existing `welcomeRise` keyframe (fadeIn + translateY + scale).
         Each selector is scoped to its screen ID so rules never bleed.
      ══════════════════════════════════════════════════════════════════════ */

/* ─── HOME SCREEN stagger ─── */
#screen-home.active .home-header {
  animation: welcomeRise 0.42s var(--ease-out) both 0.04s;
}
#screen-home.active .home-notif-banner,
#screen-home.active .home-reminder-banner {
  animation: welcomeRise 0.38s var(--ease-out) both 0.08s;
}
#screen-home.active #insight-card {
  animation: welcomeRise 0.46s var(--ease-out) both 0.1s;
}
#screen-home.active .home-period-card {
  animation: welcomeRise 0.46s var(--ease-out) both 0.18s;
}
#screen-home.active .home-lh-card {
  animation: welcomeRise 0.46s var(--ease-out) both 0.26s;
}
#screen-home.active #home-trends-section {
  animation: welcomeRise 0.44s var(--ease-out) both 0.34s;
}

/* ─── LOG SCREEN stagger ─── */
#screen-log.active .top-bar {
  animation: welcomeRise 0.38s var(--ease-out) both 0.04s;
}
#screen-log.active .log-tip-banner {
  animation: welcomeRise 0.4s var(--ease-out) both 0.1s;
}
#screen-log.active #log-screen-title {
  animation: welcomeRise 0.4s var(--ease-out) both 0.14s;
}
#screen-log.active #log-screen-sub {
  animation: welcomeRise 0.38s var(--ease-out) both 0.17s;
}
/* Log cards replay their own fade-in each time display:none→block */
#screen-log.active .log-card {
  animation: welcomeRise 0.42s var(--ease-out) both 0.08s;
}

/* ─── INSIGHTS SCREEN stagger ─── */
#screen-insights.active .top-bar {
  animation: welcomeRise 0.38s var(--ease-out) both 0.04s;
}
#screen-insights.active .insights-dashboard-intro {
  animation: welcomeRise 0.42s var(--ease-out) both 0.1s;
}
#screen-insights.active .prediction-hero {
  animation: welcomeRise 0.46s var(--ease-out) both 0.16s;
}
#screen-insights.active .timeline-card {
  animation: welcomeRise 0.46s var(--ease-out) both 0.24s;
}
#screen-insights.active .pattern-card {
  animation: welcomeRise 0.46s var(--ease-out) both 0.3s;
}
#screen-insights.active .supporting-grid-header {
  animation: welcomeRise 0.44s var(--ease-out) both 0.34s;
}
#screen-insights.active .supporting-insight-card {
  animation: welcomeRise 0.44s var(--ease-out) both 0.4s;
}

/* ─── PROFILE SCREEN stagger ─── */
#screen-profile.active .top-bar {
  animation: welcomeRise 0.38s var(--ease-out) both 0.04s;
}
#screen-profile.active .prof-header-card {
  animation: welcomeRise 0.46s var(--ease-out) both 0.1s;
}
#screen-profile.active .prof-stats-grid {
  animation: welcomeRise 0.44s var(--ease-out) both 0.17s;
}
#screen-profile.active .prof-settings-card {
  animation: welcomeRise 0.44s var(--ease-out) both 0.24s;
}

/* ─── EDIT PROFILE SCREEN stagger ─── */
#screen-edit-profile.active .top-bar {
  animation: welcomeRise 0.38s var(--ease-out) both 0.04s;
}
#screen-edit-profile.active .edit-avatar-section {
  animation: welcomeRise 0.44s var(--ease-out) both 0.1s;
}
#screen-edit-profile.active .prof-settings-card,
#screen-edit-profile.active .edit-options-card {
  animation: welcomeRise 0.42s var(--ease-out) both 0.17s;
}
#screen-edit-profile.active .edit-save-btn {
  animation: welcomeRise 0.4s var(--ease-out) both 0.24s;
}

/* ─── MISSING BUTTON TRANSITIONS & ACTIVE STATES ─── */

/* Home: LH add (+) circle button */
.home-add-btn {
  transition:
    transform var(--dur-instant) ease,
    box-shadow var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.home-add-btn:active {
  transform: scale(0.86);
}

/* Home: flow indicator pill */
.home-flow-btn {
  transition:
    transform var(--dur-instant) ease,
    opacity var(--dur-instant) ease;
  -webkit-tap-highlight-color: transparent;
}
.home-flow-btn:active {
  transform: scale(0.91);
  opacity: 0.8;
}

/* Home: "Log now" reminder button */
.home-reminder-btn {
  transition:
    transform var(--dur-instant) ease,
    opacity var(--dur-instant) ease,
    background var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.home-reminder-btn:active {
  transform: scale(0.94);
  opacity: 0.84;
}

/* Back / close (✕ / ←) button */
.back-btn {
  transition:
    transform var(--dur-instant) ease,
    background var(--dur-fast) ease,
    opacity var(--dur-instant) ease;
  -webkit-tap-highlight-color: transparent;
}
.back-btn:active {
  transform: scale(0.84);
  opacity: 0.66;
}

/* LH history ghost text button */
.lhs-ghost-btn {
  transition:
    transform var(--dur-instant) ease,
    opacity var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.lhs-ghost-btn:active {
  transform: scale(0.94);
  opacity: 0.6;
}

/* Doctor report date-range buttons */
.doctor-report-range-btn {
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-instant) ease,
    box-shadow var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.doctor-report-range-btn:not(.active):active {
  transform: scale(0.91);
  opacity: 0.76;
}

/* Doctor report action buttons (export/share) */
.report-action-btn {
  transition:
    transform var(--dur-instant) ease,
    box-shadow var(--dur-fast) ease,
    background var(--dur-fast) ease,
    opacity var(--dur-instant) ease;
  -webkit-tap-highlight-color: transparent;
}
.report-action-btn:active {
  transform: scale(0.95);
  opacity: 0.84;
}

/* Period calendar day buttons */
.period-btn {
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    transform var(--dur-instant) ease;
  -webkit-tap-highlight-color: transparent;
}
.period-btn:active {
  transform: scale(0.88);
}

/* Profile ✏️ Edit button */
.prof-edit-btn {
  transition:
    transform var(--dur-instant) ease,
    opacity var(--dur-fast) ease,
    background var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.prof-edit-btn:active {
  transform: scale(0.9);
  opacity: 0.68;
}

/* Settings rows with tappable class */
.prof-row.tappable {
  transition:
    background var(--dur-fast) ease,
    transform var(--dur-instant) ease;
  -webkit-tap-highlight-color: transparent;
}
.prof-row.tappable:active {
  background: var(--card2);
  transform: scale(0.99);
}

/* ─── PHASE 2 prefers-reduced-motion additions ─── */
@media (prefers-reduced-motion: reduce) {
  /* All staggered screen section animations */
  #screen-home.active .home-header,
  #screen-home.active .home-notif-banner,
  #screen-home.active .home-reminder-banner,
  #screen-home.active #insight-card,
  #screen-home.active .home-period-card,
  #screen-home.active .home-lh-card,
  #screen-home.active #home-trends-section,
  #screen-log.active .top-bar,
  #screen-log.active .log-tip-banner,
  #screen-log.active #log-screen-title,
  #screen-log.active #log-screen-sub,
  #screen-log.active .log-card,
  #screen-insights.active .top-bar,
  #screen-insights.active .insights-dashboard-intro,
  #screen-insights.active .prediction-hero,
  #screen-insights.active .timeline-card,
  #screen-insights.active .pattern-card,
  #screen-insights.active .supporting-grid-header,
  #screen-insights.active .supporting-insight-card,
  #screen-profile.active .top-bar,
  #screen-profile.active .prof-header-card,
  #screen-profile.active .prof-stats-grid,
  #screen-profile.active .prof-settings-card,
  #screen-edit-profile.active .top-bar,
  #screen-edit-profile.active .edit-avatar-section,
  #screen-edit-profile.active .prof-settings-card,
  #screen-edit-profile.active .edit-options-card,
  #screen-edit-profile.active .edit-save-btn {
    animation: none !important;
  }
  /* New button transitions off */
  .home-add-btn,
  .home-flow-btn,
  .home-reminder-btn,
  .back-btn,
  .lhs-ghost-btn,
  .doctor-report-range-btn,
  .report-action-btn,
  .period-btn,
  .prof-edit-btn,
  .prof-row.tappable {
    transition: none !important;
  }
  /* New active states off */
  .home-add-btn:active,
  .home-flow-btn:active,
  .home-reminder-btn:active,
  .back-btn:active,
  .lhs-ghost-btn:active,
  .doctor-report-range-btn:active,
  .report-action-btn:active,
  .period-btn:active,
  .prof-edit-btn:active,
  .prof-row.tappable:active {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
         ANIMATION SYSTEM — Unified motion language for PCOSense
         Tokens: --dur-instant/fast/standard/modal, --ease-out/spring/bounce
      ══════════════════════════════════════════════════════════════════════ */

/* ── Centered modal card entrance ── */
@keyframes glassModalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Chip selection pop ── */
@keyframes chipSelectPop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.88);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* ── Skeleton shimmer ── */
@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ── Apply entrance animation to centered modal inner cards ──
         display:none→flex resets animations, so they replay on each open. ── */
#edit-period-modal > div,
#delete-period-modal > div,
#delete-dialog > div,
#log-date-picker-modal > div {
  animation: glassModalIn var(--dur-modal) var(--ease-out) both;
}

/* ── Log saved compact notification ── */
#log-saved-msg {
  pointer-events: none;
}
.log-saved-card {
  background: linear-gradient(
    160deg,
    rgba(255, 252, 250, 0.96) 0%,
    rgba(247, 240, 252, 0.92) 100%
  );
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(210, 195, 218, 0.38);
  border-radius: 20px;
  padding: 20px 28px 18px;
  text-align: center;
  width: 200px;
  box-shadow:
    0 12px 40px rgba(80, 40, 100, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  animation: logSavedPop 0.34s var(--ease-bounce) both;
  pointer-events: auto;
}
@keyframes logSavedPop {
  from {
    opacity: 0;
    transform: scale(0.82) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.log-saved-check {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #b2c9a8, #82b074);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(100, 160, 90, 0.32);
}
.log-saved-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 3px;
  letter-spacing: -0.1px;
}
.log-saved-sub {
  font-size: 11.5px;
  color: var(--text3);
  margin: 0;
}

/* ── Chip selection pop on class add ── */
.chip.selected {
  animation: chipSelectPop 0.24s var(--ease-bounce) both;
}

/* ── Tactile press feedback — buttons ── */
.btn-outline:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.btn-outline {
  transition:
    transform var(--dur-instant) ease,
    opacity var(--dur-instant) ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.option-btn:active {
  transform: scale(0.95);
}
.chip:active {
  transform: scale(0.91);
}
.lh-option:active {
  transform: scale(0.95) !important;
}
.lh-action-modal-cancel,
.lh-action-modal-danger {
  transition:
    transform var(--dur-instant) ease,
    opacity var(--dur-instant) ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.lh-action-modal-cancel:active,
.lh-action-modal-danger:active {
  transform: scale(0.96);
  opacity: 0.88;
}
.period-cal-toggle:active,
.period-cal-confirm:active,
.period-cal-cancel:active {
  transform: scale(0.96) !important;
}

/* ── Interactive card press feedback ── */
.lh-scan-card {
  transition:
    transform var(--dur-instant) ease,
    box-shadow var(--dur-fast) ease;
}
.lh-scan-card:active {
  transform: scale(0.985);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
}
.wc-orbit-card {
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}

/* ── Skeleton shimmer utility class ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--card2) 25%,
    rgba(255, 255, 255, 0.28) 50%,
    var(--card2) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s infinite linear;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@media (prefers-color-scheme: dark) {
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--card2) 25%,
      rgba(255, 255, 255, 0.07) 50%,
      var(--card2) 75%
    );
    background-size: 200% 100%;
  }
}

/* ── Appearance segmented control — updated transition ── */
.appearance-seg-btn {
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

/* ── Comprehensive prefers-reduced-motion override ── */
@media (prefers-reduced-motion: reduce) {
  /* Screen entrance */
  .screen {
    animation: none !important;
  }
  /* Centered modal card entrance */
  #edit-period-modal > div,
  #delete-period-modal > div,
  #delete-dialog > div,
  #log-saved-msg > div,
  #log-date-picker-modal > div {
    animation: none !important;
  }
  /* Bottom sheet transitions — instant opacity only */
  .doctor-report-panel,
  .period-cycle-timeline-panel,
  .insight-detail-panel {
    transition: opacity 0.01s !important;
    transform: translate3d(0, 0, 0) !important;
  }
  .doctor-report-panel:not(.open),
  .period-cycle-timeline-panel:not(.open),
  .insight-detail-panel:not(.open) {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* LH panel animations */
  .lh-image-viewer-backdrop.open,
  .lh-action-modal.open {
    animation: none !important;
  }
  .lh-action-modal-panel {
    animation: none !important;
  }
  /* Chip selection animation */
  .chip.selected {
    animation: none !important;
  }
  /* Skeleton shimmer */
  .skeleton {
    animation: none !important;
    background: var(--card2) !important;
  }
  /* All transitions off on interactive elements */
  .btn-primary,
  .btn-outline,
  .option-btn,
  .chip,
  .status-chip,
  .lh-option,
  .lh-action-modal-cancel,
  .lh-action-modal-danger,
  .period-cal-toggle,
  .period-cal-confirm,
  .period-cal-cancel,
  .appearance-seg-btn,
  .lh-scan-card,
  .wc-orbit-card {
    transition: none !important;
  }
  /* Active transforms off */
  .btn-primary:active,
  .btn-outline:active,
  .option-btn:active,
  .chip:active,
  .lh-option:active,
  .lh-action-modal-cancel:active,
  .lh-action-modal-danger:active,
  .period-cal-toggle:active,
  .period-cal-confirm:active,
  .period-cal-cancel:active,
  .lh-scan-card:active {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
         PWA INSTALL BANNERS — Glass look (Chrome + iOS)
      ══════════════════════════════════════════════════════════════════════ */

@keyframes bannerRise {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ── Base glass card ── */
.pwa-banner {
  background: linear-gradient(
    160deg,
    rgba(255, 252, 250, 0.9) 0%,
    rgba(247, 240, 252, 0.86) 100%
  );
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(210, 195, 218, 0.4);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow:
    0 8px 40px rgba(80, 40, 100, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  animation: bannerRise 0.32s var(--ease-out) both;
}

/* ── Install (green gradient) button ── */
.pwa-banner-install {
  background: linear-gradient(135deg, #b2c4a6 0%, #89aa79 100%);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  box-shadow:
    0 3px 12px rgba(110, 148, 90, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition:
    transform var(--dur-instant) ease,
    box-shadow var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.pwa-banner-install:active {
  transform: scale(0.95);
  box-shadow: 0 1px 6px rgba(110, 148, 90, 0.16);
}

/* ── Dismiss (✕) circle button ── */
.pwa-banner-dismiss {
  background: rgba(210, 195, 218, 0.3);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--text3);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--dur-instant) ease,
    background var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.pwa-banner-dismiss:active {
  transform: scale(0.84);
  background: rgba(210, 195, 218, 0.52);
}

/* ── iOS steps box ── */
.ios-banner-steps {
  background: rgba(168, 181, 160, 0.12);
  border: 1px solid rgba(168, 181, 160, 0.26);
  border-radius: 12px;
  padding: 14px 16px;
}

/* ── Dark mode (system preference) ── */
@media (prefers-color-scheme: dark) {
  .pwa-banner {
    background: linear-gradient(
      160deg,
      rgba(58, 44, 72, 0.92) 0%,
      rgba(46, 34, 58, 0.88) 100%
    );
    border-color: rgba(197, 185, 201, 0.22);
    box-shadow:
      0 8px 40px rgba(0, 0, 0, 0.52),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .pwa-banner-dismiss {
    background: rgba(255, 255, 255, 0.09);
  }
  .pwa-banner-dismiss:active {
    background: rgba(255, 255, 255, 0.16);
  }
  .ios-banner-steps {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(197, 185, 201, 0.18);
  }
}

/* ── Forced light theme ── */
[data-theme="light"] .pwa-banner {
  background: linear-gradient(
    160deg,
    rgba(255, 252, 250, 0.9) 0%,
    rgba(247, 240, 252, 0.86) 100%
  ) !important;
  border-color: rgba(210, 195, 218, 0.4) !important;
  box-shadow:
    0 8px 40px rgba(80, 40, 100, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}
[data-theme="light"] .pwa-banner-dismiss {
  background: rgba(210, 195, 218, 0.3) !important;
}
[data-theme="light"] .ios-banner-steps {
  background: rgba(168, 181, 160, 0.12) !important;
  border-color: rgba(168, 181, 160, 0.26) !important;
}

/* ── Forced dark theme ── */
[data-theme="dark"] .pwa-banner {
  background: linear-gradient(
    160deg,
    rgba(58, 44, 72, 0.92) 0%,
    rgba(46, 34, 58, 0.88) 100%
  ) !important;
  border-color: rgba(197, 185, 201, 0.22) !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .pwa-banner-dismiss {
  background: rgba(255, 255, 255, 0.09) !important;
}
[data-theme="dark"] .pwa-banner-dismiss:active {
  background: rgba(255, 255, 255, 0.16) !important;
}
[data-theme="dark"] .ios-banner-steps {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(197, 185, 201, 0.18) !important;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .pwa-banner {
    animation: none !important;
  }
  .pwa-banner-install,
  .pwa-banner-dismiss {
    transition: none !important;
  }
  .pwa-banner-install:active,
  .pwa-banner-dismiss:active {
    transform: none !important;
  }
}

/* ── Verification Banner ─────────────────────────────────────── */
.verify-banner {
  background: linear-gradient(
    135deg,
    rgba(124, 79, 160, 0.1),
    rgba(90, 138, 80, 0.08)
  );
  border: 1px solid rgba(124, 79, 160, 0.22);
  border-radius: 16px;
  padding: 14px 16px 12px;
  margin: 20px 0 16px;
}
.verify-banner-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.verify-banner-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.verify-banner-text p {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.verify-banner-day {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  background: rgba(124, 79, 160, 0.12);
  border-radius: 20px;
  padding: 2px 8px;
}
.verify-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.verify-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(124, 79, 160, 0.35);
  background: rgba(124, 79, 160, 0.1);
  color: #7c4fa0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: "Nunito", "DM Sans", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.verify-btn:active {
  background: rgba(124, 79, 160, 0.18);
}
.verify-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.verify-btn-done {
  border-color: rgba(90, 138, 80, 0.35);
  background: rgba(90, 138, 80, 0.1);
  color: #5a8a50;
}
.verify-btn-done:active {
  background: rgba(90, 138, 80, 0.18);
}
.verify-cooldown {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text2);
  text-align: center;
}
@keyframes verifyPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(124, 79, 160, 0.3);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(124, 79, 160, 0);
  }
}
.verify-banner-pulse {
  animation: verifyPulse 0.8s ease;
}

/* Dark theme overrides for verify banner */
[data-theme="dark"] .verify-banner {
  background: linear-gradient(
    135deg,
    rgba(124, 79, 160, 0.18),
    rgba(90, 138, 80, 0.12)
  ) !important;
  border-color: rgba(180, 140, 210, 0.28) !important;
}
[data-theme="dark"] .verify-btn {
  border-color: rgba(180, 140, 210, 0.4) !important;
  background: rgba(124, 79, 160, 0.18) !important;
  color: #c9a8f0 !important;
}
[data-theme="dark"] .verify-btn-done {
  border-color: rgba(140, 200, 120, 0.4) !important;
  background: rgba(90, 138, 80, 0.18) !important;
  color: #a8d098 !important;
}
@media (prefers-color-scheme: dark) {
  .verify-banner {
    background: linear-gradient(
      135deg,
      rgba(124, 79, 160, 0.18),
      rgba(90, 138, 80, 0.12)
    );
    border-color: rgba(180, 140, 210, 0.28);
  }
  .verify-btn {
    border-color: rgba(180, 140, 210, 0.4);
    background: rgba(124, 79, 160, 0.18);
    color: #c9a8f0;
  }
  .verify-btn-done {
    border-color: rgba(140, 200, 120, 0.4);
    background: rgba(90, 138, 80, 0.18);
    color: #a8d098;
  }
}

/* ── Feature lock overlay ────────────────────────────────────── */
.feature-locked {
  position: relative;
  pointer-events: none;
}
.feature-lock-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(245, 240, 250, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  pointer-events: all;
  z-index: 2;
  backdrop-filter: blur(2px);
}
.feature-lock-overlay span {
  font-size: 22px;
}
.feature-lock-overlay p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #7c4fa0;
  text-align: center;
}
[data-theme="dark"] .feature-lock-overlay,
@media (prefers-color-scheme: dark) {
  .feature-lock-overlay {
    background: rgba(40, 32, 50, 0.85);
  }
  .feature-lock-overlay p {
    color: #c9a8f0;
  }
}
[data-theme="dark"] .feature-lock-overlay {
  background: rgba(40, 32, 50, 0.85) !important;
}
[data-theme="dark"] .feature-lock-overlay p {
  color: #c9a8f0 !important;
}

/* ── Push nudge banner (home screen) ────────────────────────────────── */
.push-nudge-banner {
  background: linear-gradient(
    135deg,
    rgba(124, 79, 160, 0.08),
    rgba(155, 106, 191, 0.06)
  );
  border: 1px solid rgba(124, 79, 160, 0.18);
  border-radius: 16px;
  padding: 14px 16px 12px;
  margin: 20px 0 16px;
}
.push-nudge-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.push-nudge-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.push-nudge-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.push-nudge-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.push-nudge-actions {
  display: flex;
  gap: 8px;
}
.push-nudge-btn {
  padding: 8px 20px;
  border-radius: 10px;
  border: 1.5px solid rgba(124, 79, 160, 0.35);
  background: rgba(124, 79, 160, 0.1);
  color: #7c4fa0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Nunito", "DM Sans", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.push-nudge-btn:active {
  background: rgba(124, 79, 160, 0.18);
}
.push-nudge-dismiss {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Nunito", "DM Sans", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* Dark theme */
[data-theme="dark"] .push-nudge-banner {
  background: linear-gradient(
    135deg,
    rgba(124, 79, 160, 0.15),
    rgba(155, 106, 191, 0.1)
  );
  border-color: rgba(180, 140, 210, 0.24);
}
[data-theme="dark"] .push-nudge-btn {
  border-color: rgba(180, 140, 210, 0.4);
  background: rgba(124, 79, 160, 0.18);
  color: #c9a8f0;
}
@media (prefers-color-scheme: dark) {
  .push-nudge-banner {
    background: linear-gradient(
      135deg,
      rgba(124, 79, 160, 0.15),
      rgba(155, 106, 191, 0.1)
    );
    border-color: rgba(180, 140, 210, 0.24);
  }
  .push-nudge-btn {
    border-color: rgba(180, 140, 210, 0.4);
    background: rgba(124, 79, 160, 0.18);
    color: #c9a8f0;
  }
}
[data-theme="light"] .push-nudge-banner {
  background: linear-gradient(
    135deg,
    rgba(124, 79, 160, 0.08),
    rgba(155, 106, 191, 0.06)
  ) !important;
  border-color: rgba(124, 79, 160, 0.18) !important;
}
[data-theme="light"] .push-nudge-btn {
  border-color: rgba(124, 79, 160, 0.35) !important;
  background: rgba(124, 79, 160, 0.1) !important;
  color: #7c4fa0 !important;
}

/* ── Push notification settings ──────────────────────────────────────── */
/*
       * All text/border colors use CSS vars (--text, --text2, --text3, --divider)
       * which are already set correctly for all four combos by:
       *   1. @media (prefers-color-scheme: dark) :root  — device dark, no user override
       *   2. :root[data-theme="dark"]                   — user picked dark
       *   3. :root[data-theme="light"]                  — user picked light (wins over media query)
       * Only the one hardcoded border color on .push-disable-btn needs explicit handling.
       */
.push-state-panel {
  padding: 14px 15px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.push-state-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.push-state-header .push-state-icon {
  margin-bottom: 0;
}
.push-state-header .push-state-title {
  margin: 0;
}
.push-state-icon {
  font-size: 26px;
  margin-bottom: 8px;
}
.push-state-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.push-state-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
}
.push-enable-btn {
  display: inline-block;
  padding: 10px 22px;
  background: rgba(124, 79, 160, 0.1);
  color: #7c4fa0;
  border: 1.5px solid rgba(124, 79, 160, 0.3);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Nunito", "DM Sans", sans-serif;
  cursor: pointer;
  margin-top: 2px;
}
.push-enable-btn:active {
  background: rgba(124, 79, 160, 0.18);
}
[data-theme="dark"] .push-enable-btn {
  background: rgba(180, 130, 220, 0.12);
  color: #c9a8f0;
  border-color: rgba(180, 130, 220, 0.3);
}
@media (prefers-color-scheme: dark) {
  .push-enable-btn {
    background: rgba(180, 130, 220, 0.12);
    color: #c9a8f0;
    border-color: rgba(180, 130, 220, 0.3);
  }
}
[data-theme="light"] .push-enable-btn {
  background: rgba(124, 79, 160, 0.1) !important;
  color: #7c4fa0 !important;
  border-color: rgba(124, 79, 160, 0.3) !important;
}
.push-prefs-heading {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.push-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  align-self: stretch;
}
.push-pref-row:last-of-type {
  border-bottom: none;
}
.push-pref-info {
  flex: 1;
  min-width: 0;
}
.push-pref-label {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.push-pref-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text2);
}
.push-disable-btn {
  margin-top: 18px;
  padding: 9px 20px;
  background: transparent;
  border: 1.5px solid rgba(180, 140, 200, 0.45);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  font-family: "Nunito", "DM Sans", sans-serif;
  cursor: pointer;
}
.push-disable-btn:active {
  background: rgba(124, 79, 160, 0.08);
}
.push-test-btn {
  padding: 9px 18px;
  background: transparent;
  border: 1.5px solid var(--sage-light);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  font-family: "Nunito", "DM Sans", sans-serif;
  cursor: pointer;
}
.push-test-btn:active {
  background: rgba(0, 0, 0, 0.04);
}
.push-footer-note {
  margin: 0;
  padding: 12px 15px 14px;
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
  border-top: 1px solid var(--divider);
}

/* push-disable-btn border is hardcoded, so needs explicit dark/light handling */
@media (prefers-color-scheme: dark) {
  .push-disable-btn {
    border-color: rgba(200, 160, 230, 0.3);
  }
}
[data-theme="dark"] .push-disable-btn {
  border-color: rgba(200, 160, 230, 0.3) !important;
}
/* Re-assert light border when user picked light but device OS is dark */
[data-theme="light"] .push-disable-btn {
  border-color: rgba(180, 140, 200, 0.45) !important;
}