/**
 * Vitality — Sun mode (product name) = technical `data-theme="light"`.
 * Pastel shell, dark type. Set by vitality-theme.js; stored as vitality-theme → light | dark | sun (sun = light).
 * Uses html[...] so tokens beat inline :root on each page (same element, higher specificity).
 */

html[data-theme="light"] {
  /* Pastel glass shell — lavender mesh base, frosted-white cards, deep plum ink */
  --black: #f3f0ff;
  --dark: #faf7ff;
  --card: rgba(255, 255, 255, 0.66);
  --card2: rgba(255, 255, 255, 0.5);
  --border: rgba(124, 58, 237, 0.13);
  --text: #1e0a3c;
  --muted: rgba(68, 53, 100, 0.86);
  --overlay: rgba(124, 58, 237, 0.07);
  --overlay-strong: rgba(124, 58, 237, 0.14);
  --overlay-muted: rgba(75, 58, 107, 0.55);
  --topbar-bg: rgba(255, 255, 255, 0.72);
  --eyebrow: #6d28d9;
  --heading: #1e0a3c;
  /* Glass + soft-shadow helpers for Sun mode */
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.84);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --shadow-soft: rgba(124, 58, 237, 0.12);
  --mesh:
    radial-gradient(ellipse at 0% 0%, #e0d4ff 0%, transparent 55%),
    radial-gradient(ellipse at 100% 8%, #ffd6e8 0%, transparent 50%),
    radial-gradient(ellipse at 88% 78%, #c7f2df 0%, transparent 48%),
    radial-gradient(ellipse at 8% 92%, #d0e8ff 0%, transparent 52%),
    radial-gradient(ellipse at 50% 45%, #f9f0ff 0%, transparent 60%);
  /* Brand accents on light — darkened enough for AA-readable small text on tinted surfaces */
  --pink: #c42279;
  --yellow: #8a6400;
  --green: #1d8045;
  --blue: #2f57ad;
  --purple: #6d28d9;
  --orange: #c0572f;
  --gradient: linear-gradient(135deg, #d9468f, #7c3aed, #3b68c4, #2f9e5a, #c9a227, #d97757);

  /* Role quick-strip (vitality-nav.js) — readable on pastel */
  --vq-strip-bg: linear-gradient(
    90deg,
    rgba(217, 70, 143, 0.12),
    rgba(124, 58, 237, 0.1),
    rgba(59, 104, 196, 0.1)
  );
  --vq-strip-border: rgba(72, 58, 102, 0.12);
  --vq-strip-shadow: 0 2px 14px rgba(72, 58, 102, 0.08);
  --vq-main-fg: #5b21b6;
  --vq-main-border: rgba(124, 58, 237, 0.35);
  --vq-main-bg: rgba(124, 58, 237, 0.08);
  --vq-main-fg-hover: #3b0764;
  --vq-main-border-hover: rgba(124, 58, 237, 0.5);
  --vq-main-bg-hover: rgba(124, 58, 237, 0.14);
  --vq-sub: rgba(61, 53, 88, 0.55);
  --vq-placeholder-fg: rgba(91, 33, 182, 0.75);
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #ebe4f2;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--purple);
  opacity: 0.55;
}

/* ── Dashboard home (My Tools) ── */
html[data-theme="light"] .topbar {
  background: var(--topbar-bg);
}
html[data-theme="light"] .topbar-eyebrow {
  color: var(--eyebrow);
}
html[data-theme="light"] .topbar-greeting {
  color: var(--heading);
}
html[data-theme="light"] .topbar-wheel-initials {
  color: var(--heading);
}
html[data-theme="light"] .name-gradient {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .pill {
  background: var(--overlay);
  border-color: var(--border);
  color: var(--muted);
}
html[data-theme="light"] .nav-item:hover {
  background: var(--overlay);
  color: var(--heading);
}
html[data-theme="light"] .nav-item:hover svg {
  stroke: var(--heading);
}
html[data-theme="light"] .nav-section-label {
  color: var(--eyebrow);
}
html[data-theme="light"] .notif-btn {
  background: var(--overlay);
}
html[data-theme="light"] .notif-btn:hover {
  border-color: var(--border);
}
html[data-theme="light"] .wheel-initials {
  color: var(--heading);
}
html[data-theme="light"] .hero-month-label {
  color: var(--muted);
}
html[data-theme="light"] .hero-theme {
  color: var(--heading);
}
/* "INTENTIONAL" etc. — avoid neon yellow on cream */
html[data-theme="light"] .hero-theme .accent {
  color: #5b21b6;
  text-shadow: none;
}
html[data-theme="light"] .hero-affirmation {
  color: #5c5278;
}
html[data-theme="light"] .section-title {
  color: var(--heading);
}
html[data-theme="light"] .stat-card:hover {
  border-color: var(--overlay-strong);
}
html[data-theme="light"] .course-title {
  color: var(--heading);
}
html[data-theme="light"] .od-title {
  color: var(--heading);
}
html[data-theme="light"] .od-card:hover {
  border-color: var(--overlay-strong);
}
html[data-theme="light"] .cat-card:hover .cat-name {
  color: var(--heading);
}
html[data-theme="light"] .cat-card:hover {
  border-color: var(--overlay-strong);
}
html[data-theme="light"] .course-card:hover {
  border-color: rgba(217, 70, 143, 0.35);
}
html[data-theme="light"] .stat-bar {
  background: var(--overlay);
}
html[data-theme="light"] .progress-bar {
  background: var(--overlay);
}
html[data-theme="light"] .domain-bar {
  background: var(--overlay);
}
html[data-theme="light"] .domain-score {
  color: var(--heading);
}
html[data-theme="light"] .announce-text {
  color: var(--muted);
}
html[data-theme="light"] .leader-name {
  color: var(--heading);
}
html[data-theme="light"] .my-tools-title {
  color: var(--heading);
}
html[data-theme="light"] .tool-name {
  color: var(--text);
}
html[data-theme="light"] .tool-item:hover {
  background: var(--overlay);
}
html[data-theme="light"] .tool-icon {
  background: var(--overlay);
}
html[data-theme="light"] .tool-divider {
  background: var(--overlay);
}
html[data-theme="light"] .tools-role-btn:hover {
  color: var(--heading);
  border-color: var(--overlay-strong);
}
html[data-theme="light"] .wheel-center-text {
  color: var(--heading);
}
html[data-theme="light"] .hero-tag {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .streak-badge {
  background: rgba(255, 248, 230, 0.95);
  border-color: rgba(184, 134, 11, 0.35);
  color: #92400e;
}
html[data-theme="light"] .hero-bg {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(217, 70, 143, 0.16) 0%,
    rgba(124, 58, 237, 0.12) 38%,
    rgba(59, 104, 196, 0.1) 68%,
    rgba(47, 158, 90, 0.08) 100%
  );
}
html[data-theme="light"] .notif-btn svg {
  stroke: var(--muted);
}
/* Bottom bars: My Tools mobile uses light shell; On Demand (.bnav-item) keeps moon-style dock in sun mode */
html[data-theme="light"] .bottom-nav:has(.bottom-nav-item) {
  background: rgba(255, 252, 254, 0.97);
  border-top-color: var(--border);
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) {
  background: var(--glass-strong);
  border-top-color: var(--border);
  box-shadow: 0 -4px 30px var(--shadow-soft);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) .bnav-label {
  color: var(--muted);
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) .bnav-item svg {
  stroke: var(--muted);
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) .bnav-item.active .bnav-label {
  color: var(--purple);
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) .bnav-item.active svg {
  stroke: var(--purple);
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) .bnav-item.active svg polygon {
  fill: var(--purple);
  stroke: none;
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) .bnav-item:hover {
  background: var(--overlay);
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) .bnav-item:hover .bnav-label {
  color: var(--heading);
}
html[data-theme="light"] .bottom-nav:has(.bnav-item) .bnav-item:hover svg {
  stroke: var(--heading);
}
html[data-theme="light"] .btn-ghost {
  background: var(--overlay);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .btn-ghost:hover {
  background: var(--overlay-strong);
}

html[data-theme="light"] .hero-cta-btn {
  color: #0f766e;
  border-color: #14b8a6;
  box-shadow: 0 0 16px rgba(20, 184, 166, 0.12);
}
html[data-theme="light"] .hero-cta-btn:hover {
  background: rgba(20, 184, 166, 0.12);
  color: var(--heading);
  box-shadow: 0 0 22px rgba(20, 184, 166, 0.2);
}

html[data-theme="light"] .theme-toggle .light-icon {
  opacity: 1;
}
html[data-theme="light"] .theme-toggle .dark-icon {
  opacity: 0;
}
html[data-theme="light"] .theme-toggle {
  background: var(--overlay);
  border-color: var(--border);
}
html[data-theme="light"] .theme-toggle:hover {
  background: var(--overlay-strong);
  border-color: var(--border);
}

/* Welcome overlay — eyebrow labels readable on pastel cards */
html[data-theme="light"] .welcome-overlay {
  background: rgba(243, 239, 248, 0.97);
}
html[data-theme="light"] .welcome-quote {
  color: var(--heading);
}
html[data-theme="light"] .welcome-card.theme-purple .welcome-eyebrow {
  color: #6d28d9;
}
html[data-theme="light"] .welcome-card.theme-green .welcome-eyebrow {
  color: #15803d;
}
html[data-theme="light"] .welcome-card.theme-blue .welcome-eyebrow {
  color: #1d4ed8;
}
html[data-theme="light"] .welcome-card.theme-sunset .welcome-eyebrow {
  color: #c2410c;
}
html[data-theme="light"] .welcome-card.theme-cosmic .welcome-eyebrow {
  color: #7c3aed;
}
html[data-theme="light"] .welcome-card.theme-pink .welcome-eyebrow {
  color: #be185d;
}
html[data-theme="light"] .welcome-card.theme-purple {
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.12), rgba(217, 70, 143, 0.08));
}
html[data-theme="light"] .welcome-card.theme-green {
  background: linear-gradient(145deg, rgba(47, 158, 90, 0.12), rgba(201, 160, 39, 0.08));
}
html[data-theme="light"] .welcome-card.theme-blue {
  background: linear-gradient(145deg, rgba(59, 104, 196, 0.12), rgba(47, 158, 90, 0.06));
}
html[data-theme="light"] .welcome-card.theme-sunset {
  background: linear-gradient(145deg, rgba(217, 119, 87, 0.14), rgba(217, 70, 143, 0.08));
}
html[data-theme="light"] .welcome-card.theme-cosmic {
  background: linear-gradient(
    145deg,
    rgba(124, 58, 237, 0.1),
    rgba(59, 104, 196, 0.08),
    rgba(201, 160, 39, 0.06)
  );
}
html[data-theme="light"] .welcome-card.theme-pink {
  background: linear-gradient(145deg, rgba(217, 70, 143, 0.1), rgba(201, 160, 39, 0.06));
}

/* ── Dashboard v2 / shared app shell ── */
html[data-theme="light"] .topbar-page-title {
  color: var(--heading);
}
html[data-theme="light"] .topbar-page-title .accent {
  background: linear-gradient(135deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .stat-num {
  color: var(--heading);
}
html[data-theme="light"] .pl-title {
  color: var(--heading);
}
html[data-theme="light"] .home-btn {
  background: var(--overlay);
  border-color: var(--border);
}
html[data-theme="light"] .home-btn-text {
  color: var(--muted);
}
html[data-theme="light"] .search-bar {
  background: var(--overlay);
  border-color: var(--border);
}
html[data-theme="light"] .search-bar input {
  color: var(--heading);
}
html[data-theme="light"] .search-bar input::placeholder {
  color: var(--muted);
}
html[data-theme="light"] .timer-btn {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.35);
}
html[data-theme="light"] .timer-btn-text {
  color: var(--purple);
}

/* Generic: pages using body + var(--black) */
html[data-theme="light"] body {
  background-color: var(--black);
  background-image: var(--mesh);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
}

/* ── Frosted-glass treatment for common card surfaces (Sun mode) ── */
html[data-theme="light"] .tool-card,
html[data-theme="light"] .card,
html[data-theme="light"] .mod,
html[data-theme="light"] .hl-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .pv-card,
html[data-theme="light"] .pv-row,
html[data-theme="light"] .uc-item,
html[data-theme="light"] .hub-panel,
html[data-theme="light"] .hub-tile,
html[data-theme="light"] .breath-card,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .ann-item,
html[data-theme="light"] .activity-item,
html[data-theme="light"] .mode-card,
html[data-theme="light"] .csub,
html[data-theme="light"] .glass-card {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 4px 22px var(--shadow-soft);
}
html[data-theme="light"] .tool-card:hover,
html[data-theme="light"] .mod:hover,
html[data-theme="light"] .uc-item:hover,
html[data-theme="light"] .mode-card:hover,
html[data-theme="light"] .breath-card:hover {
  box-shadow: 0 12px 34px var(--shadow-soft);
  border-color: rgba(167, 139, 250, 0.55);
}

/* White wordmark/logo is invisible on the pastel shell — render as deep-plum silhouette.
   (Share-card overlays sit on bright gradients and already use logo-black, so scope to headers.) */
html[data-theme="light"] img[src*="logo-white"] {
  filter: brightness(0) saturate(100%) invert(8%) sepia(48%) saturate(2200%) hue-rotate(258deg) brightness(95%) contrast(101%);
}
/* Share/story cards sit on bright brand gradients — keep their white logo */
html[data-theme="light"] .share-card-logo[src*="logo-white"] {
  filter: none;
}

/* ── Leaderboard: white text baked for Moon mode → deep ink on Sun glass.
   (Avatar circles .pod-av/.r-av/.hl-av sit on colored gradients — keep their white.) ── */
html[data-theme="light"] .tb-title,
html[data-theme="light"] .hl-head,
html[data-theme="light"] .hl-name,
html[data-theme="light"] .pod-name,
html[data-theme="light"] .r-name {
  color: var(--heading);
}
html[data-theme="light"] .hl-what strong {
  color: var(--heading) !important;
}

/* ── Vital Check dashboard: white headings baked for Moon → ink on Sun glass.
   (Wheel/avatar initials sit on colored gradients — keep their white.) ── */
html[data-theme="light"] .topbar-title,
html[data-theme="light"] .streak-hero-name,
html[data-theme="light"] .mini-streak-name,
html[data-theme="light"] .aura-level-name,
html[data-theme="light"] .opp-title,
html[data-theme="light"] .wheel-card-title,
html[data-theme="light"] .radar-score,
html[data-theme="light"] .domain-score,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .mood-value {
  color: var(--heading);
}
html[data-theme="light"] .vp-event-text {
  color: var(--muted);
}

/* ── Community Feed: post + sidebar text on Sun glass (avatars .p-av/.sug-av keep white) ── */
html[data-theme="light"] .p-name,
html[data-theme="light"] .sb-title,
html[data-theme="light"] .tfg-title {
  color: var(--heading);
}
html[data-theme="light"] .p-body,
html[data-theme="light"] .trend-tag,
html[data-theme="light"] .sug-name {
  color: var(--text);
}
html[data-theme="light"] .trend-num {
  color: rgba(30, 10, 60, 0.22);
}

/* ── Community Meet-Ups: hero + card titles on Sun glass ── */
html[data-theme="light"] .mu-title,
html[data-theme="light"] .mu-title2 {
  color: var(--heading);
}
html[data-theme="light"] .mu-sub {
  color: var(--muted);
}

/* ── Community Members: card names (avatars .mc-av keep white) ── */
html[data-theme="light"] .mc-name {
  color: var(--heading);
}

/* ── Community Chat: list names + received bubble text.
   (Sent .m-bubble.me sits on a gradient — keep white. .ch-head is a dark header bar.) ── */
html[data-theme="light"] .ci-name {
  color: var(--heading);
}
html[data-theme="light"] .m-bubble.them {
  color: var(--text);
}

/* ── Mobile bottom nav (.mobile-nav) — light glass instead of near-black.
   Items use var(--muted)/var(--green) tokens already, so only bg/border need theming. ── */
html[data-theme="light"] .mobile-nav {
  background: var(--glass-strong);
  border-top-color: var(--border);
  box-shadow: 0 -4px 30px var(--shadow-soft);
}

/* ════════════════════════════════════════════════════════════
   Sun-mode content text on glass cards — per-page polish pass.
   Headings/names → ink (--heading); body/labels → --text.
   Buttons, video controls, avatars keep their white (excluded).
   ════════════════════════════════════════════════════════════ */

/* Headings / titles / names that sit on light cards */
html[data-theme="light"] .aff-name,
html[data-theme="light"] .asset-name,
html[data-theme="light"] .dash-card-title,
html[data-theme="light"] .form-title,
html[data-theme="light"] .how-title,
html[data-theme="light"] .sec-title,
html[data-theme="light"] .pt-name,
html[data-theme="light"] .ep-title,
html[data-theme="light"] .fe-title,
html[data-theme="light"] .badge-name,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .intro-card-title,
html[data-theme="light"] .section-heading,
html[data-theme="light"] .streak-exp-title,
html[data-theme="light"] .aura-color-name,
html[data-theme="light"] .badge-exp-name,
html[data-theme="light"] .earn-group-title,
html[data-theme="light"] .fine-print-title,
html[data-theme="light"] .ac-title,
html[data-theme="light"] .ch-title,
html[data-theme="light"] .dm-title,
html[data-theme="light"] .dm-day-title,
html[data-theme="light"] .fc-title,
html[data-theme="light"] .cal-date,
html[data-theme="light"] .cal-month,
html[data-theme="light"] .uc-day,
html[data-theme="light"] .faq-q,
html[data-theme="light"] .v-title,
html[data-theme="light"] .ex-name,
html[data-theme="light"] .side-card-title,
html[data-theme="light"] .upload-title,
html[data-theme="light"] .lesson-title,
html[data-theme="light"] .attach-name,
html[data-theme="light"] .pl-card-title,
html[data-theme="light"] .si-title,
html[data-theme="light"] .replay-title,
html[data-theme="light"] .cw-title,
html[data-theme="light"] .history-title,
html[data-theme="light"] .mode-title,
html[data-theme="light"] .rec-title,
html[data-theme="light"] .victor-name {
  color: var(--heading);
}

/* Body copy / quotes / labels / descriptions on light cards */
html[data-theme="light"] .asset-format,
html[data-theme="light"] .earn-label,
html[data-theme="light"] .perk-text,
html[data-theme="light"] .pi-val,
html[data-theme="light"] .prog-label,
html[data-theme="light"] .sp-quote,
html[data-theme="light"] .terms-text,
html[data-theme="light"] .tip-row,
html[data-theme="light"] .tip-item,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .fe-desc,
html[data-theme="light"] .ph-sub,
html[data-theme="light"] .pts-row-label,
html[data-theme="light"] .earn-action,
html[data-theme="light"] .modal-prompt,
html[data-theme="light"] .modal-ta,
html[data-theme="light"] .level-desc,
html[data-theme="light"] .ch-p-count,
html[data-theme="light"] .dm-desc,
html[data-theme="light"] .dm-days-label,
html[data-theme="light"] .fc-desc,
html[data-theme="light"] .fc-ring-pct,
html[data-theme="light"] .inc-text,
html[data-theme="light"] .v-dur,
html[data-theme="light"] .v-num,
html[data-theme="light"] .ex-quote,
html[data-theme="light"] .success-sub,
html[data-theme="light"] .perm-text,
html[data-theme="light"] .prompt-text,
html[data-theme="light"] .record-label,
html[data-theme="light"] .fmt-label,
html[data-theme="light"] .lesson-desc,
html[data-theme="light"] .a-text,
html[data-theme="light"] .cw-prompt-text,
html[data-theme="light"] .msg-bubble:not(.me):not(.sent) {
  color: var(--text);
}
html[data-theme="light"] .intro-card-body strong {
  color: var(--heading);
}
/* Points & Status: level description used a leftover dark-mode white */
html[data-theme="light"] .level-desc {
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════
   GLOBAL mobile nav consistency (both themes) — loaded on every page.
   The unified bottom nav (#v-bnav) appears at <=768px, so desktop
   sidebars must hide and shells collapse at the SAME breakpoint,
   with clearance so content isn't hidden behind the fixed nav.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .app-shell, .shell { grid-template-columns: 1fr !important; }
  .sidebar { display: none !important; }
  .main, .page, .wrap, .hub-main, .mu-body, .feed-main { padding-bottom: 94px !important; }
  /* Crowded headers wrap instead of overflowing; search fields shrink to fit */
  .topbar { flex-wrap: wrap !important; row-gap: 10px; padding-left: 16px !important; padding-right: 16px !important; }
  .search-bar { min-width: 0 !important; }
}

/* ── Vitality Board (program pages): inline-dark panel → light frosted-glass in Sun mode.
   Scoped to .vboard so the dark video player / chat header (same hexes) stay dark. ── */
html[data-theme="light"] .vboard [style*="background:#252525"] {
  background: #ece6f7 !important;
}
html[data-theme="light"] .vboard [style*="background:#1a1a1a"] {
  background: #f6f2fc !important;
}
html[data-theme="light"] .vboard [style*="color:white"] {
  color: var(--heading) !important;
}
html[data-theme="light"] .vboard [style*="color:rgba(255,255,255,0.38)"],
html[data-theme="light"] .vboard [style*="color:rgba(255,255,255,0.3)"] {
  color: var(--muted) !important;
}
html[data-theme="light"] .vboard [style*="background:rgba(255,255,255,0.12)"] {
  background: rgba(30, 10, 60, 0.14) !important;
}
/* Section titles inside the board read as light blue/purple on white — deepen for AA */
html[data-theme="light"] .vboard .bc.learn .bc-title { color: #2f57ad !important; }
html[data-theme="light"] .vboard .bc.activate .bc-title { color: #6d28d9 !important; }
/* HSL card is a vibrant CTA "moment" — keep it saturated (no black fade) with its white text */
html[data-theme="light"] .vboard .bc.hsl {
  background: linear-gradient(165deg, #FF2D9B 0%, #9B2DFF 72%) !important;
}
html[data-theme="light"] .vboard .bc.connect .bc-title { color: #1d8045 !important; }
html[data-theme="light"] .vboard .bc.practice .bc-title { color: #c0572f !important; }

/* Emphasis (strong/em) hardcoded white inside already-themed containers — Sun blind spots */
html[data-theme="light"] .level-next strong,
html[data-theme="light"] .act-text strong,
html[data-theme="light"] .pv-team-note strong,
html[data-theme="light"] .perk-text strong,
html[data-theme="light"] .inc-text strong,
html[data-theme="light"] .perm-text strong,
html[data-theme="light"] .hsl-type-desc em {
  color: var(--heading);
}

/* Hover states that flip text to white (fine on Moon, invisible on Sun's light hover bg) */
html[data-theme="light"] .cw-prompt:hover .cw-prompt-text,
html[data-theme="light"] .tab:hover,
html[data-theme="light"] .tab-btn:hover,
html[data-theme="light"] .role-tab:hover,
html[data-theme="light"] .rf:hover,
html[data-theme="light"] .fvt-btn:hover,
html[data-theme="light"] .fchip:hover,
html[data-theme="light"] .filt:hover,
html[data-theme="light"] .modal-close:hover,
html[data-theme="light"] .show-more-link:hover,
html[data-theme="light"] .show-more-btn:hover,
html[data-theme="light"] .ch-btn:hover,
html[data-theme="light"] .time-btn:hover,
html[data-theme="light"] .replay-chip:hover,
html[data-theme="light"] .trend-item:hover {
  color: var(--heading);
}

/* Help Desk: bot bubble inherits ink, but the user (sent) bubble sits on --purple → keep white */
html[data-theme="light"] .msg.user .msg-bubble {
  color: #fff;
}

/* ── SYSTEMIC: form controls — typed text was white on light (invisible). Global, safe. ── */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  color: var(--text);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--overlay-muted);
}

/* ── Ghost buttons/chips: translucent-white bg + white text → ink on Sun.
   (Solid-colour buttons like .btn-listen on --orange, and the dark video player, keep white.) ── */
html[data-theme="light"] .btn-platform,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-close,
html[data-theme="light"] .si-tag,
html[data-theme="light"] .rule-chip {
  color: var(--text);
}
html[data-theme="light"] .btn-platform:hover,
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-close:hover {
  color: var(--heading);
}
html[data-theme="light"] .ph-stat strong {
  color: var(--heading);
}

/* ── Dashboard v2 / On Demand shell (shared components) ── */
html[data-theme="light"] .daily-download {
  border-color: var(--border);
}
html[data-theme="light"] .dd-bg {
  background: linear-gradient(
    135deg,
    rgba(217, 70, 143, 0.18) 0%,
    rgba(124, 58, 237, 0.14) 30%,
    rgba(59, 104, 196, 0.12) 55%,
    rgba(47, 158, 90, 0.1) 80%,
    rgba(201, 160, 39, 0.08) 100%
  );
}
html[data-theme="light"] .dd-label {
  color: var(--muted);
}
html[data-theme="light"] .dd-quote {
  color: var(--heading);
}
html[data-theme="light"] .dd-attribution {
  color: var(--muted);
}
html[data-theme="light"] .dd-date {
  color: var(--muted);
}
html[data-theme="light"] .dd-streak {
  background: rgba(255, 248, 230, 0.9);
  border-color: rgba(184, 134, 11, 0.3);
  color: #92400e;
}
html[data-theme="light"] .dd-share {
  background: var(--overlay);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .dd-share:hover {
  background: var(--overlay-strong);
  color: var(--heading);
}

html[data-theme="light"] .stat-card:hover {
  border-color: var(--overlay-strong);
}

html[data-theme="light"] .filter-chip {
  background: var(--overlay);
  border-color: var(--border);
}
html[data-theme="light"] .filter-chip:hover {
  background: var(--overlay-strong);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .filter-chip.active {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple);
}
html[data-theme="light"] .filter-dropdown {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 12px 36px rgba(72, 58, 102, 0.12);
}
html[data-theme="light"] .filter-opt:hover {
  background: var(--overlay);
  color: var(--heading);
}
html[data-theme="light"] .filter-opt.selected {
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple);
}

html[data-theme="light"] .section-title {
  color: var(--heading);
}
html[data-theme="light"] .cat-card:hover {
  border-color: var(--overlay-strong);
}
html[data-theme="light"] .cat-card:hover .cat-name {
  color: var(--heading);
}
html[data-theme="light"] .cat-count {
  color: var(--muted);
}

html[data-theme="light"] .bottom-nav-item {
  color: var(--muted);
}
html[data-theme="light"] .bottom-nav-item.active {
  color: var(--purple);
}
html[data-theme="light"] .bottom-nav-item svg {
  stroke: var(--muted);
  opacity: 0.85;
}
html[data-theme="light"] .bottom-nav-item.active svg {
  stroke: var(--purple);
  opacity: 1;
}
html[data-theme="light"] .nav-item {
  color: var(--muted);
}
html[data-theme="light"] .nav-item.active {
  color: var(--purple);
}
html[data-theme="light"] .nav-item.active svg {
  stroke: var(--purple);
}
html[data-theme="light"] .nav-item svg {
  stroke: var(--muted);
}

/* ── Community hub shell (community-home, etc.) ── */
html[data-theme="light"] .tb-eye {
  color: var(--eyebrow);
}
html[data-theme="light"] .tb-title {
  color: var(--heading);
}
html[data-theme="light"] .hub-panel-title {
  color: var(--heading);
}
html[data-theme="light"] .hub-panel-sub {
  color: var(--muted);
}
html[data-theme="light"] .pv-card h4,
html[data-theme="light"] .pv-row-t {
  color: var(--heading);
}
html[data-theme="light"] .pv-card p {
  color: var(--text);
}
html[data-theme="light"] .s-item:hover {
  background: var(--overlay);
  color: var(--heading);
}
html[data-theme="light"] .cn-btn:hover {
  color: var(--heading);
  background: var(--overlay);
}
html[data-theme="light"] .pv-search {
  background: var(--card);
  color: var(--heading);
  border-color: var(--border);
}
html[data-theme="light"] .s-logo-i,
html[data-theme="light"] .s-avatar-i {
  color: var(--heading);
}

/* ── Community agreements (hardcoded moon text/overlay — Sun overrides) ── */
html[data-theme="light"] body.vitality-page-community-agreements {
  background: linear-gradient(165deg, rgba(124, 58, 237, 0.09), rgba(217, 70, 143, 0.06), rgba(59, 104, 196, 0.05));
}
html[data-theme="light"] body.vitality-page-community-agreements .modal {
  box-shadow: 0 24px 64px rgba(72, 58, 102, 0.12);
}
html[data-theme="light"] body.vitality-page-community-agreements .modal-header::before {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.12), rgba(217, 70, 143, 0.06), transparent);
}
html[data-theme="light"] body.vitality-page-community-agreements .modal-title,
html[data-theme="light"] body.vitality-page-community-agreements .agreement-name {
  color: var(--heading);
}
html[data-theme="light"] body.vitality-page-community-agreements .agreement-text {
  color: var(--muted);
}
html[data-theme="light"] body.vitality-page-community-agreements .agreement {
  border-bottom-color: var(--border);
}
html[data-theme="light"] body.vitality-page-community-agreements .checkbox {
  border-color: var(--border);
  background: var(--overlay);
}
html[data-theme="light"] body.vitality-page-community-agreements .agree-text {
  color: var(--muted);
}
html[data-theme="light"] body.vitality-page-community-agreements .btn-agree {
  border-color: rgba(124, 58, 237, 0.25);
  color: #fff;
}

/* ── Shared app shell: program + community (.shell) — Sun readability ── */
html[data-theme="light"] .shell .sidebar {
  background: linear-gradient(185deg, #ebe4f7 0%, #f7f2fc 55%, #faf8ff 100%);
  border-right-color: var(--border);
}
html[data-theme="light"] .shell .s-label,
html[data-theme="light"] .shell .s-lbl {
  color: rgba(91, 33, 182, 0.5);
}
html[data-theme="light"] .shell .s-logo-i,
html[data-theme="light"] .shell .s-avatar-i {
  color: var(--heading);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="light"] .shell .s-item {
  color: var(--muted);
}
html[data-theme="light"] .shell .s-item:hover {
  background: rgba(124, 58, 237, 0.1);
  color: var(--heading);
}
html[data-theme="light"] .shell .s-item.on {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.35);
  color: var(--purple);
}
html[data-theme="light"] .shell .s-item.on svg {
  stroke: var(--purple);
}
html[data-theme="light"] .shell .s-notif {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--border);
}
html[data-theme="light"] .shell .s-div {
  background: var(--border);
}

/* Program / community topbar (not dashboard .topbar — uses .main child) */
html[data-theme="light"] .main .topbar {
  background: rgba(255, 252, 254, 0.95);
  border-bottom-color: var(--border);
  backdrop-filter: blur(16px);
}
html[data-theme="light"] .main .tb-title {
  color: var(--heading);
}
html[data-theme="light"] .main .tb-title span {
  color: var(--purple);
}
html[data-theme="light"] .main .tab:hover {
  color: var(--heading);
}
html[data-theme="light"] .main .role-switcher {
  background: rgba(124, 58, 237, 0.06);
}
html[data-theme="light"] .main .role-switcher a:hover {
  color: var(--heading);
  background: rgba(124, 58, 237, 0.1);
}

/* Month hero — pastel wash + ink type (was white on neon gradient) */
html[data-theme="light"] .hero {
  border-color: rgba(124, 58, 237, 0.22);
  background: var(--card);
}
html[data-theme="light"] .hero .hero-bg {
  background: linear-gradient(
    125deg,
    rgba(124, 58, 237, 0.14) 0%,
    rgba(59, 104, 196, 0.1) 42%,
    rgba(217, 70, 143, 0.12) 100%
  );
}
html[data-theme="light"] .hero .hero-glow,
html[data-theme="light"] .hero .hero-glow2 {
  opacity: 0.55;
}
html[data-theme="light"] .hero .hero-tag {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .hero .hero-month {
  color: var(--muted);
}
html[data-theme="light"] .hero .hero-theme {
  color: var(--heading);
  text-shadow: none;
}
html[data-theme="light"] .hero .hero-theme .hi {
  color: #6d28d9;
}
html[data-theme="light"] .hero .hero-affirm {
  color: #5c5478;
}
html[data-theme="light"] .hero .hero-meta-i {
  color: var(--muted);
}

/* Waypoint bar + board copy */
html[data-theme="light"] .wp-title {
  color: var(--heading);
}
html[data-theme="light"] .wp-line {
  background: var(--border);
}
html[data-theme="light"] .wp-dot:not(.done):not(.now) {
  border-color: var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] .mod-title,
html[data-theme="light"] .vid-title,
html[data-theme="light"] .prac-title {
  color: var(--heading);
}
html[data-theme="light"] .play-c {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.35);
}
html[data-theme="light"] .bc-qp-check:not(.done) {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.7);
}
html[data-theme="light"] .conn-box-txt,
html[data-theme="light"] .v-prompt-txt {
  color: var(--text);
}
html[data-theme="light"] .v-msg-ai,
html[data-theme="light"] .v-msg-me {
  color: var(--text);
  background: rgba(124, 58, 237, 0.08);
}
html[data-theme="light"] .v-msg-me {
  background: rgba(217, 70, 143, 0.08);
}
html[data-theme="light"] .v-input-row {
  background: rgba(243, 239, 248, 0.9);
  border-top-color: var(--border);
}
html[data-theme="light"] .v-input {
  background: var(--card);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .show-more button,
html[data-theme="light"] .show-more a.show-more-link {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .show-more button:hover,
html[data-theme="light"] .show-more a.show-more-link:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.28);
  color: var(--purple);
}

/* HSL modal — light panel, readable form */
html[data-theme="light"] .hsl-modal {
  background: rgba(36, 26, 54, 0.35);
}
html[data-theme="light"] .hsl-panel {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 24px 64px rgba(72, 58, 102, 0.18);
}
html[data-theme="light"] .hsl-head {
  background: linear-gradient(135deg, rgba(217, 70, 143, 0.14), rgba(124, 58, 237, 0.12), rgba(217, 119, 87, 0.08));
  border-bottom-color: var(--border);
}
html[data-theme="light"] .hsl-title {
  color: var(--heading);
  text-shadow: none;
}
html[data-theme="light"] .hsl-close {
  background: var(--overlay);
  border-color: var(--border);
  color: var(--muted);
}
html[data-theme="light"] .hsl-close:hover {
  color: var(--heading);
  background: var(--overlay-strong);
}
html[data-theme="light"] .hsl-type-btn {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] .hsl-type-btn:hover {
  border-color: rgba(59, 104, 196, 0.45);
  color: var(--heading);
}
html[data-theme="light"] .hsl-type-btn.on {
  border-color: var(--blue);
  background: rgba(59, 104, 196, 0.1);
  color: #1e40af;
}
html[data-theme="light"] .hsl-type-desc {
  background: rgba(243, 239, 248, 0.85);
  border-color: var(--border);
  color: var(--muted);
}
html[data-theme="light"] .hsl-type-desc em {
  color: var(--heading);
}
html[data-theme="light"] .hsl-recipient {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--border);
}
html[data-theme="light"] .hsl-recipient-name {
  color: var(--text);
}
html[data-theme="light"] .hsl-recipient--team .hsl-recipient-dot {
  background: rgba(124, 58, 237, 0.1) !important;
}
html[data-theme="light"] .hsl-textarea {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .hsl-textarea::placeholder {
  color: rgba(91, 33, 182, 0.42);
}
html[data-theme="light"] .hsl-textarea:focus {
  border-color: rgba(217, 70, 143, 0.45);
}
html[data-theme="light"] .hsl-footer {
  border-top-color: var(--border);
  background: rgba(243, 239, 248, 0.5);
}
html[data-theme="light"] .hsl-send {
  background: linear-gradient(135deg, #db2777, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}
html[data-theme="light"] .hsl-cancel {
  border-color: var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] .hsl-cancel:hover {
  color: var(--heading);
  border-color: rgba(124, 58, 237, 0.35);
}
html[data-theme="light"] .hsl-success-title {
  color: var(--heading);
}
html[data-theme="light"] .hsl-success-txt {
  color: var(--muted);
}

/* HSL board row — CTA pill stays legible */
html[data-theme="light"] .bc.hsl .bc-title {
  color: var(--heading);
  text-shadow: none;
}
html[data-theme="light"] .bc.hsl .hsl-cta {
  color: #fff;
  background: linear-gradient(135deg, #e11d74, #7c3aed);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.3);
}

/* Community hub — remaining ink + pastel chips */
html[data-theme="light"] .hub-open-full.secondary {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .pv-team-note {
  background: rgba(255, 248, 220, 0.75);
  border-color: rgba(184, 134, 11, 0.28);
  color: var(--text);
}
html[data-theme="light"] .pv-team-note strong {
  color: var(--heading);
}
html[data-theme="light"] .home-hero-sub {
  color: var(--muted);
}
html[data-theme="light"] .home-card-title {
  color: var(--heading);
}
html[data-theme="light"] .home-card-arrow {
  color: rgba(91, 33, 182, 0.35);
}
html[data-theme="light"] .act-text,
html[data-theme="light"] .act-text strong {
  color: var(--text);
}
html[data-theme="light"] .act-text strong {
  color: var(--heading);
  font-weight: 700;
}
html[data-theme="light"] .uc-title {
  color: var(--heading);
}
html[data-theme="light"] .uc-chev {
  color: rgba(91, 33, 182, 0.4);
}
html[data-theme="light"] .cn-btn {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.75);
}
html[data-theme="light"] .pv-row:hover {
  border-color: rgba(124, 58, 237, 0.22);
}

/* Index / simple pages: secondary links on cream */
html[data-theme="light"] .links a.secondary {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .links a.secondary:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.25);
}
html[data-theme="light"] .links a.tertiary {
  color: var(--muted);
}
html[data-theme="light"] .links a.tertiary:hover {
  color: var(--heading);
}

/* ── Community feed layout (sb sidebar, not .sidebar) — Sun ── */
html[data-theme="light"] .shell {
  background: var(--black);
}
html[data-theme="light"] .sb {
  background: linear-gradient(185deg, #ebe4f7 0%, #f7f2fc 55%, #faf8ff 100%);
  border-right-color: var(--border);
}
html[data-theme="light"] .sb-logo-i,
html[data-theme="light"] .sb-av-i {
  color: var(--heading);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="light"] .sb-i {
  color: var(--muted);
}
html[data-theme="light"] .sb-i:hover {
  background: rgba(124, 58, 237, 0.1);
  color: var(--heading);
}
html[data-theme="light"] .sb-i.on {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.35);
  color: var(--purple);
}
html[data-theme="light"] .notif {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--border);
}
html[data-theme="light"] .main {
  background: var(--black);
}
html[data-theme="light"] .feed-view-toggle {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: var(--border);
}
html[data-theme="light"] .fvt-label {
  color: var(--eyebrow);
}
html[data-theme="light"] .fvt-btn {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .fvt-btn:hover {
  color: var(--heading);
  border-color: rgba(124, 58, 237, 0.28);
}
html[data-theme="light"] .tfg-title {
  color: var(--heading);
}
html[data-theme="light"] .tfg-btn.secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--heading);
  border-color: var(--border);
}
html[data-theme="light"] .comp-input {
  background: var(--card);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="light"] .comp-input::placeholder {
  color: var(--muted);
}
html[data-theme="light"] .post-name {
  color: var(--heading);
}
html[data-theme="light"] .post-body {
  color: var(--text);
}
html[data-theme="light"] .post-actions {
  border-top-color: var(--border);
}
html[data-theme="light"] .side-title {
  color: var(--muted);
}
html[data-theme="light"] .side-col {
  background: rgba(237, 231, 248, 0.55);
  border-color: var(--border);
}
html[data-theme="light"] .filt:hover {
  color: var(--heading);
}
html[data-theme="light"] .comp-tool:hover {
  color: var(--heading);
}
html[data-theme="light"] .act-btn:hover {
  color: var(--heading);
}

/* ============================================================
   Site-wide desktop full-width override (Elizabeth, 2026-06)
   Every page fills the viewport on desktop — no centered
   max-width constraint, no left/right blank space. Mobile keeps
   its own per-page layout. Selector is body-scoped for higher
   specificity than inline `.page` selectors that load after
   this stylesheet.
   ============================================================ */
@media (min-width: 769px) {
  body .page,
  body .wrap,
  html body .page,
  html body .wrap {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}