/* ================================================================
   Girl Harmony - "Bloom Night" (dark counterpart of Bloom)
   Same personality after dark: deep indigo / aubergine mesh canvas,
   light-on-dark frosted glass, violet-to-pink gradient actions,
   a luminous ring and a dark glass tab bar.

   Every selector is scoped under
     :root[data-gh-theme="bloom"].theme-dark
   (app.js toggles .theme-dark from Settings > Appearance), so light
   Bloom is untouched. Only the bloom-night-* @keyframes are global.

   The extra .theme-dark class gives these rules one more class of
   specificity than theme-bloom.css and the legacy ":root.theme-dark"
   rules in tokens.css / screens.css, so plain declarations win; the
   legacy rules that use !important are answered with !important.

   Palette (contrast measured on the real surfaces, see notes inline)
     canvas      #0F0A1F   glows #2A1B5C violet, #3A1530 plum-rose,
                           faint peach at the bottom
     glass       rgba(255,255,255,0.06) + blur, 1px rgba(255,255,255,0.10)
     text        #F3EEFF   (>= 13:1 on every surface)
     muted       #C9BEF0   (>= 6.5:1)
     subtle      #ADA0DA   (>= 4.7:1, worst case glass on the violet glow)
     accent      #9C86FF fills, #B09CFF accent text (>= 4.8:1)
     action      gradient #5B3FD9 > #8444D0 > #C2458B (white >= 4.65:1)
     phases      rose #FF6F9F, mint #5EE0B0, butter #FFCF6B, lavender #A88BFF
   ================================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark {
  color-scheme: dark;

  /* Accent ramp. 50-200 are washes (backgrounds only in the app), so they
     become translucent violet; 300-700 are used as text on those washes,
     so they lift to light violets. 900 stays deep: it is a gradient end
     behind white text (inline text uses of it are re-pointed below). */
  --gh-plum-900: #1B1240;
  --gh-plum-700: #C9BAFF;
  --gh-plum-500: #B09CFF;
  --gh-plum-300: #C3B3FF;
  --gh-plum-200: rgba(156, 134, 255, 0.28);
  --gh-plum-100: rgba(156, 134, 255, 0.17);
  --gh-plum-50:  rgba(156, 134, 255, 0.10);

  /* Text ramp ("cocoa"): ink flips to moonlight. 900 stays dark: it is the
     label colour on bright fills (butter badge, pink chips). */
  --gh-cocoa-900: #170D2E;
  --gh-cocoa-700: #F3EEFF;
  --gh-cocoa-500: #C9BEF0;
  --gh-cocoa-300: #ADA0DA;

  /* Surfaces ("cream"): lilac mist becomes smoke. cream-50 is used as
     light text on always-dark brand surfaces, so it stays light. */
  --gh-cream-50:  #F7F3FF;
  --gh-cream-100: rgba(255, 255, 255, 0.06);
  --gh-cream-200: rgba(255, 255, 255, 0.10);
  --gh-cream-300: rgba(255, 255, 255, 0.18);

  /* Blush */
  --gh-pink-700: #FFA6CB;
  --gh-pink-500: #FF7EB6;
  --gh-pink-300: #FFB3D1;
  --gh-pink-100: rgba(255, 126, 182, 0.16);
  --gh-pink-50:  rgba(255, 126, 182, 0.09);

  /* Phase identity, tuned to glow on dark */
  --gh-menstrual:       #FF6F9F;
  --gh-menstrual-soft:  rgba(255, 111, 159, 0.16);
  --gh-follicular:      #5EE0B0;
  --gh-follicular-soft: rgba(94, 224, 176, 0.14);
  --gh-ovulation:       #FFCF6B;
  --gh-ovulation-soft:  rgba(255, 207, 107, 0.14);
  --gh-luteal:          #A88BFF;
  --gh-luteal-soft:     rgba(168, 139, 255, 0.16);

  /* Semantic */
  --gh-success: #4FD39A;
  --gh-warning: #FFB35C;
  --gh-error:   #FF6B86;
  --gh-info:    #7FA8FF;
  --gh-gold-500: #FFCF6B;
  --gh-gold-100: rgba(255, 207, 107, 0.14);

  /* Theme */
  --bg:            #0F0A1F;
  --bg-elevated:   #1A1330;
  --bg-card:       #1E1638;
  --bg-tint:       #281D4C;
  --bg-tint-pink:  #34172F;
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text:          #F3EEFF;
  --text-muted:    #C9BEF0;
  --text-subtle:   #ADA0DA;
  --text-inverse:  #170D2E;
  --accent:        #9C86FF;
  --accent-text:   #170D2E;
  --accent-on-dark: #FFD3E6;
  --action:        #FF7EB6;
  --action-text:   #170D2E;

  /* Elevation: deep shadows plus a whisper of violet light */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 12px 30px -12px rgba(0, 0, 0, 0.6), 0 0 24px -12px rgba(140, 110, 255, 0.25);
  --shadow-lg:   0 18px 48px -14px rgba(0, 0, 0, 0.65), 0 0 32px -14px rgba(140, 110, 255, 0.3);
  --shadow-xl:   0 28px 70px -18px rgba(0, 0, 0, 0.7), 0 0 40px -16px rgba(140, 110, 255, 0.32);
  --shadow-plum: 0 12px 28px -8px rgba(124, 92, 255, 0.55);
  --shadow-pink: 0 12px 28px -8px rgba(255, 110, 175, 0.45);

  /* Bloom helpers */
  --bloom-ink: #F3EEFF;
  --bloom-violet: #B09CFF;
  --bloom-violet-deep: #C9BAFF;
  --bloom-grad: linear-gradient(118deg, #5B3FD9 0%, #8444D0 52%, #C2458B 100%);
  --bloom-grad-soft: linear-gradient(135deg, #6447E0 0%, #8A48D2 100%);
  --bloom-grad-hero:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 110, 175, 0.42) 0%, rgba(255, 110, 175, 0) 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(110, 160, 255, 0.18) 0%, rgba(110, 160, 255, 0) 60%),
    linear-gradient(140deg, #4F33C9 0%, #5B34BE 55%, #3B2394 100%);
  --bloom-glass: rgba(255, 255, 255, 0.06);
  --bloom-glass-strong: rgba(255, 255, 255, 0.09);
  --bloom-glass-border: rgba(255, 255, 255, 0.10);
  --bloom-blur: blur(20px) saturate(140%);
  --bloom-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 40px -20px rgba(0, 0, 0, 0.7),
    0 0 30px -14px rgba(140, 110, 255, 0.28);
  --bloom-mesh:
    radial-gradient(110% 55% at 0% 0%, #2A1B5C 0%, rgba(42, 27, 92, 0) 64%),
    radial-gradient(85% 45% at 100% 4%, #3A1530 0%, rgba(58, 21, 48, 0) 66%),
    radial-gradient(90% 45% at 100% 60%, rgba(52, 32, 118, 0.55) 0%, rgba(52, 32, 118, 0) 62%),
    radial-gradient(100% 50% at 0% 100%, rgba(255, 168, 140, 0.11) 0%, rgba(255, 168, 140, 0) 62%),
    radial-gradient(80% 40% at 100% 100%, rgba(120, 40, 100, 0.30) 0%, rgba(120, 40, 100, 0) 60%),
    linear-gradient(180deg, #120C27 0%, #0F0A1F 48%, #130C1E 100%);

  /* Night-only helpers */
  --night-base: #0F0A1F;
  --night-sheet: #17102B;
  --night-tint-violet: rgba(156, 134, 255, 0.14);
  --night-tint-pink: rgba(255, 126, 182, 0.10);
  --night-hairline: rgba(255, 255, 255, 0.08);
}

/* ----------------------------------------------------------------
   2. CANVAS
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark body,
:root[data-gh-theme="bloom"].theme-dark .device { background: var(--bg); }
:root[data-gh-theme="bloom"].theme-dark ::selection { background: rgba(156, 134, 255, 0.45); color: #fff; }

:root[data-gh-theme="bloom"].theme-dark .screen,
:root[data-gh-theme="bloom"].theme-dark .bestie-screen,
:root[data-gh-theme="bloom"].theme-dark .welcome,
:root[data-gh-theme="bloom"].theme-dark .auth-screen {
  background: var(--bloom-mesh);
}
:root[data-gh-theme="bloom"].theme-dark .splash {
  background:
    radial-gradient(80% 55% at 50% 30%, rgba(160, 60, 130, 0.45), transparent 70%),
    radial-gradient(70% 50% at 50% 90%, rgba(98, 70, 220, 0.35), transparent 70%),
    linear-gradient(180deg, #120C27 0%, #0F0A1F 100%);
}
@media (min-width: 900px) {
  :root[data-gh-theme="bloom"].theme-dark .app-stage {
    background: linear-gradient(135deg, #0F0A1F 0%, #1B1030 55%, #22101F 100%);
  }
}

/* ----------------------------------------------------------------
   3. TYPE
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .today-greet,
:root[data-gh-theme="bloom"].theme-dark .onb-title,
:root[data-gh-theme="bloom"].theme-dark .premium-h1 {
  background: linear-gradient(100deg, #FFFFFF 0%, #EDE6FF 50%, #CDBDFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text);
}

/* ----------------------------------------------------------------
   4. TOP BAR
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .top-bar-back,
:root[data-gh-theme="bloom"].theme-dark .top-bar .top-bar-action {
  background: var(--bloom-glass-strong);
  border: 1px solid var(--bloom-glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
  color: var(--text);
}
:root[data-gh-theme="bloom"].theme-dark .top-bar-back:hover,
:root[data-gh-theme="bloom"].theme-dark .top-bar .top-bar-action:hover { background: rgba(255, 255, 255, 0.13); }
:root[data-gh-theme="bloom"].theme-dark .top-bar .top-bar-action[data-route="you"] { background: transparent; border-color: transparent; box-shadow: none; }
/* Legacy dark rule paints floating buttons cocoa-brown (!important) */
:root[data-gh-theme="bloom"].theme-dark .top-bar-back[style*="rgba(255"],
:root[data-gh-theme="bloom"].theme-dark .top-bar-action[style*="rgba(255"] {
  background: rgba(22, 15, 44, 0.66) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--text);
}

/* ----------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .btn-primary,
:root[data-gh-theme="bloom"].theme-dark .btn-rose {
  background: var(--bloom-grad);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(20, 6, 50, 0.3),
    0 12px 28px -10px rgba(110, 80, 255, 0.55),
    0 6px 18px -8px rgba(220, 80, 160, 0.4);
  text-shadow: 0 1px 1px rgba(20, 6, 60, 0.3);
}
:root[data-gh-theme="bloom"].theme-dark .btn-primary:hover:not(:disabled),
:root[data-gh-theme="bloom"].theme-dark .btn-rose:hover:not(:disabled) {
  background: var(--bloom-grad);
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 16px 34px -10px rgba(110, 80, 255, 0.65),
    0 8px 22px -8px rgba(220, 80, 160, 0.5);
}
:root[data-gh-theme="bloom"].theme-dark .btn-primary:disabled,
:root[data-gh-theme="bloom"].theme-dark .btn-rose:disabled {
  background: linear-gradient(118deg, rgba(120, 96, 230, 0.20) 0%, rgba(150, 90, 210, 0.18) 52%, rgba(210, 90, 160, 0.16) 100%);
  color: var(--text-subtle);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  text-shadow: none;
}
:root[data-gh-theme="bloom"].theme-dark .btn-secondary {
  background: var(--bloom-glass-strong);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
:root[data-gh-theme="bloom"].theme-dark .btn-ghost { color: var(--text); }
:root[data-gh-theme="bloom"].theme-dark .btn-ghost:hover:not(:disabled) { background: rgba(156, 134, 255, 0.12); }
:root[data-gh-theme="bloom"].theme-dark .btn-cocoa,
:root[data-gh-theme="bloom"].theme-dark .btn-cocoa:hover:not(:disabled) {
  background: #F3EEFF;
  color: #1A1036;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.7), 0 0 22px -10px rgba(200, 180, 255, 0.4);
}

/* ----------------------------------------------------------------
   6. GLASS SURFACES
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .card,
:root[data-gh-theme="bloom"].theme-dark .stat-tile,
:root[data-gh-theme="bloom"].theme-dark .predict,
:root[data-gh-theme="bloom"].theme-dark .tip-card,
:root[data-gh-theme="bloom"].theme-dark .health-strip,
:root[data-gh-theme="bloom"].theme-dark .wear-card,
:root[data-gh-theme="bloom"].theme-dark .wear-tile,
:root[data-gh-theme="bloom"].theme-dark .you-list,
:root[data-gh-theme="bloom"].theme-dark .quiz-block,
:root[data-gh-theme="bloom"].theme-dark .product-card,
:root[data-gh-theme="bloom"].theme-dark .cal-sugg-card,
:root[data-gh-theme="bloom"].theme-dark .plan-card,
:root[data-gh-theme="bloom"].theme-dark .feat-card {
  background: var(--bloom-glass);
  border: 1px solid var(--bloom-glass-border);
  box-shadow: var(--bloom-card-shadow);
  -webkit-backdrop-filter: var(--bloom-blur);
  backdrop-filter: var(--bloom-blur);
  color: var(--text);
}
/* Legacy dark mode forces .card-tinted to a flat tint with !important */
:root[data-gh-theme="bloom"].theme-dark .card-tinted {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(132, 104, 255, 0.24) 0%, rgba(132, 104, 255, 0) 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(255, 110, 175, 0.16) 0%, rgba(255, 110, 175, 0) 60%),
    rgba(255, 255, 255, 0.05) !important;
  border-color: var(--bloom-glass-border);
}
:root[data-gh-theme="bloom"].theme-dark .card-clickable:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 18px 38px -16px rgba(0, 0, 0, 0.7), 0 0 30px -12px rgba(140, 110, 255, 0.4);
}
:root[data-gh-theme="bloom"].theme-dark .card-clickable.is-selected {
  border-color: #9C86FF;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(156, 134, 255, 0.26), rgba(156, 134, 255, 0.10) 70%);
  box-shadow:
    0 0 0 3px rgba(156, 134, 255, 0.18),
    0 16px 34px -16px rgba(110, 80, 255, 0.55);
}
:root[data-gh-theme="bloom"].theme-dark .divider { background: var(--night-hairline); }
/* Theme picker check badge: white tick needs a deep violet disc */
:root[data-gh-theme="bloom"].theme-dark .theme-check { background: var(--bloom-grad-soft); color: #fff; box-shadow: 0 0 12px -2px rgba(140, 110, 255, 0.7); }

/* Phase tagline card on Today: phase-tinted glass, night edition */
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="--gh-follicular-soft"] {
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(94, 224, 176, 0.22) 0%, rgba(94, 224, 176, 0) 70%),
    radial-gradient(90% 140% at 100% 100%, rgba(110, 170, 255, 0.14) 0%, rgba(110, 170, 255, 0) 70%),
    rgba(255, 255, 255, 0.05) !important;
}
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="--gh-menstrual-soft"] {
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(255, 111, 159, 0.24) 0%, rgba(255, 111, 159, 0) 70%),
    radial-gradient(90% 140% at 100% 100%, rgba(255, 160, 130, 0.14) 0%, rgba(255, 160, 130, 0) 70%),
    rgba(255, 255, 255, 0.05) !important;
}
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="--gh-ovulation-soft"] {
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(255, 207, 107, 0.20) 0%, rgba(255, 207, 107, 0) 70%),
    radial-gradient(90% 140% at 100% 100%, rgba(255, 126, 182, 0.14) 0%, rgba(255, 126, 182, 0) 70%),
    rgba(255, 255, 255, 0.05) !important;
}
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="--gh-luteal-soft"] {
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(168, 139, 255, 0.26) 0%, rgba(168, 139, 255, 0) 70%),
    radial-gradient(90% 140% at 100% 100%, rgba(255, 126, 182, 0.14) 0%, rgba(255, 126, 182, 0) 70%),
    rgba(255, 255, 255, 0.05) !important;
}

/* ----------------------------------------------------------------
   7. CHIPS, PILLS, INPUTS, CONTROLS
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .chip {
  background: var(--bloom-glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
}
@media (hover: hover) {
  :root[data-gh-theme="bloom"].theme-dark .chip:hover { background: rgba(255, 255, 255, 0.14); }
}
:root[data-gh-theme="bloom"].theme-dark .chip.is-selected,
:root[data-gh-theme="bloom"].theme-dark .chip.is-active,
:root[data-gh-theme="bloom"].theme-dark .chip-lg.is-selected,
:root[data-gh-theme="bloom"].theme-dark .symptom-pill.is-selected,
:root[data-gh-theme="bloom"].theme-dark .symptom-pill.is-active {
  background: var(--bloom-grad-soft);
  border-color: rgba(200, 180, 255, 0.35);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 20px -8px rgba(110, 80, 255, 0.65);
}
:root[data-gh-theme="bloom"].theme-dark .chip.chip-danger {
  color: #FF9DB0;
  border-color: rgba(255, 107, 134, 0.35);
  background: rgba(255, 107, 134, 0.08);
}

:root[data-gh-theme="bloom"].theme-dark .pill { background: rgba(255, 255, 255, 0.09); color: var(--text); }
:root[data-gh-theme="bloom"].theme-dark .pill-plum,
:root[data-gh-theme="bloom"].theme-dark .pill-luteal    { background: rgba(156, 134, 255, 0.20); color: #D6CBFF; }
:root[data-gh-theme="bloom"].theme-dark .pill-sage,
:root[data-gh-theme="bloom"].theme-dark .pill-follicular{ background: rgba(94, 224, 176, 0.16); color: #8FF0CB; }
:root[data-gh-theme="bloom"].theme-dark .pill-menstrual,
:root[data-gh-theme="bloom"].theme-dark .pill-rose      { background: rgba(255, 111, 159, 0.18); color: #FFA9C6; }
:root[data-gh-theme="bloom"].theme-dark .pill-ovulation,
:root[data-gh-theme="bloom"].theme-dark .pill-gold      { background: rgba(255, 207, 107, 0.16); color: #FFD98A; }

:root[data-gh-theme="bloom"].theme-dark .input,
:root[data-gh-theme="bloom"].theme-dark .textarea,
:root[data-gh-theme="bloom"].theme-dark .select {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
:root[data-gh-theme="bloom"].theme-dark .input::placeholder,
:root[data-gh-theme="bloom"].theme-dark .textarea::placeholder { color: var(--text-subtle); }
:root[data-gh-theme="bloom"].theme-dark .input:focus,
:root[data-gh-theme="bloom"].theme-dark .textarea:focus,
:root[data-gh-theme="bloom"].theme-dark .select:focus {
  border-color: #9C86FF;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 4px rgba(156, 134, 255, 0.22);
}
:root[data-gh-theme="bloom"].theme-dark .select option { background: var(--bg-elevated); color: var(--text); }

:root[data-gh-theme="bloom"].theme-dark .switch { background: rgba(255, 255, 255, 0.16); }
:root[data-gh-theme="bloom"].theme-dark .switch.is-on { background: var(--bloom-grad-soft); }
:root[data-gh-theme="bloom"].theme-dark .switch::after { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }

:root[data-gh-theme="bloom"].theme-dark .progress-bar,
:root[data-gh-theme="bloom"].theme-dark .confidence-bar,
:root[data-gh-theme="bloom"].theme-dark .predict-bar { background: rgba(255, 255, 255, 0.09); }
:root[data-gh-theme="bloom"].theme-dark .progress-bar-fill,
:root[data-gh-theme="bloom"].theme-dark .confidence-bar-fill {
  background: linear-gradient(90deg, #9C86FF 0%, #FF7EB6 100%);
  box-shadow: 0 0 12px rgba(255, 126, 182, 0.45);
}
:root[data-gh-theme="bloom"].theme-dark .unit-pill:not(.is-active) { color: var(--text-muted); border-color: rgba(255, 255, 255, 0.14); }
:root[data-gh-theme="bloom"].theme-dark .unit-pill.is-active {
  background: var(--bloom-grad-soft);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(110, 80, 255, 0.65);
}

:root[data-gh-theme="bloom"].theme-dark .avatar {
  background: linear-gradient(135deg, #3B2A7E 0%, #5B2453 100%);
  color: #E4DAFF;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .avatar-wrap .avatar-edit-badge {
  background: var(--bloom-grad-soft);
  border-color: var(--night-base);
}

:root[data-gh-theme="bloom"].theme-dark .row-icon {
  background: linear-gradient(135deg, rgba(156, 134, 255, 0.18) 0%, rgba(255, 126, 182, 0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
:root[data-gh-theme="bloom"].theme-dark .row-title { color: var(--text); }
:root[data-gh-theme="bloom"].theme-dark .row-subtitle,
:root[data-gh-theme="bloom"].theme-dark .row-trail { color: var(--text-muted); }
:root[data-gh-theme="bloom"].theme-dark .row + .row { border-top-color: var(--night-hairline); }
:root[data-gh-theme="bloom"].theme-dark .row:hover { background: rgba(255, 255, 255, 0.04); }

/* Brand mark: brighter violet-to-blush so it reads on the night canvas */
:root[data-gh-theme="bloom"].theme-dark linearGradient[id^="bm-"] stop:nth-of-type(1) { stop-color: #FF9CC8; }
:root[data-gh-theme="bloom"].theme-dark linearGradient[id^="bm-"] stop:nth-of-type(2) { stop-color: #B09CFF; }
:root[data-gh-theme="bloom"].theme-dark linearGradient[id^="bm-"] stop:nth-of-type(3) { stop-color: #7E62F2; }

/* ----------------------------------------------------------------
   8. TAB BAR: floating dark glass pill + glowing Log orb
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .tab-bar {
  background: rgba(24, 16, 46, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 44px -16px rgba(0, 0, 0, 0.75),
    0 0 36px -16px rgba(140, 110, 255, 0.35);
}
:root[data-gh-theme="bloom"].theme-dark .tab { color: var(--text-subtle); }
:root[data-gh-theme="bloom"].theme-dark .tab.is-active { color: #E4DAFF; }
:root[data-gh-theme="bloom"].theme-dark .tab.is-active .tab-icon { color: #C3B3FF; }
:root[data-gh-theme="bloom"].theme-dark .tab-indicator {
  background: linear-gradient(135deg, rgba(156, 134, 255, 0.26) 0%, rgba(255, 126, 182, 0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 16px -6px rgba(156, 134, 255, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .tab.is-fab .tab-icon {
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 60%),
    linear-gradient(140deg, #6447E0 0%, #9045D2 55%, #D2509A 100%);
  box-shadow:
    0 0 0 4px #1A1232,
    0 0 0 5px rgba(255, 255, 255, 0.08),
    0 12px 30px -6px rgba(110, 80, 255, 0.65),
    0 6px 24px -6px rgba(255, 110, 175, 0.5);
  animation: bloom-night-fab-glow 4s ease-in-out infinite;
}
:root[data-gh-theme="bloom"].theme-dark .tab.is-fab span:not(.tab-icon) { color: #D6CBFF; }
:root[data-gh-theme="bloom"].theme-dark .device:has(> .tab-bar:not([hidden])) > #screen-mount::after {
  background: linear-gradient(180deg, rgba(15, 10, 31, 0) 0%, rgba(16, 10, 30, 0.78) 55%, rgba(16, 10, 30, 0.94) 100%);
}
@keyframes bloom-night-fab-glow {
  0%, 100% {
    box-shadow: 0 0 0 4px #1A1232, 0 0 0 5px rgba(255, 255, 255, 0.08), 0 12px 30px -6px rgba(110, 80, 255, 0.65), 0 6px 24px -6px rgba(255, 110, 175, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px #1A1232, 0 0 0 5px rgba(255, 255, 255, 0.12), 0 14px 38px -6px rgba(110, 80, 255, 0.8), 0 8px 30px -4px rgba(255, 110, 175, 0.62);
  }
}

/* ----------------------------------------------------------------
   9. PHASE RING (Today hero): luminous on the night sky
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .phase-ring::before {
  background: radial-gradient(circle,
    rgba(120, 90, 255, 0) 46%,
    rgba(140, 110, 255, 0.40) 60%,
    rgba(255, 110, 175, 0.26) 70%,
    rgba(255, 150, 120, 0) 80%);
  filter: blur(12px);
}
:root[data-gh-theme="bloom"].theme-dark .phase-ring svg {
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}
:root[data-gh-theme="bloom"].theme-dark .phase-ring-track { stroke: rgba(176, 156, 255, 0.13); }
:root[data-gh-theme="bloom"].theme-dark .phase-ring-prog {
  filter: drop-shadow(0 0 8px rgba(255, 126, 182, 0.7)) drop-shadow(0 0 16px rgba(140, 110, 255, 0.55));
}
:root[data-gh-theme="bloom"].theme-dark #gh-ring-grad stop:nth-of-type(1) { stop-color: #FF92C6; }
:root[data-gh-theme="bloom"].theme-dark #gh-ring-grad stop:nth-of-type(2) { stop-color: #B7A0FF; }
:root[data-gh-theme="bloom"].theme-dark #gh-ring-grad stop:nth-of-type(3) { stop-color: #7B5CF0; }
:root[data-gh-theme="bloom"].theme-dark .phase-ring-glass {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(156, 134, 255, 0.08) 100%),
    rgba(20, 13, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -14px 30px rgba(156, 134, 255, 0.14),
    0 20px 44px -12px rgba(0, 0, 0, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .phase-ring-bead i {
  border-color: #F6F1FF;
}
:root[data-gh-theme="bloom"].theme-dark .phase-ring-day {
  background: linear-gradient(180deg, #FFFFFF 0%, #CDBDFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text);
}
:root[data-gh-theme="bloom"].theme-dark .phase-ring-status { color: var(--text-muted); }
/* Phase label colours are inline: retune them to glow on the dark disc */
:root[data-gh-theme="bloom"].theme-dark .phase-ring-label { color: #C3B3FF; }
:root[data-gh-theme="bloom"].theme-dark .phase-ring-label[style*="#A6477A"] { color: #FF9DC0 !important; }
:root[data-gh-theme="bloom"].theme-dark .phase-ring-label[style*="#7C9A78"] { color: #7DEBC2 !important; }
:root[data-gh-theme="bloom"].theme-dark .phase-ring-label[style*="#C9912F"] { color: #FFD98A !important; }
:root[data-gh-theme="bloom"].theme-dark .phase-ring-label[style*="#6B4C9A"] { color: #C3B3FF !important; }

/* ----------------------------------------------------------------
   10. TODAY
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .qa {
  background: var(--bloom-glass);
  border: 1px solid var(--bloom-glass-border);
  color: var(--text-muted);
  box-shadow: var(--bloom-card-shadow);
}
:root[data-gh-theme="bloom"].theme-dark .qa.is-logged {
  background: linear-gradient(150deg, rgba(156, 134, 255, 0.28) 0%, rgba(255, 126, 182, 0.18) 100%);
  border-color: rgba(176, 156, 255, 0.6);
  color: #E4DAFF;
  box-shadow: 0 0 0 3px rgba(156, 134, 255, 0.14), 0 12px 26px -14px rgba(110, 80, 255, 0.6);
}

:root[data-gh-theme="bloom"].theme-dark .bestie-card {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 110, 175, 0.42) 0%, rgba(255, 110, 175, 0) 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(110, 160, 255, 0.18) 0%, rgba(110, 160, 255, 0) 60%),
    linear-gradient(140deg, #4F33C9 0%, #5E35BF 55%, #3D2496 100%);
  background-size: 160% 160%, 100% 100%, 100% 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 22px 44px -18px rgba(0, 0, 0, 0.7),
    0 0 40px -14px rgba(130, 95, 255, 0.55);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-card::before {
  background: radial-gradient(circle, rgba(255, 140, 200, 0.38), transparent 70%);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-card-cta {
  background: rgba(16, 6, 50, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

:root[data-gh-theme="bloom"].theme-dark .bestie-inline {
  background: var(--bloom-glass);
  border: 1px solid var(--bloom-glass-border);
  color: #D6CBFF;
  box-shadow: var(--bloom-card-shadow);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-inline:hover { background: rgba(255, 255, 255, 0.10); }
:root[data-gh-theme="bloom"].theme-dark .bestie-inline-dot {
  background: linear-gradient(135deg, #A88BFF, #FF7EB6);
  box-shadow: 0 0 0 4px rgba(156, 134, 255, 0.2), 0 0 12px rgba(255, 126, 182, 0.65);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-inline-arrow { color: var(--bloom-violet); }

:root[data-gh-theme="bloom"].theme-dark .health-stat + .health-stat,
:root[data-gh-theme="bloom"].theme-dark .wear-stat + .wear-stat { border-left-color: var(--night-hairline); }
:root[data-gh-theme="bloom"].theme-dark .predict-bar-fill[style*="--gh-cocoa-500"] {
  background: linear-gradient(90deg, #FFC49A, #FF8F73) !important;
}
:root[data-gh-theme="bloom"].theme-dark .predict-bar-fill[style*="--gh-follicular"] {
  background: linear-gradient(90deg, #8EEBC8, #47CF9C) !important;
}
:root[data-gh-theme="bloom"].theme-dark .predict-bar-fill[style*="--gh-pink-500"] {
  background: linear-gradient(90deg, #FFB6D4, #FF6FA9) !important;
}
:root[data-gh-theme="bloom"].theme-dark .predict-bar-fill[style*="--gh-menstrual"] {
  background: linear-gradient(90deg, #FF9DBE, #F0507F) !important;
}
:root[data-gh-theme="bloom"].theme-dark .tip-card-emoji {
  background: linear-gradient(135deg, rgba(156, 134, 255, 0.20) 0%, rgba(255, 126, 182, 0.14) 100%);
}

/* Girl Chocolate cards: dark-luxe violet, deepened for night */
:root[data-gh-theme="bloom"].theme-dark .choc-card,
:root[data-gh-theme="bloom"].theme-dark .choc-strip,
:root[data-gh-theme="bloom"].theme-dark .shop-hero,
:root[data-gh-theme="bloom"].theme-dark .bday-gift {
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(255, 110, 175, 0.34), transparent 60%),
    linear-gradient(140deg, #4A31BE 0%, #2A1868 100%);
  color: #F6F1FF;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75), 0 0 34px -14px rgba(130, 95, 255, 0.45);
}
:root[data-gh-theme="bloom"].theme-dark .choc-title { color: #fff; }

/* ----------------------------------------------------------------
   11. CALENDAR
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .cal-hero {
  background: var(--bloom-grad-hero);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 48px -20px rgba(0, 0, 0, 0.75),
    0 0 44px -16px rgba(130, 95, 255, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .cal-hero-insight {
  background: rgba(16, 6, 50, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
:root[data-gh-theme="bloom"].theme-dark .cal-hero-seg span { background: rgba(255, 255, 255, 0.22); }
:root[data-gh-theme="bloom"].theme-dark .cal-hero-seg span.on { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
/* The CTA is a light pill inside the violet hero: keep its label deep */
:root[data-gh-theme="bloom"].theme-dark .cal-hero-cta { background: rgba(255, 255, 255, 0.94); color: #3F25A8; }
:root[data-gh-theme="bloom"].theme-dark .cal-hero-cta:hover { background: #fff; }

:root[data-gh-theme="bloom"].theme-dark .cal-flowbar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 22px -12px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .cal-flowbar i + i { box-shadow: inset 2px 0 0 rgba(15, 10, 31, 0.85); }
:root[data-gh-theme="bloom"].theme-dark .cal-flowbar i[style*="--gh-menstrual"] { background: linear-gradient(90deg, #E9578E, #FF8DB4) !important; }
:root[data-gh-theme="bloom"].theme-dark .cal-flowbar i[style*="--gh-follicular"] { background: linear-gradient(90deg, #3FC796, #7DEBC2) !important; }
:root[data-gh-theme="bloom"].theme-dark .cal-flowbar i[style*="--gh-ovulation"] { background: linear-gradient(90deg, #F5B84A, #FFD98A) !important; }
:root[data-gh-theme="bloom"].theme-dark .cal-flowbar i[style*="--gh-luteal"] { background: linear-gradient(90deg, #8669F2, #B7A0FF) !important; }
:root[data-gh-theme="bloom"].theme-dark .cal-todaypin {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(15, 10, 31, 0.9), 0 0 12px rgba(255, 255, 255, 0.55);
}
:root[data-gh-theme="bloom"].theme-dark .cal-todaypin::after {
  background: #fff;
  border-color: #9C86FF;
  box-shadow: 0 0 12px rgba(255, 126, 182, 0.7);
}

:root[data-gh-theme="bloom"].theme-dark .cal-step:not(:last-child)::before {
  background: linear-gradient(180deg, rgba(156, 134, 255, 0.45), rgba(255, 126, 182, 0.25));
}
:root[data-gh-theme="bloom"].theme-dark .cal-dot {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 0 14px -4px rgba(156, 134, 255, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .cal-badge-now { color: #fff; }
:root[data-gh-theme="bloom"].theme-dark .cal-step-desc,
:root[data-gh-theme="bloom"].theme-dark .cal-empty-prompt,
:root[data-gh-theme="bloom"].theme-dark .cal-viewmonth {
  background: var(--bloom-glass);
  border: 1px solid var(--bloom-glass-border);
  color: var(--text-muted);
  box-shadow: var(--bloom-card-shadow);
}
:root[data-gh-theme="bloom"].theme-dark .cal-viewmonth.is-open { background: rgba(156, 134, 255, 0.10); border-color: rgba(176, 156, 255, 0.45); }
:root[data-gh-theme="bloom"].theme-dark .cal-vm-chev,
:root[data-gh-theme="bloom"].theme-dark .cal-viewmonth.is-open .cal-vm-chev {
  background: linear-gradient(135deg, rgba(156, 134, 255, 0.22), rgba(255, 126, 182, 0.14));
  color: #C3B3FF;
}
:root[data-gh-theme="bloom"].theme-dark .cal-day { color: var(--text); }
:root[data-gh-theme="bloom"].theme-dark .cal-day:hover { background: rgba(156, 134, 255, 0.12); }
:root[data-gh-theme="bloom"].theme-dark .cal-day.is-period {
  background: linear-gradient(140deg, #D9457F, #B42F67);
  color: #fff;
  box-shadow: 0 0 14px -4px rgba(255, 111, 159, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .cal-day.is-predicted-period { border-color: #FF6F9F; color: #FF9DC0; }
:root[data-gh-theme="bloom"].theme-dark .cal-day.is-fertile { background: rgba(94, 224, 176, 0.16); color: #9AF2D2; }
:root[data-gh-theme="bloom"].theme-dark .cal-day.is-ovulation {
  background: rgba(255, 207, 107, 0.16);
  color: #FFDD94;
  box-shadow: inset 0 0 0 1.5px #FFCF6B, 0 0 12px -4px rgba(255, 207, 107, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .cal-day.is-today.is-today {
  background: var(--bloom-grad-soft);
  color: #fff;
  box-shadow: 0 0 16px -4px rgba(140, 110, 255, 0.8);
}
:root[data-gh-theme="bloom"].theme-dark .cal-day.is-selected { outline-color: #B09CFF; }
:root[data-gh-theme="bloom"].theme-dark .cal-day-dot { background: #FF7EB6; }
:root[data-gh-theme="bloom"].theme-dark .cal-insight-tile {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 126, 182, 0.18), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(156, 134, 255, 0.24), transparent 60%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bloom-glass-border);
  box-shadow: var(--bloom-card-shadow);
}
:root[data-gh-theme="bloom"].theme-dark .cal-insight-text { color: var(--text); }
:root[data-gh-theme="bloom"].theme-dark .cal-insight-kicker,
:root[data-gh-theme="bloom"].theme-dark .cal-insight-link { color: #C3B3FF; }

/* ----------------------------------------------------------------
   12. INSIGHTS
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .bar-chart-bar {
  background: linear-gradient(180deg, #A88BFF 0%, #FF8DBE 100%);
  box-shadow: 0 0 14px -4px rgba(156, 134, 255, 0.55);
}
:root[data-gh-theme="bloom"].theme-dark .yoy-bars { background: rgba(255, 255, 255, 0.06); }

/* ----------------------------------------------------------------
   13. BESTIE CHAT
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .bestie-screen {
  background:
    radial-gradient(90% 40% at 0% 0%, #2A1B5C, rgba(42, 27, 92, 0) 66%),
    radial-gradient(80% 40% at 100% 30%, rgba(58, 21, 48, 0.9), rgba(58, 21, 48, 0) 66%),
    radial-gradient(100% 45% at 50% 100%, rgba(255, 168, 140, 0.10), rgba(255, 168, 140, 0) 66%),
    linear-gradient(180deg, #120C27 0%, #0F0A1F 55%, #130C1E 100%);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-header {
  background: rgba(20, 13, 40, 0.62);
  border-bottom: 1px solid var(--night-hairline);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.8);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-header .top-bar-action {
  background: var(--bloom-glass-strong);
  border: 1px solid var(--bloom-glass-border);
  color: var(--text);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-avatar-cute {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14), 0 0 22px -4px rgba(255, 126, 182, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-avatar::after { background: #4FD39A; border-color: #1A1232; }
:root[data-gh-theme="bloom"].theme-dark .bestie-name { color: var(--text); }
:root[data-gh-theme="bloom"].theme-dark .bestie-status { color: #7DEBC2; }

:root[data-gh-theme="bloom"].theme-dark .bubble-them {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px -16px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .bubble-me {
  background: var(--bloom-grad-soft);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 28px -14px rgba(110, 80, 255, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .bubble-time { color: var(--text-subtle); }
:root[data-gh-theme="bloom"].theme-dark .bubble-them .cite { background: rgba(156, 134, 255, 0.22); color: #DCD2FF; }
:root[data-gh-theme="bloom"].theme-dark .bubble-them a { color: #C9BAFF; border-bottom-color: #C9BAFF; }

:root[data-gh-theme="bloom"].theme-dark .bestie-quick-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #D6CBFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px -12px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .bestie-quick-chip:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(176, 156, 255, 0.5); }

:root[data-gh-theme="bloom"].theme-dark .chat-input {
  background: rgba(18, 12, 36, 0.72);
  border-top: 1px solid var(--night-hairline);
  box-shadow: 0 -12px 30px -24px rgba(0, 0, 0, 0.8);
}
:root[data-gh-theme="bloom"].theme-dark .chat-input input {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
:root[data-gh-theme="bloom"].theme-dark .chat-input input::placeholder { color: var(--text-subtle); }
:root[data-gh-theme="bloom"].theme-dark .chat-input input:focus { border-color: #9C86FF; box-shadow: 0 0 0 4px rgba(156, 134, 255, 0.2); }
:root[data-gh-theme="bloom"].theme-dark .chat-mic {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .chat-mic.is-listening { background: var(--bloom-grad-soft); color: #fff; }
:root[data-gh-theme="bloom"].theme-dark .chat-send {
  background: linear-gradient(140deg, #6447E0 0%, #9045D2 60%, #D2509A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 18px -4px rgba(140, 110, 255, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .breath-orb {
  background: radial-gradient(circle at 30% 30%, #FFC2DC, #A88BFF 60%, #5B3FD9);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.06), 0 0 60px -6px rgba(140, 110, 255, 0.7);
}

/* ----------------------------------------------------------------
   14. YOU
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .you-hero {
  background: radial-gradient(70% 70% at 50% 18%, rgba(140, 110, 255, 0.22) 0%, rgba(140, 110, 255, 0) 70%);
}
:root[data-gh-theme="bloom"].theme-dark .you-hero .avatar {
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.10),
    0 0 0 6px rgba(176, 156, 255, 0.35),
    0 0 44px -10px rgba(140, 110, 255, 0.65);
}
:root[data-gh-theme="bloom"].theme-dark .you-sub { color: var(--text-muted); }
:root[data-gh-theme="bloom"].theme-dark .you-section-title { color: var(--text-subtle) !important; }
:root[data-gh-theme="bloom"].theme-dark .coming-soon-pill { background: rgba(156, 134, 255, 0.18); color: #D6CBFF; }
/* Coming-soon rows stay visibly inactive, but readable on the dark glass */
:root[data-gh-theme="bloom"].theme-dark .row.is-coming-soon { opacity: 0.7; }
:root[data-gh-theme="bloom"].theme-dark .card[style*="var(--gh-plum-500), var(--gh-pink-500)"] {
  background:
    radial-gradient(70% 120% at 100% 100%, rgba(255, 110, 175, 0.42) 0%, rgba(255, 110, 175, 0) 65%),
    radial-gradient(60% 100% at 0% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(120deg, #5236CF 0%, #6C3BC8 55%, #8A3DB4 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 22px 40px -18px rgba(0, 0, 0, 0.7), 0 0 40px -14px rgba(130, 95, 255, 0.55);
}

/* ----------------------------------------------------------------
   15. SHEETS + LOG
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .sheet-backdrop {
  background: rgba(6, 3, 16, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .sheet {
  /* Same rule as light: the tint stays in the top 96px; the rows below sit on
     the flat base so horizontally scrolling rows never seam. */
  background:
    linear-gradient(180deg, rgba(23, 16, 43, 0) 0px, var(--night-sheet) 96px),
    linear-gradient(100deg, #2A1C5E 0%, #2A1745 55%, #36152F 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.8), 0 -1px 30px -12px rgba(140, 110, 255, 0.35);
  color: var(--text);
}
:root[data-gh-theme="bloom"].theme-dark .sheet-handle { background: rgba(255, 255, 255, 0.24); }

:root[data-gh-theme="bloom"].theme-dark .log-tab {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
:root[data-gh-theme="bloom"].theme-dark .log-tab.is-active {
  background: var(--bloom-grad-soft);
  border-color: rgba(200, 180, 255, 0.3);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 14px -6px rgba(110, 80, 255, 0.75);
}
:root[data-gh-theme="bloom"].theme-dark .log-section-title { color: var(--text) !important; }
:root[data-gh-theme="bloom"].theme-dark .log-foot {
  background: linear-gradient(180deg, rgba(23, 16, 43, 0) 0%, var(--night-sheet) 30%);
}
:root[data-gh-theme="bloom"].theme-dark .flow-opt,
:root[data-gh-theme="bloom"].theme-dark .mood-opt {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  color: var(--text-muted);
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .flow-opt.is-selected,
:root[data-gh-theme="bloom"].theme-dark .flow-opt.is-active {
  background: linear-gradient(160deg, rgba(255, 111, 159, 0.30) 0%, rgba(255, 111, 159, 0.16) 100%);
  border-color: #FF6F9F;
  color: #FFC2D7;
  box-shadow: 0 0 0 3px rgba(255, 111, 159, 0.16), 0 0 22px -8px rgba(255, 111, 159, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .mood-opt.is-selected,
:root[data-gh-theme="bloom"].theme-dark .mood-opt.is-active {
  background: linear-gradient(160deg, rgba(156, 134, 255, 0.32) 0%, rgba(156, 134, 255, 0.16) 100%);
  border-color: #9C86FF;
  color: #E4DAFF;
  box-shadow: 0 0 0 3px rgba(156, 134, 255, 0.16), 0 0 22px -8px rgba(140, 110, 255, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .timer-tile {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .timer-tile.is-running {
  border-color: #9C86FF;
  background: linear-gradient(160deg, rgba(156, 134, 255, 0.18), rgba(255, 126, 182, 0.10));
}
:root[data-gh-theme="bloom"].theme-dark .timer-title { color: var(--text) !important; }
:root[data-gh-theme="bloom"].theme-dark .timer-action { color: var(--bloom-violet); }
:root[data-gh-theme="bloom"].theme-dark .timer-sub { color: var(--text-muted); }
:root[data-gh-theme="bloom"].theme-dark .pinned-section {
  background: linear-gradient(150deg, rgba(156, 134, 255, 0.16) 0%, rgba(255, 126, 182, 0.10) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .pinned-section .log-section-title { color: #D6CBFF !important; }
:root[data-gh-theme="bloom"].theme-dark .sheet .chip:not(.is-selected) { background: rgba(255, 255, 255, 0.07); }
:root[data-gh-theme="bloom"].theme-dark #log-multi { color: var(--bloom-violet) !important; }

/* ----------------------------------------------------------------
   16. PREMIUM / PAYWALL
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="var(--gh-plum-500), var(--gh-plum-900)"] {
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(255, 110, 175, 0.40) 0%, rgba(255, 110, 175, 0) 100%),
    radial-gradient(70% 80% at 0% 100%, rgba(110, 160, 255, 0.18) 0%, rgba(110, 160, 255, 0) 70%),
    radial-gradient(70% 80% at 100% 100%, rgba(255, 110, 175, 0.24) 0%, rgba(255, 110, 175, 0) 70%),
    linear-gradient(160deg, #5236CF 0%, #4529AE 60%, #321D86 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 26px 50px -22px rgba(0, 0, 0, 0.8), 0 0 44px -16px rgba(130, 95, 255, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="var(--gh-plum-500), var(--gh-plum-900)"] * { color: #fff; }
:root[data-gh-theme="bloom"].theme-dark .paywall-plan.is-recommended {
  border: 1.5px solid #9C86FF;
  box-shadow: 0 0 0 4px rgba(156, 134, 255, 0.16), 0 0 30px -10px rgba(140, 110, 255, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .premium-hero {
  background: radial-gradient(circle at 50% 0%, rgba(140, 110, 255, 0.32), transparent 70%);
}
:root[data-gh-theme="bloom"].theme-dark .premium-feature-icon {
  background: linear-gradient(135deg, rgba(156, 134, 255, 0.22), rgba(255, 126, 182, 0.14));
  color: #C3B3FF;
}
:root[data-gh-theme="bloom"].theme-dark .plan-card { color: var(--text); }
:root[data-gh-theme="bloom"].theme-dark .plan-card.is-selected {
  border-color: #9C86FF;
  background: linear-gradient(160deg, rgba(156, 134, 255, 0.22), rgba(255, 126, 182, 0.12));
}

/* ----------------------------------------------------------------
   17. ONBOARDING + WELCOME + AUTH
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .onb-progress {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
:root[data-gh-theme="bloom"].theme-dark .onb-progress-fill {
  background: linear-gradient(90deg, #9C86FF 0%, #FF7EB6 100%);
  box-shadow: 0 0 14px rgba(255, 126, 182, 0.6);
}
:root[data-gh-theme="bloom"].theme-dark .onb-step { color: var(--text-subtle); }
:root[data-gh-theme="bloom"].theme-dark .onb-sub { color: var(--text-muted); }
:root[data-gh-theme="bloom"].theme-dark .onb-head .top-bar-action {
  background: var(--bloom-glass-strong);
  border: 1px solid var(--bloom-glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
  color: var(--text);
}
:root[data-gh-theme="bloom"].theme-dark .onb-foot {
  /* Continues the fade below so the foot never shows a seam against the mesh */
  background: linear-gradient(180deg, rgba(16, 10, 30, 0.82) 0%, rgba(16, 10, 30, 0.45) 100%);
}
:root[data-gh-theme="bloom"].theme-dark .onb-foot::before {
  background: linear-gradient(180deg, rgba(16, 10, 30, 0) 0%, rgba(16, 10, 30, 0.82) 100%);
}
:root[data-gh-theme="bloom"].theme-dark .onb-skip-pill {
  background: var(--bloom-glass-strong);
  border-color: var(--bloom-glass-border);
  color: var(--text);
}
@media (hover: none) {
  :root[data-gh-theme="bloom"].theme-dark .onb .card-clickable:hover { background: var(--bloom-glass); }
}
:root[data-gh-theme="bloom"].theme-dark .welcome-title,
:root[data-gh-theme="bloom"].theme-dark .splash-logo { color: #C9BAFF !important; }
:root[data-gh-theme="bloom"].theme-dark .welcome-dot { background: rgba(255, 255, 255, 0.22); }
:root[data-gh-theme="bloom"].theme-dark .welcome-dot.is-active { background: var(--bloom-grad-soft); }

:root[data-gh-theme="bloom"].theme-dark .auth-title { color: var(--text); }
/* Apple HIG: the white button style on dark backgrounds */
:root[data-gh-theme="bloom"].theme-dark .auth-apple-btn { background: #fff; color: #000; border-color: #fff; }
:root[data-gh-theme="bloom"].theme-dark .auth-google-btn { background: #fff; color: #1f1f1f; border-color: #fff; }

/* ----------------------------------------------------------------
   18. PMDD CHECK-IN (DRSP)
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .drsp-domain { color: var(--text-subtle); }
:root[data-gh-theme="bloom"].theme-dark .drsp-day {
  background: var(--bloom-glass);
  border: 1px solid var(--bloom-glass-border);
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px -12px rgba(0, 0, 0, 0.7);
}
:root[data-gh-theme="bloom"].theme-dark .drsp-day.is-active {
  background: var(--bloom-grad-soft);
  border-color: rgba(200, 180, 255, 0.3);
  color: #fff;
  box-shadow: 0 0 20px -6px rgba(140, 110, 255, 0.75);
}
:root[data-gh-theme="bloom"].theme-dark .drsp-day-dot { border-color: rgba(255, 255, 255, 0.3); }
:root[data-gh-theme="bloom"].theme-dark .drsp-dot {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
}
:root[data-gh-theme="bloom"].theme-dark .drsp-dot.is-under {
  background: rgba(156, 134, 255, 0.20);
  border-color: rgba(156, 134, 255, 0.20);
  color: #DCD2FF;
}
:root[data-gh-theme="bloom"].theme-dark .drsp-dot.is-on {
  background: var(--bloom-grad-soft);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 16px -4px rgba(140, 110, 255, 0.75);
}
:root[data-gh-theme="bloom"].theme-dark .drsp-val { color: var(--bloom-violet); }
:root[data-gh-theme="bloom"].theme-dark .drsp-num { color: var(--text-subtle); }
:root[data-gh-theme="bloom"].theme-dark .drsp-item + .drsp-item { border-top-color: var(--night-hairline); }
:root[data-gh-theme="bloom"].theme-dark .drsp-scale { color: var(--text-muted); }

/* ----------------------------------------------------------------
   19. TOAST + MISC
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .toast {
  background: rgba(52, 38, 100, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8), 0 0 30px -12px rgba(140, 110, 255, 0.5);
}
:root[data-gh-theme="bloom"].theme-dark .spinner { border-color: rgba(255, 255, 255, 0.14); border-top-color: #B09CFF; }
:root[data-gh-theme="bloom"].theme-dark .empty { color: var(--text-muted); }
:root[data-gh-theme="bloom"].theme-dark .bday-overlay { background: rgba(6, 3, 16, 0.65); }
:root[data-gh-theme="bloom"].theme-dark .bday-card {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 110, 175, 0.28), transparent 60%),
    linear-gradient(160deg, #221844 0%, #171030 100%);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
:root[data-gh-theme="bloom"].theme-dark .article-cover { background: linear-gradient(135deg, #5B3FD9, #C2458B); }
/* Dark-grey Twemoji glyphs (stethoscope, watch, phone...) vanish on night glass */
:root[data-gh-theme="bloom"].theme-dark img.twemoji[alt^="🩺"],
:root[data-gh-theme="bloom"].theme-dark img.twemoji[alt^="⏱"],
:root[data-gh-theme="bloom"].theme-dark img.twemoji[alt^="⌚"],
:root[data-gh-theme="bloom"].theme-dark img.twemoji[alt^="📱"],
:root[data-gh-theme="bloom"].theme-dark img.twemoji[alt^="🎧"],
:root[data-gh-theme="bloom"].theme-dark img.twemoji[alt^="🖤"],
:root[data-gh-theme="bloom"].theme-dark img.twemoji[alt^="🎙"] { filter: brightness(2.1) saturate(0.7); }
:root[data-gh-theme="bloom"].theme-dark .brand-logo,
:root[data-gh-theme="bloom"].theme-dark .brand-mark-img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10); }

/* ----------------------------------------------------------------
   20. COMPLETE PROFILE + INLINE STYLES FROM JS
   ---------------------------------------------------------------- */
:root[data-gh-theme="bloom"].theme-dark .row-trail span[aria-label="Answered"] {
  background: rgba(94, 224, 176, 0.18) !important;
  color: #8FF0CB !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}
:root[data-gh-theme="bloom"].theme-dark div[style*="height:100%"][style*="background: var(--gh-plum-500)"] {
  background: linear-gradient(90deg, #9C86FF 0%, #FF7EB6 100%) !important;
}
/* Deep plum-900 used as inline TEXT (course title, halacha card, log note) */
:root[data-gh-theme="bloom"].theme-dark [style*="color: var(--gh-plum-900)"] { color: var(--text) !important; }
/* Numbered badges: white numeral on a violet disc */
:root[data-gh-theme="bloom"].theme-dark span[style*="background: var(--gh-plum-500); color: #fff"] { background: #6447E0 !important; }

/* Legacy dark rules pin DARK text on cards that carried light washes.
   In Night those washes are translucent violet/pink, so flip to light text. */
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-pink-100"],
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-plum-100"],
:root[data-gh-theme="bloom"].theme-dark .card[style*="FBEAEF"],
:root[data-gh-theme="bloom"].theme-dark .card[style*="fbeaef"] { color: var(--text) !important; }
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-pink-100"] > .row-h-3 > .flex-1 > div,
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-plum-100"] > .row-h-3 > .flex-1 > div { color: var(--text); }
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-pink-100"] .btn-secondary,
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-plum-100"] .btn-secondary {
  background: var(--bloom-glass-strong);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.14);
}
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="gh-plum-100"],
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="gh-pink-100"] {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(132, 104, 255, 0.28) 0%, rgba(132, 104, 255, 0) 62%),
    radial-gradient(120% 140% at 100% 100%, rgba(255, 110, 175, 0.20) 0%, rgba(255, 110, 175, 0) 62%),
    rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
}
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="gh-plum-100"] *:not(.btn):not(.pill),
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="gh-pink-100"] *:not(.btn):not(.pill) {
  color: var(--text) !important;
}
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="gh-plum-100"] [style*="color: var(--gh-plum"]:not(.btn):not(.pill),
:root[data-gh-theme="bloom"].theme-dark .card-tinted[style*="gh-pink-100"] [style*="color: var(--gh-plum"]:not(.btn):not(.pill) {
  color: #C9BAFF !important;
}
/* Match the exact wash token ("gh-plum-50)" / "gh-plum-50,"): a bare
   "gh-plum-50" also matches "gh-plum-500" and would flatten the violet
   Premium cards (the legacy tokens.css rule has that bug). */
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-plum-50)"],
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-plum-50,"],
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-pink-50)"],
:root[data-gh-theme="bloom"].theme-dark .card[style*="gh-pink-50,"],
:root[data-gh-theme="bloom"].theme-dark .card[style*="F6F1FB"],
:root[data-gh-theme="bloom"].theme-dark .card[style*="FDF6F8"],
:root[data-gh-theme="bloom"].theme-dark #transfer-banner {
  background: linear-gradient(135deg, rgba(156, 134, 255, 0.14), rgba(255, 126, 182, 0.08)) !important;
  border-color: rgba(176, 156, 255, 0.28) !important;
  color: var(--text) !important;
}

/* ----------------------------------------------------------------
   21. FLOW DROPS + WELCOME ART (inline SVG gradients from JS)
   ---------------------------------------------------------------- */
/* Flow drops: same light-to-deep ramp, lifted so Heavy and Clots read on glass */
:root[data-gh-theme="bloom"].theme-dark #d-spotting stop:nth-of-type(1) { stop-color: #FFD6E3; }
:root[data-gh-theme="bloom"].theme-dark #d-spotting stop:nth-of-type(2) { stop-color: #FFBED3; }
:root[data-gh-theme="bloom"].theme-dark #d-light stop:nth-of-type(1)    { stop-color: #FFB3CB; }
:root[data-gh-theme="bloom"].theme-dark #d-light stop:nth-of-type(2)    { stop-color: #F06C9C; }
:root[data-gh-theme="bloom"].theme-dark #d-medium stop:nth-of-type(1)   { stop-color: #F4709F; }
:root[data-gh-theme="bloom"].theme-dark #d-medium stop:nth-of-type(2)   { stop-color: #CC4080; }
:root[data-gh-theme="bloom"].theme-dark #d-heavy stop:nth-of-type(1)    { stop-color: #DE4C88; }
:root[data-gh-theme="bloom"].theme-dark #d-heavy stop:nth-of-type(2)    { stop-color: #A9306E; }
:root[data-gh-theme="bloom"].theme-dark #d-clots stop:nth-of-type(1)    { stop-color: #C24494; }
:root[data-gh-theme="bloom"].theme-dark #d-clots stop:nth-of-type(2)    { stop-color: #8A3184; }
:root[data-gh-theme="bloom"].theme-dark .flow-drop svg { filter: drop-shadow(0 0 6px rgba(255, 111, 159, 0.35)); }

/* Welcome carousel art: brand gradients brightened for the night sky */
:root[data-gh-theme="bloom"].theme-dark #g0 stop:nth-of-type(1) { stop-color: #FF8CC0; stop-opacity: 0.32; }
:root[data-gh-theme="bloom"].theme-dark #g0 stop:nth-of-type(2) { stop-color: #8E6CF0; }
:root[data-gh-theme="bloom"].theme-dark #g0m stop:nth-of-type(1) { stop-color: #BBA7FF; }
:root[data-gh-theme="bloom"].theme-dark #g0m stop:nth-of-type(2) { stop-color: #B09CFF; }
:root[data-gh-theme="bloom"].theme-dark #g0m stop:nth-of-type(3) { stop-color: #7E62F2; }
:root[data-gh-theme="bloom"].theme-dark #g1a stop:nth-of-type(1),
:root[data-gh-theme="bloom"].theme-dark #g2a stop:nth-of-type(1),
:root[data-gh-theme="bloom"].theme-dark #g3a stop:nth-of-type(1) { stop-color: #FF9CC8; }
:root[data-gh-theme="bloom"].theme-dark #g1a stop:nth-of-type(2),
:root[data-gh-theme="bloom"].theme-dark #g2a stop:nth-of-type(2),
:root[data-gh-theme="bloom"].theme-dark #g3a stop:nth-of-type(2) { stop-color: #9C86FF; }
:root[data-gh-theme="bloom"].theme-dark #g3b stop:nth-of-type(1) { stop-color: #A88BFF; }
:root[data-gh-theme="bloom"].theme-dark #g3b stop:nth-of-type(2) { stop-color: #5B3FD9; }
:root[data-gh-theme="bloom"].theme-dark #g3c stop:nth-of-type(1) { stop-color: #A88BFF; stop-opacity: 0.28; }
:root[data-gh-theme="bloom"].theme-dark #g3c stop:nth-of-type(2) { stop-color: #A88BFF; }
:root[data-gh-theme="bloom"].theme-dark .welcome-art svg { filter: drop-shadow(0 0 24px rgba(140, 110, 255, 0.35)); }

/* ----------------------------------------------------------------
   22. DETAIL HEROES + SHEET EDGE
   ---------------------------------------------------------------- */
/* Phase guide hero is an inline flat phase fill: at night that is a glaring
   slab, so it becomes a phase-coloured glow rising out of the night sky. */
:root[data-gh-theme="bloom"].theme-dark .screen[data-screen="phase"] .scroll > div:first-child[style*="--gh-menstrual"] {
  background:
    radial-gradient(55% 65% at 50% 48%, rgba(255, 111, 159, 0.55) 0%, rgba(255, 111, 159, 0) 72%),
    linear-gradient(165deg, #5E1E4C 0%, #2E1858 100%) !important;
}
:root[data-gh-theme="bloom"].theme-dark .screen[data-screen="phase"] .scroll > div:first-child[style*="--gh-follicular"] {
  background:
    radial-gradient(55% 65% at 50% 48%, rgba(94, 224, 176, 0.42) 0%, rgba(94, 224, 176, 0) 72%),
    linear-gradient(165deg, #134A45 0%, #26195A 100%) !important;
}
:root[data-gh-theme="bloom"].theme-dark .screen[data-screen="phase"] .scroll > div:first-child[style*="--gh-ovulation"] {
  background:
    radial-gradient(55% 65% at 50% 48%, rgba(255, 207, 107, 0.42) 0%, rgba(255, 207, 107, 0) 72%),
    linear-gradient(165deg, #54391A 0%, #33185A 100%) !important;
}
:root[data-gh-theme="bloom"].theme-dark .screen[data-screen="phase"] .scroll > div:first-child[style*="--gh-luteal"] {
  background:
    radial-gradient(55% 65% at 50% 48%, rgba(168, 139, 255, 0.50) 0%, rgba(168, 139, 255, 0) 72%),
    linear-gradient(165deg, #3A2A8C 0%, #21144C 100%) !important;
}
/* The closed sheet waits just below the screen: keep its upward glow from
   tinting the bottom edge of screens without a tab bar. */
:root[data-gh-theme="bloom"].theme-dark .sheet:not(.is-open) { box-shadow: none; }

/* Cover screens (article, phase, recipe, workout): the top bar floats over
   the scroller. Once the cover scrolls away a frosted night veil fades in
   behind the bar so body text never slides under the clock. Scroll-driven;
   engines without scroll timelines keep the plain floating bar. */
@supports (animation-timeline: scroll()) {
  :root[data-gh-theme="bloom"].theme-dark .screen:is([data-screen="article"], [data-screen="phase"], [data-screen="recipe"], [data-screen="workout"]) > .screen-inner {
    timeline-scope: --bloom-night-cover;
  }
  :root[data-gh-theme="bloom"].theme-dark .screen:is([data-screen="article"], [data-screen="phase"], [data-screen="recipe"], [data-screen="workout"]) .scroll {
    scroll-timeline: --bloom-night-cover block;
  }
  :root[data-gh-theme="bloom"].theme-dark .screen:is([data-screen="article"], [data-screen="phase"], [data-screen="recipe"], [data-screen="workout"]) .top-bar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    bottom: -26px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 13, 42, 0.95) 0%, rgba(20, 13, 42, 0.88) 62%, rgba(20, 13, 42, 0) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    opacity: 0;
    animation: bloom-night-veil linear both;
    animation-timeline: --bloom-night-cover;
    animation-range: 110px 175px;
  }
}
@keyframes bloom-night-veil {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Covers end in a soft rounded foot with a night glow, matching light Bloom */
:root[data-gh-theme="bloom"].theme-dark .screen:is([data-screen="article"], [data-screen="recipe"], [data-screen="workout"]) .article-cover,
:root[data-gh-theme="bloom"].theme-dark .screen[data-screen="phase"] .scroll > div:first-child {
  border-radius: 0 0 34px 34px;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 22px 44px -24px rgba(0, 0, 0, 0.75),
    0 0 40px -18px rgba(140, 110, 255, 0.5);
}

/* Product "Save" tag: the light gradient's pink end was 4.09:1 under white text on Night. */
:root[data-gh-theme="bloom"].theme-dark .plan-card-tag {
  background: linear-gradient(118deg, #5B3FD9 0%, #8444D0 52%, #A83A78 100%);
  color: #FFFFFF;
}