/* ═══════════════════════════════════════════════════════════════════
   WellCore · Light Theme FINAL
   Concept: Hero Watermark Giant + Dark Inverted Cards
   Bg warm cream #F5F0E6 · Cards dark #0F0F0F islands with color glow
   Scope: html:not(.dark) — solo afecta light mode
   No Tailwind utility needed. Pure CSS.
   ═══════════════════════════════════════════════════════════════════ */

/* Tokens base · NO OVERRIDE — usar los del Sprint 1 Light v2 publicados
   en resources/css/app.css @theme block:
     --color-wc-bg: #F0EADC (warm beige v2)
     --color-wc-bg-secondary: #E8DFCE
     --color-wc-bg-tertiary: #FFFCF5
     --color-wc-bg-prominent: #FFFFFF
   Override eliminado 2026-05-22 por director-visual-cliente para destrabar
   el rediseño Light v2. */
html:not(.dark) body {
    background-color: var(--color-wc-bg);
}

/* Sin orbs ambientales — fondo cream limpio */

/* Asegurar que contenido va sobre los orbs */
html:not(.dark) main,
html:not(.dark) [wire\:id] {
    position: relative;
    z-index: 1;
}

/* ═════════════════════════════════════════════════════════════
   HERO · Light Clean Card (ref Image #10)
   Card blanco · badge rosa · título negro · watermark "3" rojo claro
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) .hp-hero,
html:not(.dark) .wc-hero-premium {
    background: #FFFFFF !important;
    color: #0F0F0F;
    border-radius: 20px;
    border: 1px solid #EDE7D8;
    box-shadow: 0 2px 10px rgba(15, 15, 15, 0.04), 0 1px 3px rgba(15, 15, 15, 0.03);
    overflow: hidden;
    position: relative;
}

/* Watermark decorativo — número/letra gigante rojo claro en esquina derecha */
html:not(.dark) .wc-hero-premium::after,
html:not(.dark) .hp-hero::after {
    content: "3";
    position: absolute;
    right: -0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Oswald', sans-serif;
    font-size: 16rem;
    font-weight: 900;
    line-height: 1;
    color: #FEE2E2;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -0.05em;
}

/* Inner glass container → transparente sobre el card blanco */
html:not(.dark) .wc-hero-premium > div.relative,
html:not(.dark) .hp-hero > div.relative {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Cards internas dentro del hero → transparentes */
html:not(.dark) .hp-hero .rounded-card,
html:not(.dark) .hp-hero .rounded-xl,
html:not(.dark) .wc-hero-premium .rounded-card,
html:not(.dark) .wc-hero-premium .rounded-xl,
html:not(.dark) .hp-hero [class*="bg-wc-bg-tertiary"],
html:not(.dark) .wc-hero-premium [class*="bg-wc-bg-tertiary"] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Ocultar orbs rojos internos — card queda limpio */
html:not(.dark) .wc-hero-premium .wc-orb-tr,
html:not(.dark) .wc-hero-premium [class*="pointer-events-none"][class*="rounded-full"],
html:not(.dark) .hp-hero .wc-orb-tr,
html:not(.dark) .hp-hero [class*="pointer-events-none"][class*="rounded-full"] {
    display: none !important;
}

/* Título negro bold */
html:not(.dark) .wc-hero-premium h1,
html:not(.dark) .hp-hero h1 {
    color: #0F0F0F !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: none;
    position: relative;
    z-index: 1;
}

/* Quote motivacional gris */
html:not(.dark) .wc-hero-premium p,
html:not(.dark) .hp-hero p {
    color: #6B7280 !important;
    font-style: normal;
    position: relative;
    z-index: 1;
}

/* Icono de comillas más sutil (gris en vez de rojo) */
html:not(.dark) .wc-hero-premium svg.text-wc-accent\/60,
html:not(.dark) .hp-hero svg.text-wc-accent\/60 {
    color: #9CA3AF !important;
}

/* Plan badge → rojo claro + texto rojo (estilo Image #10) */
html:not(.dark) .wc-hero-premium .bg-wc-accent\/10,
html:not(.dark) .hp-hero .bg-wc-accent\/10 {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    border: none;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

html:not(.dark) .wc-hero-premium .text-wc-accent,
html:not(.dark) .hp-hero .text-wc-accent {
    color: #DC2626 !important;
}

/* Botón primario (Registrar) — rojo sólido con glow */
html:not(.dark) .wc-hero-premium a.bg-wc-accent,
html:not(.dark) .hp-hero a.bg-wc-accent {
    background: #DC2626 !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35), 0 2px 6px rgba(220, 38, 38, 0.25);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    font-weight: 700;
    position: relative;
    z-index: 2;
}
html:not(.dark) .wc-hero-premium a.bg-wc-accent:hover,
html:not(.dark) .hp-hero a.bg-wc-accent:hover {
    background: #EF4444 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45), 0 3px 8px rgba(220, 38, 38, 0.3);
}

/* Botón secundario (Check-in) — outline blanco */
html:not(.dark) .wc-hero-premium a[class*="border-wc-border"],
html:not(.dark) .hp-hero a[class*="border-wc-border"] {
    background: #FFFFFF !important;
    color: #0F0F0F !important;
    border: 1px solid #E2DCCC !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-weight: 600;
    position: relative;
    z-index: 2;
}
html:not(.dark) .wc-hero-premium a[class*="border-wc-border"]:hover,
html:not(.dark) .hp-hero a[class*="border-wc-border"]:hover {
    background: #F9FAFB !important;
    border-color: #D1D5DB !important;
}

/* ═════════════════════════════════════════════════════════════
   Stats cards · LIGHT CLEAN con TOP accent line por color
   Card blanco · número grande en color accent · label gris
   Specificity boost con .rounded-xl.bg-wc-bg-tertiary para ganarle a la regla glass
   ═════════════════════════════════════════════════════════════ */
html:not(.dark) .sc-r.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .sc-g.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .sc-p.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .sc-a.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .sc-r,
html:not(.dark) .sc-g,
html:not(.dark) .sc-p,
html:not(.dark) .sc-a {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #EDE7D8 !important;
    color: #0F0F0F;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 15, 15, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* TOP accent line 3px por color (sin glow fuerte sobre fondo blanco) */
html:not(.dark) .sc-r::before,
html:not(.dark) .sc-g::before,
html:not(.dark) .sc-p::before,
html:not(.dark) .sc-a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
}
html:not(.dark) .sc-r::before { background: #DC2626; }
html:not(.dark) .sc-g::before { background: #10B981; }
html:not(.dark) .sc-p::before { background: #A78BFA; }
html:not(.dark) .sc-a::before { background: #F59E0B; }

/* Hover sutil */
html:not(.dark) .sc-r:hover { box-shadow: 0 6px 20px rgba(220, 38, 38, 0.15); transform: translateY(-2px); }
html:not(.dark) .sc-g:hover { box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15); transform: translateY(-2px); }
html:not(.dark) .sc-p:hover { box-shadow: 0 6px 20px rgba(167, 139, 250, 0.15); transform: translateY(-2px); }
html:not(.dark) .sc-a:hover { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15); transform: translateY(-2px); }

/* Labels (RACHA, CHECK-INS, etc.) gris */
html:not(.dark) .sc-r .text-wc-text,
html:not(.dark) .sc-g .text-wc-text,
html:not(.dark) .sc-p .text-wc-text,
html:not(.dark) .sc-a .text-wc-text { color: #6B7280 !important; }

/* Texto tertiary (dias consecutivos, este mes, XP total) */
html:not(.dark) .sc-r .text-wc-text-tertiary,
html:not(.dark) .sc-g .text-wc-text-tertiary,
html:not(.dark) .sc-p .text-wc-text-tertiary,
html:not(.dark) .sc-a .text-wc-text-tertiary { color: #9CA3AF !important; }

/* Números grandes en color accent sin glow */
html:not(.dark) .sc-r p.font-data { color: #DC2626 !important; text-shadow: none; }
html:not(.dark) .sc-g p.font-data { color: #10B981 !important; text-shadow: none; }
html:not(.dark) .sc-p p.font-data { color: #A78BFA !important; text-shadow: none; }
html:not(.dark) .sc-a p.font-data { color: #F59E0B !important; text-shadow: none; }

/* Icon bg chips suaves */
html:not(.dark) .sc-r .bg-orange-500\/10 { background: #FEE2E2 !important; }
html:not(.dark) .sc-g .bg-emerald-500\/10 { background: #D1FAE5 !important; }
html:not(.dark) .sc-p .bg-violet-500\/10 { background: #EDE9FE !important; }

/* XP progress bar bg */
html:not(.dark) .sc-p .bg-wc-bg-secondary { background: #EDE7D8 !important; }
html:not(.dark) .sc-a svg circle[stroke="var(--color-wc-border)"] { stroke: #E2DCCC !important; }

/* ═════════════════════════════════════════════════════════════
   Coach Card · Light clean con avatar rojo + botón rojo
   ═════════════════════════════════════════════════════════════ */
html:not(.dark) .coach-card.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .coach-card {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #EDE7D8 !important;
    color: #0F0F0F;
    box-shadow: 0 2px 8px rgba(15, 15, 15, 0.04) !important;
}
html:not(.dark) .coach-card p,
html:not(.dark) .coach-card .text-wc-text,
html:not(.dark) .coach-card [class*="text-wc-text"]:not(.text-wc-text-tertiary):not(.text-wc-text-secondary) { color: #0F0F0F !important; }
html:not(.dark) .coach-card .text-wc-text-secondary { color: #6B7280 !important; }
html:not(.dark) .coach-card .text-wc-text-tertiary { color: #9CA3AF !important; }

/* ═════════════════════════════════════════════════════════════
   Misiones diarias · los 4 items a.group.rounded-xl.bg-wc-bg-tertiary
   Completadas → verde claro · Pendientes → blanco limpio
   (el componente debería diferenciar con una clase; si no, todas light)
   ═════════════════════════════════════════════════════════════ */
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary {
    background: #FFFFFF !important;
    border-color: #EDE7D8 !important;
    color: #0F0F0F;
    box-shadow: 0 2px 8px rgba(15, 15, 15, 0.04);
}
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary:hover {
    background: #F9FAFB !important;
    box-shadow: 0 4px 14px rgba(15, 15, 15, 0.06);
}
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary .text-wc-text { color: #0F0F0F !important; }
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary .text-wc-text-secondary { color: #6B7280 !important; }
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary .text-wc-text-tertiary { color: #9CA3AF !important; }

/* Misiones completadas · tint verde (heurística por svg check verde dentro) */
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary:has(.text-emerald-500),
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary:has(.text-green-500),
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary:has([class*="text-emerald"]) {
    background: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
}

/* ═════════════════════════════════════════════════════════════
   WC-TOPLINE (Quote motivacional) · Glass con accent line lateral ámbar
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) .wc-topline {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 220, 204, 0.8) !important;
    position: relative;
    box-shadow: 4px 4px 0 rgba(245, 158, 11, 0.2), 0 2px 8px rgba(0, 0, 0, 0.04);
}

html:not(.dark) .wc-topline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 4px;
    height: auto;
    background: #F59E0B !important;
    box-shadow: none;
}

/* ═════════════════════════════════════════════════════════════
   Plan Alert · Glass con borde rojo prominente
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) [class*="bg-wc-accent/5"] {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    box-shadow: 4px 4px 0 rgba(220, 38, 38, 0.22), 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

html:not(.dark) [class*="bg-wc-accent/5"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    height: auto;
    width: 4px;
    background: #DC2626;
    box-shadow: none;
}

/* ═════════════════════════════════════════════════════════════
   Cards generales · Glass translúcido con borde sutil
   Incluye: Racha calendar, weight chart, coach card, weekly, missions, activity
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) .rounded-card.bg-wc-bg-tertiary,
html:not(.dark) .rounded-xl.bg-wc-bg-tertiary {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 220, 204, 0.8) !important;
    box-shadow: 4px 4px 0 rgba(15, 15, 15, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.25s;
}

html:not(.dark) .rounded-card.bg-wc-bg-tertiary:hover,
html:not(.dark) .rounded-xl.bg-wc-bg-tertiary:hover {
    box-shadow: 6px 6px 0 rgba(220, 38, 38, 0.14), 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translate(-2px, -2px);
}

/* ═════════════════════════════════════════════════════════════
   Weight Chart tooltips · fix detección dark
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) canvas {
    /* Chart.js tooltips — ajustar con JS al cargar sería ideal
       Por ahora dejamos el fondo del canvas oscuro para que se vea con el card dark */
}

/* ═════════════════════════════════════════════════════════════
   Quick action links (cuando están fuera del hero)
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) a.bg-wc-accent {
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

/* ═════════════════════════════════════════════════════════════
   WC-GRAIN background en grid stats
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) .wc-grain::after {
    opacity: 0.02 !important;
    mix-blend-mode: multiply;
}

/* ═════════════════════════════════════════════════════════════
   Daily missions grid · Glass translúcido
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) [wire\:loading\.remove] > div.rounded-xl {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 220, 204, 0.8) !important;
    box-shadow: 4px 4px 0 rgba(15, 15, 15, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ═════════════════════════════════════════════════════════════
   Respetar prefers-reduced-motion
   ═════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    html:not(.dark) .sc-r,
    html:not(.dark) .sc-g,
    html:not(.dark) .sc-p,
    html:not(.dark) .sc-a,
    html:not(.dark) .hp-hero,
html:not(.dark) .wc-hero-premium a {
        transition: none;
    }
    html:not(.dark) .sc-r:hover,
    html:not(.dark) .sc-g:hover,
    html:not(.dark) .sc-p:hover,
    html:not(.dark) .sc-a:hover,
    html:not(.dark) .hp-hero,
html:not(.dark) .wc-hero-premium a:hover {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   LIGHT THEME · FIX LEGIBILIDAD POST-LIGHT-V2 (2026-05-22)
   Componentes legacy del Livewire dashboard cuyo color de texto fue
   diseñado para fondos OLED dark — sobre warm beige no contrastan AA.
   Director Visual del Área Cliente · audit Chrome MCP.
   ═════════════════════════════════════════════════════════════════════ */

/* Día del plan: "DAY 18" — verde emerald-500 sobre beige da 2.11:1.
   Subir saturación + oscurecer a #15803D da 4.5:1 AA sobre beige. */
html:not(.dark) .plan-day,
html:not(.dark) .plan-day.tnum {
    color: #15803D !important;  /* green-700 · AA sobre warm beige */
    font-weight: 700;
}

/* Día del plan badge wrapper · token interno text-on-accent → accent sólido. */
html:not(.dark) .plan-day-wrap,
html:not(.dark) [class*="plan-day"] {
    color: var(--color-wc-accent, #DC2626);
}

/* Números días calendar heatmap: bg rgba(0,0,0,0.03) sobre beige no se nota.
   Reforzar bg a bg-tint-soft (más visible) y text negro coherente. */
html:not(.dark) .weekday,
html:not(.dark) .weekday-num,
html:not(.dark) .summary-num {
    background-color: var(--color-wc-bg-tint-soft, rgba(0,0,0,0.04)) !important;
}
html:not(.dark) .weekday-num,
html:not(.dark) .weekday .num {
    color: var(--color-wc-text, #1A1A1A) !important;
    font-weight: 600;
}

/* Badges ambar sobre beige: F59E0B/D97706 dan ~2.66. Necesita amber-700/800. */
html:not(.dark) .badge[class*="amber"],
html:not(.dark) .badge.amber,
html:not(.dark) .badge:not([class*="red"]):not([class*="green"]):not([class*="purple"]):not([class*="blue"]) {
    color: #92400E !important;  /* amber-800 · AA sobre warm beige */
    background: rgba(217, 119, 6, 0.10);
    font-weight: 600;
}

/* Badge "New week" / status ambar: bg sutil + texto dark legible. */
html:not(.dark) span.badge[style*="amber"],
html:not(.dark) span.badge:has(svg[class*="amber"]) {
    background: rgba(217, 119, 6, 0.10) !important;
    color: #92400E !important;
    font-weight: 600;
}

/* CTA "Complete profile" — accent-light #FCA5A5 sobre warm da 1.58:1.
   Cambiar a btn-accent sólido (DC2626 + white). */
html:not(.dark) button.profile-cta,
html:not(.dark) .profile-cta {
    background: var(--color-wc-accent, #DC2626) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}
html:not(.dark) button.profile-cta:hover,
html:not(.dark) .profile-cta:hover {
    background: var(--color-wc-accent-hover, #B91C1C) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

/* CTAs banner-cta / empty-cta / coach-cta usando wc-accent-light bg + on-accent text:
   en dark queda glow; en light queda ilegible. Forzar variant accent sólido. */
html:not(.dark) .banner-cta,
html:not(.dark) .empty-cta,
html:not(.dark) .coach-cta {
    background: var(--color-wc-accent-tint-14, rgba(220,38,38,0.14)) !important;
    color: var(--color-wc-accent, #DC2626) !important;
    border: 1px solid var(--color-wc-accent-tint-24, rgba(220,38,38,0.24)) !important;
    font-weight: 600;
}

/* Texto "· Day 18" pill: text-on-accent #FCA5A5 sobre accent/12 da 2.54:1.
   Forzar accent sólido + bg accent-tint-14 (mayor contraste). */
html:not(.dark) [class*="text-wc-text-on-accent"],
html:not(.dark) .text-wc-text-on-accent,
html:not(.dark) span[class*="bg-wc-accent"][class*="text-wc-"]:not([class*="text-white"]) {
    color: #7F1D1D !important;  /* accent-deep · AAA sobre accent-tint */
    font-weight: 600;
}
html:not(.dark) [class*="bg-wc-accent/12"],
html:not(.dark) [class*="bg-wc-accent\\/12"] {
    background: var(--color-wc-accent-tint-14, rgba(220,38,38,0.14)) !important;
}

/* Sidebar group headers (TRAINING, PROGRESS, COMMUNITY, ACCOUNT) en uppercase tracking.
   Asegurar text-tertiary legible. */
html:not(.dark) aside .nav-section-title,
html:not(.dark) aside [class*="text-wc-text-tertiary"],
html:not(.dark) nav [class*="text-wc-text-quaternary"] {
    color: var(--color-wc-text-tertiary, #5F6B7A) !important;
}

/* Topbar status badge "W3 · Activo" — asegurar contraste */
html:not(.dark) .topbar-status-pill,
html:not(.dark) [class*="status-pill"] {
    background: var(--color-wc-bg-tint-soft, rgba(0,0,0,0.04));
    color: var(--color-wc-text-secondary, #4B5563);
    border: 1px solid var(--color-wc-border, rgba(0,0,0,0.12));
}

/* Pulse / live dot · brand red */
html:not(.dark) .pulse-dot,
html:not(.dark) .live-dot {
    background: var(--color-wc-accent, #DC2626) !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

/* Heatmap cells light — borde sutil que se note */
html:not(.dark) .heat-cell {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ═════════════════════════════════════════════════════════════════════
   FIX CRÍTICO PlanViewer .hero (PlanHeroV2.vue) en light
   El componente fue diseñado siempre dark con red gradient interno.
   Sprint 1 (wc-shell.css:1721) lo pisaba con bg blanco, dejando texto
   blanco invisible. Restauramos el dark gradient original para que el
   componente respete su diseño en light también.
   ═════════════════════════════════════════════════════════════════════ */
html:not(.dark) .workout-v2 .hero,
html:not(.dark) section.hero.grain.section,
html:not(.dark) section.hero[class*="grain"] {
    background:
        radial-gradient(ellipse 70% 80% at 100% 0%, rgba(220,38,38,0.32), transparent 60%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(127,29,29,0.30), transparent 70%),
        linear-gradient(180deg, #1a0707 0%, #0c0606 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.20);
}

/* Coach quote dark gradient en light también (el comp ya lo hace, garantía extra) */
html:not(.dark) .coach-quote {
    background: linear-gradient(180deg, #18181B 0%, #111113 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Plan tabs container: bg suave coherente con light */
html:not(.dark) .plan-tabs,
html:not(.dark) .plan-tab-nav {
    background: var(--color-wc-bg-tertiary, #FFFCF5) !important;
    box-shadow: var(--shadow-wc-soft, 0 1px 3px rgba(20,15,10,0.06));
}
html:not(.dark) .plan-tabs button:not(.active):not([aria-selected="true"]),
html:not(.dark) .plan-tab:not(.active):not([aria-selected="true"]) {
    color: var(--color-wc-text-secondary, #4B5563) !important;
}
html:not(.dark) .plan-tabs button.active,
html:not(.dark) .plan-tabs button[aria-selected="true"],
html:not(.dark) .plan-tab.active,
html:not(.dark) .plan-tab[aria-selected="true"] {
    background: var(--color-wc-accent, #DC2626) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.30);
}

/* Day cards del plan en light */
html:not(.dark) .day-card,
html:not(.dark) [class*="day-card"] {
    background: var(--color-wc-bg-tertiary, #FFFCF5);
    color: var(--color-wc-text, #1A1A1A);
    border: 1px solid var(--color-wc-border, rgba(0,0,0,0.12));
    box-shadow: var(--shadow-wc-soft);
}

/* Exercise rows del plan */
html:not(.dark) .exercise-row,
html:not(.dark) .ex-row {
    background: var(--color-wc-bg-tertiary, #FFFCF5);
    color: var(--color-wc-text, #1A1A1A);
}
html:not(.dark) .exercise-row .meta,
html:not(.dark) .ex-row .meta,
html:not(.dark) .exercise-meta {
    color: var(--color-wc-text-tertiary, #5F6B7A);
}

/* Cualquier texto rgba(250,250,250,X) o rgba(255,255,255,X) fuera del .hero
   o .coach-quote debe ser dark en light. */
html:not(.dark) .workout-v2 [class]:not(.hero):not(.hero *) [style*="color: white"],
html:not(.dark) .workout-v2 .lab:not(.hero .lab):not(.macro-tick .lab),
html:not(.dark) .workout-v2 .k:not(.hero .k):not(.macro-tick .k) {
    color: var(--color-wc-text-tertiary, #5F6B7A) !important;
}

/* Hero stats interior (.hstat .k .v) — están DENTRO del hero dark, blanco está OK,
   pero asegurar contraste mínimo */
html:not(.dark) .hero .hstat .k,
html:not(.dark) .hero .k {
    color: rgba(250, 250, 250, 0.85) !important;  /* sube de 0.40 a 0.85 */
}

/* hero-meta-row también dentro de hero dark */
html:not(.dark) .hero .hero-meta-row,
html:not(.dark) .hero-meta-row {
    color: rgba(250, 250, 250, 0.85) !important;
}

/* Macro-legend dentro de hero */
html:not(.dark) .hero .macro-legend,
html:not(.dark) .macro-legend {
    color: rgba(250, 250, 250, 0.78) !important;
}

/* Cards de progreso semanal del plan (fuera del hero) — light */
html:not(.dark) .pv-week-card,
html:not(.dark) .week-progress-card,
html:not(.dark) [class*="week-card"]:not(.day-card) {
    background: var(--color-wc-bg-tertiary, #FFFCF5);
    color: var(--color-wc-text, #1A1A1A);
    box-shadow: var(--shadow-wc-soft);
}

/* ═════════════════════════════════════════════════════════════════════
   ROUND 3 · FIXES SUTILES DETECTADOS POR AUDIT MCP CROSS-RUTAS
   profile, community, food-tracking detectados con texto tenue
   ═════════════════════════════════════════════════════════════════════ */

/* Profile · id-progress-value (0%) — número con inline color amber dinámico.
   No se puede override el color porque Vue lo setea inline. Fix: pill bg
   que mejora legibilidad sin tocar el color. */
html:not(.dark) .id-progress-value,
html:not(.dark) [class*="id-progress-value"] {
    background: rgba(217, 119, 6, 0.12);
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Profile · "You have unsaved changes" — banner amarillo claro invisible */
html:not(.dark) .unsaved-changes,
html:not(.dark) [class*="unsaved"]:not(.dark *) {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #92400E !important;
    border: 1px solid rgba(217, 119, 6, 0.30);
}

/* Profile · btn--ghost contraste light */
html:not(.dark) .btn--ghost,
html:not(.dark) .btn-ghost {
    color: var(--color-wc-text, #1A1A1A) !important;
    border: 1px solid var(--color-wc-border, rgba(0,0,0,0.20)) !important;
    background: transparent;
}
html:not(.dark) .btn--ghost:hover,
html:not(.dark) .btn-ghost:hover {
    background: var(--color-wc-bg-tint-soft, rgba(0,0,0,0.05)) !important;
    border-color: var(--color-wc-text-secondary, #4B5563) !important;
}

/* Community · gpf-filter active — pill activo en feed/community */
html:not(.dark) .gpf-filter.active,
html:not(.dark) [class*="gpf-filter"].active {
    background: var(--color-wc-accent, #DC2626) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}
html:not(.dark) .gpf-filter:not(.active) {
    color: var(--color-wc-text-secondary, #4B5563) !important;
    background: var(--color-wc-bg-tint-soft, rgba(0,0,0,0.05));
}

/* Community · "Grupos" tab label tenue */
html:not(.dark) .community-tab-label,
html:not(.dark) span.hidden.sm\\:inline {
    color: inherit;
}

/* Community · counters .font-data text-2xl en cards — asegurar dark */
html:not(.dark) main .font-data.text-2xl,
html:not(.dark) main .font-data.text-3xl,
html:not(.dark) main .font-data.text-4xl {
    color: var(--color-wc-text, #1A1A1A);
}

/* Food tracking · wc-f-xp tag con color sutil */
html:not(.dark) .wc-f-xp,
html:not(.dark) [class*="wc-f-xp"] {
    color: #92400E !important;  /* amber-800 sobre warm bg */
    background: rgba(217, 119, 6, 0.10);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* Sidebar nav — asegurar items hover contraste */
html:not(.dark) aside nav a:hover,
html:not(.dark) aside nav a.active {
    background: var(--color-wc-accent-tint-08, rgba(220,38,38,0.08));
    color: var(--color-wc-accent, #DC2626);
}

/* Bottom nav (mobile) — selected state */
html:not(.dark) [class*="bottom-nav"] a.active,
html:not(.dark) [class*="bottom-nav"] a[aria-current="page"] {
    color: var(--color-wc-accent, #DC2626) !important;
    font-weight: 600;
}

/* Loading skeletons — visibles sobre warm bg */
html:not(.dark) [class*="skeleton"],
html:not(.dark) [class*="loading-pulse"] {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.08) 50%,
        rgba(0,0,0,0.05) 100%) !important;
}

/* Forms · placeholder visible en light */
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: var(--color-wc-text-quaternary, #8A95A3) !important;
    opacity: 1;
}

/* Forms · valor de input/textarea legible */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) textarea,
html:not(.dark) select {
    color: var(--color-wc-text, #1A1A1A);
    background: var(--color-wc-bg-tint-soft, rgba(0,0,0,0.03));
    border: 1px solid var(--color-wc-border, rgba(0,0,0,0.12));
}
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
    background: var(--color-wc-bg-prominent, #FFFFFF);
    border-color: var(--color-wc-accent, #DC2626);
    box-shadow: 0 0 0 3px var(--color-wc-accent-tint-08, rgba(220,38,38,0.08));
    outline: none;
}

/* Disabled states */
html:not(.dark) button:disabled,
html:not(.dark) [disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Topbar status pill "W3 · Activo" */
html:not(.dark) .topbar [class*="status"]:not(button):not(a),
html:not(.dark) header [class*="W3"] {
    color: var(--color-wc-text-secondary, #4B5563) !important;
}

/* Toggles / switches (Settings) — contraste mejorado */
html:not(.dark) [role="switch"][aria-checked="false"],
html:not(.dark) input[type="checkbox"]:not(:checked) + [class*="switch"],
html:not(.dark) .toggle:not(.checked) {
    background-color: rgba(0,0,0,0.20) !important;
    border-color: rgba(0,0,0,0.16);
}
html:not(.dark) [role="switch"][aria-checked="true"],
html:not(.dark) input[type="checkbox"]:checked + [class*="switch"],
html:not(.dark) .toggle.checked {
    background-color: var(--color-wc-accent, #DC2626) !important;
}

/* Empty state · gris muted apreciable */
html:not(.dark) .empty-state,
html:not(.dark) [class*="empty-state"] {
    color: var(--color-wc-text-tertiary, #5F6B7A);
}
html:not(.dark) .empty-state h3,
html:not(.dark) [class*="empty-state"] h3 {
    color: var(--color-wc-text, #1A1A1A);
}

/* ═════════════════════════════════════════════════════════════════════
   ROUND 5 · ISSUES VISUALES REPORTADOS POR DANIEL (4 screenshots)
   1. PlanViewer hero lavanda → dark gradient (specificity bump)
   2. Body weight widget · overlay gris invisible → bg-tertiary warm
   3. Breathing circle · PRESS START tenue → text high contrast
   4. Activity feed cards · dark forzado en light → warm
   ═════════════════════════════════════════════════════════════════════ */

/* 1 · PlanViewer hero — wc-shell.css:1935 lo dejó warm (#FFFCF5 → #FAF5EA).
   El PlanHeroV2.vue tenía textos blancos asumiendo dark hero. Ahora que
   bg es warm, los textos blancos se vuelven invisibles. Forzamos los
   colores internos a dark coherente. */
html:not(.dark) section.hero.grain .hero-title,
html:not(.dark) section.hero.grain h1.hero-title,
html:not(.dark) .workout-v2 .hero-title,
html:not(.dark) .workout-v2 h1.hero-title {
    color: var(--color-wc-text, #1A1A1A) !important;
    text-shadow: 0 2px 12px rgba(220, 38, 38, 0.15);
}
html:not(.dark) section.hero.grain .hero-title .accent,
html:not(.dark) .workout-v2 .hero-title .accent {
    color: transparent !important;
    -webkit-text-stroke: 1.5px rgba(220, 38, 38, 0.50) !important;
}
html:not(.dark) section.hero.grain .hero-eyebrow,
html:not(.dark) .workout-v2 .hero-eyebrow {
    color: var(--color-wc-accent, #DC2626) !important;
    font-weight: 700;
}
html:not(.dark) section.hero.grain .hero-meta-row,
html:not(.dark) section.hero.grain .hero-sub,
html:not(.dark) .workout-v2 .hero-meta-row,
html:not(.dark) .workout-v2 .hero-sub {
    color: var(--color-wc-text-secondary, #4B5563) !important;
}
html:not(.dark) section.hero.grain .hero-meta-row .dot,
html:not(.dark) .workout-v2 .hero-meta-row .dot {
    background: var(--color-wc-text-tertiary, #5F6B7A) !important;
}
/* macro-bar (timeline weeks) */
html:not(.dark) section.hero.grain .macro-tick.future,
html:not(.dark) .workout-v2 .macro-tick.future {
    background: rgba(0,0,0,0.06) !important;
}
html:not(.dark) section.hero.grain .macro-tick.future .tk-num,
html:not(.dark) section.hero.grain .macro-tick.deload .tk-num,
html:not(.dark) .workout-v2 .macro-tick.future .tk-num,
html:not(.dark) .workout-v2 .macro-tick.deload .tk-num {
    color: var(--color-wc-text-tertiary, #5F6B7A) !important;
}
html:not(.dark) section.hero.grain .macro-tick .tk-num,
html:not(.dark) .workout-v2 .macro-tick .tk-num {
    color: var(--color-wc-text, #1A1A1A);
}
html:not(.dark) section.hero.grain .macro-legend,
html:not(.dark) .workout-v2 .macro-legend {
    color: var(--color-wc-text-tertiary, #5F6B7A) !important;
}
/* hero-stats divider lines */
html:not(.dark) section.hero.grain .hero-stats,
html:not(.dark) .workout-v2 .hero-stats {
    border-top: 1px solid var(--color-wc-border, rgba(0,0,0,0.12)) !important;
}
html:not(.dark) section.hero.grain .hstat,
html:not(.dark) .workout-v2 .hstat {
    border-right: 1px solid var(--color-wc-border, rgba(0,0,0,0.12)) !important;
}
html:not(.dark) section.hero.grain .hstat:last-child,
html:not(.dark) .workout-v2 .hstat:last-child {
    border-right: 0 !important;
}
html:not(.dark) section.hero.grain .hstat .k,
html:not(.dark) .workout-v2 .hstat .k {
    color: var(--color-wc-text-tertiary, #5F6B7A) !important;
}
html:not(.dark) section.hero.grain .hstat .v,
html:not(.dark) .workout-v2 .hstat .v {
    color: var(--color-wc-text, #1A1A1A) !important;
}
html:not(.dark) section.hero.grain .hstat .v small,
html:not(.dark) .workout-v2 .hstat .v small {
    color: var(--color-wc-text-tertiary, #5F6B7A) !important;
}
/* chip-accent dentro del hero — color text accent-deep #7F1D1D AAA sobre tint */
html:not(.dark) section.hero.grain .chip.chip-accent,
html:not(.dark) .workout-v2 .chip.chip-accent,
html:not(.dark) .chip.chip-accent {
    color: #7F1D1D !important;
    background: rgba(220, 38, 38, 0.14) !important;
    font-weight: 700;
    border: 1px solid rgba(220, 38, 38, 0.20);
}
/* hero-greeting .name · gradient text era blanco sobre dark, en light cae a transparent.
   Forzar color sólido dark con accent stroke sutil para mantener jerarquía. */
html:not(.dark) .hero-greeting .name,
html:not(.dark) .name[style*="background"],
html:not(.dark) [class*="hero-greeting"] [class*="name"] {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--color-wc-text, #1A1A1A) !important;
    text-shadow: 0 1px 0 rgba(220, 38, 38, 0.08);
}
/* Coach quote · dentro del hero pero tiene su propio bg dark, dejarlo */
html:not(.dark) section.hero.grain .coach-quote,
html:not(.dark) section.hero.grain .cq,
html:not(.dark) .workout-v2 .coach-quote {
    background: linear-gradient(180deg, #18181B 0%, #111113 100%) !important;
    color: rgba(250,250,250,0.92) !important;
    border: 1px solid rgba(255,255,255,0.08);
}
html:not(.dark) section.hero.grain .coach-quote *,
html:not(.dark) .workout-v2 .coach-quote * {
    color: inherit;
}
html:not(.dark) section.hero.grain .coach-quote .cq-body,
html:not(.dark) section.hero.grain .cq-body,
html:not(.dark) .workout-v2 .cq-body {
    color: rgba(250,250,250,0.85) !important;
}
html:not(.dark) section.hero.grain .coach-quote .cq-sig,
html:not(.dark) section.hero.grain .cq-sig,
html:not(.dark) .workout-v2 .cq-sig {
    color: rgba(250,250,250,0.55) !important;
}
html:not(.dark) section.hero.grain .coach-quote .who,
html:not(.dark) .workout-v2 .coach-quote .who {
    color: #FFFFFF !important;
}

/* 2 · Body weight chart / weight widget — overlay invisible con blur gris */
html:not(.dark) .weight-chart-empty,
html:not(.dark) .bw-empty,
html:not(.dark) [class*="weight-chart"]:not(.dark *),
html:not(.dark) [class*="weight-empty"],
html:not(.dark) [class*="wc-weight-card"],
html:not(.dark) [class*="weight-no-data"] {
    background: var(--color-wc-bg-tertiary, #FFFCF5) !important;
    color: var(--color-wc-text, #1A1A1A);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: var(--shadow-wc-soft, 0 1px 3px rgba(0,0,0,0.06));
}
html:not(.dark) .weight-chart-empty *,
html:not(.dark) .bw-empty * {
    filter: none !important;
}
/* "NO WEIGHT DATA" / "SIN DATOS" headers — texto oscuro legible */
html:not(.dark) .weight-chart-empty h3,
html:not(.dark) .weight-chart-empty h4,
html:not(.dark) .weight-chart-empty [class*="empty-title"],
html:not(.dark) [class*="weight-card"] h3,
html:not(.dark) [class*="weight-card"] h4 {
    color: var(--color-wc-text, #1A1A1A) !important;
    font-weight: 700;
}
html:not(.dark) .weight-chart-empty p,
html:not(.dark) [class*="weight-card"] p {
    color: var(--color-wc-text-secondary, #4B5563) !important;
}

/* 3 · Mindfulness · Breathing circle (SVG) · LIGHT MODE
   En dark se ve hermoso con bg #0D0D14 + accent glow. En light necesita
   un look sofisticado distinto al negro sólido. Diseño: gradient warm
   sobre warm beige bg + accent halo + stroke ring visible. */
html:not(.dark) svg circle[fill="#0D0D14"] {
    fill: #FAFAFA !important;
    stroke: rgba(220, 38, 38, 0.18);
    stroke-width: 2;
}
html:not(.dark) svg [fill="#0D0D14"] {
    fill: #FAFAFA !important;
}
/* Inner gradient circle (stops white-deep-dark) en light → cream warm con accent tint sutil */
html:not(.dark) svg radialGradient stop[stop-color="#0D0D14"],
html:not(.dark) svg stop[stop-color="#0D0D14"] {
    stop-color: #FFFCF5 !important;
    stop-opacity: 1 !important;
}
/* Outer tick ring · stroke alpha bajo era white sobre dark, en light → dark sobre light */
html:not(.dark) svg circle[stroke="rgba(255,255,255,0.06)"],
html:not(.dark) svg circle[stroke="rgba(255, 255, 255, 0.06)"] {
    stroke: rgba(0, 0, 0, 0.08) !important;
}
/* Progress arc · stroke white era para dark, en light → dark con opacity */
html:not(.dark) svg circle[stroke="white"][opacity="0.18"] {
    stroke: rgba(0, 0, 0, 0.18) !important;
}
/* Wrapper del breathing circle · agregar shadow accent halo + border sutil */
html:not(.dark) [class*="breath-ring"],
html:not(.dark) [class*="ring-wrap"],
html:not(.dark) section [aria-label*="breathing"] svg,
html:not(.dark) section [aria-label*="reathing"] svg {
    filter: drop-shadow(0 8px 32px rgba(220, 38, 38, 0.18))
            drop-shadow(0 0 0 1px rgba(220, 38, 38, 0.12));
}
/* Center content texts dentro del breathing circle · era white-alpha, light → dark */
html:not(.dark) [aria-live="polite"][aria-atomic="true"] [style*="color: rgba(255, 255, 255, 0.35)"],
html:not(.dark) [aria-live="polite"][aria-atomic="true"] [style*="rgba(255,255,255,0.35)"] {
    color: rgba(0, 0, 0, 0.55) !important;
}
html:not(.dark) [aria-live="polite"][aria-atomic="true"] [style*="color: rgba(255, 255, 255, 0.28)"],
html:not(.dark) [aria-live="polite"][aria-atomic="true"] [style*="rgba(255,255,255,0.28)"] {
    color: rgba(0, 0, 0, 0.45) !important;
    font-weight: 700;
    letter-spacing: 0.25em;
}
/* PRESS START / PRESIONA INICIAR · texto central cuando NO está running */
html:not(.dark) span[style*="rgba(255,255,255,0.28)"],
html:not(.dark) span[style*="rgba(255, 255, 255, 0.28)"] {
    color: var(--color-wc-text-secondary, #4B5563) !important;
}

/* 4 · Activity feed cards · dark forzado en light → warm */
html:not(.dark) .act-row,
html:not(.dark) .activity-row,
html:not(.dark) .activity-card,
html:not(.dark) .feed-card,
html:not(.dark) [class*="act-feed"] [class*="card"],
html:not(.dark) [class*="group-pulse"] [class*="card"],
html:not(.dark) [class*="pulse-feed"] [class*="card"],
html:not(.dark) .gpf-card,
html:not(.dark) [class*="gpf-card"] {
    background: var(--color-wc-bg-tertiary, #FFFCF5) !important;
    color: var(--color-wc-text, #1A1A1A);
    border: 1px solid var(--color-wc-border, rgba(0,0,0,0.08));
    box-shadow: var(--shadow-wc-soft);
}
html:not(.dark) .act-row .text-white,
html:not(.dark) .activity-card .text-white,
html:not(.dark) .feed-card .text-white,
html:not(.dark) [class*="gpf-card"] [class*="text-white"] {
    color: var(--color-wc-text, #1A1A1A) !important;
}
html:not(.dark) .act-row [class*="text-wc-text"]:not([class*="-secondary"]):not([class*="-tertiary"]):not([class*="-quaternary"]),
html:not(.dark) .activity-card [class*="text-wc-text"]:not([class*="-secondary"]):not([class*="-tertiary"]):not([class*="-quaternary"]),
html:not(.dark) .feed-card [class*="text-wc-text"]:not([class*="-secondary"]):not([class*="-tertiary"]):not([class*="-quaternary"]) {
    color: var(--color-wc-text, #1A1A1A) !important;
}

/* Activity badges (ATTACH PHOTO, badge ámbar, etc.) en cards light */
html:not(.dark) .act-row .badge,
html:not(.dark) .activity-card .badge,
html:not(.dark) [class*="act-"] [class*="badge"] {
    background: rgba(217, 119, 6, 0.14) !important;
    color: #92400E !important;
}

/* Active members sidebar list */
html:not(.dark) [class*="active-members"] [class*="card"],
html:not(.dark) [class*="member-row"],
html:not(.dark) [class*="members-list"] li,
html:not(.dark) [class*="active-members"] li {
    background: var(--color-wc-bg-tertiary, #FFFCF5);
    color: var(--color-wc-text, #1A1A1A);
    border-bottom: 1px solid var(--color-wc-hairline, rgba(0,0,0,0.10));
}

/* Stats card derecha "29 POSTS / 20 MEMBERS / 6 WINS / 23 PRS" */
html:not(.dark) [class*="stats-card"],
html:not(.dark) [class*="kpi-card"],
html:not(.dark) [class*="metric-card"] {
    background: var(--color-wc-bg-tertiary, #FFFCF5);
    color: var(--color-wc-text, #1A1A1A);
    border: 1px solid var(--color-wc-border, rgba(0,0,0,0.08));
}

/* Savebar (Profile · "You have unsaved changes" + Discard/Save) */
html:not(.dark) .savebar,
html:not(.dark) [class*="savebar"] {
    background: var(--color-wc-bg-prominent, #FFFFFF) !important;
    border-top: 1px solid var(--color-wc-border, rgba(0,0,0,0.12)) !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
html:not(.dark) .savebar__msg,
html:not(.dark) .savebar strong {
    color: var(--color-wc-text, #1A1A1A) !important;
}
html:not(.dark) .savebar__actions .btn--ghost {
    color: var(--color-wc-text-secondary, #4B5563) !important;
    border: 1px solid var(--color-wc-border, rgba(0,0,0,0.20)) !important;
    background: var(--color-wc-bg-tint-soft, rgba(0,0,0,0.03)) !important;
}
html:not(.dark) .savebar__actions .btn--ghost:hover {
    background: rgba(0,0,0,0.06) !important;
    border-color: var(--color-wc-text-secondary, #4B5563) !important;
}
html:not(.dark) .savebar__actions .btn--primary,
html:not(.dark) .savebar__actions button[type="submit"] {
    background: var(--color-wc-accent, #DC2626) !important;
    color: #FFFFFF !important;
    border: none;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

/* Profile completion chips (Profile photo +20, Bio +20, etc.) */
html:not(.dark) .id-detail-chip,
html:not(.dark) button[class*="detail-chip"] {
    background: var(--color-wc-bg-tint-soft, rgba(0,0,0,0.03)) !important;
    color: var(--color-wc-text, #1A1A1A) !important;
    border: 1px solid var(--color-wc-border, rgba(0,0,0,0.12)) !important;
}
html:not(.dark) .id-detail-chip:hover {
    background: var(--color-wc-accent-tint-08, rgba(220,38,38,0.08)) !important;
    border-color: var(--color-wc-accent-tint-14, rgba(220,38,38,0.14)) !important;
    color: var(--color-wc-accent, #DC2626) !important;
}