/* ── OxieAI Light Theme (override layer, activated via html[data-theme="light"]) ── */

/* ── 1. Token overrides ─────────────────────────────────────── */
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] body.studio-body {
    /* Backgrounds */
    --bg-0: #f5f5f7;
    --bg-1: #ffffff;

    /* Ink */
    --ink:     #0f172a;
    --ink-dim: #1e293b;
    --ink-2:   #1e293b;
    --ink-3:   #334155;
    --muted:   rgba(15, 23, 42, 0.68);
    --muted-2: #475569;
    --muted-3: #64748b;

    /* Borders & cards */
    --line:        rgba(15, 23, 42, 0.10);
    --line-hover:  rgba(15, 23, 42, 0.18);
    --line-focus:  rgba(15, 23, 42, 0.28);
    --card:        #ffffff;
    --card-alt:    #fafafa;
    --surface-1:   #ffffff;
    --surface-2:   #f8fafc;

    /* Accents */
    --glow: rgba(59, 125, 255, 0.18);
    --gold: rgba(59, 125, 255, 0.20);

    /* Primary = OxieAI blue accent (mirrors dark theme) */
    --primary:       #3B7DFF;
    --primary-hover: #2C6FE8;
    --primary-fg:    #ffffff;

    /* Gradients */
    --gradient-brand: linear-gradient(90deg, #6BA1FF 0%, #3B7DFF 50%, #2C6FE8 100%);
    --gradient-text:  linear-gradient(90deg, #0f172a 0%, #1f2937 60%, #334155 100%);

    /* Shadows — soft on light */
    --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md:   0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg:   0 20px 50px rgba(15, 23, 42, 0.10);
    --shadow-xl:   0 14px 40px rgba(15, 23, 42, 0.10);
    --shadow-glow: 0 4px 20px rgba(59, 125, 255, 0.25);

    background-color: var(--bg-0);
    color: var(--ink);
}

/* ── 2. Backdrop layers ─────────────────────────────────────── */
html[data-theme="light"] .studio-bg-layer {
    background-image:
        radial-gradient(1100px 700px at 15% 10%, rgba(59, 125, 255, 0.10), transparent 60%),
        radial-gradient(900px 600px at 85% 8%, rgba(59, 125, 255, 0.06), transparent 55%),
        radial-gradient(900px 700px at 70% 95%, rgba(59, 125, 255, 0.06), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
}
html[data-theme="light"] .studio-vignette::after {
    background: none !important;
}

/* ── 3. Typography ──────────────────────────────────────────── */
html[data-theme="light"] .studio-gradient-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #0f172a !important;
}
html[data-theme="light"] .studio-brand {
    color: #0f172a;
}

/* ── 4. Panels & surfaces ───────────────────────────────────── */
html[data-theme="light"] .studio-panel {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: var(--shadow-md);
    border-radius: 20px;
}
html[data-theme="light"] .studio-surface {
    background: #ffffff !important;
    box-shadow: none !important;
    color: #0f172a;
}
html[data-theme="light"] .studio-surface:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* ── 5. Buttons ─────────────────────────────────────────────── */
html[data-theme="light"] .studio-btn,
html[data-theme="light"] .ds-btn-primary {
    background: linear-gradient(180deg, #6BA1FF 0%, #3B7DFF 100%) !important;
    color: #1f2937 !important;
    border: 1px solid #2C6FE8 !important;
    box-shadow: 0 2px 8px rgba(59, 125, 255, 0.35) !important;
    text-shadow: none !important;
}
html[data-theme="light"] .studio-btn:hover {
    filter: brightness(1.03);
    box-shadow: 0 6px 18px rgba(59, 125, 255, 0.45) !important;
}
html[data-theme="light"] .studio-btn-ghost,
html[data-theme="light"] .ds-btn-ghost {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] .studio-btn-ghost:hover,
html[data-theme="light"] .ds-btn-ghost:hover {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.20) !important;
}
html[data-theme="light"] .ds-btn-solid {
    background: var(--primary) !important;
    color: var(--primary-fg) !important;
}
html[data-theme="light"] .ds-btn-chip {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

/* ── 6. Pills / chips / badges ──────────────────────────────── */
html[data-theme="light"] .badge-pill,
html[data-theme="light"] .studio-chip {
    background: rgba(59, 125, 255, 0.14) !important;
    border: 1px solid rgba(59, 125, 255, 0.35) !important;
    color: #854d0e !important;
}

/* ── 7. Form inputs ─────────────────────────────────────────── */
html[data-theme="light"] .studio-input,
html[data-theme="light"] .ds-input,
html[data-theme="light"] .ds-input-dark {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] .studio-input::placeholder,
html[data-theme="light"] .ds-input::placeholder {
    color: rgba(15, 23, 42, 0.45) !important;
}
html[data-theme="light"] .studio-input:focus,
html[data-theme="light"] .ds-input:focus {
    border-color: #3B7DFF !important;
    box-shadow: 0 0 0 3px rgba(59, 125, 255, 0.25) !important;
}
html[data-theme="light"] select.studio-input,
html[data-theme="light"] select.ds-input {
    color: #0f172a !important;
}
html[data-theme="light"] select.studio-input option,
html[data-theme="light"] select.ds-input option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* ── 8. Icon bubbles ────────────────────────────────────────── */
html[data-theme="light"] .studio-icon-bubble {
    background: rgba(59, 125, 255, 0.15) !important;
    border: 1px solid rgba(59, 125, 255, 0.40) !important;
    color: #854d0e !important;
}

/* ── 9. Tailwind Utility Overrides ──────────────────────────── */

/* Text colors */
html[data-theme="light"] .text-slate-50,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 { color: #0f172a !important; }
html[data-theme="light"] .text-slate-300 { color: #334155 !important; }
html[data-theme="light"] .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] .text-slate-500 { color: #64748b !important; }
html[data-theme="light"] .text-white     { color: #0f172a !important; }
html[data-theme="light"] .text-white\/70 { color: rgba(15, 23, 42, 0.70) !important; }
html[data-theme="light"] .text-white\/80 { color: rgba(15, 23, 42, 0.80) !important; }
html[data-theme="light"] .text-white\/90 { color: rgba(15, 23, 42, 0.90) !important; }

/* Keep white text inside preset cards (they overlay dark images) */
html[data-theme="light"] .snap-x button.group .text-white,
html[data-theme="light"] .snap-x button.group [class*="text-white"] { color: #ffffff !important; }

/* White/transparent backgrounds → soft light surface */
html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10,
html[data-theme="light"] .bg-white\/20 {
    background-color: #f8fafc !important;
}

/* Black/transparent overlay backgrounds → soft light surface */
html[data-theme="light"] .bg-black\/20,
html[data-theme="light"] .bg-black\/30,
html[data-theme="light"] .bg-black\/40,
html[data-theme="light"] .bg-black\/50,
html[data-theme="light"] .bg-black\/60,
html[data-theme="light"] .bg-black\/90 {
    background-color: #f8fafc !important;
}

/* White/transparent borders → subtle ink borders */
html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/20,
html[data-theme="light"] .border-white\/30 {
    border-color: rgba(15, 23, 42, 0.10) !important;
}
html[data-theme="light"] .hover\:border-white\/20:hover,
html[data-theme="light"] .hover\:border-white\/30:hover {
    border-color: rgba(15, 23, 42, 0.22) !important;
}
html[data-theme="light"] .hover\:bg-white\/10:hover,
html[data-theme="light"] .hover\:bg-black\/40:hover {
    background-color: #f1f5f9 !important;
}

/* Generic card surfaces (why / impact / faq items) */
html[data-theme="light"] section .rounded-2xl.border,
html[data-theme="light"] section .rounded-3xl.border {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: var(--shadow-sm);
}

/* Hero slider preset tabs — background handled by .bas-thumb rules */

/* ── 10. Preset / Style Cards (kept dark over photo backgrounds) ── */

/* ── 10a. Local token reset inside cards ───────────────────── */
html[data-theme="light"] .snap-x button.group,
html[data-theme="light"] .fav-style-card,
html[data-theme="light"] .group.rounded-3xl.bg-cover,
html[data-theme="light"] a.group.rounded-3xl.bg-cover {
    /* Text inks → bright whites (dark-theme values) */
    --ink:     #EDEDF7;
    --ink-dim: #F1F5F9;
    --ink-2:   #E2E8F0;
    --ink-3:   #CBD5E1;
    --muted:   rgba(237, 237, 247, 0.72);
    --muted-2: #94A3B8;
    --muted-3: #64748B;

    /* Surface & borders → dark-theme values */
    --line:        rgba(255, 255, 255, 0.10);
    --line-hover:  rgba(255, 255, 255, 0.20);
    --line-focus:  rgba(255, 255, 255, 0.30);
    --card:        rgba(255, 255, 255, 0.05);
    --card-alt:    rgba(255, 255, 255, 0.03);
    --surface-1:   rgba(0, 0, 0, 0.30);
    --surface-2:   rgba(0, 0, 0, 0.40);
}

/* ── 10b. Revert Tailwind utility overrides inside cards ──── */
/* Text */
html[data-theme="light"] .snap-x button.group .text-white,
html[data-theme="light"] .snap-x button.group [class*="text-white"],
html[data-theme="light"] .snap-x button.group .text-slate-50,
html[data-theme="light"] .snap-x button.group .text-slate-100,
html[data-theme="light"] .snap-x button.group .text-slate-200,
html[data-theme="light"] .fav-style-card .text-white,
html[data-theme="light"] .fav-style-card [class*="text-white"],
html[data-theme="light"] .fav-style-card .text-slate-50,
html[data-theme="light"] .fav-style-card .text-slate-100,
html[data-theme="light"] .fav-style-card .text-slate-200,
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-white,
html[data-theme="light"] .group.rounded-3xl.bg-cover [class*="text-white"],
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-slate-50,
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-slate-100,
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-slate-200 {
    color: #ffffff !important;
}
html[data-theme="light"] .snap-x button.group .text-slate-300,
html[data-theme="light"] .fav-style-card .text-slate-300,
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-slate-300 {
    color: #CBD5E1 !important;
}
html[data-theme="light"] .snap-x button.group .text-slate-400,
html[data-theme="light"] .fav-style-card .text-slate-400,
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-slate-400 {
    color: #94A3B8 !important;
}

/* Opacity-modifier text classes */
html[data-theme="light"] .snap-x button.group .text-white\/70,
html[data-theme="light"] .fav-style-card .text-white\/70,
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-white\/70 {
    color: rgba(255, 255, 255, 0.70) !important;
}
html[data-theme="light"] .snap-x button.group .text-white\/80,
html[data-theme="light"] .fav-style-card .text-white\/80,
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-white\/80 {
    color: rgba(255, 255, 255, 0.80) !important;
}
html[data-theme="light"] .snap-x button.group .text-white\/90,
html[data-theme="light"] .fav-style-card .text-white\/90,
html[data-theme="light"] .group.rounded-3xl.bg-cover .text-white\/90 {
    color: rgba(255, 255, 255, 0.90) !important;
}
html[data-theme="light"] .snap-x button.group [class*="text-slate-100/"],
html[data-theme="light"] .fav-style-card [class*="text-slate-100/"],
html[data-theme="light"] .group.rounded-3xl.bg-cover [class*="text-slate-100/"] {
    color: rgba(241, 245, 249, 0.85) !important;
}
html[data-theme="light"] .snap-x button.group [class*="text-slate-200/"],
html[data-theme="light"] .fav-style-card [class*="text-slate-200/"],
html[data-theme="light"] .group.rounded-3xl.bg-cover [class*="text-slate-200/"] {
    color: rgba(226, 232, 240, 0.85) !important;
}

/* Backgrounds — revert to semi-transparent white/black as in dark */
html[data-theme="light"] .snap-x button.group .bg-white\/5,
html[data-theme="light"] .fav-style-card .bg-white\/5,
html[data-theme="light"] .group.rounded-3xl.bg-cover .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="light"] .snap-x button.group .bg-white\/10,
html[data-theme="light"] .fav-style-card .bg-white\/10,
html[data-theme="light"] .group.rounded-3xl.bg-cover .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="light"] .snap-x button.group .bg-white\/20,
html[data-theme="light"] .fav-style-card .bg-white\/20,
html[data-theme="light"] .group.rounded-3xl.bg-cover .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.20) !important;
}
html[data-theme="light"] .snap-x button.group .bg-black\/20,
html[data-theme="light"] .fav-style-card .bg-black\/20,
html[data-theme="light"] .group.rounded-3xl.bg-cover .bg-black\/20 {
    background-color: rgba(0, 0, 0, 0.20) !important;
}
html[data-theme="light"] .snap-x button.group .bg-black\/40,
html[data-theme="light"] .fav-style-card .bg-black\/40,
html[data-theme="light"] .group.rounded-3xl.bg-cover .bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.40) !important;
}
html[data-theme="light"] .snap-x button.group .bg-black\/50,
html[data-theme="light"] .fav-style-card .bg-black\/50,
html[data-theme="light"] .group.rounded-3xl.bg-cover .bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.50) !important;
}

/* Borders */
html[data-theme="light"] .snap-x button.group .border-white\/5,
html[data-theme="light"] .fav-style-card .border-white\/5,
html[data-theme="light"] .group.rounded-3xl.bg-cover .border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="light"] .snap-x button.group .border-white\/10,
html[data-theme="light"] .fav-style-card .border-white\/10,
html[data-theme="light"] .group.rounded-3xl.bg-cover .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="light"] .snap-x button.group .border-white\/20,
html[data-theme="light"] .snap-x button.group .border-white\/25,
html[data-theme="light"] .fav-style-card .border-white\/20,
html[data-theme="light"] .fav-style-card .border-white\/25,
html[data-theme="light"] .group.rounded-3xl.bg-cover .border-white\/20,
html[data-theme="light"] .group.rounded-3xl.bg-cover .border-white\/25 {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ── 10c. The card surface itself: identical to dark theme ── */
html[data-theme="light"] .group.rounded-3xl.bg-cover.bg-black\/40,
html[data-theme="light"] a.group.rounded-3xl.bg-cover.bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.40) !important;
}
/* border-white/5 on the card itself */
html[data-theme="light"] .group.rounded-3xl.bg-cover.border-white\/5,
html[data-theme="light"] a.group.rounded-3xl.bg-cover.border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="light"] .snap-x button.group {
    background-color: #0a0a0d !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ── 10d. Inner absolute layer radii ──────────────────────── */
html[data-theme="light"] .snap-x button.group > .absolute.inset-0,
html[data-theme="light"] .group.rounded-3xl.bg-cover > .absolute.rounded-3xl,
html[data-theme="light"] .fav-style-card .overlay {
    border-radius: 28px !important;
}

/* ── 10e. Favorite/delete corner buttons inside light theme ── */
html[data-theme="light"] .favorite-btn {
    background-color: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .favorite-btn:hover {
    background-color: rgba(0, 0, 0, 0.75) !important;
    color: #ffffff !important;
}
/* Icon colors */
html[data-theme="light"] .favorite-btn i,
html[data-theme="light"] .favorite-btn svg,
html[data-theme="light"] .favorite-btn .text-white\/70,
html[data-theme="light"] .favorite-btn .text-white\/80,
html[data-theme="light"] .favorite-btn .text-white\/90 {
    color: rgba(255, 255, 255, 0.85) !important;
    stroke: currentColor !important;
}
/* Favorited state — keep the rose fill/stroke from Tailwind. */
html[data-theme="light"] .favorite-btn .fill-rose-400,
html[data-theme="light"] .favorite-btn .text-rose-400 {
    color: #fb7185 !important;
    fill: #fb7185 !important;
    stroke: #fb7185 !important;
}


/* ── 10f. Rail card overrides (Popular Photo Styles / Trending) ──── */
/* The .rail-card-link element on the home page rails doesn't include
   .bg-cover on its root (the cover image is on a nested div), so the
   selectors in 10a/10b/10c above don't reach it. Replicate the same
   ink/line tokens and !important text overrides here. */
html[data-theme="light"] .rail-card-link {
    --ink:     #EDEDF7;
    --ink-dim: #F1F5F9;
    --ink-2:   #E2E8F0;
    --ink-3:   #CBD5E1;
    --muted:   rgba(237, 237, 247, 0.72);
    --muted-2: #94A3B8;
    --muted-3: #64748B;
    --line:        rgba(255, 255, 255, 0.10);
    --line-hover:  rgba(255, 255, 255, 0.20);
    --line-focus:  rgba(255, 255, 255, 0.30);
    --card:        rgba(255, 255, 255, 0.05);
    --card-alt:    rgba(255, 255, 255, 0.03);
    --surface-1:   rgba(0, 0, 0, 0.30);
    --surface-2:   rgba(0, 0, 0, 0.40);

    /* Slightly darker base background so the gradient overlays read
       well even on cards with bright photos (Meadow Glow, Forest, etc.) */
    background: #0a0a0d !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Make the bottom-gradient overlay stronger in light theme so white
   title text always has contrast on lighter photo backgrounds. */
html[data-theme="light"] .rail-card-link .bg-gradient-to-t.from-black\/90 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.70) 40%, transparent) !important;
}

/* Text overrides: keep card text white-on-dark even in light theme,
   since the card's interior is photo-on-dark. */
html[data-theme="light"] .rail-card-link .text-white,
html[data-theme="light"] .rail-card-link [class*="text-white"],
html[data-theme="light"] .rail-card-link h3 {
    color: #ffffff !important;
}
html[data-theme="light"] .rail-card-link .text-white\/60 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* "X RENDERS" / "NEW" counter — was text-indigo-400/90 which on a light
   page chrome looks washed-out. Use brand accent for readability. */
html[data-theme="light"] .rail-card-link .text-indigo-400\/90 {
    color: #6BA1FF !important;
}

/* PRESET badge inside rail-card: keep dark-on-white-text styling
   (inline style sets bg to rgba(0,0,0,0.7) already; ensure border looks right) */
html[data-theme="light"] .rail-card-link .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.20) !important;
}

/* ── 11. Impact fast-facts divider ──────────────────────────── */
html[data-theme="light"] .border-l.border-white\/10 {
    border-color: rgba(15, 23, 42, 0.10) !important;
}

/* ── 12. Gradient CTA card inside impact ────────────────────── */
html[data-theme="light"] .bg-gradient-to-br.from-white\/10 {
    background: linear-gradient(135deg, rgba(59, 125, 255, 0.12), rgba(255, 255, 255, 0.00)) !important;
}

/* ── 13. Success / error states ─────────────────────────────── */
html[data-theme="light"] .border-emerald-500\/20,
html[data-theme="light"] .border-emerald-500\/30 {
    border-color: rgba(16, 185, 129, 0.45) !important;
}
html[data-theme="light"] .text-emerald-400 { color: #059669 !important; }
html[data-theme="light"] .text-emerald-200 { color: #047857 !important; }
html[data-theme="light"] .bg-emerald-400\/20 {
    background-color: rgba(16, 185, 129, 0.14) !important;
}
html[data-theme="light"] .border-rose-500\/30 {
    border-color: rgba(244, 63, 94, 0.45) !important;
}
html[data-theme="light"] .bg-rose-500\/10 {
    background-color: rgba(244, 63, 94, 0.08) !important;
}
html[data-theme="light"] .text-rose-100,
html[data-theme="light"] .text-rose-400 { color: #be123c !important; }

/* Selected preset ring — adapt ring-offset from black to white */
html[data-theme="light"] .ring-offset-black {
    --tw-ring-offset-color: #ffffff !important;
}

/* Emerald dot in hero "realtime preview" chip */
html[data-theme="light"] .studio-chip .bg-emerald-400 { background-color: #10b981 !important; }

/* ── 14. Header & Navigation ────────────────────────────────── */
html[data-theme="light"] .studio-header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .studio-header a,
html[data-theme="light"] .studio-header nav a {
    color: #334155 !important;
}
html[data-theme="light"] .studio-header nav a:hover {
    color: #0f172a !important;
}

/* ── 15. Footer ─────────────────────────────────────────────── */
html[data-theme="light"] footer,
html[data-theme="light"] .studio-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    color: #334155 !important;
}
html[data-theme="light"] footer a { color: #334155 !important; }
html[data-theme="light"] footer a:hover { color: #0f172a !important; }

/* ── 16b. Studio Ribbon ("Popular" badge) ───────────────────── */
html[data-theme="light"] .studio-ribbon {
    background: linear-gradient(180deg, #6BA1FF 0%, #3B7DFF 100%) !important;
    border: 1px solid #2C6FE8 !important;
    color: #1f2937 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 12px rgba(59, 125, 255, 0.35) !important;
}

/* ── 16c. Inline-styled Stat Bubbles ────────────────────────── */

/* Violet bubble (sparkles / "Created by you") */
html[data-theme="light"] span[style*="rgba(139, 92, 246"] {
    background: rgba(139, 92, 246, 0.18) !important;
    border: 1px solid rgba(139, 92, 246, 0.45) !important;
    color: #5b21b6 !important;
    box-shadow: 0 1px 3px rgba(139, 92, 246, 0.15);
}
html[data-theme="light"] span[style*="rgba(139, 92, 246"] svg,
html[data-theme="light"] span[style*="rgba(139, 92, 246"] i {
    stroke-width: 2.5 !important;
    color: #5b21b6 !important;
}

/* Rose bubble (heart / "Saved from gallery") */
html[data-theme="light"] span[style*="rgba(244, 63, 94"] {
    background: rgba(244, 63, 94, 0.18) !important;
    border: 1px solid rgba(244, 63, 94, 0.45) !important;
    color: #9f1239 !important;
    box-shadow: 0 1px 3px rgba(244, 63, 94, 0.15);
}
html[data-theme="light"] span[style*="rgba(244, 63, 94"] svg,
html[data-theme="light"] span[style*="rgba(244, 63, 94"] i {
    stroke-width: 2.5 !important;
    color: #9f1239 !important;
}

/* Emerald bubble (layers / "Styles at hand") */
html[data-theme="light"] span[style*="rgba(16, 185, 129"] {
    background: rgba(16, 185, 129, 0.18) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #065f46 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15);
}
html[data-theme="light"] span[style*="rgba(16, 185, 129"] svg,
html[data-theme="light"] span[style*="rgba(16, 185, 129"] i {
    stroke-width: 2.5 !important;
    color: #065f46 !important;
}

/* ── 17. Site Logo (theme-aware swap) ───────────────────────── */
.site-logo-light { display: none; }
html[data-theme="light"] .site-logo-dark  { display: none; }
html[data-theme="light"] .site-logo-light { display: inline-block; }

/* ── 16. Theme Toggle Button (floating) ─────────────────────── */
.theme-toggle-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(20, 20, 28, 0.88);
    color: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: transform 200ms ease, box-shadow 200ms ease,
                background-color 200ms ease, border-color 200ms ease;
}
.theme-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.theme-toggle-btn:active {
    transform: translateY(0);
}
.theme-toggle-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Icon swap: show sun in dark mode, moon in light mode */
.theme-toggle-btn .icon-sun  { display: inline-flex; }
.theme-toggle-btn .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle-btn {
    background: #ffffff;
    color: #1f2937;
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}
html[data-theme="light"] .theme-toggle-btn .icon-sun  { display: none; }
html[data-theme="light"] .theme-toggle-btn .icon-moon { display: inline-flex; }

/* Mobile: smaller and snug to corner */
@media (max-width: 640px) {
    .theme-toggle-btn {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
    .theme-toggle-btn svg { width: 20px; height: 20px; }
}

/* ── 18. Status Badge Overrides ─────────────────────────────── */

html[data-theme="light"] .text-emerald-200 { color: #059669 !important; }
html[data-theme="light"] .text-amber-200   { color: #d97706 !important; }
html[data-theme="light"] .text-rose-200    { color: #e11d48 !important; }

html[data-theme="light"] .bg-emerald-500\/10 {
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.3) !important;
}
html[data-theme="light"] .bg-amber-500\/10 {
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3) !important;
}
html[data-theme="light"] .bg-rose-500\/10 {
    box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.3) !important;
}
html[data-theme="light"] .bg-slate-500\/10 {
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.3) !important;
}

/* ── 19. Result Page Overrides ──────────────────────────────── */

html[data-theme="light"] .result-tag-brand {
    background: rgba(59, 125, 255, 0.15) !important;
    border: 1px solid rgba(59, 125, 255, 0.40) !important;
    color: #854d0e !important;
}

html[data-theme="light"] .result-tag-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #047857 !important;
}

html[data-theme="light"] .result-tag-muted {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
}

html[data-theme="light"] .result-btn-ghost {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] .result-btn-ghost:hover {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.25) !important;
}

/* ── 20. Card Corner Buttons (unsave / delete / favorite) ───── */

html[data-theme="light"] .fav-corner-btn,
html[data-theme="light"] form[action*="/delete"],
html[data-theme="light"] .favorite-btn {
    top: 0.9rem !important;
    right: 0.9rem !important;
}

/* ── 21. Before / After Slider ──────────────────────────────── */

html[data-theme="light"] .bas-stage {
    background:
        radial-gradient(900px 400px at 15% 0%, rgba(59, 125, 255, 0.06), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 20px 50px -20px rgba(15, 23, 42, 0.10),
        0 6px 20px -10px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .bas-stage::before {
    background: linear-gradient(90deg, transparent, rgba(59, 125, 255, 0.25), transparent);
}

html[data-theme="light"] .bas-frame {
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] .bas-frame:focus-visible {
    outline-color: rgba(59, 125, 255, 0.55) !important;
}

html[data-theme="light"] .bas-label-after {
    background: linear-gradient(90deg, #6BA1FF 0%, #3B7DFF 50%, #2C6FE8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20);
}

html[data-theme="light"] .preview-btn.bas-thumb {
    background: transparent !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .preview-btn.bas-thumb:hover {
    border-color: rgba(59, 125, 255, 0.45) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10) !important;
}
html[data-theme="light"] .preview-btn.bas-thumb.active {
    border-color: rgba(59, 125, 255, 0.65) !important;
    box-shadow:
        0 0 0 2px rgba(59, 125, 255, 0.20),
        0 8px 20px rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] .preview-btn.bas-thumb:focus-visible {
    outline-color: rgba(59, 125, 255, 0.55) !important;
}

html[data-theme="light"] .result-btn-ghost,
html[data-theme="light"] .result-link,
html[data-theme="light"] a[href*="results"] {
    color: var(--ink) !important;
}

html[data-theme="light"] .text-slate-400 {
    color: var(--muted) !important;
}

html[data-theme="light"] [data-share-badge] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: rgb(6, 95, 70);
}

html[data-theme="light"] [data-share-badge] i {
    color: rgb(5, 150, 105);
}

html[data-theme="light"] button[data-history-action="copy"] {
    color: rgb(6, 95, 70) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    background: rgba(16, 185, 129, 0.10) !important;
}

html[data-theme="light"] button[data-history-action="copy"]:hover {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(16, 185, 129, 0.55) !important;
}

html[data-theme="light"] button[data-history-action="copy"] i {
    color: rgb(5, 150, 105) !important;
}

html[data-theme="light"] button[data-history-action="copy"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── 21b. Style Card Overlays (light warm tint) ─────────────── */
/* Base overlay (light, premium) */
html[data-theme="light"] .group.rounded-3xl.bg-cover > .bg-gradient-to-t.from-black\/80,
html[data-theme="light"] .fav-style-card .overlay {
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.10) 0%,  
        rgba(59, 125, 255, 0.06) 20%,
        rgba(255, 255, 255, 0.00) 45%
    ) !important;

}

/* Hover (slightly richer, still premium) */
html[data-theme="light"] .group.rounded-3xl.bg-cover:hover > .bg-gradient-to-t.from-black\/80,
html[data-theme="light"] .fav-style-card:hover .overlay {
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.14) 0%,
        rgba(59, 125, 255, 0.10) 18%,
        rgba(255, 255, 255, 0.00) 50%
    ) !important;

}

/* ── 23. Public Share Link Row (custom_show) ────────────────── */
/* The emerald/white tailwind classes wash out on a light background.
   Repaint border, background, link text and copy button for contrast. */
html[data-theme="light"] [data-share-link-row] {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(5, 150, 105, 0.45) !important;
    color: #065f46 !important;
}
html[data-theme="light"] [data-share-link-row] [data-lucide],
html[data-theme="light"] [data-share-link-row] i {
    color: #ffffff !important;
}
html[data-theme="light"] [data-share-link-row] a[data-share-link-anchor] {
    color: #065f46 !important;
    text-decoration-color: rgba(5, 150, 105, 0.6) !important;
    font-weight: 500;
}
html[data-theme="light"] [data-share-link-row] a[data-share-link-anchor]:hover {
    color: #064e3b !important;
}
html[data-theme="light"] #copy-share-btn {
    background: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.35) !important;
}
html[data-theme="light"] #copy-share-btn:hover {
    background: #047857 !important;
    border-color: #065f46 !important;
}
html[data-theme="light"] #copy-share-btn i {
    color: #ffffff !important;
}

html[data-theme="light"] .ds-hint-brand {
    border-color: rgba(59, 125, 255, 0.18);
    background: rgba(59, 125, 255, 0.06);
    color: #5b21b6;
}
html[data-theme="light"] .ds-hint-brand svg,
html[data-theme="light"] .ds-hint-brand .lucide {
    color: #3B7DFF;
}

/* ── 24. Generation Overlay (light) ───────────────────────── */
html[data-theme="light"] .gen-overlay {
    background: rgba(245, 245, 247, 0.88) !important;
}
html[data-theme="light"] .gen-overlay-spinner {
    color: #3B7DFF !important;
}
html[data-theme="light"] .gen-overlay-title {
    color: #0f172a !important;
}
html[data-theme="light"] .gen-overlay-sub {
    color: #64748b !important;
}

/* ── 25. Refine Panel (light) ─────────────────────────────── */
html[data-theme="light"] .refine-panel {
    background: #ffffff !important;
    border-color: rgba(59, 125, 255, 0.18) !important;
    box-shadow: var(--shadow-md);
}
html[data-theme="light"] .refine-panel textarea.ds-input {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .refine-panel textarea.ds-input:focus {
    border-color: #3B7DFF !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}
html[data-theme="light"] .refine-panel .ds-btn-chip {
    background: #ffffff !important;
    border-color: rgba(59, 125, 255, 0.20) !important;
    color: #5b21b6 !important;
}
html[data-theme="light"] .refine-panel .ds-btn-chip:hover {
    background: rgba(59, 125, 255, 0.06) !important;
    border-color: rgba(59, 125, 255, 0.35) !important;
}
html[data-theme="light"] .refine-panel-title {
    color: #0f172a !important;
}
html[data-theme="light"] .refine-panel-title svg {
    color: #3B7DFF !important;
}
html[data-theme="light"] .refine-panel-sub {
    color: #475569 !important;
}
html[data-theme="light"] .refine-cost-badge {
    background: rgba(59, 125, 255, 0.14) !important;
    border-color: rgba(59, 125, 255, 0.35) !important;
    color: #854d0e !important;
}

/* ── 10g. Tailwind ink tokens — light theme overrides ─────────── */
/* These Tailwind utility classes are defined in tailwind.config.js
   with dark-theme values (white-ish). In light theme we need them
   to be dark text on light bg. Applies globally (not just rail-card). */
html[data-theme="light"] .text-ink {
    color: #0F172A !important;          /* near-black */
}
html[data-theme="light"] .text-ink-dim {
    color: #1E293B !important;          /* dark slate */
}
html[data-theme="light"] .text-ink-2 {
    color: #334155 !important;          /* medium slate */
}
html[data-theme="light"] .text-ink-3 {
    color: #475569 !important;          /* muted slate */
}

/* Border-line token in light theme: subtle dark border */
html[data-theme="light"] .border-line {
    border-color: rgba(15, 23, 42, 0.10) !important;
}

/* But INSIDE rail-card-link (which stays dark themed via 10f),
   restore the dark-theme ink values to maintain card readability. */
html[data-theme="light"] .rail-card-link .text-ink,
html[data-theme="light"] .rail-card-link h2.text-ink {
    color: #FFFFFF !important;
}
html[data-theme="light"] .rail-card-link .text-ink-dim {
    color: #F4F4F5 !important;
}
html[data-theme="light"] .rail-card-link .text-ink-3 {
    color: #CBD5E1 !important;
}

/* Same for rail TITLE row (above rail-card-link cards), not inside cards.
   rail.php uses .studio-gradient-text with text-ink — light overrides
   handle the icon-next-to-title which uses text-ink-dim. */

/* ── 20. Notification & badge accent icons (light theme) ──────────────
   Tailwind's text-*-100 / -200 accents are near-white — designed for dark
   bubbles. On the light theme the notification icons vanished inside their
   faint tinted bubbles. Darken to a saturated shade that reads on a light
   tint. (rose-100/-200, emerald-200, amber-200 are handled earlier; these
   fill the remaining gaps: indigo + emerald-100 + amber-100.) */
html[data-theme="light"] .text-indigo-100,
html[data-theme="light"] .text-indigo-200 { color: #4338ca !important; }
html[data-theme="light"] .text-emerald-100 { color: #047857 !important; }
html[data-theme="light"] .text-amber-100   { color: #b45309 !important; }

/* ── 21. Product-post block (result page, light theme) ────────────────
   The whole marketplace-post UI was dark-only — a 20%-black slab with white
   text and dark-filled inputs — so it read as a foreign grey block on the
   light theme. Re-skin every piece to the site's own light surfaces:
   panels = white + hairline border + soft shadow (like .studio-panel),
   inputs = white + dark text + 0.12 border (like .ds-input). */

/* Containers → elevated white cards */
html[data-theme="light"] .product-block,
html[data-theme="light"] .product-post-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] .product-post-card-head:hover {
    background: rgba(15, 23, 42, 0.03) !important;
}
html[data-theme="light"] .product-post-output {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .product-export-bar {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

/* Text → dark ink / muted ink */
html[data-theme="light"] .product-block-title,
html[data-theme="light"] .product-post-card-head,
html[data-theme="light"] .product-post-card-title,
html[data-theme="light"] .product-info-val { color: #0f172a !important; }
html[data-theme="light"] .product-block-sub,
html[data-theme="light"] .product-field-label,
html[data-theme="light"] .product-save-status,
html[data-theme="light"] .product-post-chevron,
html[data-theme="light"] .product-info-key,
html[data-theme="light"] .product-info-note { color: #475569 !important; }

/* Inputs / generated text → match .ds-input */
html[data-theme="light"] .product-input,
html[data-theme="light"] .product-post-text {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .product-input:focus {
    border-color: #3B7DFF !important;
    box-shadow: 0 0 0 3px rgba(59, 125, 255, 0.25) !important;
}

/* Cost pill → light neutral */
html[data-theme="light"] .product-post-cost {
    background: rgba(15, 23, 42, 0.06) !important;
    color: #334155 !important;
}

/* ── 22. Scene Immersion card (style detail, light theme) ─────────────
   Dark-only feature card: a faint translucent-white surface, white title,
   light-slate subtitle/benefit text and a near-white toggle — all of which
   washed out on the light theme (the benefit list was barely legible). Give
   it the same elevated white card + dark inks as the rest of the UI. */
html[data-theme="light"] .scene-immersion {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] .scene-immersion:hover {
    border-color: rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] .scene-immersion.is-on {
    border-color: var(--accent) !important;
}
html[data-theme="light"] .scene-immersion__title    { color: #0f172a !important; }
html[data-theme="light"] .scene-immersion__subtitle  { color: #334155 !important; }
html[data-theme="light"] .scene-immersion__benefits li { color: #475569 !important; }
html[data-theme="light"] .scene-immersion.is-on .scene-immersion__benefits li { color: #1e293b !important; }

/* Toggle: off-state track was near-white (invisible). White knob stays. */
html[data-theme="light"] .scene-immersion__switch {
    background: rgba(15, 23, 42, 0.15) !important;
}