/* ============================================================================
   Neuravision — colour themes (assets/themes/themes.css)
   Load AFTER the page's base <style> (end of <head>):
     <link rel="stylesheet" href="assets/themes/themes.css">
   Theme is selected by html[data-theme="dark|violet|light|orange"] (default: dark,
   set by the inline head script in theme-switch.js / visual_spec.md).
   Sections: 1 tokens · 2 switcher UI · 3 violet · 3b orange · 3c violet+orange depth · 4 light · 5 light/SnapFix

   ONE SYSTEM, FOUR TINTS
   ----------------------
   * surfaces  bg < bg2 < card < card2 are luminance-matched across every dark
     theme (rel-lum .0022 / .0061 / .0088 / .0127). Only hue changes; chroma is
     capped at HSV S<=.45 and FALLS as a surface gets lighter, so nothing reads
     "plastic".
   * text      txt > txt2 > muted > dim is luminance-matched too
     (.92 / .74 / .48 / .27) — so a paragraph has the same weight in every theme,
     only its temperature follows the tint. --txt2 is the bright secondary used by
     the hero sub-headline, pricing bullets and all in-panel control labels.
   * accent    --o1/--o2 (vivid brand orange) = decor, gradient text, glows.
     --oa1/--oa2/--grad-cta (deep burnt orange) = filled buttons carrying white
     labels; it is the SAME in all four themes, so the CTA is one object sitewide.
     --otx / --otx2 = the theme's accent used AS TEXT on its own surfaces
     (contrast band 7.7-9.7 in the dark themes, 5.1 in light).
   * hero      every theme only swaps --scrim (r,g,b); the hero overlay geometry
     in index.html is shared, so hero legibility is identical everywhere.
   ============================================================================ */

/* ---------- 1. TOKENS ----------------------------------------------------- */
html, html[data-theme="dark"]{color-scheme:dark}   /* base palette lives in index.html :root */

html[data-theme="violet"]{
  color-scheme:dark;
  --bg:#0c0910;--bg2:#16111e;--card:#1c1626;--card2:#241d30;
  --line:rgba(176,154,255,.12);--line2:rgba(176,154,255,.20);
  --txt:#f4f2fb;--txt2:#e0dcee;--muted:#bab2d2;--dim:#9089ab;
  --otx:#b49bff;--otx2:#cbbfff;
  --scrim:11,8,20;
  /* colour-pass 2026-10-09: was one wide .34 wash (+.22 floor) laid over the clip — it mixed with the
     clips' teal/fire into a flat blue-grey "filter". Now a tighter key light from above + a low bounce,
     so the clip keeps its own colour and the violet reads as light, not as a tint. */
  --hero-cast:radial-gradient(76% 52% at 50% 0,rgba(124,92,255,.24),transparent 72%),radial-gradient(64% 34% at 50% 100%,rgba(124,92,255,.14),transparent 72%);
  --glow:0 10px 40px -10px rgba(255,106,26,.5),0 0 70px -26px rgba(124,92,255,.55);
  /* theme-only tokens */
  --v1:#7c5cff;--v2:#9d7bff;--v3:#b49bff;
  --grad-vo:linear-gradient(120deg,#6b47f0 0%,#bc4209 100%);        /* fills, badges, rings */
  /* gradient text: a straight sRGB violet→orange blend dies into dusty mauve mid-word; an orchid
     mid-stop keeps it luminous end to end (6.4-7.1:1 on --bg) */
  --grad-vo-txt:linear-gradient(110deg,#a084ff 0%,#d36ad6 50%,#ff6f2e 100%);
  --tint-v:rgba(124,92,255,.15);--tint-v2:rgba(124,92,255,.26);
  --sh-card:inset 0 1px 0 rgba(214,200,255,.06),0 22px 44px -26px rgba(4,1,12,.9);
}

html[data-theme="orange"]{
  color-scheme:dark;
  /* colour-pass 2026-10-09: surfaces were saturated espresso (HSV S≈.41) — at this luminance that reads
     as muddy brown. Same rel-lum ladder (.0022/.0059/.0088/.0127), chroma cut to S≈.30→.22: warm
     graphite. The warmth now comes from light (glows, cast, accents), not from brown paint. */
  --bg:#090706;--bg2:#16120f;--card:#1a1714;--card2:#211d19;
  --line:rgba(255,214,176,.11);--line2:rgba(255,214,176,.19);
  --txt:#faf5ee;--txt2:#e9ded2;--muted:#c6b6a5;--dim:#9e8d7c;
  --otx:#eaa94e;--otx2:#f3c88c;
  --scrim:12,9,7;
  /* was amber .30/.22 over the clip: yellow-amber + the clips' teal = olive/sepia "filter".
     Ember hue (redder, so it can't go green over teal) as a tighter key light + low bounce. */
  --hero-cast:radial-gradient(76% 52% at 50% 0,rgba(246,130,44,.18),transparent 72%),radial-gradient(64% 34% at 50% 100%,rgba(214,92,22,.16),transparent 72%);
  --glow:0 10px 40px -10px rgba(255,106,26,.5),0 0 70px -26px rgba(236,140,48,.5);
  /* theme-only tokens (warm amber ambience; the CTA keeps the shared burnt orange so it still reads as the action) */
  --v1:#e0962a;--v2:#edb45e;--v3:#e3a957;
  --grad-vo:linear-gradient(120deg,#a8600c 0%,#bc4209 100%);        /* fills, badges, rings (white 4.8-5.4:1; #a66c0c was 4.4 and olive) */
  /* gradient text: was #b57512→#d85c14 (dull mustard→brown, 5.2:1); now gold→flame, 5.9-11:1 */
  --grad-vo-txt:linear-gradient(110deg,#f4b443 0%,#ff8a2a 50%,#f2561a 100%);
  --tint-v:rgba(224,150,42,.15);--tint-v2:rgba(224,150,42,.26);
  --sh-card:inset 0 1px 0 rgba(255,232,206,.055),0 22px 44px -26px rgba(6,3,0,.9);
}

html[data-theme="light"]{
  color-scheme:light;
  /* same rule as the dark themes, read upwards: bg < bg2 < card < card2 */
  --bg:#ededf2;--bg2:#f4f4f8;--card:#fafafc;--card2:#ffffff;
  --line:rgba(16,16,34,.10);--line2:rgba(16,16,34,.17);
  --txt:#101019;--txt2:#26262f;--muted:#4a4a5e;--dim:#63637a;
  --otx:#b23c0a;--otx2:#b23c0a;                      /* orange used AS TEXT on light surfaces (5.1-5.7:1) */
  --scrim:247,247,251;
  --hero-cast:none;
  --grad-em:linear-gradient(120deg,#c85014,#bb3d0c);   /* gradient TEXT on light surfaces */
  --glow:0 14px 42px -14px rgba(192,72,12,.45);
  /* theme-only tokens */
  --tint:rgba(192,72,12,.09);--tint2:rgba(192,72,12,.16);
  --ink:rgba(16,16,34,.05);--ink2:rgba(16,16,34,.09);--ink3:rgba(16,16,34,.14);
  --sh-lg:0 34px 90px -28px rgba(20,20,60,.38);--sh-md:0 20px 56px -22px rgba(20,20,60,.36);--sh-sm:0 8px 24px rgba(20,20,60,.16);
}

/* ---------- 1b. DARK ISLANDS ---------------------------------------------- */
/* Blocks that stay dark in every theme (hero console, free-plan banner, media
   tiles, device mock-ups) re-declare the dark text ramp locally, so no component
   ever paints light-theme ink on a dark surface — or a foreign theme's grey. */
html[data-theme="light"] .nv-prompt,
html[data-theme="light"] .nv-result,
html[data-theme="light"] .nv-join,
html[data-theme="light"] .nvw .nvw-t,
html[data-theme="light"] .nvb1-web,
html[data-theme="light"] .nvb1-brand{
  --txt:#f5f5fa;--txt2:#dfdee9;--muted:#b6b6c8;--dim:#8d8da4;
  --otx:#ff7a33;--otx2:#ffb48a;
  --card2:#1c1c2c;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.16);
}

/* ---------- 2. (theme switcher pill removed r27 — bandit-only now, see assets/themes/theme-bandit.js) -- */


/* ---------- 3. VIOLET: deep neutral-violet base, violet ambience, shared CTA -- */
html[data-theme="violet"] body{background:radial-gradient(1100px 620px at 50% -8%,rgba(124,92,255,.11),transparent 72%) no-repeat,var(--bg)}
html[data-theme="violet"] .h2 em,
html[data-theme="violet"] .nv-hero h1 em,
html[data-theme="violet"] .nv-join h2 em,
html[data-theme="violet"] .nvi2 .nvi2-lockin h4 em,
html[data-theme="violet"] .nvi2 .nvi2-ex h3 em{background:var(--grad-vo-txt)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
html[data-theme="violet"] .sec::before{background:linear-gradient(90deg,transparent,rgba(157,123,255,.7) 35%,rgba(255,106,26,.6) 65%,transparent)}
html[data-theme="violet"] .sec::after{background:radial-gradient(50% 100% at 50% 0,rgba(124,92,255,.16),transparent)}
html[data-theme="violet"] section.nv-gallery,html[data-theme="violet"] section.nv-uc,html[data-theme="violet"] section.nv-faq{background:linear-gradient(180deg,var(--card2) 0%,var(--bg2) 240px,var(--bg2) 100%)}
html[data-theme="violet"] .nv-uc .nv-uc-show{background:var(--card2)}
/* header */
html[data-theme="violet"] .nv-nav{background:rgba(12,9,16,.76)}
html[data-theme="violet"] .nv-nav.open .nv-links{background:rgba(12,9,16,.97)}
/* hero console */
html[data-theme="violet"] .nv-prompt{background:rgba(24,19,33,.9);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(124,92,255,.22)}
html[data-theme="violet"] .nv-prompt:focus-within{border-color:rgba(157,123,255,.7)}
html[data-theme="violet"] .nv-result{background:rgba(20,16,28,.95)}
html[data-theme="violet"] .nv-drop option{background:#1c1626}
/* decorative fills → violet→orange */
html[data-theme="violet"] .badge-o,
html[data-theme="violet"] .nvb1-ai-badge,
html[data-theme="violet"] .nv-flow span.hl,
html[data-theme="violet"] .nvw .nvw-no,
html[data-theme="violet"] .nvw .nvw-steps li i,
html[data-theme="violet"] .nvi2 .nvi2-ring,
html[data-theme="violet"] .nvb1-bmain,
html[data-theme="violet"] .nvb1-bt.app svg,
html[data-theme="violet"] .nvpe1-lbl.r{background:var(--grad-vo)}
html[data-theme="violet"] .nvi2 .nvi2-glow{background:radial-gradient(760px 460px at 50% 28%,rgba(124,92,255,.18),transparent 66%)}
html[data-theme="violet"] .nvi2 .nvi2-panel::before{background:linear-gradient(90deg,transparent,#9d7bff 40%,#ff6a1a 60%,transparent)}
html[data-theme="violet"] .nvi2 .nvi2-tag,html[data-theme="violet"] .nvi2 .nvi2-snd{background:rgba(12,9,16,.74)}
html[data-theme="violet"] .nvi2 .nvi2-nav{background:rgba(28,22,38,.92)}
html[data-theme="violet"] .nv-g-cta{background:linear-gradient(120deg,rgba(124,92,255,.2),rgba(255,106,26,.07));border-color:rgba(157,123,255,.4)}
html[data-theme="violet"] .nv-join::before{background:linear-gradient(90deg,rgba(12,9,16,.95) 0%,rgba(20,13,42,.8) 42%,rgba(12,9,16,.1) 78%)}
html[data-theme="violet"] .nvsc1,html[data-theme="violet"] .nvb1-ai{border-color:rgba(157,123,255,.4);background:radial-gradient(90% 120% at 0% 0%,rgba(124,92,255,.2),transparent 60%),var(--card)}
html[data-theme="violet"] .nvsc1{background:radial-gradient(80% 120% at 100% 0%,rgba(124,92,255,.2),transparent 60%),var(--card)}
html[data-theme="violet"] .nvb1-ui,html[data-theme="violet"] .nvsc1-r{background:#110d18}
html[data-theme="violet"] .nvb1-mk,html[data-theme="violet"] .nvb1-brand,html[data-theme="violet"] .nvb1-web{background-color:#110d18}
html[data-theme="violet"] .nvb1-brand{background:radial-gradient(110% 90% at 0% 0%,rgba(124,92,255,.32),transparent 55%),#110d18}
html[data-theme="violet"] .nvb1-web{background:radial-gradient(110% 90% at 100% 0%,rgba(124,92,255,.28),transparent 55%),#110d18}
html[data-theme="violet"] .nvb1-desk{background:#16111e}
html[data-theme="violet"] .nvinf1-fly{background:rgba(20,16,28,.96)}
html[data-theme="violet"] .nv-p.free{background:linear-gradient(180deg,rgba(124,92,255,.22),rgba(255,106,26,.04) 70%),var(--card);border-color:rgba(157,123,255,.5)}
html[data-theme="violet"] .nv-p.best{border-color:rgba(157,123,255,.36)}
html[data-theme="violet"] .nv-sticky-bar{background:rgba(14,11,19,.95)}
html[data-theme="violet"] .nv-tap::after{background:rgba(12,9,16,.66)}
html[data-theme="violet"] .nv-foot-map-frame iframe{filter:invert(.9) hue-rotate(200deg) saturate(.9)}
/* SnapFix scoped tokens */
html[data-theme="violet"] #sfscope{--bg:#0c0910;--bg2:#16111e;--card:#1c1626;--line:rgba(176,154,255,.12);--muted:#bab2d2}
html[data-theme="violet"] #sfscope .sf.t-window{--winbg:#1a1426;--sheetbg:#241d30}

/* ---------- 3b. ORANGE: deep espresso base, amber ambience, shared CTA ----- */
html[data-theme="orange"] body{background:radial-gradient(1100px 620px at 50% -8%,rgba(224,150,42,.10),transparent 72%) no-repeat,var(--bg)}
html[data-theme="orange"] .h2 em,
html[data-theme="orange"] .nv-hero h1 em,
html[data-theme="orange"] .nv-join h2 em,
html[data-theme="orange"] .nvi2 .nvi2-lockin h4 em,
html[data-theme="orange"] .nvi2 .nvi2-ex h3 em{background:var(--grad-vo-txt)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
html[data-theme="orange"] .sec::before{background:linear-gradient(90deg,transparent,rgba(237,180,94,.7) 35%,rgba(255,106,26,.6) 65%,transparent)}
html[data-theme="orange"] .sec::after{background:radial-gradient(50% 100% at 50% 0,rgba(224,150,42,.16),transparent)}
html[data-theme="orange"] section.nv-gallery,html[data-theme="orange"] section.nv-uc,html[data-theme="orange"] section.nv-faq{background:linear-gradient(180deg,var(--card2) 0%,var(--bg2) 240px,var(--bg2) 100%)}
html[data-theme="orange"] .nv-uc .nv-uc-show{background:var(--card2)}
/* header */
html[data-theme="orange"] .nv-nav{background:rgba(14,9,5,.76)}
html[data-theme="orange"] .nv-nav.open .nv-links{background:rgba(14,9,5,.97)}
/* hero console */
html[data-theme="orange"] .nv-prompt{background:rgba(29,25,21,.9);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(224,150,42,.22)}
html[data-theme="orange"] .nv-prompt:focus-within{border-color:rgba(237,180,94,.7)}
html[data-theme="orange"] .nv-result{background:rgba(25,21,18,.95)}
html[data-theme="orange"] .nv-drop option{background:#1a1714}
/* decorative fills → amber→orange */
html[data-theme="orange"] .badge-o,
html[data-theme="orange"] .nvb1-ai-badge,
html[data-theme="orange"] .nv-flow span.hl,
html[data-theme="orange"] .nvw .nvw-no,
html[data-theme="orange"] .nvw .nvw-steps li i,
html[data-theme="orange"] .nvi2 .nvi2-ring,
html[data-theme="orange"] .nvb1-bmain,
html[data-theme="orange"] .nvb1-bt.app svg,
html[data-theme="orange"] .nvpe1-lbl.r{background:var(--grad-vo)}
html[data-theme="orange"] .nvi2 .nvi2-glow{background:radial-gradient(760px 460px at 50% 28%,rgba(224,150,42,.18),transparent 66%)}
html[data-theme="orange"] .nvi2 .nvi2-panel::before{background:linear-gradient(90deg,transparent,#edb45e 40%,#ff6a1a 60%,transparent)}
html[data-theme="orange"] .nvi2 .nvi2-tag,html[data-theme="orange"] .nvi2 .nvi2-snd{background:rgba(14,9,5,.74)}
html[data-theme="orange"] .nvi2 .nvi2-nav{background:rgba(35,30,26,.92)}
html[data-theme="orange"] .nv-g-cta{background:linear-gradient(120deg,rgba(224,150,42,.2),rgba(255,106,26,.07));border-color:rgba(237,180,94,.4)}
html[data-theme="orange"] .nv-join::before{background:linear-gradient(90deg,rgba(14,9,5,.95) 0%,rgba(44,26,10,.8) 42%,rgba(14,9,5,.1) 78%)}
html[data-theme="orange"] .nvsc1,html[data-theme="orange"] .nvb1-ai{border-color:rgba(237,180,94,.4);background:radial-gradient(90% 120% at 0% 0%,rgba(224,150,42,.2),transparent 60%),var(--card)}
html[data-theme="orange"] .nvsc1{background:radial-gradient(80% 120% at 100% 0%,rgba(224,150,42,.2),transparent 60%),var(--card)}
html[data-theme="orange"] .nvb1-ui,html[data-theme="orange"] .nvsc1-r{background:#13100d}
html[data-theme="orange"] .nvb1-mk,html[data-theme="orange"] .nvb1-brand,html[data-theme="orange"] .nvb1-web{background-color:#13100d}
html[data-theme="orange"] .nvb1-brand{background:radial-gradient(110% 90% at 0% 0%,rgba(224,150,42,.32),transparent 55%),#13100d}
html[data-theme="orange"] .nvb1-web{background:radial-gradient(110% 90% at 100% 0%,rgba(224,150,42,.28),transparent 55%),#13100d}
html[data-theme="orange"] .nvb1-desk{background:#16120f}
html[data-theme="orange"] .nvinf1-fly{background:rgba(25,21,18,.96)}
html[data-theme="orange"] .nv-p.free{background:linear-gradient(180deg,rgba(240,128,40,.20),rgba(255,106,26,.04) 70%),var(--card);border-color:rgba(244,150,72,.5)}
html[data-theme="orange"] .nv-p.best{border-color:rgba(244,170,100,.36)}
html[data-theme="orange"] .nv-sticky-bar{background:rgba(17,14,11,.95)}
html[data-theme="orange"] .nv-tap::after{background:rgba(14,9,5,.66)}
html[data-theme="orange"] .nv-foot-map-frame iframe{filter:invert(.9) hue-rotate(10deg) saturate(1.08)}
/* SnapFix scoped tokens */
html[data-theme="orange"] #sfscope{--bg:#090706;--bg2:#16120f;--card:#1a1714;--line:rgba(255,214,176,.11);--muted:#c6b6a5}
html[data-theme="orange"] #sfscope .sf.t-window{--winbg:#1a1714;--sheetbg:#221d19}

/* ---------- 3c. VIOLET + ORANGE: depth & accent consistency (colour-pass 2026-10-09) ----
   On a tinted base a flat var(--card) slab reads as "lit grey". Cards get a faint top sheen,
   a 1px inner top highlight in the theme's light and a deep tinted drop shadow, so they sit
   ON the page instead of being painted onto it. */
html[data-theme="violet"] .nv-p,html[data-theme="violet"] .nv-rc,html[data-theme="violet"] .nv-rev-sum,
html[data-theme="orange"] .nv-p,html[data-theme="orange"] .nv-rc,html[data-theme="orange"] .nv-rev-sum{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 44%),var(--card);box-shadow:var(--sh-card)}
html[data-theme="violet"] .nv-p.best,html[data-theme="orange"] .nv-p.best{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 44%),var(--card2)}
/* eyebrow dash followed the dark theme's orange while the label is in the theme accent → same gradient as the headline em */
html[data-theme="violet"] .eyebrow::before,html[data-theme="orange"] .eyebrow::before{background:var(--grad-vo-txt)}
/* violet: list ticks in the theme accent (orange stays for the CTA and the "No card needed" call-out) */
html[data-theme="violet"] .nv-p li::before{color:var(--otx)}
/* SnapFix window chrome: titlebar/status bar were hard-coded neutral-cool (#282832/#21212b) in
   snapfix.css and showed as a grey-blue frame around a violet / warm window */
html[data-theme="violet"] #sfscope .sf.t-window .sf-titlebar{background:linear-gradient(180deg,#2a2336,#211b2c)}
html[data-theme="violet"] #sfscope .sf.t-window .sf-status{background:linear-gradient(180deg,#221c2e,#1c1726)}
html[data-theme="orange"] #sfscope .sf.t-window .sf-titlebar{background:linear-gradient(180deg,#2b2621,#221e1a)}
html[data-theme="orange"] #sfscope .sf.t-window .sf-status{background:linear-gradient(180deg,#24201c,#1e1a17)}

/* ---------- 4. LIGHT ------------------------------------------------------ */
/* generic surfaces & controls */
html[data-theme="light"] body{background:radial-gradient(1200px 640px at 50% -6%,rgba(192,72,12,.05),transparent 70%) no-repeat,var(--bg)}
html[data-theme="light"] .btn-ghost{background:var(--ink)}
html[data-theme="light"] .btn-ghost:hover{background:var(--ink2)}
html[data-theme="light"] .badge-g{background:var(--ink2)}
html[data-theme="light"] .chip{background:rgba(255,255,255,.72);border-color:rgba(16,16,34,.12)}
html[data-theme="light"] .chip:hover,html[data-theme="light"] .chip.on{background:var(--tint);border-color:rgba(192,72,12,.55)}
html[data-theme="light"] .tick{color:var(--otx)}
html[data-theme="light"] .sec::after{background:radial-gradient(60% 120% at 50% 0,rgba(192,72,12,.13),transparent)}
html[data-theme="light"] section.nv-gallery,html[data-theme="light"] section.nv-uc,html[data-theme="light"] section.nv-faq{background:var(--bg2)}
html[data-theme="light"] .nv-uc .nv-uc-show{background:var(--card)}
html[data-theme="light"] .media{background:#e4e4ec}
/* header */
html[data-theme="light"] .nv-nav{background:rgba(251,251,253,.82)}
html[data-theme="light"] .nv-nav.open .nv-links{background:rgba(251,251,253,.98);box-shadow:0 20px 40px rgba(20,20,60,.14)}
html[data-theme="light"] .nv-burger{background:var(--ink)}
html[data-theme="light"] .nv-burger i{background:var(--txt)}
html[data-theme="light"] .nv-tag{background:var(--tint);color:var(--otx);border-color:rgba(192,72,12,.35)}
html[data-theme="light"] .nv-tag-top{background:var(--ink2);color:var(--txt);border-color:var(--line2)}
/* hero: the white scrim (index.html, driven by --scrim) already turns the clip into daylight —
   it does that job alone. The clip itself keeps (or gains) punch here, same direction as the
   dark-theme grade, so colour doesn't double-fade under the white veil into a milky, foggy frame
   (r27 fix: saturate(.78) brightness(1.06) desaturated AND brightened on top of an already-white
   overlay — on pale/bright footage that stacked into visible fog). Dark island (console) unaffected. */
html[data-theme="light"] .nv-hero-bg video,html[data-theme="light"] .nv-hero-bg img{filter:saturate(1.1) brightness(.96) contrast(1.1)}
/* r28 fix: the shared .nv-hero::after scrim (index.html) runs the SAME alpha stops on every theme,
   but a near-white scrim (--scrim above) reads as fog far sooner than a near-black one does on dark
   themes — measured: rendered hero saturation collapsed to ~31/255 and luminance rose to ~208/255
   (dark/violet/orange sit at S 110-145, V 46-56). Cut the wash here so the clip's own colour survives;
   the per-letter text-shadow halo below still does the legibility work independent of this layer. */
html[data-theme="light"] .nv-hero::after{background:radial-gradient(94% 60% at 50% 36%,rgba(var(--scrim),.30) 0%,rgba(var(--scrim),.26) 45%,rgba(var(--scrim),.20) 66%,rgba(var(--scrim),.08) 86%,rgba(var(--scrim),.02) 100%),linear-gradient(180deg,rgba(var(--scrim),.16) 0%,rgba(var(--scrim),.08) 18%,rgba(var(--scrim),.10) 55%,rgba(var(--scrim),.26) 78%,rgba(var(--scrim),.50) 90%,var(--bg) 97%)}
html[data-theme="light"] .nv-pill{background:rgba(255,255,255,.78);color:var(--txt2);border-color:rgba(16,16,34,.14)}
html[data-theme="light"] .nv-pill b{color:var(--txt)}
html[data-theme="light"] .nv-rating{background:rgba(255,255,255,.8);border-color:rgba(16,16,34,.14);color:var(--txt2);box-shadow:0 10px 28px -16px rgba(20,20,60,.5)}
html[data-theme="light"] .nv-rating:hover{background:var(--card2);border-color:rgba(192,72,12,.55);color:var(--txt)}
html[data-theme="light"] .nv-rating b,html[data-theme="light"] .nv-rating u,html[data-theme="light"] .nv-rating:hover u{color:var(--txt);text-decoration-color:rgba(16,16,34,.4)}
html[data-theme="light"] .nv-rating em{background:linear-gradient(90deg,#b23c0a 0 96%,rgba(16,16,34,.25) 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .nv-prompt{background:rgba(20,20,31,.92);border-color:rgba(255,255,255,.14);box-shadow:0 34px 80px -30px rgba(16,16,34,.55),0 0 0 1px rgba(255,106,26,.16)}
html[data-theme="light"] .nv-prompt:focus-within{border-color:rgba(255,106,26,.6)}
html[data-theme="light"] .nv-result{background:rgba(17,17,27,.96)}
/* templates */
html[data-theme="light"] .nvi2 .nvi2-glow{background:radial-gradient(760px 460px at 50% 28%,rgba(192,72,12,.1),transparent 66%)}
html[data-theme="light"] .nvi2 .nvi2-panel{box-shadow:var(--sh-lg)}
html[data-theme="light"] .nvi2 .nvi2-tag,html[data-theme="light"] .nvi2 .nvi2-snd{color:#fff}
html[data-theme="light"] .nvi2 .nvi2-nav{background:var(--card2);box-shadow:var(--sh-sm)}
html[data-theme="light"] .nvi2 .nvi2-nav:hover{background:var(--card2)}
html[data-theme="light"] .nvt3-use{color:var(--otx)}
html[data-theme="light"] .nvt3-use:hover{color:var(--txt)}
html[data-theme="light"] .nvi2 .nvi2-lock .nvi2-panel::after{background:radial-gradient(120% 90% at 50% 42%,rgba(251,251,253,.72),rgba(251,251,253,.97) 78%)}
html[data-theme="light"] .nvw .nvw-steps li{background:var(--ink)}
html[data-theme="light"] .nvi2 .nvi2-tpl .nvw-arr{background:#fff;color:#101019;box-shadow:var(--sh-sm)}
/* models strip + free-plan banner (banner stays a dark island) */
html[data-theme="light"] .nv-join{color:var(--txt2)}
html[data-theme="light"] .nv-join h2{color:var(--txt)}
@media (max-width:760px){html[data-theme="light"] .nv-join-in{background:#11111d}}
/* photo studio */
html[data-theme="light"] .nvpe1-stage{box-shadow:var(--sh-md)}
/* influencer builder */
html[data-theme="light"] .nvinf1-b-tabs{background:var(--ink)}
html[data-theme="light"] .nvinf1-b-tabs button.on{background:var(--card2);color:var(--txt);box-shadow:0 1px 3px rgba(16,16,34,.18)}
html[data-theme="light"] .nvinf1-mode{background:var(--ink)}
html[data-theme="light"] .nvinf1-demo-more{color:var(--otx);border-color:rgba(192,72,12,.5)}
html[data-theme="light"] .nvinf1-acc{background:var(--ink)}
html[data-theme="light"] .nvinf1-acc.on{background:var(--tint)}
html[data-theme="light"] .nvinf1-acc-h:hover{background:var(--ink)}
html[data-theme="light"] .nvinf1-acc-pts,html[data-theme="light"] .nvinf1-acc-ex{background:rgba(255,255,255,.7)}
html[data-theme="light"] .nvinf1-acc-more,html[data-theme="light"] .nvinf1-step-act button,html[data-theme="light"] .nvinf1-g,html[data-theme="light"] .nvinf1-rnd2,html[data-theme="light"] .nvinf1-mo-card,html[data-theme="light"] .nvinf1-mo-ptoggle,html[data-theme="light"] .nvinf1-mo-prompt{background:var(--ink)}
html[data-theme="light"] .nvinf1-acc-link{background:var(--tint);border-color:rgba(192,72,12,.55)}
html[data-theme="light"] .nvinf1-acc-link:hover{background:var(--tint2)}
html[data-theme="light"] .nvinf1-step b{background:var(--ink2)}
html[data-theme="light"] .nvinf1-g>button em{color:var(--otx)}
html[data-theme="light"] .nvinf1-g.locked em{color:var(--dim)}
html[data-theme="light"] .nvinf1-tiles button,html[data-theme="light"] .nvinf1-base button,html[data-theme="light"] .nvinf1-base label,html[data-theme="light"] .nvinf1-stack button{background:#e9e9f1}
html[data-theme="light"] .nvinf1-cmd input,html[data-theme="light"] .nvinf1-mo-prompt textarea{background:var(--card2)}
html[data-theme="light"] .nvinf1-cmd button{background:var(--ink2)}
html[data-theme="light"] .nvinf1-cmd button:hover{background:var(--ink3)}
html[data-theme="light"] .nvinf1-cmd-out.warn{color:var(--otx)}
html[data-theme="light"] .nvinf1-mo-seg span.on{background:var(--tint);border-color:rgba(192,72,12,.55)}
html[data-theme="light"] .nvinf1-mo-card.has{background:var(--tint)}
html[data-theme="light"] .nvinf1-mo-card.has small{color:var(--otx)}
html[data-theme="light"] .nvinf1-prev{box-shadow:var(--sh-md)}
html[data-theme="light"] .nvinf1-fly{background:rgba(255,255,255,.97);box-shadow:0 12px 32px rgba(20,20,60,.22)}
/* for-business: checker, AI mode, mockups */
html[data-theme="light"] .nvsc1,html[data-theme="light"] .nvb1-ai{border-color:rgba(192,72,12,.4)}
html[data-theme="light"] .nvb1-ai{background:radial-gradient(90% 120% at 0% 0%,rgba(192,72,12,.12),transparent 60%),var(--card)}
html[data-theme="light"] .nvsc1{background:radial-gradient(80% 120% at 100% 0%,rgba(192,72,12,.12),transparent 60%),var(--card)}
html[data-theme="light"] .nvb1-pain{color:var(--otx);background:var(--tint)}
html[data-theme="light"] .nvb1-ai li i,html[data-theme="light"] .nvb1-cost b,html[data-theme="light"] .nvsc1-ex{color:var(--otx)}
html[data-theme="light"] .nvb1-ai li i,html[data-theme="light"] .nvb1-cost b{background:var(--tint)}
html[data-theme="light"] .nvb1-ui{background:var(--card2);box-shadow:var(--sh-md)}
html[data-theme="light"] .nvb1-in{background:var(--ink)}
html[data-theme="light"] .nvsc1-f{background:var(--card2)}
html[data-theme="light"] .nvsc1-f:focus-within{border-color:rgba(192,72,12,.7);box-shadow:0 0 0 4px rgba(192,72,12,.12)}
html[data-theme="light"] .nvsc1-msg{color:#b3261e}
html[data-theme="light"] .nvsc1-devs li,html[data-theme="light"] .nvsc1-tab{background:var(--ink)}
html[data-theme="light"] .nvsc1-tab[aria-selected=true]{background:var(--tint);border-color:rgba(192,72,12,.7)}
html[data-theme="light"] .nvsc1-r{background:var(--card2);box-shadow:var(--sh-md)}
html[data-theme="light"] .nvsc1-ring{--c:rgba(16,16,34,.25);background:conic-gradient(var(--c) calc(var(--v)*1%),rgba(16,16,34,.1) 0)}
html[data-theme="light"] .nvsc1-ring::before{background:var(--card2)}
html[data-theme="light"] .nvsc1-shot{border-color:#d9d9e3;background:repeating-linear-gradient(180deg,#eceef3 0 14px,#f6f7fa 14px 22px)}
html[data-theme="light"] .nvsc1-bar{background:rgba(16,16,34,.1)}
html[data-theme="light"] [data-tone=good]{--c:#16a34a;--t:#15803d}
html[data-theme="light"] [data-tone=mid]{--c:#d97706;--t:#b45309}
html[data-theme="light"] [data-tone=bad]{--c:#dc2626;--t:#b91c1c}
html[data-theme="light"] .nvb1-desk,html[data-theme="light"] .nvb1-phone{box-shadow:0 20px 50px -20px rgba(20,20,60,.5)}
/* engine + pricing */
html[data-theme="light"] .nv-diff li::before{background:var(--tint);color:var(--otx)}
html[data-theme="light"] .nv-mhead{background:var(--ink)}

html[data-theme="light"] .nv-p-lim,html[data-theme="light"] .nv-p li::before{color:var(--otx)}
html[data-theme="light"] .nv-p .btn-ghost{background:var(--ink)}
html[data-theme="light"] .nv-p.free{background:linear-gradient(180deg,rgba(192,72,12,.14),rgba(169,48,5,.03) 70%),var(--card);border-color:rgba(192,72,12,.5)}
/* faq */
html[data-theme="light"] .nv-faq summary::after{color:var(--otx)}
/* footer */
html[data-theme="light"] .nv-foot-map-cta a{background:var(--ink)}
html[data-theme="light"] .nv-foot-map-cta a:hover{background:var(--ink2)}
html[data-theme="light"] .nv-foot-map-cta a:first-child{background:var(--txt);color:#fff;border-color:var(--txt)}
html[data-theme="light"] .nv-foot-map-cta a:first-child:hover{background:var(--txt2);color:#fff}
html[data-theme="light"] .nv-foot-addr-tag{background:var(--ink2)}
html[data-theme="light"] .nv-foot-map-name a{text-decoration-color:rgba(16,16,34,.3)}
html[data-theme="light"] .nv-foot-map-stars{color:#a06e00}   /* r24 audit: #c98a00 was 2.83:1 on the card; #a06e00 = 4.26:1 */
html[data-theme="light"] .nv-foot-map-frame iframe{filter:none}
/* mobile sticky CTA */
html[data-theme="light"] .nv-sticky-bar{background:rgba(251,251,253,.94);box-shadow:0 -12px 32px -12px rgba(20,20,60,.25)}

/* ---------- 5. LIGHT: SnapFix window (scoped tokens + window chrome) ------ */
html[data-theme="light"] #sfscope{--bg:#ededf2;--bg2:#f4f4f8;--card:#fafafc;--line:rgba(16,16,34,.1);--txt:#101019;--muted:#4a4a5e;--glow:rgba(192,72,12,.25)}
html[data-theme="light"] #sfscope .sf{--fg:#101019;--fg2:#26262f;--accbg:rgba(192,72,12,.1);--acctext:#b43a06;--tabbg:#fff;--shotsh:0 18px 50px rgba(20,20,40,.14);--codebg:rgba(16,16,34,.06);--tabicon:#f1f1f6}
html[data-theme="light"] #sfscope .sf.t-window{--winbg:#f4f4f8;--sheetbg:#ffffff}
html[data-theme="light"] #sfscope .act,html[data-theme="light"] #sfscope .btn-ghost{color:var(--fg)}
html[data-theme="light"] #sfscope .btn-ghost{background:rgba(16,16,34,.05)}
html[data-theme="light"] #sfscope .btn-ghost:hover{background:rgba(16,16,34,.1)}
html[data-theme="light"] #sfscope .sf.t-window .sf-win{box-shadow:0 24px 60px -24px rgba(20,20,60,.35),0 0 0 1px rgba(16,16,34,.08)}
html[data-theme="light"] #sfscope .sf.t-window .sf-win::after{box-shadow:inset 0 .5px 0 rgba(255,255,255,.9)}
html[data-theme="light"] #sfscope .sf.t-window .sf-titlebar::before{background:rgba(16,16,34,.03);border-right-color:rgba(16,16,34,.1)}
/* UI audit 2026-10-09: the light theme recoloured the SnapFix window title to dark ink but
   left the titlebar on its dark gradient -- "Neuravision . SnapFix" was dark-on-dark and
   unreadable on a phone. Give the titlebar a light surface so the dark ink works. */
html[data-theme="light"] #sfscope .sf.t-window .sf-titlebar{background:linear-gradient(180deg,#f3f3f7,#e7e7ee);border-bottom:.5px solid rgba(16,16,34,.14);box-shadow:inset 0 -.5px 0 rgba(255,255,255,.9)}
html[data-theme="light"] #sfscope .sf.t-window .sf-wtitle b{color:#14141f}
html[data-theme="light"] #sfscope .sf.t-window .sf-capbtns svg,html[data-theme="light"] #sfscope .sf.t-window .sf-capbtns{color:rgba(16,16,34,.6)}
html[data-theme="light"] #sfscope .sf.t-window .sf-wtitle>span{color:rgba(16,16,34,.72)}
html[data-theme="light"] #sfscope .sf.t-window .sf-key{border-color:rgba(16,16,34,.14);background:var(--card2)}
html[data-theme="light"] #sfscope .sf.t-window .sf-key:hover{background:#f0f0f5}
html[data-theme="light"] #sfscope .sf.t-window .sf-key:active{background:#e6e6ee}
html[data-theme="light"] #sfscope .sf.t-window .sf-key svg{color:rgba(16,16,34,.7)}
html[data-theme="light"] #sfscope .sf.t-window .sf-key span{color:var(--txt)}
html[data-theme="light"] #sfscope .sf.t-window .sf-key kbd{background:rgba(16,16,34,.07);color:rgba(16,16,34,.62)}
html[data-theme="light"] #sfscope .sf.t-window .sf-osw{background:rgba(16,16,34,.07);border-color:rgba(16,16,34,.08)}
html[data-theme="light"] #sfscope .sf.t-window .sf-osb{color:rgba(16,16,34,.58)}
html[data-theme="light"] #sfscope .sf.t-window .sf-osb:hover{color:rgba(16,16,34,.9)}
html[data-theme="light"] #sfscope .sf.t-window .sf-osb.on{background:var(--card2);color:var(--txt);box-shadow:0 1px 2px rgba(16,16,34,.18)}
html[data-theme="light"] #sfscope .sf.t-window .sf-capbtns i{color:rgba(16,16,34,.65)}
html[data-theme="light"] #sfscope .sf.t-window .sf-capbtns i:hover{background:rgba(16,16,34,.06)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-nav{border-right-color:rgba(16,16,34,.1);border-bottom-color:rgba(16,16,34,.1)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-brand b{color:var(--txt)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-cap,html[data-theme="light"] #sfscope .sf.t-window .sf-grp{color:rgba(16,16,34,.58)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-mod{color:rgba(16,16,34,.66)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-mod i{color:rgba(16,16,34,.45)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-mod em{color:rgba(16,16,34,.55);background:rgba(16,16,34,.06)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-mod:not(.on):hover{background:rgba(16,16,34,.05);color:rgba(16,16,34,.9)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-mod.on{background:rgba(16,16,34,.07);color:var(--txt)}
html[data-theme="light"] #sfscope .sf.t-window .sf-app-mod.on em{color:rgba(16,16,34,.75);background:rgba(16,16,34,.1)}
html[data-theme="light"] #sfscope .sf.t-window .sf-tabs{background:rgba(16,16,34,.02);border-right-color:rgba(16,16,34,.1);border-bottom-color:rgba(16,16,34,.08)}
html[data-theme="light"] #sfscope .sf.t-window .sf-tab{color:#1b1b25;border-color:rgba(16,16,34,.1);background:var(--card2)}
html[data-theme="light"] #sfscope .sf.t-window .sf-tab i{color:rgba(16,16,34,.5)}
html[data-theme="light"] #sfscope .sf.t-window .sf-tab:hover{background:rgba(16,16,34,.05)}
/* UI audit 2026-10-09: the selected tool chip kept white text but --accbg resolves to white
   in the light theme, so the active tool name (e.g. Redact) was invisible. */
html[data-theme="light"] #sfscope .sf.t-window .sf-tab.on{color:#fff;border-color:transparent;background:linear-gradient(120deg,#ff6a1a,#ff3d0f)}
html[data-theme="light"] #sfscope .sf.t-window .sf-tab.on i,html[data-theme="light"] #sfscope .sf.t-window .sf-tab.on b{color:#fff}
html[data-theme="light"] #sfscope .sf.t-window .sf-body{scrollbar-color:rgba(16,16,34,.25) transparent}
html[data-theme="light"] #sfscope .sf.t-window .sf-body::-webkit-scrollbar-thumb{background:rgba(16,16,34,.2);background-clip:content-box}
html[data-theme="light"] #sfscope .sf.t-window .sf-pane-head{border-bottom-color:rgba(16,16,34,.08)}
html[data-theme="light"] #sfscope .sf.t-window .sf-pane .fine.center{border-top-color:rgba(16,16,34,.08)}
html[data-theme="light"] #sfscope .sf.t-window .sf-status-r{color:rgba(16,16,34,.6)}
html[data-theme="light"] #sfscope .sf.t-window .sf-sheet{background:rgba(16,16,34,.3)}
html[data-theme="light"] #sfscope .sf.t-window .sf-sheet-card{border-color:rgba(16,16,34,.12);box-shadow:0 26px 70px rgba(20,20,60,.3)}
html[data-theme="light"] #sfscope .sf.t-window .sf-sheet-head{border-bottom-color:rgba(16,16,34,.08)}

/* ---------- 6. LIGHT: r24 audit fixes (measured WCAG, not guessed) --------- */
/* "Higgsfield" in the models marquee was hardcoded #fff (index.html) — 1.10:1 on
   the light background, i.e. invisible while every other model name is dark. */
html[data-theme="light"] .nv-marq-track span.hf{color:var(--txt)}
/* rating stars: brand --o1 is 2.75:1 on the white card, below the 3:1 non-text
   floor; the deeper burnt orange keeps the same hue at 4.9:1 */
html[data-theme="light"] .nv-rev-stars-l,
html[data-theme="light"] .nv-rc-stars{color:#c24400}
/* the influencer preview chip sits on a near-black plaque over the photo, so it
   needs the DARK-surface accent, not the light-surface one (3.45:1 -> 10.3:1) */
html[data-theme="light"] .nvinf1-prev .tag b{color:#ffa166}
/* r25 audit: the previous footer-star fix hit the wrapper only — the visible filled
   layer is an absolutely-positioned <em> with its own #fbbc04 (1.64:1 on the card). */
html[data-theme="light"] .nv-foot-map-stars em{color:#a06e00}
/* the "VIDEO" suffix inside the Higgsfield marquee label kept brand --o1 = 2.61:1 */
html[data-theme="light"] .nv-marq-track span.hf small{color:#c24400}