/* Custom dark theme overlay — homepage only. Pure CSS, targets stable
   Mui* / id selectors already present in the markup. Does not modify
   any React bundle or component behavior. */

:root {
    /* Higgsfield-style palette: a flat near-black canvas, flat dark-grey
       cards (no borders, no gradients, no glow) and a single lime accent
       used sparingly — primary buttons, active-state text, small
       highlights. Nothing else carries color. Values sampled directly
       from higgsfield.ai's own app (body bg, card bg, CTA button). */
    --mv-bg: #0f1113;
    --mv-surface: #17191a;
    --mv-surface-2: #1b1d1e;
    --mv-surface-border: rgba(255, 255, 255, 0.08);
    --mv-surface-border-soft: rgba(255, 255, 255, 0.05);
    --mv-border: #232527;
    --mv-border-2: #26282a;
    --mv-text: #f4f3f0;
    --mv-text-dim: #8a8b87;
    --mv-text-faint: #63645f;
    --mv-accent: #d1fe17;
    --mv-accent-2: #b8e600;
    --mv-accent-ink: #16180a;
    --mv-accent-glow: rgba(209, 254, 23, 0.35);
    --mv-accent-peach: #fad0a9;
    --mv-accent2: #2dd7c4;
    --mv-accent2-glow: rgba(45, 215, 196, 0.4);
    --mv-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mv-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
    --mv-dots: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);

    /* Kept as aliases so the editor rules below (written against these
       names) resolve to the flat Higgsfield card color instead of a
       gradient — no per-rule renaming needed. */
    --mv-panel-bg: var(--mv-bg);
    --mv-row-bg: var(--mv-surface);
    --mv-row-bg-hover: var(--mv-surface-2);
    --mv-white: #ffffff;
}

html {
    scroll-behavior: smooth;
    zoom: 0.9;
}

body {
    background-color: var(--mv-bg) !important;
    font-feature-settings: "ss01" on;
}

/* Aide : page blanche demandée par le Major, sans changer le thème de l'éditeur. */
.pulsion-help-page { min-height: 100vh; background: #fff; color: #202124; }
.pulsion-help-content { display: flow-root; background: #fff; color: #202124; }
.pulsion-help-page .pulsion-help-content .MuiTypography-root,
.pulsion-help-page .pulsion-help-content [class*="MuiTypography-h3"] { color: #202124 !important; }
.pulsion-help-content a { color: #465700; text-decoration: underline; }
.pulsion-help-content a:focus-visible { outline: 2px solid #465700; outline-offset: 3px; }

/* ---- Sections: uniform dark background with a faint dot-grid texture
   for depth (matches the reference site's hero treatment) ---- */
body section {
    background-color: var(--mv-bg) !important;
    background-image: var(--mv-dots);
    background-size: 22px 22px;
    color: var(--mv-text);
    position: relative;
    overflow: hidden;
}

body section :is(h1, h2, h3, h4, h5, h6, p, span, div, a):not(.MuiButton-label) {
    color: inherit;
}

/* Keep card/button internal text readable — cards already carry their own
   light text over dark thumbnails, so don't force color inside them. */
#FeaturedProjects,
#FeaturedProjects * {
    color: initial;
}

/* ---- Diagonal section dividers ---- */
body section:nth-of-type(1) {
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
    padding-bottom: 48px;
}

body section:nth-of-type(2) {
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 96%);
    margin-top: -32px;
    padding-top: 64px;
}

body section:nth-of-type(3) {
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    margin-top: -32px;
    padding-top: 64px;
    padding-bottom: 48px;
}

body section:nth-of-type(4) {
    margin-top: -32px;
    padding-top: 64px;
}

/* ---- Hero glow: two soft layered blobs (not one flat conic ring) plus
   a subtle top vignette for more depth than a single gradient gives ---- */
body section:nth-of-type(1)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    background: conic-gradient(
        from 0deg,
        var(--mv-accent-glow),
        var(--mv-accent2-glow),
        transparent 40%,
        var(--mv-accent-glow)
    );
    filter: blur(90px);
    opacity: 0.28;
    transform: translate(-50%, -50%);
    animation: mv-spin 24s linear infinite;
    pointer-events: none;
    z-index: 0;
}

body section:nth-of-type(1)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
            520px 340px at 50% 0%,
            rgba(209, 254, 23, 0.14),
            transparent 70%
        ),
        linear-gradient(180deg, transparent 60%, var(--mv-bg) 100%);
    pointer-events: none;
    z-index: 0;
}

body section:nth-of-type(1) > * {
    position: relative;
    z-index: 1;
}

@keyframes mv-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body section:nth-of-type(1)::before {
        animation: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ---- Buttons: flat lime fill, no gradient/glow/pulse — Higgsfield uses
   its accent color the same way everywhere (Generate, Start now, Try it
   now): one flat solid, near-black text, nothing else competing. ---- */
.MuiButton-containedSecondary {
    background: var(--mv-accent) !important;
    color: var(--mv-accent-ink) !important;
    letter-spacing: 0.08em;
    box-shadow: none !important;
    transition: transform 0.2s var(--mv-ease), background-color 0.2s var(--mv-ease) !important;
}

.MuiButton-containedSecondary:hover {
    background: var(--mv-accent-2) !important;
    transform: translateY(-2px);
}

.MuiButton-containedSecondary:active {
    transform: translateY(0);
}

.MuiButton-outlined {
    border-color: var(--mv-surface-border) !important;
    background: var(--mv-surface) !important;
    transition: border-color 0.2s var(--mv-ease), background-color 0.2s var(--mv-ease) !important;
}

.MuiButton-outlined:hover {
    border-color: var(--mv-accent) !important;
    background: var(--mv-surface-2) !important;
}

/* ---- Header bar — matches the reference's exact proportions: a tall
   (98px), near-black bar with a big bold wordmark and widely-spaced
   nav links. Reached via the stable MuiAppBar/MuiToolbar classes. ---- */
.MuiAppBar-root {
    background-color: var(--mv-bg) !important;
    border-bottom: 1px solid var(--mv-border);
    box-shadow: none !important;
}

.MuiToolbar-root {
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 32px !important;
}

.MuiToolbar-root > a {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

.MuiToolbar-root > div:last-child {
    display: flex;
    align-items: center;
    gap: 32px;
}

.MuiToolbar-root > div:last-child > a {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--mv-text-dim);
    transition: color 0.12s;
}

.MuiToolbar-root > div:last-child > a:hover {
    color: var(--mv-text);
}

/* ---- Header auth links: "Sign Up" as a filled lime pill button (it's
   a MuiLink, not a MuiButton, so the containedSecondary rules above
   don't reach it), "Sign In" gets a thin divider before it. Reached
   structurally (Toolbar's right-hand div, last/second-last link) so it
   doesn't depend on JSS's hashed class names. ---- */
.MuiToolbar-root > div:last-child > a:last-child {
    background: var(--mv-accent) !important;
    color: var(--mv-accent-ink) !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: filter 0.15s;
}

.MuiToolbar-root > div:last-child > a:last-child:hover {
    background: var(--mv-accent) !important;
    filter: brightness(1.08);
}

.MuiToolbar-root > div:last-child > a:nth-last-child(2) {
    border: 1px solid #2e302f;
    color: #c9cac5 !important;
    padding: 9px 18px;
    border-radius: 8px;
    margin-left: 6px;
    transition: border-color 0.15s, color 0.15s;
}

.MuiToolbar-root > div:last-child > a:nth-last-child(2):hover {
    border-color: var(--mv-accent);
    color: var(--mv-text) !important;
}

/* ---- "How it works" step icons: dark glyphs on transparent PNGs,
   invisible against the new dark background — flip them to light ---- */
img[src*="project-management.png"],
img[src*="music-and-multimedia.png"],
img[src*="onepirate/video.png"] {
    filter: invert(1) brightness(1.6);
}

/* ---- Featured project cards: subtle resting elevation (not flat-on-bg),
   sheen sweep + lift + accent ring on hover ---- */
#FeaturedProjects > .MuiButtonBase-root {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--mv-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s var(--mv-ease), box-shadow 0.35s var(--mv-ease),
        border-color 0.35s var(--mv-ease);
}

#FeaturedProjects > .MuiButtonBase-root:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: var(--mv-shadow-lg), 0 0 0 1px var(--mv-accent-glow);
    border-color: var(--mv-accent);
}

/* Title badge — solid lime pill behind each template's name only (the
   title <h3> is the only .MuiTypography-h6 that carries this extra
   jss149 class; the author/website labels use a plain MuiTypography-h6
   with no such class, so this stays scoped to the title). */
#FeaturedProjects h3.MuiTypography-h6 {
    display: inline-block;
    background: var(--mv-accent) !important;
    color: var(--mv-accent-ink) !important;
    padding: 6px 12px;
    border-radius: 8px;
}

/* Hide the author-name and Website/Free info rows on every template
   card, on both the homepage carousel (#FeaturedProjects) and the
   /templates grid (#FeaturedProjectsTitle) — same card component
   reused with a different container id in each place. The title is
   always an <h3>; these two info rows are always plain <h6>. */
#FeaturedProjects h6.MuiTypography-h6,
#FeaturedProjectsTitle h6.MuiTypography-h6 {
    display: none !important;
}

#FeaturedProjects > .MuiButtonBase-root::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%);
    opacity: 0;
    transition: opacity 0.35s var(--mv-ease);
    pointer-events: none;
}

#FeaturedProjects > .MuiButtonBase-root:hover::after {
    opacity: 1;
}

/* ---- Footer ---- */
footer {
    background-color: var(--mv-surface) !important;
    border-top: 1px solid var(--mv-surface-border);
}

footer,
footer :is(h1, h2, h3, h4, h5, h6, p, span, div) {
    color: var(--mv-text) !important;
}

footer a {
    color: var(--mv-text) !important;
    transition: color 0.2s ease;
}

footer a:hover {
    color: var(--mv-accent) !important;
}

/* Native form controls keep their own light chrome (dropdown, etc.) —
   don't force light text inside them or they become unreadable. */
footer select,
footer option,
footer input {
    color: initial !important;
}

/* ---- Hero background video (replaces img/Background.png, inserted by
   the inline script at the end of index.html into the same absolutely-
   positioned div React already renders for the static image) ---- */
.mv-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.6) contrast(1.15) saturate(1.2);
}

/* ---- Scroll reveal (paired with reveal.js) ---- */
.mv-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.mv-reveal.mv-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .mv-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================================
   EDITOR — sidebar (Quick Settings/Audio/Layers/...) + dat.gui panels.
   Pure CSS reskin. No control wiring, input names, or behavior touched —
   only spacing, color, radius, icons via ::before, transitions.
   ========================================================================= */

/* Higgsfield's own editor panel has NO card chrome at all: transparent
   background, no border, no radius, no shadow — it just floats directly
   on the app's black canvas. Controls get their own flat card fill
   individually (dat.gui rows below); the panel container itself doesn't. */
[class*="ControllerContainer_container__"] {
    background: transparent !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

[class*="ControllerContainer_sideNav__"] {
    padding: 20px 14px !important;
    box-sizing: border-box;
    background: transparent;
    border-right: none;
    border: 1px solid var(--mv-border);
    border-radius: 12px;
    overflow: hidden;
    width: 220px !important;
    flex: 0 0 220px !important;
}

/* The app puts an inline border-right (1px solid rgba(255,255,255,.3))
   on the unclassed wrapper div holding the 7 nav rows — a leftover
   divider line between the icon column and label column that runs the
   full column height, well past the last item ("Export") into empty
   space. Kill it: the flat panel doesn't need an icon/label split line. */
[class*="ControllerContainer_sideNav__"] > div {
    border-right: none !important;
}

[class*="ControllerContainer_wrapper__"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    /* Native 22px padding on all sides was eating into the panel's
       usable space (visible as dead margin above/below the sidebar and
       content card, and as a gap before the preview column). Top stays
       bigger than the others: the fixed header is visually ~25px
       taller than the flow space it reserves, so content flush with
       the panel's true top edge renders partly hidden behind it. */
    padding: 30px 8px 8px !important;
    /* This wrapper has no native width/height, so it sizes to its own
       content (sideNav + scrollbar's intrinsic size) instead of
       stretching to fill the panel — leaving dead margin on the sides
       (flex-column parent centers a narrower child) and dead space top
       and bottom (parent doesn't stretch children on the main axis). */
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    /* Reference keeps the sidebar and the panel as two visually separate
       boxes (each with its own border) rather than one fused card. */
    gap: 20px;
}

[class*="ControllerContainer_scrollbar__"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    /* Native rule is flex:0 1 auto — it sizes to its own content
       instead of filling the wrapper, leaving dead space between the
       card and the preview column. Let it actually grow. */
    flex: 1 1 auto !important;
    /* Frame the property panel the same way as the sidebar rows: a
       rounded card with a green border highlight, so the two halves of
       the panel read as one consistent design instead of a bordered
       menu next to bare floating rows. Background matches the page
       (not --mv-row-bg) so the rows/folder titles inside — which use
       --mv-row-bg — still stand out against this frame instead of
       blending into an identical fill. */
    background: var(--mv-bg);
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--mv-border) !important;
    box-sizing: border-box;
    padding: 62px 20px 20px;
}

/* Panel section header — an icon + title + underline at the top of the
   property panel, echoing which sidebar tab is active (per the user's
   reference mockup). There's no real DOM element for this in the app,
   so it's built entirely as a ::before pseudo-element with its content
   swapped per active tab via :has() reading the sidebar's inline
   active-state style — the same trick already used to detect the
   active tab elsewhere in this file. Pure CSS, no DOM/JS touched. */
/* Simplebar makes its own internal wrapper position:absolute (filling
   this container's padding box top:0/left:0/right:0/bottom:0), so a
   ::before in normal flow would just get visually buried under it
   instead of pushing it down. Fix: the header is absolutely positioned
   into the padding-top room reserved above (58px), instead of relying
   on flow. */
[class*="ControllerContainer_scrollbar__"]::before {
    content: "";
    position: absolute;
    display: block;
    top: 24px;
    left: 22px;
    right: 22px;
    height: 16px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.6px;
    color: var(--mv-accent);
    text-transform: uppercase;
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]::before {
    content: "Quick settings";
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(2)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]::before {
    content: "Audio";
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(3)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]::before {
    content: "Layers";
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(4)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]::before {
    content: "Animations";
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(5)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]::before {
    content: "Settings";
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(6)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]::before {
    content: "Project";
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(7)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]::before {
    content: "Export";
}

[class*="ControllerContainer_scrollbar__"]::-webkit-scrollbar {
    width: 8px;
}

[class*="ControllerContainer_scrollbar__"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

[class*="ControllerContainer_scrollbar__"]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Every item is a plain padded row (gap:4 between rows via margin-bottom,
   no dividers) — only the active tab gets a soft lime-tinted fill +
   border, per this reference. No boxed cards, no accent notch. */
[class*="ControllerContainer_sideNav__"] > div > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 4px;
    border-radius: 8px;
    color: var(--mv-text-dim);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    border: 1px solid transparent;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
    background-color: transparent !important;
}

[class*="ControllerContainer_sideNav__"] > div > div:hover {
    background-color: var(--mv-surface) !important;
    color: #c9cac5;
}

/* Active tab: the app sets an inline background-color on the selected
   item — override it with a soft lime tint + border, matching this
   reference's understated active state (no bold box, no notch). */
[class*="ControllerContainer_sideNav__"] > div > div[style*="background-color: rgb(68, 68, 68)"],
[class*="ControllerContainer_sideNav__"] > div > div[style*="background-color:#444"] {
    background: rgba(209, 254, 23, 0.1) !important;
    color: var(--mv-text);
    font-weight: 500;
    border: 1px solid rgba(209, 254, 23, 0.35);
}

[class*="ControllerContainer_sideNav__"] > div > div[style*="background-color: rgb(68, 68, 68)"]::before,
[class*="ControllerContainer_sideNav__"] > div > div[style*="background-color:#444"]::before {
    opacity: 1;
}

[class*="ControllerContainer_sideNav__"] > div > div::before {
    content: "";
    width: 17px;
    height: 17px;
    flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    opacity: 0.75;
    transition: opacity 0.25s var(--mv-ease);
}

[class*="ControllerContainer_sideNav__"] > div > div:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='11' cy='18' r='2'/%3E%3C/svg%3E");
}

[class*="ControllerContainer_sideNav__"] > div > div:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='4' y1='10' x2='4' y2='14'/%3E%3Cline x1='8' y1='6' x2='8' y2='18'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='16' y1='6' x2='16' y2='18'/%3E%3Cline x1='20' y1='10' x2='20' y2='14'/%3E%3C/svg%3E");
}

[class*="ControllerContainer_sideNav__"] > div > div:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpolygon points='12,3 21,8 12,13 3,8'/%3E%3Cpolyline points='3,14 12,19 21,14'/%3E%3C/svg%3E");
}

[class*="ControllerContainer_sideNav__"] > div > div:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpolygon points='13,2 4,14 11,14 10,22 20,10 13,10'/%3E%3C/svg%3E");
}

/* Small breathing room between the editing tools (Quick Settings/Audio/
   Layers/Automate) and the project-level tools (Settings/Project/
   Export) — two logical groups instead of one flat list of 7. */
[class*="ControllerContainer_sideNav__"] > div > div:nth-child(5) {
    margin-top: 10px;
}

[class*="ControllerContainer_sideNav__"] > div > div:nth-child(5)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cline x1='12' y1='2' x2='12' y2='5'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Cline x1='2' y1='12' x2='5' y2='12'/%3E%3Cline x1='19' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.9' y1='4.9' x2='7' y2='7'/%3E%3Cline x1='17' y1='17' x2='19.1' y2='19.1'/%3E%3Cline x1='19.1' y1='4.9' x2='17' y2='7'/%3E%3Cline x1='7' y1='17' x2='4.9' y2='19.1'/%3E%3C/svg%3E");
}

[class*="ControllerContainer_sideNav__"] > div > div:nth-child(6)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6z'/%3E%3C/svg%3E");
}

[class*="ControllerContainer_sideNav__"] > div > div:nth-child(7)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpolyline points='7,10 12,15 17,10'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
}

/* ---- dat.gui property panels ----
   dat.gui's own layout is a tightly-tuned fixed-height box model: every
   row (li) is exactly height:28px / line-height:28px, and every input
   inside has a margin-top calibrated against that — padding on the row
   breaks it (labels/controls drift, collapsed folders leave slivers).
   So HEIGHT is never touched here. To get rounded rows instead of
   continuous spreadsheet lines, the trick is margin (outside the box,
   dat.gui's height math never sees it) + border-radius + overflow, not
   padding. Flat Higgsfield card language: one neutral grey fill
   (var(--mv-row-bg)), no border, no per-type color, no glow — the lime
   accent is reserved for the actual actionable bits (function buttons,
   slider fill), not painted across every row. */

.dg.main {
    font-family: inherit !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
}

.dg .cr {
    margin: 0 2px 5px !important;
    border-radius: 10px !important;
    background-color: var(--mv-row-bg) !important;
    border-left: none !important;
    box-shadow: 0 0 0 1px var(--mv-border-2) inset;
    box-sizing: border-box !important;
    transition: background-color 0.2s var(--mv-ease);
}

.dg li:not(.folder) {
    border-bottom: none !important;
}

/* Collapsed folders: dat.gui shrinks each child row toward height:0, but
   our margin/background live outside that math — zero them explicitly
   so a "closed" folder truly disappears instead of leaving a stack of
   thin rounded slivers. */
.dg .closed li:not(.title),
.dg .closed ul li,
.dg .closed ul li > * {
    margin: 0 !important;
    background: none !important;
}

.dg .cr:hover {
    background-color: var(--mv-row-bg-hover) !important;
}

.dg .property-name {
    color: var(--mv-text-dim) !important;
    padding-left: 4px;
    letter-spacing: 0.02em;
}

.dg .c input[type="text"],
.dg .c input[type="number"] {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--mv-white) !important;
    box-shadow: 0 0 0 1px var(--mv-surface-border) inset;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.25s var(--mv-ease);
}

.dg .c input[type="text"]:focus,
.dg .c input[type="number"]:focus {
    box-shadow: 0 0 0 1.5px var(--mv-accent) inset !important;
    outline: none !important;
}

.dg .c select {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--mv-white) !important;
    box-shadow: 0 0 0 1px var(--mv-surface-border) inset;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* Number/string/boolean rows all share the same neutral pill — only
   pink/red is reserved for anything actionable (functions, sliders,
   focus). That's the whole "not a spreadsheet" fix. */
.dg .cr.number input[type="text"],
.dg .cr.string input[type="text"] {
    color: var(--mv-white) !important;
}

/* The .button div dat.gui renders next to a function row is 0-width in
   this build — the clickable label is .property-name itself, so that's
   what needs the "this is a button" affordance. Flat lime fill + near-
   black text, same treatment as the app's other primary buttons. */
.dg .cr.function .property-name,
.dg .button {
    background: var(--mv-accent) !important;
    color: var(--mv-accent-ink) !important;
    font-size: 14px;
    letter-spacing: 0.12em;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-weight: 500;
    transition: background-color 0.2s var(--mv-ease), transform 0.15s var(--mv-ease);
}

.dg .cr.function:hover .property-name,
.dg .cr.function:hover .button {
    background: var(--mv-accent-2) !important;
}

.dg .cr.function:active .property-name {
    transform: scale(0.98);
}

/* dat.gui slider fill */
.dg .slider-fg {
    background: var(--mv-accent) !important;
    box-shadow: none;
}

.dg .slider {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
}

/* =========================================================================
   MODALS — every dialog (Project Resolution, Load Audio, Attribution
   Notice, Cancel Export, error modals, ...) is a standard MUI Dialog, so
   one set of rules on the stable Mui* classes covers all of them.
   ========================================================================= */

.MuiDialog-paper {
    background: var(--mv-surface) !important;
    color: var(--mv-text) !important;
    border: none;
    border-radius: 20px !important;
    box-shadow: var(--mv-shadow-lg) !important;
}

.MuiBackdrop-root {
    background-color: rgba(5, 5, 8, 0.72) !important;
    backdrop-filter: blur(3px);
}

.MuiDialog-paper :is(h1, h2, h3, h4, h5, h6, p, span, div) {
    color: inherit;
}

.MuiDialogTitle-root {
    border-bottom: 1px solid var(--mv-surface-border);
}

.MuiDialogContentText-root {
    color: var(--mv-text-dim) !important;
}

.MuiListItem-root {
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.MuiDialog-paper .MuiListItem-root:hover,
.MuiDialog-paper .MuiListItem-button:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.MuiDialog-paper .MuiListItemText-secondary {
    color: var(--mv-text-dim) !important;
}

.MuiDialog-paper .MuiDivider-root {
    background-color: var(--mv-surface-border);
}

.MuiDialog-paper .MuiButton-text {
    color: var(--mv-text) !important;
}

.MuiDialog-paper .MuiButton-text:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.MuiDialog-paper .MuiIconButton-root {
    color: var(--mv-text-dim) !important;
}

/* dat.gui folder title bars (e.g. "canvas scene", "Background",
   "Particles"...). These ARE section headers, not data rows, so unlike
   .cr they're free to get their own height: bump height+line-height
   together (never one without the other, or the text stops centering)
   for real presence instead of the cramped 28px data-row rhythm.

   Every folder used to get its own bordered/glowing gradient pill —
   a whole stack of separately-outlined boxes reads as a pile of little
   windows. Higgsfield's own panel doesn't box every row like that: rows
   are flat, unified, distinguished only by a subtle fill and a hover
   state — so folder titles get the exact same flat card as a .cr row,
   just bolder text, instead of their own separate treatment. */
.dg li.title {
    height: 44px !important;
    line-height: 44px !important;
    margin: 0 0 10px !important;
    border-radius: 10px !important;
    background: var(--mv-surface) !important;
    background-image: none !important;
    box-shadow: 0 0 0 1px var(--mv-border-2);
    color: #e4e4e0 !important;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    box-sizing: border-box !important;
    padding-right: 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.12s, border-color 0.12s;
}

.dg li.title:hover {
    background: #1b1d1e !important;
}

/* Open state (dat.gui tracks open/closed via a class on the folder's
   <ul>) mirrors the reference's ".selected" row: lime border + a faint
   lime wash instead of the neutral fill. */
.dg ul:not(.closed) > li.title {
    background: rgba(209, 254, 23, 0.06) !important;
    box-shadow: 0 0 0 1px var(--mv-accent);
}

/* Chevron affordance — dat.gui already tracks open/closed via a class
   on the folder's <ul> (li.title's parent), so a rotating ::after reads
   the SAME state the app already maintains; nothing new is tracked. */
.dg li.title::after {
    content: "\203A";
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: #55564f;
    transition: transform 0.2s var(--mv-ease), color 0.2s var(--mv-ease);
}

.dg ul:not(.closed) > li.title::after {
    color: var(--mv-accent);
}

.dg ul:not(.closed) > li.title::after {
    transform: rotate(90deg);
}

/* Per-row colored icons — ONLY for the Quick Settings tab's top-level
   folders. This is deliberately position-based (1st/2nd/3rd/4th folder
   under Quick Settings), matching this template's fixed Background /
   Particles / Spectrum / Emblem layout from the reference mockup — it
   is NOT a general "icon per folder name" system, since folder names
   and order are template-defined and CSS can't match by text content.
   A different template's Quick Settings folders would get these same
   four icons in whatever order THEY happen to appear, which won't
   always be a perfect semantic match — a known trade-off of doing this
   in pure CSS instead of touching the app's JS. Scoped via :has() the
   same way the panel header text is. */
[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(1 of li.folder)
    > .dg
    > ul
    > li.title,
[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(2 of li.folder)
    > .dg
    > ul
    > li.title,
[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(3 of li.folder)
    > .dg
    > ul
    > li.title,
[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(4 of li.folder)
    > .dg
    > ul
    > li.title {
    justify-content: flex-start !important;
    gap: 12px;
    padding-left: 13px !important;
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(1 of li.folder)
    > .dg
    > ul
    > li.title::before,
[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(2 of li.folder)
    > .dg
    > ul
    > li.title::before,
[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(3 of li.folder)
    > .dg
    > ul
    > li.title::before,
[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(4 of li.folder)
    > .dg
    > ul
    > li.title::before {
    content: "";
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 7px;
    background-color: rgba(209, 254, 23, 0.14);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(1 of li.folder)
    > .dg
    > ul
    > li.title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1fe17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(2 of li.folder)
    > .dg
    > ul
    > li.title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d1fe17'%3E%3Ccircle cx='6' cy='6' r='2.4'/%3E%3Ccircle cx='14' cy='6' r='2.4'/%3E%3Ccircle cx='6' cy='14' r='2.4'/%3E%3Ccircle cx='14' cy='14' r='2.4'/%3E%3Ccircle cx='10' cy='19' r='2.4'/%3E%3Ccircle cx='18' cy='19' r='2.4'/%3E%3C/svg%3E");
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(3 of li.folder)
    > .dg
    > ul
    > li.title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1fe17' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='4' y1='20' x2='4' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='20' y1='20' x2='20' y2='14'/%3E%3C/svg%3E");
}

[class*="ControllerContainer_sideNav__"]:has(> div > div:nth-child(1)[style*="rgb(68, 68, 68)"])
    ~ [class*="ControllerContainer_scrollbar__"]
    .dg
    > ul
    > li.folder:nth-child(4 of li.folder)
    > .dg
    > ul
    > li.title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1fe17' stroke-width='2' stroke-linejoin='round'%3E%3Cpolygon points='12,2.5 15,9.5 22,10.3 17,15 18.3,22 12,18.5 5.7,22 7,15 2,10.3 9,9.5'/%3E%3C/svg%3E");
}

/* "Astuce" tip card — restored per this reference's peach-accented
   design (subtler than the earlier lime version that was removed). */
[class*="ControllerContainer_scrollbar__"]::after {
    content: "Reminder: these settings update the preview in real time.";
    display: block;
    margin-top: 18px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(250, 208, 169, 0.08);
    border: 1px solid rgba(250, 208, 169, 0.25);
    color: #d8c9b8;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* =========================================================================
   "Windows" — the Settings / My Projects tab switcher (Project.module.css)
   ships as a bare rectangular box: a 1px grey border, square corners, no
   fill. Higgsfield's own sub-tabs (e.g. "Create Video / Edit Video /
   Motion Control") aren't a boxed control at all — plain text tabs on
   the flat canvas, active = white + a thin underline, inactive = grey.
   Match that exactly instead of building another bordered/filled pill.
   The app sets an inline background-color on whichever segment is
   active (#2f2f2f) — that inline color is what's targeted below. */
[class*="Project_nav__"] {
    border: none !important;
    background: transparent;
    border-radius: 0 !important;
    padding: 0 0 10px;
    box-sizing: border-box;
    gap: 20px;
    border-bottom: 1px solid var(--mv-surface-border-soft) !important;
    justify-content: flex-start !important;
}

[class*="Project_nav__"] div {
    width: auto !important;
    padding: 4px 2px !important;
    border-radius: 0;
    color: var(--mv-text-dim);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.03em;
    box-shadow: inset 0 -11px 0 -9px transparent;
    transition: color 0.2s var(--mv-ease), box-shadow 0.2s var(--mv-ease);
}

[class*="Project_nav__"] div:hover {
    background-color: transparent !important;
    color: var(--mv-white);
}

[class*="Project_nav__"] > div[style*="background-color: rgb(47, 47, 47)"],
[class*="Project_nav__"] > div[style*="background-color:#2f2f2f"] {
    background: transparent !important;
    color: var(--mv-white) !important;
    font-weight: 600;
    box-shadow: inset 0 -11px 0 -9px var(--mv-white);
}

/* =========================================================================
   PREVIEW + PLAYER — enlarge the canvas preview column and detach the
   transport bar from the full-width footer strip so it reads as its own
   card attached directly under the preview, instead of a bar spanning
   the whole app. Only layout (size/position) and skin are touched:
   Canvas.js still computes/scales the canvas itself and TrackContainer.js
   still owns all playback wiring — nothing here reaches into that.

   Implementation note: this MUST be done with CSS Grid, not
   position:absolute. TrackContainer.js's seek handler does
   `e.clientX - seekRef.current.offsetLeft` — offsetLeft is relative to
   the nearest positioned ancestor. .App_container already is
   position:relative natively, so that's the offsetParent today. Giving
   App_rightContainer position:absolute would make IT the new
   offsetParent instead, shifting offsetLeft by its own on-screen
   position and desyncing every seek/scrub click from the cursor —
   confirmed by testing (clicking mid-bar jumped several minutes in).
   Grid keeps every element position:static, so offsetParent — and the
   seek math — stays exactly as the app already expects. */
[class*="App_container__"] {
    display: grid !important;
    grid-template-columns: 42% 58%;
    grid-template-rows: 1fr auto;
    grid-template-areas: "panel canvas" "panel player";
}

/* Unbox the flex wrapper so its two children (panel, canvas) become
   direct grid items placeable by the areas above, without moving them
   in the DOM or touching how either one renders internally. */
[class*="App_leftContainer__"] {
    display: contents !important;
}

[class*="ControllerContainer_container__"] {
    grid-area: panel;
    width: auto !important;
    height: auto !important;
}

[class*="Canvas_container__"] {
    grid-area: canvas;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
}

[class*="Canvas_container__"] {
    background-color: #0b0c0d !important;
    border: 1px solid var(--mv-border-2);
    border-radius: 16px;
    position: relative;
    /* Safety net: canvasMount is force-scaled below (Canvas.js sizes it
       off window dimensions, not this container, so there's no
       guarantee it fits). Without this, an oversized mount pushes
       content out past this box instead of just getting clipped at
       the edge. */
    overflow: hidden;
}

/* "Preview" badge floating over the canvas — purely decorative label
   from the reference mockup, no interaction, so a ::before is enough;
   no new DOM, nothing to wire up. */
[class*="Canvas_container__"]::before {
    content: "Preview";
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 8px 14px 8px 30px;
    background: var(--mv-surface);
    border: 1px solid var(--mv-border-2);
    border-radius: 8px;
    color: #c9cac5;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cac5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 13px 13px;
}

[class*="Canvas_canvasMount__"] {
    /* Canvas.js sizes this off window.innerWidth/innerHeight, not this
       container, so there's no direct relationship to lean on. 1.55
       previously overflowed the container badly enough to push the
       canvas above the viewport — that was BEFORE Canvas_container had
       overflow:hidden. It now safely clips any overflow, and the
       container also centers its child via flex, so a much larger
       scale is safe: verified live via getBoundingClientRect() at
       1.85 the mount fills ~90% of the container's width/height and
       stays fully inside its bounds (no clipping needed). */
    transform: scale(1.85);
    transform-origin: center center;
}

/* Floating preview toolbar (expand/settings/play) — the buttons
   themselves are created by js/preview-controls.js, a small vanilla-JS
   overlay in the same spirit as reveal.js: it doesn't touch React or
   app state, it only adds sibling DOM nodes and wires clicks to real
   existing behavior (native Fullscreen API on the canvas container,
   forwarding a click to the real Settings tab / real transport play
   button). This file only styles what that script creates. */
.mv-preview-controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.mv-preview-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    color: var(--mv-text);
    background: rgba(20, 21, 26, 0.75);
    transition: background-color 0.15s var(--mv-ease), transform 0.15s var(--mv-ease);
}

.mv-preview-btn svg {
    width: 17px;
    height: 17px;
}

.mv-preview-btn:hover {
    transform: scale(1.06);
}

.mv-preview-btn-expand,
.mv-preview-btn-settings {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    border: 1px solid var(--mv-border-2);
    background: rgba(15, 17, 19, 0.85);
    right: 16px;
}

.mv-preview-btn-expand:hover,
.mv-preview-btn-settings:hover {
    background: var(--mv-surface-2);
}

.mv-preview-btn-expand {
    bottom: 116px;
}

.mv-preview-btn-settings {
    bottom: 66px;
}

.mv-preview-btn-play {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--mv-accent);
    border: none;
    box-shadow: none;
    color: var(--mv-accent-ink);
}

.mv-preview-btn-play svg {
    width: 17px;
    height: 17px;
}

.mv-preview-btn-play:hover {
    background: var(--mv-accent-2);
    color: var(--mv-accent-ink);
}

[class*="App_rightContainer__"] {
    grid-area: player;
    width: auto !important;
    padding: 12px 28px 16px !important;
    box-sizing: border-box !important;
}

/* Flat, borderless, no glow/pulse — the same neutral card as everything
   else in this panel, not a spotlighted floating strip. */
[class*="TrackContainer_container__"] {
    height: 64px !important;
    background: var(--mv-surface) !important;
    border: 1px solid var(--mv-border-2) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
}

/* The audio waveform canvas (WaveCanvas.js) renders as a solid black
   strip behind the seeker in this build — purely decorative, layered
   under the seek bar. Hiding it is CSS-only: TrackContainer.js's seek
   math reads from the .seeker div itself, not from this canvas, so
   click/scrub and the progress fill are unaffected. */
[class*="App_audioWaveCanvas__"] {
    display: none !important;
}

/* Play/stop buttons: flat neutral badge, no gradient/glow — matches the
   rest of the panel's flat card language. */
/* PlayButton.js renders a bare <img onClick>, no wrapper div — there
   never was a real .PlayButton_playButtonOuter element to style here
   (confirmed by reading the component source). Pixel-sampled the actual
   asset: it's a white ring + white triangle glyph on a FULLY
   TRANSPARENT interior (not a filled disc) — at native 16px that
   line-art reads as a blurry blob, which is what looked like "no
   visible icon". No color filter needed (it's already white); just
   sizing it up and giving the transparent interior a dark backing +
   lime ring makes the existing glyph read clearly. */
[class*="PlayButton_img__"] {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px;
    background: var(--mv-accent);
    box-shadow: none !important;
    transition: background-color 0.15s var(--mv-ease), transform 0.15s var(--mv-ease);
}

[class*="PlayButton_img__"]:hover {
    background: var(--mv-accent-2);
    box-shadow: none !important;
    transform: scale(1.06);
}

[class*="PlayButton_img__"]:active {
    transform: scale(0.94);
}

[class*="TrackContainer_buttons__"] {
    gap: 16px;
}

[class*="TrackContainer_timeDisplay__"] {
    font-variant-numeric: tabular-nums;
    color: var(--mv-text) !important;
    letter-spacing: 0.02em;
}

/* Seek bar: dark rounded track, flat lime fill, small round handle
   riding the edge of the fill (a pure-CSS ::after on the same overlay
   div whose width TrackContainer.js already drives — no new DOM). No
   glow — flat color like everything else in this panel. */
[class*="TrackContainer_seeker__"] {
    background-color: #2a2c2a !important;
    border: none !important;
    border-radius: 999px !important;
    height: 4px !important;
    position: relative;
    overflow: visible !important;
}

[class*="TrackContainer_seekerOverlay__"] {
    background: var(--mv-accent) !important;
    height: 4px !important;
    border-radius: 999px !important;
    box-shadow: none;
}

[class*="TrackContainer_seekerOverlay__"]::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mv-white);
    transform: translateY(-50%);
}

[class*="TrackContainer_volumeContainer__"] img[alt="volume"] {
    filter: brightness(0) invert(1);
    opacity: 0.75;
    transition: opacity 0.2s var(--mv-ease);
}

[class*="TrackContainer_volumeContainer__"] img[alt="volume"]:hover {
    opacity: 1;
}

/* Volume slider: same 0-width-thumb/box-shadow-fill technique the app
   already uses, just re-themed — dark track, flat lime fill. */
[class*="Slider_slider__"] {
    height: 4px !important;
    border-radius: 999px !important;
    background: #2a2c2a !important;
}

[class*="Slider_slider__"]::-webkit-slider-runnable-track {
    background: #2a2c2a !important;
    border-radius: 999px !important;
}

[class*="Slider_slider__"]::-webkit-slider-thumb {
    box-shadow: -100vw 0 0 100vw var(--mv-accent-peach) !important;
    border: none !important;
}

@media (max-width: 900px) {
    /* Narrow viewports: the 42/58 split gets cramped fast — fall back to
       the app's original stacked full-width layout rather than a
       squeezed grid. */
    [class*="App_container__"] {
        display: flex !important;
        flex-direction: column !important;
    }

    [class*="App_leftContainer__"] {
        display: flex !important;
        width: 100%;
        height: 93%;
    }

    [class*="ControllerContainer_container__"],
    [class*="Canvas_container__"] {
        width: 50% !important;
        height: 93% !important;
    }

    [class*="Canvas_canvasMount__"] {
        transform: none;
    }

    [class*="App_rightContainer__"] {
        width: 100% !important;
        padding: 0 !important;
    }

    [class*="TrackContainer_container__"] {
        border-radius: 0 !important;
        height: 7% !important;
    }
}

/* =========================================================================
   Pulsion — lisibilité des réglages (04/10/2026)
   ========================================================================= */
/* Pastille de couleur + case d'activation sur la ligne de la couleur */
.dg .c .input-color { display: flex; align-items: center; gap: 8px; }
.dg .c .pulsion-swatch {
    flex: 0 0 22px; height: 22px; border-radius: 6px; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}
.dg .c .pulsion-color-enabled { flex: 0 0 auto; margin: 0; accent-color: var(--mv-accent); width: 16px; height: 16px; }
.dg .c .input-color input[type="text"] { flex: 1 1 auto; width: auto !important; }

/* Libellés plus lisibles */
.dg li.cr .property-name { font-size: 13px !important; color: #e8e8e8 !important; }

/* L'astuce reste sous la zone qui défile au lieu de la recouvrir */
/* marge en bas de la liste : on peut la faire défiler au-dessus de l'astuce */
[class*="ControllerContainer_scrollbar__"] .simplebar-content { padding-bottom: 110px !important; }
[class*="ControllerContainer_scrollbar__"]::after {
    position: absolute; left: 20px; right: 20px; bottom: 14px; margin-top: 0 !important;
}
.dg .c .input-color { width: 100%; min-width: 0; box-sizing: border-box; }
.dg .c .input-color input[type="text"] { min-width: 0; text-align: center; }

/* Palette ouverte uniquement au clic, agrandie et hors du panneau défilant. */
.pulsion-color-picker { display: none; position: fixed !important; margin: 0 !important;
    box-sizing: border-box; z-index: 10000; color: #eee; background: #222;
    border: 1px solid #555; border-radius: 10px; line-height: normal;
    box-shadow: 0 12px 32px #0009 !important; }
.pulsion-color-picker.open { display: block; }
.pulsion-color-picker-heading { display: flex; align-items: center; justify-content: space-between;
    height: 26px; font: 13px "Inter", sans-serif; }
.pulsion-color-picker-heading button { color: #eee; background: transparent; border: 0;
    font-size: 22px; width: 26px; height: 26px; cursor: pointer; }
.pulsion-color-picker .saturation-field, .pulsion-color-picker .hue-field { touch-action: manipulation; }
.dg .c button.pulsion-swatch { padding: 0; border: 0; }
.dg .c button.pulsion-swatch:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }
.dg .c.pulsion-mirror-controller > div:not(.pulsion-mirror-segments) { min-width: 0 !important; }
.dg .pulsion-mirror-segments { display: flex; flex-wrap: nowrap; width: 100%; min-width: 0;
    height: 25px; align-self: flex-start; gap: 0;
    background: #252529; border: 1px solid #515158; border-radius: 6px; overflow: hidden; }
.dg .pulsion-mirror-segments button { flex: 1 1 0; min-width: 0; height: 25px; margin: 0;
    padding: 3px 2px; color: #cfcfd3; background: transparent; border: 0; white-space: nowrap;
    border-right: 1px solid #515158; font: 12px "Inter", sans-serif; cursor: pointer; }
.dg .pulsion-mirror-segments button:last-child { border-right: 0; }
.dg .pulsion-mirror-segments button[hidden] { display: none; }
.dg .pulsion-mirror-segments button[aria-pressed="true"] { background: #46464e; color: var(--mv-accent); }
.dg .pulsion-mirror-segments button:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: -2px; }
.dg li.cr .property-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Titre du panneau opaque au-dessus de la liste qui défile */
[class*="ControllerContainer_scrollbar__"]::before {
    z-index: 5; top: 0 !important; left: 0 !important; right: 0 !important; height: auto !important;
    padding: 24px 22px 12px; background: var(--mv-surface, #121214); border-radius: 14px 14px 0 0;
}
/* Pas de défilement horizontal : les lignes s'adaptent à la largeur */
[class*="ControllerContainer_scrollbar__"] .simplebar-content,
[class*="ControllerContainer_scrollbar__"] .dg.main,
[class*="ControllerContainer_scrollbar__"] .dg ul { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box; }
[class*="ControllerContainer_scrollbar__"] .simplebar-track.simplebar-horizontal { display: none !important; }
/* Astuce opaque, au-dessus de la liste (la marge basse permet de faire défiler les derniers réglages au-dessus) */
[class*="ControllerContainer_scrollbar__"]::after { z-index: 5; background: #1c1916 !important; box-shadow: 0 -14px 18px 4px #121214; }
/* Titres des pages secondaires (FAQ, Tutoriels, Connexion, Mes projets) : noirs sur fond sombre depuis l'origine */
h1.MuiTypography-root, h2.MuiTypography-h2, h3.MuiTypography-h3 { color: #f4f3f0 !important; }
/* Soulignement des titres : vert Pulsion au lieu du rose musicvid */
h1.MuiTypography-root > span, h2.MuiTypography-h2 > span, h3.MuiTypography-h3 > span { background-color: var(--mv-accent) !important; }
/* Variante des classes suffixées (JSS : MuiTypography-h3-158…), hors des cartes claires comme la connexion */
[class*="MuiTypography-h3"]:not([class*="MuiPaper"] *) { color: #f4f3f0 !important; }
[class*="MuiTypography-h3"]:not([class*="MuiPaper"] *) > span { background-color: var(--mv-accent) !important; }
/* Fenêtre de confirmation Pulsion */
.pulsion-dialog-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; }
.pulsion-dialog { max-width: 440px; padding: 24px; border-radius: 14px; background: #17171a; border: 1px solid rgba(255, 255, 255, 0.12); color: #e8e8e8; font-family: "Inter", sans-serif; }
.pulsion-dialog h2 { margin: 0 0 10px; font-family: "Space Grotesk", sans-serif; font-size: 18px; color: #f4f3f0; }
.pulsion-dialog p { margin: 0 0 20px; line-height: 1.5; font-size: 14px; }
.pulsion-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.pulsion-dialog-actions button { padding: 9px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #e8e8e8; cursor: pointer; font-weight: 600; }
.pulsion-dialog-actions button.primary { background: var(--mv-accent); color: #111; border-color: var(--mv-accent); }
/* Onglet « Animations » retiré à la demande du Major (04/10/2026) */
[class*="ControllerContainer_sideNav__"] > div > div:nth-child(4) { display: none !important; }
/* Barre des formats vidéo */
.mv-format-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 8px; padding: 6px; border-radius: 12px; background: rgba(18, 18, 20, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); }
.mv-format-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #cfcfcf; cursor: pointer; font-family: "Inter", sans-serif; }
.mv-format-btn:hover { background: rgba(255, 255, 255, 0.06); }
.mv-format-btn.active { border-color: var(--mv-accent); color: #fff; background: rgba(209, 254, 23, 0.08); }
.mv-format-shape { display: inline-block; border: 2px solid currentColor; border-radius: 3px; }
.mv-format-btn.active .mv-format-shape { border-color: var(--mv-accent); }
.mv-format-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.mv-format-text b { font-size: 12px; font-weight: 600; }
.mv-format-text small { font-size: 11px; opacity: 0.7; }
/* L'aperçu commence sous la barre des formats */
[class*="Canvas_container__"] { padding-top: 64px !important; align-items: flex-start !important; }
.mv-format-bar { top: 10px; }
/* Aperçu : la barre des formats et l'image sur deux lignes distinctes */
[class*="App_container__"] { grid-template-rows: minmax(0, 1fr) auto !important; }
[class*="Canvas_container__"] { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; overflow: hidden !important; min-height: 0 !important; }
[class*="Canvas_container__"] .mv-format-bar { position: static !important; transform: none !important; order: -1; margin: 12px auto 12px; flex: 0 0 auto; }
/* Le thème agrandissait l'aperçu de 1,85× pour compenser l'ancien calcul : la taille est maintenant calculée juste */
[class*="Canvas_canvasMount__"] { transform: none !important; }
/* =========================================================================
   Vert Pulsion du Major (04/10/2026) : dégradé + ombres en relief
   pour tous les éléments à fond vert (boutons, textes surlignés)
   ========================================================================= */
:root {
    --mv-accent-fill: linear-gradient(rgba(255, 255, 20, 0) 0%, rgb(255, 255, 20) 100%), linear-gradient(90deg, rgb(209, 254, 23) 0%, rgb(209, 254, 23) 100%);
    --mv-accent-shadow: rgb(130, 155, 25) 0px -3px 0px 0px inset, rgba(0, 0, 0, 0.25) 0px 6px 4px 0px, rgba(0, 0, 0, 0.15) 0px 32px 24px 0px;
}
.MuiButton-containedSecondary,
.MuiToolbar-root > div:last-child > a:last-child,
#FeaturedProjects h3.MuiTypography-h6,
.dg .cr.function .property-name, .dg .button,
.mv-preview-btn-play,
[class*="PlayButton_img__"],
.pulsion-dialog-actions button.primary {
    background: var(--mv-accent-fill) !important;
    box-shadow: var(--mv-accent-shadow) !important;
}
/* Champs numériques façon Blender */
.dg li.has-slider .slider { display: none !important; }
.dg .c .pulsion-num { display: flex; align-items: stretch; width: 100%; height: 22px; border-radius: 6px; overflow: hidden; background: #2b2b2f; box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; }
.dg .c .pulsion-num.bounded { background: linear-gradient(90deg, #4a4a52 0 var(--pct), #2b2b2f var(--pct) 100%); }
.dg .c .pulsion-num input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto !important; height: 22px !important; background: transparent !important; box-shadow: none !important; border: 0 !important; text-align: center; color: #f2f2f2 !important; cursor: ew-resize; font-variant-numeric: tabular-nums; }
.dg .c .pulsion-num input[type="text"]:not([readonly]) { cursor: text; }
.dg .c .pulsion-num:focus-within, .dg .c .pulsion-num.dragging { box-shadow: 0 0 0 1.5px var(--mv-accent) inset; }
.dg .c .pulsion-num-arrow { flex: 0 0 18px; border: 0; padding: 0; background: transparent; color: #9a9aa2; cursor: pointer; font-size: 15px; line-height: 22px; opacity: 0; transition: opacity .15s; }
.dg .c .pulsion-num:hover .pulsion-num-arrow, .dg .c .pulsion-num:focus-within .pulsion-num-arrow { opacity: 1; }
.dg .c .pulsion-num-arrow:hover { color: #fff; background: rgba(255,255,255,0.06); }
/* Boutons verts : police lisible (le point des « i » se perdait), icônes du lecteur en noir */
.dg .cr.function .property-name, .dg .button,
.MuiButton-containedSecondary, .pulsion-dialog-actions button.primary {
    font-family: "Inter", "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}
[class*="PlayButton_img__"] svg, [class*="PlayButton_img__"] path, [class*="PlayButton_img__"] polygon, [class*="PlayButton_img__"] rect,
[class*="TrackContainer_buttons__"] svg, [class*="TrackContainer_buttons__"] path, [class*="TrackContainer_buttons__"] rect,
.mv-preview-btn-play svg, .mv-preview-btn-play polygon { fill: #111 !important; stroke: #111 !important; color: #111 !important; }
[class*="PlayButton_img__"] img, [class*="TrackContainer_buttons__"] img { filter: brightness(0) !important; }
/* Lecteur : le fond vert passe sur le bouton, l'icône seule devient noire */
[class*="TrackContainer_buttons__"] > * { background: var(--mv-accent-fill) !important; box-shadow: var(--mv-accent-shadow) !important; border-radius: 8px; }
[class*="PlayButton_img__"], [class*="TrackContainer_buttons__"] img { background: transparent !important; box-shadow: none !important; filter: brightness(0) !important; }
/* Icônes du lecteur : image blanche d'origine inversée en noir ; le fond et les ombres sont donnés
   en couleurs inverses pour retrouver après inversion exactement le vert et le relief du Major */
[class*="TrackContainer_buttons__"] > * { background: none !important; box-shadow: none !important; }
[class*="PlayButton_img__"], [class*="TrackContainer_buttons__"] img {
    background: linear-gradient(rgba(0, 0, 235, 0) 0%, rgb(0, 0, 235) 100%), linear-gradient(90deg, rgb(46, 1, 232) 0%, rgb(46, 1, 232) 100%) !important;
    box-shadow: rgb(125, 100, 230) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 6px 4px 0px, rgba(255, 255, 255, 0.15) 0px 32px 24px 0px !important;
    filter: invert(1) !important;
}
/* Pricing page */
.pulsion-pricing { max-width: 1240px; margin: 0 auto; padding: 56px 24px 72px; color: #f4f3f0; font-family: "Inter", sans-serif; }
.pulsion-pricing-head { text-align: center; margin-bottom: 40px; }
.pulsion-pricing-head h1 { font-family: "Space Grotesk", sans-serif; font-size: 48px; margin: 0 0 12px; }
.pulsion-pricing-head p { color: #b9b9be; font-size: 17px; margin: 0; }
.pulsion-pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pulsion-plan { position: relative; display: flex; flex-direction: column; padding: 28px 22px; border-radius: 18px; background: #17171a; border: 1px solid rgba(255, 255, 255, 0.08); }
.pulsion-plan.highlight { border-color: var(--mv-accent); box-shadow: 0 0 0 1px var(--mv-accent), 0 24px 48px rgba(0, 0, 0, 0.35); }
.pulsion-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: var(--mv-accent-fill); box-shadow: var(--mv-accent-shadow); color: #111; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pulsion-plan h2 { font-family: "Space Grotesk", sans-serif; font-size: 24px; margin: 0 0 6px; }
.pulsion-plan-tagline { color: #a9a9b0; font-size: 14px; min-height: 40px; margin: 0 0 18px; line-height: 1.4; }
.pulsion-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 20px; }
.pulsion-plan-price .amount { font-family: "Space Grotesk", sans-serif; font-size: 44px; font-weight: 700; }
.pulsion-plan-price .period { color: #a9a9b0; font-size: 16px; }
.pulsion-plan-cta { width: 100%; padding: 12px; margin-bottom: 22px; border: 0; border-radius: 10px; cursor: pointer; font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; color: #111; background: var(--mv-accent-fill); box-shadow: var(--mv-accent-shadow); }
.pulsion-plan:not(.highlight) .pulsion-plan-cta { background: #26262b; color: #f4f3f0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pulsion-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pulsion-plan li { position: relative; padding-left: 26px; font-size: 14px; color: #e6e6e9; }
.pulsion-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--mv-accent); font-weight: 700; }
.pulsion-plan li.minus { color: #9a9aa2; }
.pulsion-plan li.minus::before { content: "–"; color: #9a9aa2; }
.pulsion-pricing-faq { max-width: 760px; margin: 64px auto 0; }
.pulsion-pricing-faq h2 { font-family: "Space Grotesk", sans-serif; text-align: center; font-size: 28px; margin-bottom: 20px; }
.pulsion-pricing-faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 16px 0; }
.pulsion-pricing-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.pulsion-pricing-faq p { color: #b9b9be; margin: 10px 0 0; line-height: 1.5; }
@media (max-width: 1000px) { .pulsion-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pulsion-pricing-grid { grid-template-columns: 1fr; } }
.pulsion-plan-badge { top: 14px !important; left: auto !important; right: 14px; transform: none !important; }
/* Pricing preview: distinguish planned subscriptions from the free beta. */
.pulsion-pricing-notice { max-width: 900px; margin: 0 auto 24px; padding: 18px 22px; background: #1b2111; border: 1px solid #566b16; border-radius: 12px; line-height: 1.5; }
.pulsion-pricing-notice strong { color: #e0f594; }
.pulsion-pricing-notice p { color: #d1d3cb; margin: 6px 0 0; }
.pulsion-billing-options { display: flex; justify-content: center; gap: 8px; margin: 0 0 28px; }
.pulsion-billing-options button { padding: 12px 18px; border: 1px solid #45454b; border-radius: 10px; background: #232327; color: #eee; font: 600 14px "Inter", sans-serif; cursor: pointer; }
.pulsion-billing-options button[aria-pressed="true"] { background: var(--mv-accent-fill); box-shadow: var(--mv-accent-shadow); color: #111; border-color: transparent; }
.pulsion-billing-options button:focus-visible, .pulsion-plan-cta:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 4px; }
.pulsion-plan { padding-top: 54px; }
.pulsion-plan-price { flex-wrap: wrap; margin-bottom: 8px; }
.pulsion-plan-price .amount { font-size: clamp(32px, 3.2vw, 44px); }
.pulsion-plan-price .period { font-size: 14px; }
.pulsion-plan-billing-note { color: #b7b7bf; font-size: 12px; min-height: 32px; margin: 0 0 12px; line-height: 1.4; }
.pulsion-plan-cta:not(:disabled) { background: var(--mv-accent-fill) !important; box-shadow: var(--mv-accent-shadow) !important; color: #111 !important; }
.pulsion-plan-cta:disabled { background: #29292f !important; color: #c5c5cd !important; box-shadow: inset 0 0 0 1px #45454e !important; cursor: default; }
.pulsion-plan-feature-heading { font: 600 12px "Inter", sans-serif; color: #b7b7bf; margin: 0 0 14px; }
.pulsion-plan li.planned::before { content: "○"; color: #b7b7bf; }
.pulsion-plan-badge { color: #111 !important; }
.pulsion-pricing-footnote { max-width: 900px; margin: 22px auto 0; color: #b9b9be; font-size: 13px; line-height: 1.6; text-align: center; }
.pulsion-back-link { display: inline-block; padding: 10px 18px; border-radius: 10px; background: var(--mv-accent-fill); box-shadow: var(--mv-accent-shadow); color: #111 !important; font-weight: 700; text-decoration: none; font-family: "Inter", sans-serif; }