:root {
    --ink: #17151f;
    --text: #322f3a;
    --muted: #706b7c;
    --line: #e6e1ec;
    --paper: #fbfafc;
    --panel: #ffffff;
    --pink: #ff5d8f;
    --cyan: #21b7c5;
    --teal: #1596a3;
    --yellow: #ffd166;
    --green: #57cc99;
    --mint: #57cc99;
    --violet: #7b61ff;
    --shadow: 0 18px 50px rgba(39, 28, 62, 0.12);
}

/* 20260709-action-affordance-v9500: make action icons visibly guide without turning chips into clutter. */
html body[data-page] {
    --action9500-ink: #17202c;
    --action9500-soft: rgba(255, 255, 255, 0.76);
    --action9500-line: rgba(18, 29, 43, 0.14);
    --action9500-cyan: #16b9c7;
    --action9500-pink: #ff6f9d;
    --action9500-gold: #ffe66d;
}

html body.animaker-theme-night[data-page],
html body.studio-theme-night[data-page] {
    --action9500-ink: #f7fbff;
    --action9500-soft: rgba(255, 255, 255, 0.10);
    --action9500-line: rgba(236, 246, 252, 0.16);
}

html body[data-page] main :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button)[data-ui-icon],
html body[data-page] .shared-nav-actions :is(.primary-link, .nav-button)[data-ui-icon],
html body[data-page] :is(.shared-ai-mini-main, .shared-ai-mini-go, .shared-ai-mini-close)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    letter-spacing: 0 !important;
}

html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon],
html body[data-page] .shared-nav-actions .shared-nav-primary-action[data-ui-icon],
html body[data-page] .shared-ai-mini-go[data-ui-icon] {
    min-height: 48px !important;
    padding-inline: 16px 20px !important;
    border-radius: 16px !important;
}

html body[data-page] main :is(.secondary-btn, .ghost-link, .link-button)[data-ui-icon],
html body[data-page] .shared-nav-actions .nav-button[data-ui-icon],
html body[data-page] .shared-ai-mini-main[data-ui-icon],
html body[data-page] .shared-ai-mini-close[data-ui-icon] {
    min-height: 42px !important;
    border-radius: 15px !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon]::before,
    html body[data-page] .shared-nav-actions .shared-nav-primary-action[data-ui-icon]::before,
    html body[data-page] .shared-ai-mini-go[data-ui-icon]::before {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        border-radius: 12px !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72)),
            color-mix(in srgb, var(--action9500-cyan) 18%, transparent) !important;
        color: #121720 !important;
        opacity: 1 !important;
        -webkit-mask: none !important;
        mask: none !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.48),
            0 10px 22px rgba(17, 27, 38, 0.16) !important;
        display: inline-grid !important;
        place-items: center !important;
        content: var(--ui-icon, "→") !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    html body[data-page] main :is(.secondary-btn, .ghost-link, .link-button)[data-ui-icon]::before,
    html body[data-page] .shared-nav-actions .nav-button[data-ui-icon]::before,
    html body[data-page] .shared-ai-mini-main[data-ui-icon]::before,
    html body[data-page] .shared-ai-mini-close[data-ui-icon]::before {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
        border-radius: 9px !important;
        background: color-mix(in srgb, currentColor 9%, var(--action9500-soft)) !important;
        color: currentColor !important;
        opacity: 0.92 !important;
        -webkit-mask: none !important;
        mask: none !important;
        display: inline-grid !important;
        place-items: center !important;
        content: var(--ui-icon, "•") !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        box-shadow: inset 0 0 0 1px var(--action9500-line) !important;
    }
}

/* 20260710-oc-usability-v20-final: keep the primary creation path visual, full-bleed, and action-first. */
html body[data-page="home"],
html body[data-page="studio"] {
    --oc-v13-day-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp");
    --oc-v13-night-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp");
    --oc-v6-art: var(--oc-v13-day-art);
    overflow-x: hidden !important;
}

html body[data-page="home"].animaker-theme-night,
html body[data-page="studio"].animaker-theme-night,
html body[data-page="studio"].studio-theme-night {
    --oc-v6-art: var(--oc-v13-night-art);
}

html body[data-page="home"] main,
html body[data-page="home"] .vue-home-root,
html body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
}

html body[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: clamp(640px, 82svh, 880px) !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding: clamp(48px, 6vw, 88px) max(24px, calc((100vw - 1180px) / 2)) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.97) 0%, rgba(250, 253, 255, 0.84) 38%, rgba(250, 253, 255, 0.26) 76%, rgba(250, 253, 255, 0.05) 100%),
        var(--home-hero-image, var(--oc-v13-day-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.94) 0%, rgba(12, 18, 27, 0.78) 42%, rgba(12, 18, 27, 0.34) 78%, rgba(12, 18, 27, 0.08) 100%),
        var(--home-hero-night-image, var(--oc-v13-night-art)) !important;
}

html body[data-page="home"] .vue-home-gateway {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100svh !important;
    inset: 0 !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.96) 0%, rgba(250, 253, 255, 0.72) 42%, rgba(250, 253, 255, 0.16) 100%),
        var(--home-gateway-image, var(--oc-v13-day-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.92) 0%, rgba(12, 18, 27, 0.74) 44%, rgba(12, 18, 27, 0.16) 100%),
        var(--home-gateway-night-image, var(--oc-v13-night-art)) !important;
}

html body[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 58%, rgba(255, 255, 255, 0.14) 100%),
        var(--oc-v13-day-art) 60% 50% / cover no-repeat !important;
}

html body[data-page="studio"].studio-theme-night .studio-hero-title,
html body.animaker-theme-night[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(12, 18, 28, 0.94) 0%, rgba(12, 18, 28, 0.78) 58%, rgba(12, 18, 28, 0.18) 100%),
        var(--oc-v13-night-art) 62% 50% / cover no-repeat !important;
}

html body[data-page="studio"] .vue-image-result-actions {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

html body[data-page="studio"] .vue-image-result-actions .primary-btn {
    min-height: 52px !important;
}

html body[data-page="studio"] .vue-image-result-more,
html body[data-page="studio"] .vue-publish-completion-more {
    position: relative !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="studio"] .vue-image-result-more > summary,
html body[data-page="studio"] .vue-publish-completion-more > summary {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.56em !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(33, 48, 66, 0.14) !important;
    color: #24303d !important;
    background: rgba(255, 255, 255, 0.72) !important;
    cursor: pointer !important;
    user-select: none !important;
    list-style: none !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 22px rgba(20, 42, 56, 0.08) !important;
}

html body[data-page="studio"] .vue-image-result-more > summary::-webkit-details-marker,
html body[data-page="studio"] .vue-publish-completion-more > summary::-webkit-details-marker {
    display: none !important;
}

html body[data-page="studio"] .vue-image-result-more[open],
html body[data-page="studio"] .vue-publish-completion-more[open] {
    z-index: 8 !important;
}

html body[data-page="studio"] .vue-image-result-more[open] > :not(summary),
html body[data-page="studio"] .vue-publish-completion-more[open] > :not(summary) {
    width: 100% !important;
    margin-top: 8px !important;
}

html body[data-page="studio"] .vue-post-create-actions.vue-publish-completion-actions {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(132px, auto)) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

html body[data-page="studio"] .vue-publish-completion-actions :is(.primary-btn, .secondary-btn),
html body[data-page="studio"] .vue-image-result-actions :is(.primary-btn, .secondary-btn),
html body[data-page="studio"] .vue-publish-completion-more > summary,
html body[data-page="studio"] .vue-image-result-more > summary {
    border-radius: 16px !important;
    white-space: nowrap !important;
}

html body[data-page="studio"] .vue-publish-completion-more > summary {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    background: rgba(255, 255, 255, 0.13) !important;
    box-shadow: none !important;
}

html body[data-page="studio"] .vue-publish-completion-more[open] {
    display: grid !important;
    gap: 8px !important;
}

html body[data-page="studio"] .vue-publish-completion-more .secondary-btn {
    justify-content: flex-start !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"] :is(.vue-image-result-more, .vue-publish-completion-more) > summary[data-ui-icon]::before {
        content: var(--ui-icon, "↻") !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 1.85em !important;
        height: 1.85em !important;
        flex: 0 0 1.85em !important;
        border-radius: 999px !important;
        color: currentColor !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92) 0 16%, transparent 17%),
            color-mix(in srgb, currentColor 13%, transparent) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        font-size: 0.72em !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 920px) {
    html body[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding: 38px 18px 46px !important;
        background-position: 60% 50% !important;
    }

    html body[data-page="home"] .vue-home-feature {
        display: none !important;
    }

    html body[data-page="studio"] .vue-post-create-actions.vue-publish-completion-actions,
    html body[data-page="studio"] .vue-image-result-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"] .vue-post-create-actions.vue-publish-completion-actions > *,
    html body[data-page="studio"] .vue-image-result-actions > * {
        width: 100% !important;
    }

    html body[data-page="studio"] .vue-image-result-more > summary,
    html body[data-page="studio"] .vue-publish-completion-more > summary {
        width: 100% !important;
    }
}

/* 20260710-oc-flow-v21: make action state obvious without adding more copy. */
html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button, .nav-button, .shared-nav-primary-action)[data-ui-icon] {
    min-height: 42px !important;
    gap: 0.68em !important;
    isolation: isolate !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        opacity 0.18s ease !important;
}

html body[data-page] :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon] {
    min-height: 50px !important;
    border-radius: 18px !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .link-button, .nav-button)[data-ui-icon] {
    border-radius: 15px !important;
}

html body[data-page] :is(button, a)[data-ui-icon]:is(:hover, :focus-visible)::before {
    transform: translateY(-1px) scale(1.03) !important;
}

html body[data-page] :is(button, a)[data-ui-icon]:disabled,
html body[data-page] button[data-ui-icon][aria-disabled="true"] {
    cursor: progress !important;
    opacity: 0.78 !important;
    transform: none !important;
    box-shadow: none !important;
}

html body[data-page] :is(button, a)[data-ui-icon]:disabled::before,
html body[data-page] button[data-ui-icon][aria-disabled="true"]::before {
    opacity: 0.76 !important;
    transform: none !important;
}

html body[data-page="studio"].studio-image-busy button[data-ui-icon="image"] {
    pointer-events: none !important;
    cursor: progress !important;
}

html body[data-page="studio"].studio-image-busy button[data-ui-icon="image"]::before,
html body[data-page="studio"] .vue-image-readiness[data-readiness-state="running"] .primary-btn[data-ui-icon="image"]::before {
    content: "" !important;
    background: conic-gradient(from 0deg, currentColor 0 74%, transparent 74% 100%) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
    animation: studioImageBusySpin 0.82s linear infinite !important;
}

html body[data-page="studio"].studio-image-busy .vue-image-readiness,
html body[data-page="studio"] .vue-image-readiness[data-readiness-state="running"] {
    border-color: rgba(31, 184, 194, 0.46) !important;
    background:
        linear-gradient(135deg, rgba(232, 252, 249, 0.86), rgba(255, 249, 211, 0.76)),
        rgba(255, 255, 255, 0.82) !important;
    box-shadow:
        0 0 0 1px rgba(31, 184, 194, 0.18),
        0 18px 48px rgba(31, 184, 194, 0.13) !important;
}

html body[data-page="studio"].studio-image-busy .vue-image-runway,
html body[data-page="studio"] .vue-image-runway[data-generation-phase="queued"],
html body[data-page="studio"] .vue-image-runway[data-generation-phase="drawing"],
html body[data-page="studio"] .vue-image-runway[data-generation-phase="storing"] {
    background: rgba(255, 255, 255, 0.68) !important;
    border-color: rgba(31, 184, 194, 0.22) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-image-busy .vue-image-readiness,
html body.studio-theme-night[data-page="studio"].studio-image-busy .vue-image-readiness,
html body.animaker-theme-night[data-page="studio"] .vue-image-readiness[data-readiness-state="running"],
html body.studio-theme-night[data-page="studio"] .vue-image-readiness[data-readiness-state="running"] {
    background:
        linear-gradient(135deg, rgba(31, 184, 194, 0.14), rgba(255, 229, 107, 0.10)),
        rgba(16, 19, 28, 0.82) !important;
    border-color: rgba(114, 230, 222, 0.28) !important;
    box-shadow:
        0 0 0 1px rgba(114, 230, 222, 0.10),
        0 18px 50px rgba(0, 0, 0, 0.32) !important;
}

@keyframes studioImageBusySpin {
    to {
        transform: rotate(1turn) !important;
    }
}

/* 20260710-oc-usability-v20-button-fallback: keep newly added actions from becoming plain text buttons. */
html body[data-page] :where(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button):not([data-ui-icon]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    letter-spacing: 0 !important;
}

html body[data-page] :where(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button):not([data-ui-icon])::before {
    content: "→" !important;
    width: 1.42em !important;
    height: 1.42em !important;
    flex: 0 0 1.42em !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: currentColor !important;
    background: color-mix(in srgb, currentColor 11%, transparent) !important;
    font-size: 0.82em !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent) !important;
}

html body[data-page] :where(.secondary-btn, .ghost-link, .nav-button, .link-button):not([data-ui-icon])::before {
    content: "•" !important;
    opacity: 0.9 !important;
}

html body[data-page] :where(.primary-btn, .primary-link):not([data-ui-icon])::before {
    color: #121720 !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72)),
        color-mix(in srgb, var(--cyan) 18%, transparent) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.48),
        0 10px 22px rgba(17, 27, 38, 0.14) !important;
}

/* 20260710-oc-usability-v20-flow-focus: final pass after live flow test. */
html body[data-page="home"]:not(.home-gateway-open) section.vue-home-hero {
    --home-hero-image: var(--oc-v13-day-art) !important;
    width: min(calc(100% - 36px), 1280px) !important;
    max-width: 1280px !important;
    min-height: clamp(560px, 74svh, 760px) !important;
    margin: 28px auto 52px !important;
    padding: clamp(34px, 5vw, 64px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.78fr) !important;
    align-items: center !important;
    gap: clamp(24px, 4vw, 54px) !important;
    border-radius: 32px !important;
    border: 1px solid rgba(30, 42, 58, 0.11) !important;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 36%, rgba(255, 255, 255, 0.34) 100%),
        var(--home-hero-image, var(--oc-v13-day-art)) !important;
    background-position: center center !important;
    background-size: cover !important;
    box-shadow: 0 28px 80px rgba(39, 56, 74, 0.13) !important;
}

html body.animaker-theme-night[data-page="home"]:not(.home-gateway-open) section.vue-home-hero {
    --home-hero-image: var(--oc-v13-night-art) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    background-image:
        linear-gradient(90deg, rgba(11, 15, 24, 0.94) 0%, rgba(11, 15, 24, 0.84) 38%, rgba(11, 15, 24, 0.36) 100%),
        var(--home-hero-night-image, var(--oc-v13-night-art)) !important;
    box-shadow: 0 30px 86px rgba(0, 0, 0, 0.32) !important;
}

html body[data-page="home"]:not(.home-gateway-open) .vue-home-hero-copy,
html body[data-page="home"]:not(.home-gateway-open) .vue-home-feature {
    max-width: none !important;
}

html body[data-page="home"]:not(.home-gateway-open) .vue-home-flow,
html body[data-page="home"]:not(.home-gateway-open) .vue-home-hero-routes,
html body[data-page="home"]:not(.home-gateway-open) .vue-home-actions {
    display: none !important;
}

html body[data-page="home"]:not(.home-gateway-open) .vue-home-feature {
    display: grid !important;
    min-height: clamp(420px, 56svh, 560px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
}

html body[data-page="home"]:not(.home-gateway-open) .vue-home-feature > img {
    height: 100% !important;
    min-height: clamp(420px, 56svh, 560px) !important;
    object-fit: cover !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft #studioVueRouteHero .vue-route-director,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft #studioVueRouteHero .vue-route-next {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, auto) !important;
    gap: 18px !important;
    align-items: center !important;
    padding: clamp(20px, 3vw, 30px) !important;
    border-radius: 26px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-copy > p,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-step-output,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-copy > small {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-actions {
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-actions .primary-btn {
    min-height: 54px !important;
    border-radius: 18px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-actions .secondary-btn:not(:first-child),
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-actions .vue-route-action-hint {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-progress {
    padding: 18px !important;
    border-radius: 22px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-steps button {
    min-height: 58px !important;
    padding: 10px 12px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-steps button small {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow .vue-publish-decision-head p,
html body[data-page="studio"].studio-focus-flow .vue-publish-showcase-head p,
html body[data-page="studio"].studio-focus-flow .vue-publish-card-body p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

html body[data-page="studio"].studio-focus-flow .vue-publish-main-actions {
    grid-template-columns: repeat(2, minmax(0, 0.74fr)) minmax(180px, 1fr) !important;
}

html body[data-page="studio"].studio-focus-flow .vue-publish-mode-list,
html body[data-page="studio"].studio-focus-flow .vue-publish-preview-gaps.is-inline {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow .vue-publish-manual:not([open]) .vue-publish-refine-body {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow .vue-publish-manual > summary {
    border-radius: 22px !important;
}

html body[data-page="studio"].studio-focus-flow :is(button, a, summary)[data-ui-icon] {
    gap: 0.58em !important;
}

@media (max-width: 920px) {
    html body[data-page="home"]:not(.home-gateway-open) section.vue-home-hero {
        width: min(calc(100% - 24px), 680px) !important;
        min-height: auto !important;
        margin: 16px auto 34px !important;
        padding: 24px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        border-radius: 24px !important;
    }

    html body[data-page="home"]:not(.home-gateway-open) .vue-home-feature {
        display: none !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-card,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-focus-actions,
    html body[data-page="studio"].studio-focus-flow .vue-publish-main-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 20260710-oc-usability-v20: one calm AI-first entry, balanced day/night, fewer visible controls. */
html body[data-page="home"],
html body[data-page="studio"] {
    --oc-v18-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp");
    --oc-v18-ink: #18202a;
    --oc-v18-text: #2d3a47;
    --oc-v18-muted: #6a7886;
    --oc-v18-line: rgba(28, 45, 62, 0.12);
    --oc-v18-panel: rgba(255, 255, 255, 0.82);
    --oc-v18-panel-solid: #ffffff;
    --oc-v18-page: #f7fbfd;
    --oc-v18-page-2: #fffaf0;
    --oc-v18-cyan: #1db8c5;
    --oc-v18-coral: #ff7d9d;
    --oc-v18-lemon: #f5de72;
    --oc-v18-shadow: 0 20px 60px rgba(27, 45, 64, 0.11);
    color: var(--oc-v18-text) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(29, 184, 197, 0.10), transparent 27rem),
        radial-gradient(circle at 100% 18%, rgba(255, 125, 157, 0.06), transparent 24rem),
        linear-gradient(180deg, var(--oc-v18-page), #ffffff 46%, var(--oc-v18-page-2)) !important;
}

html body[data-page="home"].animaker-theme-night,
html body[data-page="studio"].animaker-theme-night,
html body[data-page="studio"].studio-theme-night {
    --oc-v18-ink: #f8fbff;
    --oc-v18-text: #e9f0f7;
    --oc-v18-muted: #afbfce;
    --oc-v18-line: rgba(230, 241, 250, 0.14);
    --oc-v18-panel: rgba(18, 27, 39, 0.76);
    --oc-v18-panel-solid: #172231;
    --oc-v18-page: #111923;
    --oc-v18-page-2: #111720;
    --oc-v18-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
    color: var(--oc-v18-text) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(29, 184, 197, 0.15), transparent 28rem),
        radial-gradient(circle at 100% 14%, rgba(255, 125, 157, 0.08), transparent 25rem),
        linear-gradient(180deg, var(--oc-v18-page), #121d2a 52%, var(--oc-v18-page-2)) !important;
}

html body[data-page] :is(.topbar, .shared-nav) {
    border-color: var(--oc-v18-line) !important;
    background: color-mix(in srgb, var(--oc-v18-panel-solid) 88%, transparent) !important;
    box-shadow: 0 12px 34px rgba(32, 45, 60, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
}

html body[data-page].animaker-theme-night :is(.topbar, .shared-nav),
html body[data-page].studio-theme-night :is(.topbar, .shared-nav) {
    background: color-mix(in srgb, var(--oc-v18-panel-solid) 86%, transparent) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22) !important;
}

html body[data-page] :is(.topbar a, .shared-nav a, .shared-nav button, .brand) {
    color: var(--oc-v18-ink) !important;
}

html body[data-page] :is(.topbar .active, .shared-nav-links a.active) {
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: 0 8px 20px rgba(25, 42, 57, 0.08) !important;
}

html body[data-page].animaker-theme-night :is(.topbar .active, .shared-nav-links a.active),
html body[data-page].studio-theme-night :is(.topbar .active, .shared-nav-links a.active) {
    background: rgba(255, 255, 255, 0.10) !important;
}

html body[data-page="home"] .vue-home-gateway,
html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
html body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    --home-gateway-image: var(--oc-v18-art) !important;
    min-height: 100svh !important;
    display: grid !important;
    place-items: center start !important;
    padding: clamp(28px, 6vw, 96px) !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.76) 38%, rgba(255, 255, 255, 0.18) 72%, rgba(255, 255, 255, 0.02) 100%),
        var(--home-gateway-image) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    --home-gateway-image: var(--oc-v18-art) !important;
    background-image:
        linear-gradient(90deg, rgba(8, 14, 22, 0.92) 0%, rgba(8, 14, 22, 0.78) 42%, rgba(8, 14, 22, 0.28) 76%, rgba(8, 14, 22, 0.08) 100%),
        var(--home-gateway-image) !important;
    filter: saturate(0.88) brightness(0.78) contrast(1.04) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    width: min(680px, 92vw) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--oc-v18-ink) !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    color: var(--oc-v18-cyan) !important;
    letter-spacing: 0.18em !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    margin: 12px 0 !important;
    color: var(--oc-v18-ink) !important;
    font-size: clamp(54px, 8.6vw, 124px) !important;
    line-height: 0.92 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 24em !important;
    color: var(--oc-v18-text) !important;
    font-size: clamp(17px, 1.7vw, 24px) !important;
    line-height: 1.55 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy :is(span, h1, p),
html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    color: #f8fbff !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    --home-hero-image: var(--oc-v18-art) !important;
    width: min(calc(100% - 36px), 1280px) !important;
    max-width: 1280px !important;
    min-height: clamp(560px, 72svh, 760px) !important;
    margin: clamp(18px, 3vw, 34px) auto clamp(32px, 5vw, 72px) !important;
    padding: clamp(26px, 4vw, 58px) !important;
    display: grid !important;
    grid-template-columns: minmax(330px, 0.82fr) minmax(360px, 0.9fr) !important;
    align-items: center !important;
    gap: clamp(18px, 4vw, 56px) !important;
    border: 1px solid var(--oc-v18-line) !important;
    border-radius: 32px !important;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0.32) 68%, rgba(255, 255, 255, 0.08) 100%),
        var(--home-hero-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: var(--oc-v18-shadow) !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    --home-hero-image: var(--oc-v18-art) !important;
    border-color: var(--oc-v18-line) !important;
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.92) 0%, rgba(12, 18, 27, 0.78) 42%, rgba(12, 18, 27, 0.36) 72%, rgba(12, 18, 27, 0.12) 100%),
        var(--home-hero-image) !important;
    filter: saturate(0.9) brightness(0.86) contrast(1.03) !important;
    box-shadow: var(--oc-v18-shadow) !important;
}

html body[data-page="home"] .vue-home-copy {
    width: min(100%, 560px) !important;
}

html body[data-page="home"] .vue-home-copy h1 {
    color: var(--oc-v18-ink) !important;
    font-size: clamp(44px, 5.8vw, 82px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 25em !important;
    color: var(--oc-v18-text) !important;
    font-size: 16px !important;
}

html body[data-page="home"] .vue-home-brief {
    width: min(100%, 540px) !important;
    margin-top: 20px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid var(--oc-v18-line) !important;
    background: color-mix(in srgb, var(--oc-v18-panel) 94%, transparent) !important;
    box-shadow: 0 16px 46px rgba(28, 44, 62, 0.10) !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 88px !important;
    border-radius: 18px !important;
    border-color: var(--oc-v18-line) !important;
    background: color-mix(in srgb, var(--oc-v18-panel-solid) 88%, transparent) !important;
    color: var(--oc-v18-ink) !important;
}

html body[data-page="home"] .vue-home-intent-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-intent-row button,
html body[data-page="home"] .vue-home-brief-chips button {
    border-radius: 16px !important;
    border-color: var(--oc-v18-line) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: var(--oc-v18-ink) !important;
}

html body[data-page="home"].animaker-theme-night .vue-home-intent-row button,
html body[data-page="home"].animaker-theme-night .vue-home-brief-chips button {
    background: rgba(255, 255, 255, 0.10) !important;
}

html body[data-page="home"] .vue-home-brief-output {
    display: none !important;
}

html body[data-page="home"] .vue-home-brief.has-brief .vue-home-brief-output {
    display: grid !important;
}

html body[data-page="home"] .vue-home-actions,
html body[data-page="home"] .vue-home-flow,
html body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

html body[data-page="home"] .vue-home-feature {
    display: grid !important;
    max-width: 420px !important;
    justify-self: end !important;
    border-radius: 26px !important;
    border: 1px solid var(--oc-v18-line) !important;
    background: color-mix(in srgb, var(--oc-v18-panel) 84%, transparent) !important;
    box-shadow: 0 18px 50px rgba(28, 44, 62, 0.13) !important;
    overflow: hidden !important;
}

html body[data-page="home"] .vue-home-feature > img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: 70% 50% !important;
}

html body[data-page="studio"] .page-title.studio-hero-title {
    width: min(calc(100% - 32px), 1240px) !important;
    min-height: auto !important;
    margin: clamp(16px, 3vw, 34px) auto 18px !important;
    padding: clamp(22px, 4vw, 46px) !important;
    border-radius: 28px !important;
    border: 1px solid var(--oc-v18-line) !important;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.78) 52%, rgba(255, 255, 255, 0.22) 100%),
        var(--oc-v18-art) 66% 50% / cover no-repeat !important;
    box-shadow: var(--oc-v18-shadow) !important;
}

html body[data-page="studio"].studio-theme-night .page-title.studio-hero-title,
html body.animaker-theme-night[data-page="studio"] .page-title.studio-hero-title {
    background:
        linear-gradient(100deg, rgba(12, 18, 28, 0.94) 0%, rgba(12, 18, 28, 0.80) 54%, rgba(12, 18, 28, 0.20) 100%),
        var(--oc-v18-art) 66% 50% / cover no-repeat !important;
    filter: saturate(0.9) brightness(0.88) contrast(1.03) !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    grid-template-columns: minmax(0, 0.86fr) minmax(300px, 0.74fr) !important;
    gap: clamp(16px, 3vw, 36px) !important;
    padding: 16px !important;
    border-radius: 24px !important;
    border: 1px solid var(--oc-v18-line) !important;
    background: color-mix(in srgb, var(--oc-v18-panel) 88%, transparent) !important;
    box-shadow: none !important;
}

html body[data-page="studio"] :is(.studio-launch-promise, .studio-launch-mini-path, .studio-brief-slots, .studio-hero-beats) {
    display: none !important;
}

html body[data-page="studio"] .studio-launchpad-copy textarea {
    min-height: 96px !important;
    border-radius: 18px !important;
    border-color: var(--oc-v18-line) !important;
    background: color-mix(in srgb, var(--oc-v18-panel-solid) 88%, transparent) !important;
    color: var(--oc-v18-ink) !important;
}

html body[data-page="studio"] .studio-launchpad-actions {
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) repeat(2, auto) !important;
    gap: 10px !important;
}

html body[data-page="studio"] .studio-launchpad-actions :is(button, a) {
    border-radius: 16px !important;
}

html body[data-page="studio"] .studio-launchpad-examples {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
}

html body[data-page="studio"] .studio-launchpad-examples span {
    flex-basis: 100% !important;
    color: var(--oc-v18-muted) !important;
}

html body[data-page="studio"] .studio-launchpad-examples button {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border-color: var(--oc-v18-line) !important;
}

html body[data-page="studio"].studio-theme-night .studio-launchpad-examples button,
html body.animaker-theme-night[data-page="studio"] .studio-launchpad-examples button {
    background: rgba(255, 255, 255, 0.10) !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    border-radius: 22px !important;
    overflow: hidden !important;
    background: color-mix(in srgb, var(--oc-v18-panel-solid) 82%, transparent) !important;
    border: 1px solid var(--oc-v18-line) !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: 68% 50% !important;
}

html body[data-page="studio"] :is(.vue-assist-card, .vue-core-card, .vue-image-dock, .vue-story-dock, .vue-publish-dock, .vue-board-dock, .studio-advanced-start) {
    border-radius: 22px !important;
    border-color: var(--oc-v18-line) !important;
    background: color-mix(in srgb, var(--oc-v18-panel) 90%, transparent) !important;
    box-shadow: 0 14px 38px rgba(29, 45, 63, 0.08) !important;
}

html body[data-page="studio"].studio-theme-night :is(.vue-assist-card, .vue-core-card, .vue-image-dock, .vue-story-dock, .vue-publish-dock, .vue-board-dock, .studio-advanced-start),
html body.animaker-theme-night[data-page="studio"] :is(.vue-assist-card, .vue-core-card, .vue-image-dock, .vue-story-dock, .vue-publish-dock, .vue-board-dock, .studio-advanced-start) {
    background: color-mix(in srgb, var(--oc-v18-panel) 90%, transparent) !important;
}

@media (max-width: 920px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero,
    html body[data-page="studio"] .studio-launchpad-lite {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] section.vue-home-hero {
        width: min(calc(100% - 20px), 720px) !important;
        min-height: auto !important;
        margin: 10px auto 28px !important;
        padding: 20px !important;
        border-radius: 24px !important;
    }

    html body[data-page="home"] .vue-home-feature {
        display: none !important;
    }

    html body[data-page="studio"] .studio-launchpad-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260710-oc-usability-v20-specificity: beat day/night hero card rules with equal specificity. */
html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    --home-hero-image: var(--oc-v13-day-art) !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: clamp(640px, 82svh, 880px) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(48px, 6vw, 88px) max(24px, calc((100vw - 1180px) / 2)) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.97) 0%, rgba(250, 253, 255, 0.84) 38%, rgba(250, 253, 255, 0.26) 76%, rgba(250, 253, 255, 0.05) 100%),
        var(--home-hero-image, var(--oc-v13-day-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: none !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    --home-hero-image: var(--oc-v13-night-art) !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: clamp(640px, 82svh, 880px) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(48px, 6vw, 88px) max(24px, calc((100vw - 1180px) / 2)) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.94) 0%, rgba(12, 18, 27, 0.78) 42%, rgba(12, 18, 27, 0.34) 78%, rgba(12, 18, 27, 0.08) 100%),
        var(--home-hero-night-image, var(--oc-v13-night-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: none !important;
}

html body[data-page="home"] .vue-home-gateway,
html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
html body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    --home-gateway-image: var(--oc-v13-day-art) !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100svh !important;
    inset: 0 !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.96) 0%, rgba(250, 253, 255, 0.72) 42%, rgba(250, 253, 255, 0.16) 100%),
        var(--home-gateway-image, var(--oc-v13-day-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    --home-gateway-image: var(--oc-v13-night-art) !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100svh !important;
    inset: 0 !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.92) 0%, rgba(12, 18, 27, 0.74) 44%, rgba(12, 18, 27, 0.16) 100%),
        var(--home-gateway-night-image, var(--oc-v13-night-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
}

@media (max-width: 920px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: 100vw !important;
        min-height: auto !important;
        margin: 0 calc(50% - 50vw) !important;
        padding: 38px 18px 46px !important;
        background-position: 60% 50% !important;
    }
}

/* 20260710-oc-usability-v20: lighter AI-first home, real day/night art, quieter result actions. */
html body[data-page] {
    --oc-v13-day-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp");
    --oc-v13-night-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp");
    --oc-v13-ink: #151a22;
    --oc-v13-text: #26313d;
    --oc-v13-muted: #647281;
    --oc-v13-panel: rgba(255, 255, 255, 0.76);
    --oc-v13-line: rgba(26, 39, 55, 0.12);
    --oc-v13-page: #f7fbfd;
    --oc-v13-warm: #fff8ea;
    --oc-v13-cyan: #16b8c7;
    --oc-v13-coral: #ff7c9d;
    --oc-v13-lemon: #f6df68;
    color: var(--oc-v13-text) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(22, 184, 199, 0.10), transparent 30rem),
        radial-gradient(circle at 100% 10%, rgba(255, 124, 157, 0.07), transparent 24rem),
        linear-gradient(180deg, var(--oc-v13-page), #ffffff 48%, var(--oc-v13-warm)) !important;
}

html body[data-page].animaker-theme-night,
html body[data-page].studio-theme-night {
    --oc-v13-ink: #f8fbff;
    --oc-v13-text: #e8f0f8;
    --oc-v13-muted: #aebccb;
    --oc-v13-panel: rgba(18, 26, 38, 0.74);
    --oc-v13-line: rgba(232, 242, 250, 0.14);
    --oc-v13-page: #111923;
    --oc-v13-warm: #101720;
    background:
        radial-gradient(circle at 0% 0%, rgba(22, 184, 199, 0.15), transparent 30rem),
        radial-gradient(circle at 100% 8%, rgba(255, 124, 157, 0.08), transparent 24rem),
        linear-gradient(180deg, var(--oc-v13-page), #151f2b 48%, var(--oc-v13-warm)) !important;
}

html body[data-page="home"] .vue-home-gateway,
html body[data-page="home"] section.vue-home-hero,
html body[data-page="studio"] .studio-hero-title {
    --home-gateway-image: var(--oc-v13-day-art);
    --home-hero-image: var(--oc-v13-day-art);
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="studio"] .studio-hero-title,
html body[data-page="studio"].studio-theme-night .studio-hero-title {
    --home-gateway-image: var(--home-gateway-night-image, var(--oc-v13-night-art));
    --home-hero-image: var(--home-hero-night-image, var(--oc-v13-night-art));
}

html body[data-page="home"] .vue-home-gateway,
html body[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.96) 0%, rgba(250, 253, 255, 0.82) 38%, rgba(250, 253, 255, 0.25) 76%, rgba(250, 253, 255, 0.04) 100%),
        var(--home-hero-image, var(--oc-v13-day-art)) !important;
    background-position: 58% 50% !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.92) 0%, rgba(12, 18, 27, 0.76) 42%, rgba(12, 18, 27, 0.32) 78%, rgba(12, 18, 27, 0.08) 100%),
        var(--home-hero-night-image, var(--oc-v13-night-art)) !important;
}

html body[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.74) 58%, rgba(255, 255, 255, 0.18) 100%),
        var(--oc-v13-day-art) 60% 50% / cover no-repeat !important;
}

html body[data-page="studio"].studio-theme-night .studio-hero-title,
html body.animaker-theme-night[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(12, 18, 28, 0.93) 0%, rgba(12, 18, 28, 0.78) 58%, rgba(12, 18, 28, 0.20) 100%),
        var(--oc-v13-night-art) 62% 50% / cover no-repeat !important;
}

html body[data-page="home"] .vue-home-actions,
html body[data-page="home"] .vue-home-flow,
html body[data-page="home"] .vue-home-hero-routes,
html body[data-page="home"] .vue-home-creation {
    display: none !important;
}

html body[data-page="home"] .vue-home-brief {
    margin-top: 20px !important;
    max-width: 620px !important;
    border-radius: 28px !important;
    background: color-mix(in srgb, var(--oc-v13-panel) 92%, transparent) !important;
    border: 1px solid var(--oc-v13-line) !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 34em !important;
}

html body[data-page="home"] .vue-home-next {
    width: min(calc(100% - 32px), 1180px) !important;
    margin-top: 28px !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--oc-v13-panel) 86%, transparent) !important;
    border: 1px solid var(--oc-v13-line) !important;
}

html body[data-page="studio"] .vue-image-result-actions {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

html body[data-page="studio"] .vue-image-result-more {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

html body[data-page="studio"] .vue-image-result-more > summary {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    border: 1px solid var(--oc-v13-line) !important;
    color: var(--oc-v13-text) !important;
    background: color-mix(in srgb, var(--oc-v13-panel) 78%, transparent) !important;
    cursor: pointer !important;
}

html body[data-page="studio"] .vue-image-result-more[open] {
    display: grid !important;
    gap: 8px !important;
}

html body[data-page="studio"] .vue-image-result-more[open] > :not(summary) {
    width: 100% !important;
}

html body[data-page="studio"] .vue-image-runway[data-generation-phase="done"] {
    display: none !important;
}

@media (max-width: 760px) {
    html body[data-page="studio"] .vue-image-result-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260710-oc-flow-v4-home-icon-fix: replace remaining forced glyphs in home/navigation action zones. */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] .shared-nav-actions .shared-nav-primary-action[data-ui-icon="spark"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="spark"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="image"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="publish"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="export"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="save"]::before,
    html body[data-page="home"] :is(
        .vue-home-brief-actions,
        .vue-home-actions,
        .vue-home-flow-head,
        .vue-home-empty-band,
        .vue-home-hero-routes,
        .empty-state
    ) :is(a, button, .primary-btn, .secondary-btn, .primary-link)[data-ui-icon]::before {
        content: "" !important;
        display: inline-block !important;
        width: 1.16em !important;
        height: 1.16em !important;
        flex: 0 0 1.16em !important;
        border-radius: 0 !important;
        color: currentColor !important;
        background: currentColor !important;
        opacity: 0.92 !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
    }
}

/* 20260710-oc-flow-v12-icon-last-word: action icons win after all legacy mask overrides. */
html body[data-page] :is(
    .primary-btn,
    .primary-link,
    .secondary-btn,
    .ghost-link,
    .link-button,
    .nav-button,
    .shared-nav-primary-action
)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.62em !important;
    letter-spacing: 0 !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(
        .primary-btn,
        .primary-link,
        .secondary-btn,
        .ghost-link,
        .link-button,
        .nav-button,
        .shared-nav-primary-action
    )[data-ui-icon]::before {
        content: var(--ui-icon, "•") !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 1.95em !important;
        height: 1.95em !important;
        flex: 0 0 1.95em !important;
        border-radius: 999px !important;
        color: currentColor !important;
        background:
            radial-gradient(circle at 33% 23%, rgba(255, 255, 255, 0.95) 0 16%, transparent 17%),
            color-mix(in srgb, currentColor 12%, transparent) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        font-size: 0.74em !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent),
            0 8px 18px rgba(21, 32, 46, 0.11) !important;
        transform: none !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before {
        width: 2.12em !important;
        height: 2.12em !important;
        flex-basis: 2.12em !important;
        color: #111722 !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98) 0 17%, transparent 18%),
            linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--oc-v6-cyan, #1ab9c6) 28%, #ffffff)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.56),
            0 10px 24px rgba(20, 42, 56, 0.16) !important;
    }

    html body[data-page].animaker-theme-night :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before,
    html body[data-page].studio-theme-night :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before {
        color: var(--oc-v6-ink, #f8fbff) !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.86) 0 15%, transparent 16%),
            linear-gradient(135deg, rgba(134, 242, 223, 0.24), rgba(255, 227, 109, 0.18)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.12),
            0 12px 28px rgba(0, 0, 0, 0.24) !important;
    }
}

/* 20260710-oc-flow-v12-icon-final: final override after legacy mask rules. */
html body[data-page] :is(
    .primary-btn,
    .primary-link,
    .secondary-btn,
    .ghost-link,
    .link-button,
    .nav-button,
    .shared-nav-primary-action
)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.62em !important;
    letter-spacing: 0 !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(
        .primary-btn,
        .primary-link,
        .secondary-btn,
        .ghost-link,
        .link-button,
        .nav-button,
        .shared-nav-primary-action
    )[data-ui-icon]::before {
        content: var(--ui-icon, "•") !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 1.95em !important;
        height: 1.95em !important;
        flex: 0 0 1.95em !important;
        border-radius: 999px !important;
        color: currentColor !important;
        background:
            radial-gradient(circle at 33% 23%, rgba(255, 255, 255, 0.95) 0 16%, transparent 17%),
            color-mix(in srgb, currentColor 12%, transparent) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        font-size: 0.74em !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent),
            0 8px 18px rgba(21, 32, 46, 0.11) !important;
        transform: none !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before {
        width: 2.12em !important;
        height: 2.12em !important;
        flex-basis: 2.12em !important;
        color: #111722 !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98) 0 17%, transparent 18%),
            linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--oc-v6-cyan, #1ab9c6) 28%, #ffffff)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.56),
            0 10px 24px rgba(20, 42, 56, 0.16) !important;
    }

    html body[data-page].animaker-theme-night :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before,
    html body[data-page].studio-theme-night :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before {
        color: var(--oc-v6-ink, #f8fbff) !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.86) 0 15%, transparent 16%),
            linear-gradient(135deg, rgba(134, 242, 223, 0.24), rgba(255, 227, 109, 0.18)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.12),
            0 12px 28px rgba(0, 0, 0, 0.24) !important;
    }
}

html body[data-page="studio"] .vue-image-readiness[data-readiness-state="done"] .vue-image-primary-actions,
html body[data-page="studio"] .vue-image-readiness[data-readiness-state="done"] .vue-image-done-actions:has(+ .vue-image-result-card) {
    display: none !important;
}

html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="image"]::before,
html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="spark"]::before,
html body[data-page] .shared-nav-actions .shared-nav-primary-action[data-ui-icon="spark"]::before,
html body[data-page] .shared-ai-mini-go[data-ui-icon]::before {
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.70) 48%, transparent 49%),
        linear-gradient(135deg, color-mix(in srgb, var(--action9500-cyan) 72%, #fff), color-mix(in srgb, var(--action9500-gold) 74%, #fff)) !important;
}

html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="publish"]::before,
html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="export"]::before,
html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="save"]::before {
    background:
        linear-gradient(135deg, color-mix(in srgb, #3ddc97 76%, #fff), color-mix(in srgb, var(--action9500-cyan) 64%, #fff)) !important;
}

html body[data-page] :is(.vue-field-suggestions button, .vue-visual-kit-options button, .vue-filter-chip, .vue-template-chip, .vue-feed-filter-chip, .vue-sort-chip)[data-ui-icon]::before {
    width: 0.95em !important;
    height: 0.95em !important;
    flex-basis: 0.95em !important;
    border-radius: 0 !important;
    background: currentColor !important;
    opacity: 0.52 !important;
    -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
    mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
    box-shadow: none !important;
    content: "" !important;
}

html body[data-page="studio"] :is(.vue-assist-one-next, .vue-image-readiness, .vue-route-director-actions, .vue-step-mission-actions) :is(.primary-btn, .secondary-btn)[data-ui-icon] {
    width: auto !important;
}

@media (max-width: 760px) {
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon],
    html body[data-page] .shared-nav-actions .shared-nav-primary-action[data-ui-icon] {
        min-height: 46px !important;
        padding-inline: 14px 16px !important;
    }

    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon]::before,
    html body[data-page] .shared-nav-actions .shared-nav-primary-action[data-ui-icon]::before {
        width: 26px !important;
        height: 26px !important;
        flex-basis: 26px !important;
        font-size: 13px !important;
    }
}

/* 20260708-action-led-v2800: guide by actions, not by adding more copy. */
html body[data-page] .shared-ai-dock {
    grid-template-columns: minmax(148px, 0.58fr) minmax(240px, 0.9fr) minmax(300px, 1.1fr) auto !important;
    border-radius: 24px !important;
}

html body[data-page] .shared-ai-dock.has-brief {
    border-color: rgba(31, 177, 191, 0.34) !important;
    box-shadow: 0 22px 58px rgba(31, 177, 191, 0.16) !important;
}

html body[data-page] .shared-ai-dock-picks {
    display: flex !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
}

html body[data-page] .shared-ai-dock-picks::-webkit-scrollbar {
    display: none !important;
}

html body[data-page] .shared-ai-dock-picks button {
    flex: 0 0 auto !important;
    max-width: 220px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--site-line, rgba(18, 28, 40, 0.12)) !important;
    border-radius: 999px !important;
    color: color-mix(in srgb, var(--site-text, #2b3747) 84%, var(--site-ink, #121926)) !important;
    background: color-mix(in srgb, var(--site-panel-strong, #ffffff) 76%, transparent) !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

html body[data-page] .shared-ai-dock-picks button:hover,
html body[data-page] .shared-ai-dock-picks button.active {
    border-color: rgba(31, 177, 191, 0.38) !important;
    color: #10151f !important;
    background: linear-gradient(135deg, rgba(214, 255, 247, 0.95), rgba(255, 244, 144, 0.9)) !important;
    box-shadow: 0 12px 26px rgba(31, 177, 191, 0.12) !important;
    transform: translateY(-1px) !important;
}

html body.animaker-theme-night[data-page] .shared-ai-dock-picks button {
    border-color: rgba(232, 244, 255, 0.14) !important;
    color: rgba(232, 244, 255, 0.86) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html body.animaker-theme-night[data-page] .shared-ai-dock-picks button:hover,
html body.animaker-theme-night[data-page] .shared-ai-dock-picks button.active {
    border-color: rgba(139, 239, 229, 0.34) !important;
    color: #10151f !important;
    background: linear-gradient(135deg, #bff7ec 0%, #fff06e 100%) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-dock {
    display: grid !important;
    gap: 14px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-next,
html body[data-page="studio"].studio-wizard-ready .vue-route-focus-card,
html body[data-page="studio"].studio-wizard-ready .vue-route-progress {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director {
    padding: clamp(14px, 1.8vw, 20px) !important;
    border: 1px solid var(--studio-line-v1900) !important;
    border-radius: 26px !important;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 255, 251, 0.7)),
            var(--studio-panel-v1900) !important;
    box-shadow: var(--studio-shadow-v1900) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-main {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy {
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy span {
    width: fit-content !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(31, 177, 191, 0.26) !important;
    border-radius: 999px !important;
    color: rgba(31, 140, 154, 0.98) !important;
    background: rgba(224, 255, 249, 0.72) !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    line-height: 26px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy h2 {
    margin: 0 !important;
    color: var(--studio-ink, #121926) !important;
    font-size: clamp(24px, 3vw, 42px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy p {
    max-width: 24em !important;
    margin: 0 !important;
    color: rgba(57, 71, 90, 0.78) !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-stage {
    display: grid !important;
    grid-template-columns: minmax(118px, 0.34fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-step,
html body[data-page="studio"].studio-wizard-ready .vue-route-director-focus,
html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row {
    border: 1px solid rgba(20, 32, 48, 0.1) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-step {
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 6px !important;
    min-height: 112px !important;
    padding: 12px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-step span,
html body[data-page="studio"].studio-wizard-ready .vue-route-director-focus span,
html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button span {
    color: rgba(31, 140, 154, 0.96) !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-step strong {
    color: var(--studio-ink, #121926) !important;
    font-size: clamp(20px, 2vw, 30px) !important;
    line-height: 1 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-step small {
    color: rgba(57, 71, 90, 0.72) !important;
    font-weight: 850 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-focus {
    display: grid !important;
    align-content: center !important;
    gap: 7px !important;
    min-height: 112px !important;
    padding: 12px 14px !important;
    background:
            radial-gradient(circle at 0% 0%, rgba(31, 177, 191, 0.13), transparent 58%),
            rgba(255, 255, 255, 0.76) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-focus strong {
    color: var(--studio-ink, #121926) !important;
    font-size: clamp(22px, 2.4vw, 36px) !important;
    line-height: 1 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-focus p {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    background: rgba(247, 252, 250, 0.76) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button {
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 4px !important;
    min-height: 66px !important;
    min-width: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(31, 177, 191, 0.18) !important;
    border-radius: 16px !important;
    color: var(--studio-ink, #121926) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--studio-ink, #121926) !important;
    font-size: 0.86rem !important;
    font-weight: 950 !important;
    line-height: 1.22 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button:hover {
    border-color: rgba(31, 177, 191, 0.42) !important;
    background: linear-gradient(135deg, rgba(225, 255, 249, 0.96), rgba(255, 244, 157, 0.9)) !important;
    box-shadow: 0 14px 30px rgba(31, 177, 191, 0.13) !important;
    transform: translateY(-1px) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-progress {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-progress button {
    min-height: 54px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions {
    display: grid !important;
    grid-template-columns: minmax(180px, 0.7fr) auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 10px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions .primary-btn {
    min-height: 52px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
    box-shadow: 0 14px 30px rgba(31, 177, 191, 0.14) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions .secondary-btn,
html body[data-page="studio"].studio-wizard-ready .vue-route-mode-chip {
    min-height: 44px !important;
    border-radius: 16px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions small {
    overflow: hidden !important;
    color: rgba(57, 71, 90, 0.66) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director {
    background:
            linear-gradient(135deg, rgba(43, 55, 67, 0.9), rgba(32, 42, 53, 0.86)),
            var(--studio-panel-v1900) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director-step,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director-focus,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-choice-row,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director-step,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director-focus,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-choice-row {
    border-color: rgba(232, 244, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-choice-row button,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-choice-row button {
    border-color: rgba(232, 244, 255, 0.12) !important;
    color: rgba(245, 248, 250, 0.9) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-choice-row button strong,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-choice-row button strong,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director-copy h2,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director-step strong,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director-focus strong,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director-copy h2,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director-step strong,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director-focus strong {
    color: rgba(245, 248, 250, 0.94) !important;
}

@media (max-width: 1040px) {
    html body[data-page] .shared-ai-dock {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    html body[data-page] .shared-ai-dock-copy,
    html body[data-page] .shared-ai-dock label,
    html body[data-page] .shared-ai-dock-picks {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 860px) {
    html body[data-page] .shared-ai-dock-picks button {
        max-width: 260px !important;
    }

    html body[data-page].animaker-ai-dock-visible main {
        padding-bottom: 286px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-route-director-main,
    html body[data-page="studio"].studio-wizard-ready .vue-route-director-stage,
    html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row,
    html body[data-page="studio"].studio-wizard-ready .vue-route-director-progress {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions small,
    html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy p {
        display: none !important;
    }
}

@media (max-width: 520px) {
    html body[data-page] .shared-ai-dock {
        width: min(420px, calc(100vw - 20px)) !important;
        padding: 9px !important;
    }

    html body[data-page] .shared-ai-dock-copy strong {
        font-size: 14px !important;
    }

    html body[data-page] .shared-ai-dock-picks {
        margin-right: -4px !important;
    }

    html body[data-page].animaker-ai-dock-visible main {
        padding-bottom: 318px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button strong {
        white-space: normal !important;
    }
}

/* 20260708-oc-gateway-v3200-final-tail: ensure late legacy cascades cannot override the new gateway/art direction. */
html body[data-page] {
    --oc-v3200-art-final: url("/animaker/img/generated/ux/ai-oc-creator-board-v3200.webp");
}

html body[data-page].animaker-theme-day,
html body[data-page]:not(.animaker-theme-night) {
    color: #3a4656 !important;
    background:
            radial-gradient(circle at 8% 0%, rgba(42, 209, 199, 0.13), transparent 28rem),
            linear-gradient(180deg, #f6fbfa 0%, #f7fcfa 52%, #fff8e9 100%) !important;
}

html body[data-page].animaker-theme-night {
    color: #d8e2eb !important;
    background:
            radial-gradient(circle at 12% 0%, rgba(42, 209, 199, 0.13), transparent 27rem),
            linear-gradient(180deg, #121a25 0%, #1c2835 58%, #111923 100%) !important;
}

html body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
}

html body[data-page="home"].home-gateway-open main {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav, #sharedNavApp) {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background-color: #f6fbfa !important;
}

html body[data-page="home"] .vue-home-gateway,
html body[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(248, 253, 252, 0.94) 0%, rgba(248, 253, 252, 0.7) 35%, rgba(248, 253, 252, 0.17) 67%, rgba(248, 253, 252, 0.02) 100%),
            var(--oc-v3200-art-final) !important;
    background-position: center center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(13, 20, 30, 0.92) 0%, rgba(13, 20, 30, 0.7) 38%, rgba(13, 20, 30, 0.3) 72%, rgba(13, 20, 30, 0.1) 100%),
            var(--oc-v3200-art-final) !important;
}

html body[data-page="home"] .vue-home-gateway-steps,
html body[data-page="home"] .vue-home-flow {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 20em !important;
    font-size: clamp(16px, 1.4vw, 21px) !important;
    font-weight: 850 !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    left: clamp(18px, 7rem, 108px) !important;
    right: auto !important;
    bottom: clamp(34px, 9vh, 92px) !important;
    transform: none !important;
}

html body[data-page="home"] section.vue-home-hero {
    width: 100% !important;
    min-height: calc(100svh - 72px) !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 440px) !important;
    border-radius: 0 !important;
}

html body[data-page="home"] .vue-home-copy h1 {
    max-width: 7em !important;
    font-size: clamp(46px, 6.2vw, 86px) !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    display: block !important;
    max-width: 25em !important;
}

html body[data-page="home"] .vue-home-brief {
    max-width: 620px !important;
    padding: 10px !important;
    border-radius: 26px !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 64px !important;
}

html body[data-page="home"] .vue-home-brief-chips {
    max-height: 104px !important;
    overflow: hidden !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    min-height: 96px !important;
}

html body[data-page="home"] .vue-home-feature > img,
html body[data-page="studio"] .studio-launchpad-preview img {
    object-position: 55% 42% !important;
}

html body.animaker-theme-night[data-page] img[src*="/img/generated/"],
html body[data-page="studio"].studio-theme-night img[src*="/img/generated/"] {
    filter: brightness(0.78) saturate(0.88) contrast(1.08) !important;
}

html body[data-page] :is(.primary-link, .primary-btn) {
    border-color: rgba(42, 209, 199, 0.32) !important;
    color: #10151f !important;
    background: linear-gradient(135deg, #c2fff3 0%, #fff178 100%) !important;
    box-shadow: 0 15px 34px rgba(42, 209, 199, 0.16) !important;
}

html body[data-page].animaker-theme-night :is(.primary-link, .primary-btn),
html body[data-page="studio"].studio-theme-night :is(.primary-link, .primary-btn) {
    border-color: rgba(42, 209, 199, 0.42) !important;
    color: #f7fbff !important;
    background: linear-gradient(135deg, rgba(27, 44, 58, 0.98), rgba(25, 35, 47, 0.96)) !important;
}

@media (max-width: 1180px) {
    html body[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 980px) {
    html body[data-page="home"] .vue-home-gateway,
    html body[data-page="home"] section.vue-home-hero {
        background-position: 57% center !important;
    }

    html body[data-page="home"] .vue-home-gateway-cue {
        left: 16px !important;
        bottom: 24px !important;
    }

    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-brief-chips {
        max-height: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 20260708-oc-gateway-v3200: one-click gateway, generated default art, balanced day/night surfaces. */
html body[data-page] {
    --oc-v3200-art: url("/animaker/img/generated/ux/ai-oc-creator-board-v3200.webp");
    --oc-v3200-day-bg: #f6fbfa;
    --oc-v3200-day-bg-2: #fff8e9;
    --oc-v3200-day-panel: rgba(255, 255, 255, 0.78);
    --oc-v3200-day-panel-strong: rgba(255, 255, 255, 0.93);
    --oc-v3200-day-ink: #111827;
    --oc-v3200-day-text: #3a4656;
    --oc-v3200-day-muted: #727d8b;
    --oc-v3200-day-line: rgba(17, 24, 39, 0.11);
    --oc-v3200-night-bg: #121a25;
    --oc-v3200-night-bg-2: #1c2835;
    --oc-v3200-night-panel: rgba(25, 35, 48, 0.78);
    --oc-v3200-night-panel-strong: rgba(30, 42, 56, 0.92);
    --oc-v3200-night-ink: #f5f8fb;
    --oc-v3200-night-text: #d8e2eb;
    --oc-v3200-night-muted: #a9b7c5;
    --oc-v3200-night-line: rgba(236, 246, 255, 0.13);
    --oc-v3200-mint: #2ad1c7;
    --oc-v3200-lemon: #ffe76a;
    --oc-v3200-coral: #ff7d9c;
    --oc-v3200-radius: 26px;
    color: var(--oc-v3200-day-text) !important;
    background:
            radial-gradient(circle at 8% 0%, rgba(42, 209, 199, 0.13), transparent 28rem),
            linear-gradient(180deg, var(--oc-v3200-day-bg) 0%, #f7fcfa 52%, var(--oc-v3200-day-bg-2) 100%) !important;
}

html body[data-page].animaker-theme-night {
    color: var(--oc-v3200-night-text) !important;
    background:
            radial-gradient(circle at 12% 0%, rgba(42, 209, 199, 0.13), transparent 27rem),
            linear-gradient(180deg, var(--oc-v3200-night-bg) 0%, var(--oc-v3200-night-bg-2) 58%, #111923 100%) !important;
}

html body[data-page] :is(.topbar, .shared-nav) {
    border-color: var(--oc-v3200-day-line) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body[data-page].animaker-theme-night :is(.topbar, .shared-nav) {
    border-color: var(--oc-v3200-night-line) !important;
    background: rgba(15, 23, 33, 0.82) !important;
}

html body[data-page] :is(.primary-link, .primary-btn) {
    border-color: rgba(42, 209, 199, 0.32) !important;
    color: #10151f !important;
    background: linear-gradient(135deg, #c2fff3 0%, #fff178 100%) !important;
    box-shadow: 0 15px 34px rgba(42, 209, 199, 0.16) !important;
}

html body[data-page].animaker-theme-night :is(.primary-link, .primary-btn),
html body[data-page="studio"].studio-theme-night :is(.primary-link, .primary-btn) {
    border-color: rgba(42, 209, 199, 0.42) !important;
    color: #f7fbff !important;
    background: linear-gradient(135deg, rgba(27, 44, 58, 0.98), rgba(25, 35, 47, 0.96)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(42, 209, 199, 0.16) !important;
}

html body[data-page] :is(.secondary-btn, .nav-button, .ghost-link, button.secondary-btn) {
    border-color: var(--oc-v3200-day-line) !important;
    color: rgba(17, 24, 39, 0.76) !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

html body[data-page].animaker-theme-night :is(.secondary-btn, .nav-button, .ghost-link, button.secondary-btn),
html body[data-page="studio"].studio-theme-night :is(.secondary-btn, .nav-button, .ghost-link, button.secondary-btn) {
    border-color: var(--oc-v3200-night-line) !important;
    color: rgba(241, 247, 252, 0.82) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html body[data-page]:not([data-page="studio"]) :is(
    .page-title,
    .auth-card,
    .hero-panel,
    .work-card,
    .empty-state,
    [class*="-card"],
    [class*="-panel"],
    [class*="-dock"],
    [class*="-preview"],
    [class*="-item"]
) {
    border-color: var(--oc-v3200-day-line) !important;
    background: var(--oc-v3200-day-panel) !important;
}

html body[data-page].animaker-theme-night:not([data-page="studio"]) :is(
    .page-title,
    .auth-card,
    .hero-panel,
    .work-card,
    .empty-state,
    [class*="-card"],
    [class*="-panel"],
    [class*="-dock"],
    [class*="-preview"],
    [class*="-item"]
) {
    border-color: var(--oc-v3200-night-line) !important;
    background: var(--oc-v3200-night-panel) !important;
    color: var(--oc-v3200-night-text) !important;
}

html body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav, #sharedNavApp) {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body[data-page="home"] .vue-home-gateway,
html body[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(248, 253, 252, 0.94) 0%, rgba(248, 253, 252, 0.7) 35%, rgba(248, 253, 252, 0.17) 67%, rgba(248, 253, 252, 0.02) 100%),
            var(--oc-v3200-art) !important;
    background-position: center center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(13, 20, 30, 0.92) 0%, rgba(13, 20, 30, 0.7) 38%, rgba(13, 20, 30, 0.3) 72%, rgba(13, 20, 30, 0.1) 100%),
            var(--oc-v3200-art) !important;
}

html body[data-page="home"] .vue-home-gateway {
    cursor: pointer !important;
    isolation: isolate !important;
}

html body[data-page="home"] .vue-home-gateway::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
            radial-gradient(circle at 76% 46%, rgba(42, 209, 199, 0.12), transparent 28rem) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    gap: 16px !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.8em !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 20em !important;
    color: rgba(17, 24, 39, 0.74) !important;
    font-size: clamp(16px, 1.4vw, 21px) !important;
    font-weight: 850 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy p {
    color: rgba(245, 248, 251, 0.78) !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    left: clamp(18px, 7rem, 108px) !important;
    right: auto !important;
    bottom: clamp(34px, 9vh, 92px) !important;
    transform: none !important;
}

html body[data-page="home"] section.vue-home-hero {
    min-height: calc(100svh - 72px) !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 440px) !important;
    padding-block: clamp(30px, 5vw, 66px) !important;
}

html body[data-page="home"] .vue-home-copy h1 {
    max-width: 7em !important;
    font-size: clamp(46px, 6.2vw, 86px) !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    display: block !important;
    max-width: 25em !important;
}

html body[data-page="home"] .vue-home-brief {
    max-width: 620px !important;
    padding: 10px !important;
    border-radius: var(--oc-v3200-radius) !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 64px !important;
}

html body[data-page="home"] .vue-home-brief-output {
    margin-top: 8px !important;
}

html body[data-page="home"] .vue-home-brief-chips {
    max-height: 104px !important;
    overflow: hidden !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    min-height: 96px !important;
}

html body[data-page="home"] .vue-home-flow {
    display: none !important;
}

html body[data-page="home"] .vue-home-feature {
    min-height: 500px !important;
    border-radius: 28px !important;
}

html body[data-page="home"] .vue-home-feature > img {
    height: 286px !important;
    object-position: 54% 42% !important;
}

html body[data-page="home"] .vue-home-feature-body p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

html body[data-page="home"] .vue-home-creation,
html body[data-page="home"] .vue-home-next,
html body[data-page="home"] .vue-home-community-more {
    border: 1px solid var(--oc-v3200-day-line) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.68) !important;
}

html body.animaker-theme-night[data-page="home"] :is(.vue-home-creation, .vue-home-next, .vue-home-community-more) {
    border-color: var(--oc-v3200-night-line) !important;
    background: rgba(24, 35, 48, 0.68) !important;
}

html body[data-page="studio"] {
    --studio-panel-v2100: rgba(255, 255, 255, 0.78);
    --studio-soft-v2100: rgba(255, 255, 255, 0.58);
    --studio-line-v2100: var(--oc-v3200-day-line);
}

html body.animaker-theme-night[data-page="studio"],
html body[data-page="studio"].studio-theme-night {
    --studio-panel-v2100: rgba(24, 35, 48, 0.78);
    --studio-soft-v2100: rgba(255, 255, 255, 0.07);
    --studio-line-v2100: var(--oc-v3200-night-line);
}

html body[data-page="studio"] .studio-launchpad-preview img,
html body[data-page="home"] :is(.vue-home-feature > img, .vue-home-brief-chips img),
html body[data-page] img[src*="ai-oc-creator-board-v3200"] {
    filter: saturate(1.02) contrast(1.01) !important;
}

html body.animaker-theme-night[data-page] img[src*="/img/generated/"],
html body[data-page="studio"].studio-theme-night img[src*="/img/generated/"] {
    filter: brightness(0.78) saturate(0.88) contrast(1.08) !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    max-width: 1000px !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
}

html body[data-page="studio"] .studio-launchpad-copy h2 {
    max-width: 8em !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    object-position: 55% 42% !important;
}

html body[data-page="studio"] .studio-launchpad-examples {
    margin-top: 2px !important;
}

html body[data-page="studio"] .studio-launchpad-actions .primary-btn::before {
    content: "01" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.46) !important;
    color: inherit !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
}

html body[data-page="studio"] .studio-launchpad-actions .secondary-btn:nth-child(2)::before {
    content: "换" !important;
}

html body[data-page="studio"] .studio-launchpad-actions .secondary-btn:nth-child(3)::before {
    content: "···" !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"] .studio-launchpad-actions .secondary-btn::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 999px !important;
    background: rgba(42, 209, 199, 0.12) !important;
    color: rgba(17, 24, 39, 0.72) !important;
    font-size: 0.7rem !important;
    font-weight: 950 !important;
}

html body.animaker-theme-night[data-page="studio"] .studio-launchpad-actions .secondary-btn::before,
html body[data-page="studio"].studio-theme-night .studio-launchpad-actions .secondary-btn::before {
    color: rgba(245, 248, 250, 0.82) !important;
    background: rgba(42, 209, 199, 0.16) !important;
}

@media (max-width: 1180px) {
    html body[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: min(100%, 760px) !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-gateway,
    html body[data-page="home"] section.vue-home-hero {
        background-position: 57% center !important;
    }

    html body[data-page="home"] .vue-home-gateway {
        padding: 82px 16px 30px !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1,
    html body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(42px, 15vw, 62px) !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy p {
        max-width: 16em !important;
    }

    html body[data-page="home"] .vue-home-gateway-cue {
        left: 16px !important;
        bottom: 24px !important;
        min-width: 136px !important;
    }

    html body[data-page="home"] section.vue-home-hero {
        padding: 22px 14px 34px !important;
    }

    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-brief-chips {
        max-height: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-feature {
        min-height: 0 !important;
    }

    html body[data-page="home"] .vue-home-feature > img {
        height: 220px !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview {
        display: block !important;
        min-height: 210px !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview img {
        min-height: 210px !important;
        height: 210px !important;
    }
}

/* 20260709-oc-flow-v9300: lighter AI-first OC flow, full-page day/night, cleaner first screen. */
html body[data-page] {
    --oc-flow-ink: #171820;
    --oc-flow-muted: rgba(23, 24, 32, 0.62);
    --oc-flow-subtle: rgba(23, 24, 32, 0.07);
    --oc-flow-line: rgba(23, 24, 32, 0.11);
    --oc-flow-panel: rgba(255, 255, 255, 0.84);
    --oc-flow-panel-solid: #ffffff;
    --oc-flow-cyan: #18b8c5;
    --oc-flow-rose: #ff7aa8;
    --oc-flow-lemon: #ffe66d;
    --oc-flow-lilac: #7d7cff;
    --oc-flow-shadow: 0 22px 60px rgba(20, 42, 58, 0.10);
    --home-portal-art: url("/animaker/img/generated/ux/oc-studio-panorama-v9300.webp");
    color: var(--oc-flow-ink) !important;
    background:
        radial-gradient(circle at 8% -4%, rgba(24, 184, 197, 0.10), transparent 30rem),
        radial-gradient(circle at 94% 10%, rgba(255, 122, 168, 0.08), transparent 26rem),
        linear-gradient(180deg, #fbfdff 0%, #f6fbfd 52%, #fff9ed 100%) !important;
}

html body.animaker-theme-night[data-page],
html body[data-page].studio-theme-night {
    --oc-flow-ink: #f7fbff;
    --oc-flow-muted: rgba(236, 244, 250, 0.68);
    --oc-flow-subtle: rgba(236, 244, 250, 0.10);
    --oc-flow-line: rgba(236, 244, 250, 0.14);
    --oc-flow-panel: rgba(18, 23, 34, 0.78);
    --oc-flow-panel-solid: #151b27;
    --oc-flow-shadow: 0 26px 70px rgba(0, 0, 0, 0.30);
    color: var(--oc-flow-ink) !important;
    background:
        radial-gradient(circle at 8% -4%, rgba(24, 184, 197, 0.16), transparent 30rem),
        radial-gradient(circle at 96% 10%, rgba(255, 122, 168, 0.09), transparent 26rem),
        linear-gradient(180deg, #101720 0%, #141d28 54%, #10141c 100%) !important;
}

html body[data-page] :where(.panel, .card, .empty-state, .modal, details, .vue-home-brief, .vue-home-feature, .vue-home-creation, .vue-home-next, .vue-home-community-more, .studio-launchpad-lite, .studio-advanced-start, .vue-assist-card, .vue-route-director, .vue-route-focus-card, .vue-board-shell, .vue-core-card, .vue-image-dock, .vue-story-dock, .vue-publish-dock, .vue-reference-dock) {
    border-radius: 24px !important;
    border-color: var(--oc-flow-line) !important;
}

html body[data-page] :where(a, button)[data-ui-icon] {
    position: relative !important;
    gap: 9px !important;
}

html body[data-page] :where(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon] {
    min-height: 44px !important;
    border-radius: 16px !important;
    white-space: normal !important;
}

html body[data-page] :where(.primary-btn, .primary-link)[data-ui-icon] {
    background: linear-gradient(135deg, #151923 0%, #222536 52%, #17b7c4 100%) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(24, 184, 197, 0.18) !important;
}

html body[data-page] :where(.secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon] {
    background: color-mix(in srgb, var(--oc-flow-panel-solid) 84%, transparent) !important;
    border: 1px solid var(--oc-flow-line) !important;
    color: var(--oc-flow-ink) !important;
}

html body.animaker-theme-night[data-page] :where(.secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon],
html body[data-page].studio-theme-night :where(.secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon] {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page] :where(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon]::before {
    display: inline-grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: currentColor !important;
}

html body[data-page] :where(.secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon]::before {
    background: color-mix(in srgb, var(--oc-flow-cyan) 14%, transparent) !important;
    color: var(--oc-flow-cyan) !important;
}

html body[data-page="home"].home-gateway-open {
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #f8fbfd !important;
}

html body.animaker-theme-night[data-page="home"].home-gateway-open {
    background: #0f151d !important;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav, #sharedNavApp) {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body[data-page="home"] .vue-home-gateway,
html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
html body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    display: grid !important;
    align-items: center !important;
    justify-items: start !important;
    overflow: hidden !important;
    padding: clamp(24px, 5vw, 86px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.98) 0%, rgba(250, 253, 255, 0.86) 36%, rgba(250, 253, 255, 0.36) 68%, rgba(250, 253, 255, 0.03) 100%),
        var(--home-gateway-image, var(--home-portal-art)) !important;
    background-size: cover !important;
    background-position: 58% 50% !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
        linear-gradient(90deg, rgba(12, 17, 25, 0.93) 0%, rgba(12, 17, 25, 0.76) 38%, rgba(12, 17, 25, 0.34) 72%, rgba(12, 17, 25, 0.08) 100%),
        var(--home-gateway-image, var(--home-portal-art)) !important;
    filter: saturate(0.90) contrast(1.02) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    width: min(100%, 820px) !important;
    margin-left: clamp(0px, 4.6vw, 72px) !important;
    color: var(--oc-flow-ink) !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid var(--oc-flow-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.70) !important;
    color: var(--oc-flow-muted) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span {
    background: rgba(255, 255, 255, 0.09) !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.2em !important;
    margin: 18px 0 18px !important;
    font-size: clamp(56px, 9.4vw, 136px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 18em !important;
    color: var(--oc-flow-muted) !important;
    font-size: clamp(18px, 2vw, 28px) !important;
    line-height: 1.42 !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    left: clamp(24px, 9.4vw, 156px) !important;
    right: auto !important;
    bottom: clamp(24px, 6.2vw, 74px) !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid var(--oc-flow-line) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--oc-flow-ink) !important;
    box-shadow: 0 16px 44px rgba(21, 38, 52, 0.12) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    background: rgba(255, 255, 255, 0.10) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    width: min(calc(100vw - clamp(24px, 5vw, 96px)), 1560px) !important;
    min-height: clamp(620px, calc(100dvh - 116px), 840px) !important;
    margin: clamp(18px, 3vw, 34px) auto clamp(44px, 7vw, 96px) !important;
    padding: clamp(24px, 4vw, 58px) !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 0.86fr) minmax(300px, 0.56fr) !important;
    align-items: center !important;
    gap: clamp(22px, 4vw, 66px) !important;
    border: 1px solid var(--oc-flow-line) !important;
    border-radius: clamp(26px, 3vw, 42px) !important;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 42%, rgba(255, 255, 255, 0.34) 73%, rgba(255, 255, 255, 0.08) 100%),
        var(--home-hero-image, var(--home-portal-art)) !important;
    background-size: cover !important;
    background-position: 60% 50% !important;
    box-shadow: var(--oc-flow-shadow) !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 17, 25, 0.93) 0%, rgba(12, 17, 25, 0.77) 44%, rgba(12, 17, 25, 0.40) 76%, rgba(12, 17, 25, 0.14) 100%),
        var(--home-hero-image, var(--home-portal-art)) !important;
    filter: saturate(0.94) !important;
}

html body[data-page="home"] .vue-home-copy {
    max-width: 620px !important;
}

html body[data-page="home"] .vue-home-copy > h1 {
    max-width: 6.4em !important;
    margin: 8px 0 14px !important;
    font-size: clamp(42px, 5.6vw, 78px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 25em !important;
    color: var(--oc-flow-muted) !important;
}

html body[data-page="home"] .vue-home-brief {
    padding: clamp(15px, 2vw, 22px) !important;
    border: 1px solid var(--oc-flow-line) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 18px 50px rgba(22, 43, 58, 0.10) !important;
    backdrop-filter: blur(16px) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief {
    background: rgba(16, 22, 33, 0.78) !important;
}

html body[data-page="home"] .vue-home-intent-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-intent-row button {
    min-height: 56px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 76px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.84) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief textarea {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="home"] .vue-home-brief-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    gap: 10px !important;
}

html body[data-page="home"] .vue-home-feature {
    width: min(100%, 360px) !important;
    justify-self: end !important;
    align-self: center !important;
    border-radius: 28px !important;
    background: rgba(18, 22, 32, 0.72) !important;
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.22) !important;
}

html body[data-page="home"] .vue-home-feature > img {
    min-height: 250px !important;
    max-height: 360px !important;
    object-fit: cover !important;
    object-position: 60% 50% !important;
}

html body[data-page="home"] .vue-home-flow {
    margin-top: 12px !important;
    padding: 10px !important;
    border: 1px solid var(--oc-flow-line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--oc-flow-panel-solid) 72%, transparent) !important;
}

html body[data-page="home"] .vue-home-flow-head,
html body[data-page="home"] .vue-home-actions,
html body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

html body[data-page="home"] .vue-home-flow ol {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-flow li {
    min-height: 54px !important;
    padding: 8px 10px !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.56) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-flow li {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="home"] .vue-home-creation,
html body[data-page="home"] .vue-home-next,
html body[data-page="home"] .vue-home-community-more {
    width: min(calc(100% - clamp(24px, 5vw, 86px)), 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: var(--oc-flow-panel) !important;
    border: 1px solid var(--oc-flow-line) !important;
    box-shadow: 0 16px 52px rgba(27, 38, 54, 0.08) !important;
}

html body[data-page="studio"],
html body.animaker-theme-day[data-page="studio"] {
    background:
        radial-gradient(circle at 2% -5%, rgba(24, 184, 197, 0.10), transparent 28rem),
        radial-gradient(circle at 100% 8%, rgba(255, 122, 168, 0.07), transparent 24rem),
        linear-gradient(180deg, #fbfdff 0%, #f6fbfd 54%, #fff9ef 100%) !important;
}

html body[data-page="studio"].studio-theme-night,
html body.animaker-theme-night[data-page="studio"] {
    background:
        radial-gradient(circle at 3% -5%, rgba(24, 184, 197, 0.15), transparent 28rem),
        radial-gradient(circle at 100% 8%, rgba(255, 122, 168, 0.08), transparent 24rem),
        linear-gradient(180deg, #101720 0%, #141d28 54%, #10141c 100%) !important;
}

html body[data-page="studio"] .studio-hero-title {
    width: min(calc(100% - clamp(24px, 5vw, 86px)), 1280px) !important;
    margin: clamp(18px, 3vw, 34px) auto 18px !important;
    padding: clamp(18px, 3vw, 30px) !important;
    border-radius: 28px !important;
    border: 1px solid var(--oc-flow-line) !important;
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--oc-flow-panel-solid) 90%, transparent) 0%, color-mix(in srgb, var(--oc-flow-panel-solid) 72%, transparent) 52%, transparent 100%),
        url("/animaker/img/generated/ux/oc-studio-panorama-v9300.webp") 68% 48% / cover no-repeat !important;
    box-shadow: var(--oc-flow-shadow) !important;
}

html body[data-page="studio"].studio-theme-night .studio-hero-title,
html body.animaker-theme-night[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(15, 21, 31, 0.94) 0%, rgba(15, 21, 31, 0.78) 55%, rgba(15, 21, 31, 0.22) 100%),
        url("/animaker/img/generated/ux/oc-studio-panorama-v9300.webp") 68% 48% / cover no-repeat !important;
}

html body[data-page="studio"] .studio-hero-title > h1 {
    max-width: 10em !important;
    margin-bottom: 8px !important;
    font-size: clamp(36px, 5vw, 64px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"] .studio-hero-title > p:not(.eyebrow) {
    max-width: 35em !important;
    color: var(--oc-flow-muted) !important;
}

html body[data-page="studio"] .studio-theme-switch {
    margin-top: 12px !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    margin-top: 18px !important;
    padding: clamp(14px, 2vw, 22px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(260px, 0.58fr) !important;
    gap: 18px !important;
    border: 1px solid var(--oc-flow-line) !important;
    background: color-mix(in srgb, var(--oc-flow-panel-solid) 78%, transparent) !important;
    backdrop-filter: blur(14px) !important;
}

html body.animaker-theme-night[data-page="studio"] .studio-launchpad-lite,
html body[data-page="studio"].studio-theme-night .studio-launchpad-lite {
    background: rgba(16, 22, 33, 0.80) !important;
}

html body[data-page="studio"] .studio-launchpad-copy h2 {
    margin-bottom: 10px !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.08 !important;
}

html body[data-page="studio"] .studio-launchpad-copy > label textarea {
    min-height: 86px !important;
    border-radius: 18px !important;
}

html body[data-page="studio"] .studio-launch-promise {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 10px 0 !important;
}

html body[data-page="studio"] .studio-launch-promise span {
    min-height: 42px !important;
    padding: 7px 9px !important;
    border-radius: 14px !important;
    border: 1px solid var(--oc-flow-line) !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

html body.animaker-theme-night[data-page="studio"] .studio-launch-promise span,
html body[data-page="studio"].studio-theme-night .studio-launch-promise span {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="studio"] .studio-launch-mini-path,
html body[data-page="studio"] .studio-brief-slots {
    display: none !important;
}

html body[data-page="studio"] .studio-launchpad-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 0.72fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

html body[data-page="studio"] .studio-launchpad-examples {
    margin-top: 12px !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    min-height: 320px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid var(--oc-flow-line) !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
    object-fit: cover !important;
    object-position: 64% 50% !important;
}

html body[data-page="studio"] .studio-launchpad-preview > div {
    max-width: 82% !important;
    border-radius: 18px !important;
}

html body[data-page="studio"] .studio-hero-beats {
    display: none !important;
}

html body[data-page="studio"] .studio-advanced-start {
    width: min(calc(100% - clamp(24px, 5vw, 86px)), 1280px) !important;
    margin: 0 auto 18px !important;
    border: 1px solid var(--oc-flow-line) !important;
    background: var(--oc-flow-panel) !important;
    box-shadow: 0 14px 44px rgba(27, 38, 54, 0.08) !important;
}

html body[data-page="studio"] .studio-advanced-start > summary {
    min-height: 54px !important;
    padding: 13px 16px !important;
}

html body[data-page="studio"] .studio-advanced-start > summary span {
    color: var(--oc-flow-cyan) !important;
}

html body[data-page="studio"] .studio-mode-hub {
    margin: 0 !important;
    padding: 0 16px 16px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-card {
    padding: 14px !important;
    border: 1px solid var(--oc-flow-line) !important;
    border-radius: 24px !important;
    background: var(--oc-flow-panel) !important;
    box-shadow: var(--oc-flow-shadow) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-head p:not(.eyebrow) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid color-mix(in srgb, var(--oc-flow-cyan) 26%, var(--oc-flow-line)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--oc-flow-cyan) 12%, transparent), color-mix(in srgb, var(--oc-flow-lemon) 16%, transparent)),
        color-mix(in srgb, var(--oc-flow-panel-solid) 76%, transparent) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next,
html body[data-page="studio"].studio-theme-night.studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
    background:
        linear-gradient(135deg, rgba(24, 184, 197, 0.14), rgba(255, 230, 109, 0.10)),
        rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next strong {
    font-size: clamp(20px, 2.3vw, 30px) !important;
    line-height: 1.12 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next p {
    max-width: 34em !important;
    margin-top: 4px !important;
    color: var(--oc-flow-muted) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox > summary {
    min-height: 48px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    border: 1px solid var(--oc-flow-line) !important;
    background: color-mix(in srgb, var(--oc-flow-panel-solid) 72%, transparent) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox > summary,
html body[data-page="studio"].studio-theme-night.studio-focus-flow.studio-wizard-ready .vue-assist-toolbox > summary {
    background: rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox:not([open]) .vue-assist-toolbox-body {
    display: none !important;
}

html body[data-page="studio"] .vue-route-director,
html body[data-page="studio"] .vue-route-focus-card,
html body[data-page="studio"] .vue-image-dock,
html body[data-page="studio"] .vue-core-card,
html body[data-page="studio"] .vue-story-dock,
html body[data-page="studio"] .vue-publish-dock,
html body[data-page="studio"] .vue-reference-dock {
    background: var(--oc-flow-panel) !important;
    border: 1px solid var(--oc-flow-line) !important;
    box-shadow: 0 14px 44px rgba(27, 38, 54, 0.08) !important;
}

html body[data-page="studio"] .vue-image-write-now,
html body[data-page="studio"] .vue-image-mode-board,
html body[data-page="studio"] .vue-cover-candidates,
html body[data-page="studio"] .vue-image-manual,
html body[data-page="studio"] .vue-ai-capability-strip,
html body[data-page="studio"] .vue-starter-panel,
html body[data-page="studio"] .vue-nudge-panel,
html body[data-page="studio"] .vue-operation-panel,
html body[data-page="studio"] .vue-assist-compact-lane,
html body[data-page="studio"] .vue-generation-progress {
    border-radius: 20px !important;
}

html body[data-page="studio"] .vue-image-result-card {
    border-radius: 24px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--oc-flow-cyan) 9%, var(--oc-flow-panel-solid)), color-mix(in srgb, var(--oc-flow-lemon) 14%, var(--oc-flow-panel-solid))),
        var(--oc-flow-panel) !important;
}

html body[data-page="studio"] .studio-preview.avatar-preview {
    border-color: var(--oc-flow-line) !important;
    border-radius: 24px !important;
    background: var(--oc-flow-panel) !important;
}

@media (max-width: 980px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero,
    html body[data-page="studio"] .studio-launchpad-lite {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        justify-self: stretch !important;
    }

    html body[data-page="studio"] .studio-launchpad-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"] .studio-launch-promise {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 620px) {
    html body[data-page="home"] .vue-home-gateway,
    html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
    html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
        align-items: end !important;
        padding: 20px !important;
        background-position: 72% 50% !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        margin-left: 0 !important;
        padding-bottom: 82px !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(44px, 16vw, 72px) !important;
    }

    html body[data-page="home"] .vue-home-intent-row,
    html body[data-page="home"] .vue-home-flow ol,
    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-intent-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-intent-row button small {
        display: none !important;
    }

    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-brief-output {
        grid-template-columns: 1fr 1fr !important;
    }

    html body[data-page="studio"] .studio-hero-title,
    html body[data-page="studio"] .studio-advanced-start {
        width: calc(100% - 24px) !important;
    }

    html body[data-page="studio"] .studio-hero-title > h1 {
        font-size: clamp(34px, 11vw, 54px) !important;
    }

    html body[data-page="studio"] .studio-launch-promise {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260709-oc-flow-v7000: clearer AI image progress and quieter creator controls. */
html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    width: min(calc(100% - clamp(18px, 3vw, 44px)), 1720px) !important;
    min-height: clamp(680px, calc(100dvh - 92px), 920px) !important;
    margin-top: clamp(10px, 1.8vw, 22px) !important;
    margin-bottom: clamp(34px, 5vw, 72px) !important;
    background-position: center center !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: min(calc(100% - clamp(18px, 3vw, 44px)), 1720px) !important;
    min-height: clamp(680px, calc(100dvh - 92px), 920px) !important;
    margin-top: clamp(10px, 1.8vw, 22px) !important;
}

html body[data-page="home"] .vue-home-feature > img[src*="default-oc-draft-board-v7000"],
html body[data-page="home"] img[src*="default-oc-draft-board-v7000"] {
    object-position: 50% 42% !important;
}

html body[data-page="studio"] .vue-assist-card {
    gap: 14px !important;
}

html body[data-page="studio"] .vue-assist-one-next {
    border-radius: 26px !important;
    box-shadow:
        0 18px 42px rgba(23, 31, 46, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.54) !important;
}

html body[data-page="studio"] .vue-assist-toolbox {
    border-radius: 24px !important;
    overflow: hidden !important;
}

html body[data-page="studio"] .vue-assist-toolbox > summary {
    min-height: 70px !important;
    padding: 16px 18px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
}

html body[data-page="studio"] .vue-assist-toolbox > summary::before {
    content: "" !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 34% 30%, #ffffff 0 14%, transparent 15%),
        linear-gradient(135deg, #c4f7ee, #ffe979) !important;
    box-shadow: 0 12px 26px rgba(31, 184, 194, 0.16) !important;
}

html body[data-page="studio"] .vue-assist-toolbox > summary :is(span, small) {
    color: var(--oc-v6000-muted) !important;
}

html body[data-page="studio"] .vue-assist-compact-lane {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.85fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

html body[data-page="studio"] .vue-assist-toolbox .vue-assist-prompt,
html body[data-page="studio"] .vue-assist-toolbox .vue-assist-missing {
    margin: 0 !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

html body[data-page="studio"].studio-theme-night .vue-assist-toolbox .vue-assist-prompt,
html body[data-page="studio"].studio-theme-night .vue-assist-toolbox .vue-assist-missing {
    background: rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="studio"] .vue-assist-toolbox .vue-assist-mainline {
    margin: 0 !important;
    border-radius: 20px !important;
}

html body[data-page="studio"] .vue-assist-toolbox .vue-assist-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body[data-page="studio"] .vue-image-runway {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

html body[data-page="studio"] .vue-image-live-status {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(31, 184, 194, 0.18) !important;
    background: linear-gradient(135deg, rgba(31, 184, 194, 0.10), rgba(255, 229, 107, 0.12)) !important;
}

html body[data-page="studio"].studio-theme-night .vue-image-live-status {
    border-color: rgba(132, 238, 233, 0.18) !important;
    background: linear-gradient(135deg, rgba(42, 207, 216, 0.13), rgba(255, 229, 107, 0.08)) !important;
}

html body[data-page="studio"] .vue-image-live-status > span {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: #172132 !important;
    box-shadow: 0 12px 26px rgba(31, 184, 194, 0.16) !important;
}

html body[data-page="studio"].studio-theme-night .vue-image-live-status > span {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #f7fbff !important;
}

html body[data-page="studio"] .vue-image-live-status > span::before {
    content: var(--ui-icon, "•") !important;
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    background: currentColor !important;
    -webkit-mask: var(--ui-icon-mask, var(--ui-icon-image-mask)) center / contain no-repeat !important;
    mask: var(--ui-icon-mask, var(--ui-icon-image-mask)) center / contain no-repeat !important;
}

html body[data-page="studio"] .vue-image-live-status strong,
html body[data-page="studio"] .vue-image-live-status small {
    display: block !important;
    line-height: 1.35 !important;
}

html body[data-page="studio"] .vue-image-live-status strong {
    color: var(--oc-v6000-ink) !important;
    font-size: 15px !important;
}

html body[data-page="studio"] .vue-image-live-status small {
    margin-top: 2px !important;
    color: var(--oc-v6000-muted) !important;
}

html body[data-page="studio"] .vue-image-live-status[data-status-tone="running"] {
    border-color: rgba(31, 184, 194, 0.36) !important;
    box-shadow: 0 16px 38px rgba(31, 184, 194, 0.16) !important;
}

html body[data-page="studio"] .vue-image-live-status[data-status-tone="failed"] {
    border-color: rgba(224, 93, 93, 0.26) !important;
    background: linear-gradient(135deg, rgba(255, 153, 128, 0.13), rgba(255, 255, 255, 0.66)) !important;
}

html body[data-page="studio"] .vue-image-runway span {
    position: relative !important;
    min-height: 76px !important;
    padding: 12px 12px 12px 46px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(22, 30, 42, 0.10) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: var(--oc-v6000-muted) !important;
    overflow: hidden !important;
}

html body[data-page="studio"].studio-theme-night .vue-image-runway span {
    border-color: rgba(238, 246, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="studio"] .vue-image-runway span::after {
    content: "" !important;
    position: absolute !important;
    left: 28px !important;
    top: 46px !important;
    bottom: -18px !important;
    width: 2px !important;
    background: rgba(31, 184, 194, 0.20) !important;
}

html body[data-page="studio"] .vue-image-runway span:last-child::after {
    display: none !important;
}

html body[data-page="studio"] .vue-image-runway i {
    position: absolute !important;
    left: 16px !important;
    top: 16px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(31, 184, 194, 0.30) !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 5px #ffffff !important;
}

html body[data-page="studio"] .vue-image-runway span.done i,
html body[data-page="studio"] .vue-image-runway span.active i {
    border-color: #1fb8c2 !important;
    background: linear-gradient(135deg, #1fb8c2, #ffe56b) !important;
}

html body[data-page="studio"] .vue-image-runway span.active {
    border-color: rgba(31, 184, 194, 0.42) !important;
    color: var(--oc-v6000-ink) !important;
    box-shadow: 0 14px 34px rgba(31, 184, 194, 0.15) !important;
}

html body[data-page="studio"] .vue-image-runway span.done {
    color: var(--oc-v6000-ink) !important;
}

html body[data-page="studio"] .vue-image-runway strong,
html body[data-page="studio"] .vue-image-runway small {
    display: block !important;
    line-height: 1.25 !important;
}

html body[data-page="studio"] .vue-image-runway strong {
    color: inherit !important;
    font-size: 14px !important;
}

html body[data-page="studio"] .vue-image-runway small {
    margin-top: 4px !important;
    color: var(--oc-v6000-muted) !important;
    font-size: 12px !important;
}

html body[data-page="studio"] .vue-image-done-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

html body[data-page="studio"] .vue-board-default-art img[src*="default-oc-draft-board-v7000"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 48% !important;
}

/* 20260709-action-icons-v7300: make studio actions legible through symbols, not extra copy. */
html body[data-page] {
    --ui-icon-lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E");
    --ui-icon-palette-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 0 0 17h1.2a1.8 1.8 0 0 0 1.1-3.2 1.7 1.7 0 0 1 1-3.1h1.4A4.3 4.3 0 0 0 21 10c0-3.6-3.8-6.5-9-6.5z'/%3E%3Ccircle cx='7.8' cy='10' r='1'/%3E%3Ccircle cx='10.3' cy='7.5' r='1'/%3E%3Ccircle cx='13.8' cy='7.5' r='1'/%3E%3Ccircle cx='16.2' cy='10.2' r='1'/%3E%3C/svg%3E");
    --ui-icon-download-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
    --ui-icon-print-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V4h10v4'/%3E%3Cpath d='M7 17H5a2 2 0 0 1-2-2v-3a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v3a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 14h10v6H7z'/%3E%3C/svg%3E");
}

html body[data-page] [data-ui-icon="lock"] { --ui-icon-mask: var(--ui-icon-lock-mask); }
html body[data-page] [data-ui-icon="palette"] { --ui-icon-mask: var(--ui-icon-palette-mask); }
html body[data-page] [data-ui-icon="download"] { --ui-icon-mask: var(--ui-icon-download-mask); }
html body[data-page] [data-ui-icon="print"] { --ui-icon-mask: var(--ui-icon-print-mask); }

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"] :is(
        .vue-assist-one-next,
        .vue-route-director-actions,
        .vue-route-primary-stack,
        .vue-route-focus-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-publish-main-actions,
        .vue-publish-completion-actions,
        .vue-board-actions
    ) :is(.primary-btn, .primary-link, .secondary-btn)[data-ui-icon]::before {
        --ui-icon-size: 1.16em !important;
        --ui-icon-opacity: 1 !important;
        padding: 0.44em !important;
        border-radius: 12px !important;
        background: currentColor !important;
        box-sizing: content-box !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / 1.16em 1.16em no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / 1.16em 1.16em no-repeat !important;
    }

    html body[data-page="studio"] :is(
        .vue-assist-one-next,
        .vue-route-director-actions,
        .vue-route-primary-stack,
        .vue-route-focus-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-publish-main-actions,
        .vue-publish-completion-actions,
        .vue-board-actions
    ) :is(.primary-btn, .primary-link)[data-ui-icon] {
        gap: 12px !important;
        border-radius: 18px !important;
    }

    html body[data-page="studio"] :is(
        .vue-assist-one-next,
        .vue-route-director-actions,
        .vue-route-primary-stack,
        .vue-route-focus-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-publish-main-actions,
        .vue-publish-completion-actions,
        .vue-board-actions
    ) :is(.secondary-btn)[data-ui-icon] {
        gap: 10px !important;
        border-radius: 16px !important;
    }
}

html body[data-page="studio"] :is(.vue-route-director-progress, .vue-route-mini-steps, .vue-route-steps, .vue-assist-groups) button[data-ui-icon]::before {
    opacity: 0.78 !important;
}

html body[data-page="studio"] :is(.vue-route-director-progress, .vue-route-mini-steps, .vue-route-steps, .vue-assist-groups) button.complete[data-ui-icon]::before,
html body[data-page="studio"] :is(.vue-route-director-progress, .vue-route-mini-steps, .vue-route-steps, .vue-assist-groups) button.done[data-ui-icon]::before {
    color: #179b7b !important;
    opacity: 1 !important;
}

html body[data-page="studio"] :is(.vue-route-director-progress, .vue-route-mini-steps, .vue-route-steps, .vue-assist-groups) button.active[data-ui-icon]::before {
    color: #1fb8c2 !important;
    opacity: 1 !important;
}

@media (max-width: 900px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        width: calc(100% - 24px) !important;
    }

    html body[data-page="studio"] .vue-assist-compact-lane,
    html body[data-page="studio"] .vue-image-runway,
    html body[data-page="studio"] .vue-image-done-actions {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="studio"] .vue-assist-toolbox .vue-assist-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="studio"] :is(.vue-core-command, .vue-step-mission-actions, .vue-visual-actions, .vue-image-primary-actions, .vue-publish-main-actions, .vue-board-actions) {
        gap: 8px !important;
    }
}

@media (max-width: 760px) {
    html body[data-page] .topbar {
        align-items: flex-start !important;
        gap: 8px !important;
        overflow-x: hidden !important;
    }

    html body[data-page] .topbar .nav {
        display: flex !important;
        order: 20 !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 2px 2px 6px !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }

    html body[data-page] .topbar .nav::-webkit-scrollbar {
        display: none !important;
    }

    html body[data-page] .topbar .nav a {
        flex: 0 0 auto !important;
    }

    html body[data-page] .shared-nav-root,
    html body[data-page] .shared-nav,
    html body[data-page] .shared-nav-links,
    html body[data-page] .shared-nav-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body[data-page] .shared-nav {
        display: grid !important;
        gap: 8px !important;
    }

    html body[data-page] .shared-nav-links {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 0 2px 6px !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }

    html body[data-page] .shared-nav-links::-webkit-scrollbar {
        display: none !important;
    }

    html body[data-page] .shared-nav-links a {
        flex: 0 0 auto !important;
    }

    html body[data-page] .shared-nav-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    html body[data-page] .shared-nav-actions :is(.nav-button, .primary-link) {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
}

/* Production UX pass 20260707 v630: low-barrier cover candidates before formal generation. */
body[data-page="studio"] .vue-cover-candidates {
    display: grid;
    gap: 14px;
    padding: clamp(14px, 2vw, 18px);
    border: 1px solid rgba(33, 183, 197, 0.16);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(235, 252, 248, 0.86) 52%, rgba(255, 248, 215, 0.76));
    box-shadow: 0 18px 48px rgba(31, 52, 64, 0.1);
}

body.animaker-theme-night[data-page="studio"] .vue-cover-candidates {
    border-color: rgba(154, 237, 229, 0.16);
    background:
            linear-gradient(135deg, rgba(21, 24, 34, 0.94), rgba(20, 42, 51, 0.9) 52%, rgba(54, 43, 64, 0.84));
    box-shadow: 0 18px 54px rgba(5, 10, 16, 0.35);
}

body[data-page="studio"] .vue-route-cover-strip {
    display: grid;
    grid-template-columns: minmax(170px, 0.62fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 18px 0 0;
    padding: 10px;
    border: 1px solid rgba(23, 25, 35, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 38px rgba(30, 43, 52, 0.08);
    backdrop-filter: blur(16px);
}

body[data-page="studio"] .vue-route-cover-copy {
    min-width: 0;
    padding-left: 4px;
}

body[data-page="studio"] .vue-route-cover-copy span {
    display: inline-flex;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(211, 248, 247, 0.72);
    color: #128491;
    font-size: 11px;
    font-weight: 900;
}

body[data-page="studio"] .vue-route-cover-copy strong {
    display: block;
    margin-top: 6px;
    color: #171923;
    font-size: 15px;
    line-height: 1.35;
}

body[data-page="studio"] .vue-route-cover-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

body[data-page="studio"] .vue-route-cover-list button {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    min-width: 0;
    min-height: 70px;
    padding: 7px;
    border: 1px solid rgba(23, 25, 35, 0.08);
    border-radius: 16px;
    background: rgba(248, 250, 251, 0.82);
    color: #171923;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body[data-page="studio"] .vue-route-cover-list button:is(:hover, :focus-visible, .active) {
    border-color: rgba(33, 183, 197, 0.48);
    box-shadow: 0 14px 26px rgba(33, 183, 197, 0.13);
    transform: translateY(-1px);
}

body[data-page="studio"] .vue-route-cover-list img {
    grid-row: 1 / span 2;
    width: 54px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    object-position: 50% 34%;
    background: #eef8f7;
}

body[data-page="studio"] .vue-route-cover-list span {
    min-width: 0;
    color: #168f9b;
    font-size: 11px;
    font-weight: 900;
}

body[data-page="studio"] .vue-route-cover-list strong {
    min-width: 0;
    overflow: hidden;
    color: #171923;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.24;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="studio"] .vue-route-cover-refresh {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(23, 25, 35, 0.1);
    border-radius: 999px;
    background: #171923;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

body.animaker-theme-night[data-page="studio"] .vue-route-cover-strip {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(17, 20, 28, 0.72);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

body.animaker-theme-night[data-page="studio"] .vue-route-cover-copy span {
    background: rgba(154, 237, 229, 0.12);
    color: #9aede5;
}

body.animaker-theme-night[data-page="studio"] .vue-route-cover-copy strong,
body.animaker-theme-night[data-page="studio"] .vue-route-cover-list strong {
    color: rgba(255, 255, 255, 0.92);
}

body.animaker-theme-night[data-page="studio"] .vue-route-cover-list button {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

body.animaker-theme-night[data-page="studio"] .vue-route-cover-list span {
    color: #9aede5;
}

body.animaker-theme-night[data-page="studio"] .vue-route-cover-refresh {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.92);
    color: #151823;
}

body[data-page="studio"] .vue-cover-candidates-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

body[data-page="studio"] .vue-cover-candidates-head span,
body[data-page="studio"] .vue-board-cover-candidates > div span {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(211, 248, 247, 0.72);
    color: #138895;
    font-size: 12px;
    font-weight: 900;
}

body[data-page="studio"] .vue-cover-candidates-head strong {
    display: block;
    margin-top: 8px;
    color: #171923;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.08;
}

body[data-page="studio"] .vue-cover-candidates-head p {
    max-width: 660px;
    margin: 8px 0 0;
    color: rgba(23, 25, 35, 0.66);
    line-height: 1.7;
}

body.animaker-theme-night[data-page="studio"] .vue-cover-candidates-head strong {
    color: rgba(255, 255, 255, 0.94);
}

body.animaker-theme-night[data-page="studio"] .vue-cover-candidates-head p {
    color: rgba(255, 255, 255, 0.68);
}

body[data-page="studio"] .vue-cover-candidate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="studio"] .vue-cover-candidate-grid button {
    display: grid;
    grid-template-rows: minmax(160px, 1fr) auto auto auto;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(23, 25, 35, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
    color: #171923;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body[data-page="studio"] .vue-cover-candidate-grid button:is(:hover, :focus-visible, .active) {
    border-color: rgba(33, 183, 197, 0.5);
    box-shadow: 0 18px 36px rgba(33, 183, 197, 0.15);
    transform: translateY(-2px);
}

body[data-page="studio"] .vue-cover-candidate-grid img {
    width: 100%;
    height: 100%;
    min-height: 160px;
    border-radius: 14px;
    object-fit: cover;
    object-position: 50% 36%;
    background: #f5fbfb;
}

body[data-page="studio"] .vue-cover-candidate-grid span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 224, 111, 0.72);
    color: #31270b;
    font-size: 11px;
    font-weight: 900;
}

body[data-page="studio"] .vue-cover-candidate-grid strong,
body[data-page="studio"] .vue-cover-candidate-grid small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="studio"] .vue-cover-candidate-grid small {
    color: rgba(23, 25, 35, 0.58);
}

body.animaker-theme-night[data-page="studio"] .vue-cover-candidate-grid button {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

body.animaker-theme-night[data-page="studio"] .vue-cover-candidate-grid small {
    color: rgba(255, 255, 255, 0.62);
}

body[data-page="studio"] .vue-board-cover-candidates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(33, 183, 197, 0.14);
}

body[data-page="studio"] .vue-board-cover-candidates > div {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body[data-page="studio"] .vue-board-cover-candidates > div button {
    border: 0;
    background: transparent;
    color: #138895;
    font-weight: 900;
    cursor: pointer;
}

body[data-page="studio"] .vue-board-cover-candidates > button {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 14px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

body[data-page="studio"] .vue-board-cover-candidates > button.active {
    border-color: rgba(33, 183, 197, 0.76);
}

body[data-page="studio"] .vue-board-cover-candidates img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}

body[data-page="studio"] .vue-board-cover-candidates > button strong {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    color: #171923;
    font-size: 12px;
}

body.animaker-theme-night[data-page="studio"] .vue-board-cover-candidates {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-route-cover-strip {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding: 10px;
    }

    body[data-page="studio"] .vue-route-cover-list {
        display: flex;
        gap: 8px;
        margin: 0 -2px;
        overflow-x: auto;
        padding: 2px 2px 8px;
        scroll-snap-type: x proximity;
    }

    body[data-page="studio"] .vue-route-cover-list button {
        flex: 0 0 202px;
        scroll-snap-align: start;
    }

    body[data-page="studio"] .vue-route-cover-refresh {
        width: 100%;
    }

    body[data-page="studio"] .vue-cover-candidates-head {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="studio"] .vue-cover-candidate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="studio"] .vue-cover-candidate-grid button {
        grid-template-rows: 132px auto auto auto;
    }

    body[data-page="studio"] .vue-cover-candidate-grid img {
        min-height: 132px;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover-candidates {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, 1fr);
        padding: 8px;
    }
}
/* Production UX pass 20260706: lighter AI-first OC flow, generated draft-board default art. */
body.animaker-theme-night,
body[data-page="studio"].studio-theme-night {
    --ink: #fbf8ff;
    --text: #ebe5f4;
    --muted: #bdb4c9;
    --line: rgba(246, 240, 255, 0.13);
    --paper: #11131b;
    --panel: rgba(24, 25, 35, 0.82);
    background:
            linear-gradient(180deg, #10131c 0%, #161723 46%, #10121a 100%) !important;
}

body.animaker-theme-night .topbar,
body[data-page="studio"].studio-theme-night .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.09) !important;
    background: rgba(15, 18, 27, 0.76) !important;
    box-shadow: none !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .page-title,
    [class*="-card"],
    [class*="-panel"],
    [class*="-dock"],
    [class*="-preview"],
    [class*="-empty"],
    [class*="-item"]
),
body[data-page="studio"].studio-theme-night :is(
    .studio-panel,
    .studio-mode-hub,
    .studio-path-banner article,
    .vue-route-director,
    .vue-route-next,
    .vue-route-focus-card,
    .vue-route-progress,
    .vue-assist-card,
    .vue-core-dock,
    .vue-visual-dock,
    .vue-story-dock,
    .vue-image-dock,
    .vue-publish-dock,
    .vue-board-dock
) {
    border-color: rgba(255, 255, 255, 0.115) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
            rgba(18, 20, 30, 0.82) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2) !important;
}

body[data-page="studio"].studio-theme-night .studio-hero-title.page-title {
    min-height: 220px !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 26px !important;
    background:
            linear-gradient(90deg, rgba(10, 13, 21, 0.9), rgba(10, 13, 21, 0.58) 52%, rgba(10, 13, 21, 0.2)),
            url("/animaker/img/generated/ux/studio-ai-oc-board-v900.webp") center / cover no-repeat !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title > :is(.eyebrow, h1, p:not(.eyebrow), .studio-theme-switch, .studio-hero-beats) {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell {
    margin-bottom: 12px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
    min-height: 0 !important;
    padding: clamp(14px, 2vw, 20px) !important;
    border-radius: 24px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-main {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.58fr) !important;
    gap: 14px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-copy h2 {
    margin: 0 !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    line-height: 1.04 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-copy p,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-focus p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-progress,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-tasks,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-next,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-focus-card,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-progress,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-assist-mainline,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-assist-missing,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-assist-prompt,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-core-mission,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-core-quick-panel,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-creator-mode-coach,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-visual-route-card {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    gap: 16px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-flow.designer-form {
    gap: 12px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active {
    padding: clamp(14px, 2vw, 20px) !important;
    border-radius: 24px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-step-head-shell {
    margin-bottom: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-now, .vue-visual-write-now) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    border-radius: 22px !important;
    background:
            linear-gradient(145deg, rgba(143, 238, 229, 0.1), rgba(255, 255, 255, 0.04)),
            rgba(9, 13, 21, 0.58) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-grid, .vue-visual-write-grid) {
    gap: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-field, .vue-visual-field) {
    min-height: 78px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    padding: 12px !important;
    border-radius: 26px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover {
    border-radius: 22px !important;
    background: #0f131d !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 50% 42% !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
    font-size: clamp(22px, 2.6vw, 28px) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
    color: rgba(235, 245, 255, 0.72) !important;
}

body[data-page="home"] .vue-home-brief {
    border-radius: 24px !important;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.04)),
            rgba(6, 10, 17, 0.62) !important;
}

body[data-page="home"] .vue-home-brief textarea,
body[data-page="studio"] .vue-core-ai-brief textarea {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

@media (max-width: 860px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-main,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
        order: -1 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover {
        width: 94px !important;
        height: 94px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        grid-template-columns: 94px minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness {
        display: none !important;
    }
}

/* Production UX pass 20260707 v600 mobile nav guard: compact, visible, and scrollable. */
@media (max-width: 640px) {
    .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 7px !important;
        height: auto !important;
        min-height: 122px !important;
        padding: 8px 12px 10px !important;
        overflow: visible !important;
    }

    .brand {
        width: 100% !important;
        min-height: 32px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .shared-nav-root {
        width: 100% !important;
        flex: none !important;
        order: 2 !important;
    }

    .shared-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
    }

    .shared-nav-links,
    .shared-nav-actions {
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 !important;
        scrollbar-width: none !important;
    }

    .shared-nav-links a,
    .shared-nav-actions .primary-link,
    .shared-nav-actions .nav-button {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
        font-size: 12.5px !important;
        line-height: 1 !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: 0 !important;
    }
}

/* Stage 20260706 home AI gateway: one-line OC prompt before browsing the community. */
body[data-page="home"] .vue-home-brief,
body[data-page="home"] .vue-home-brief * {
    box-sizing: border-box;
}

body[data-page="home"] .vue-home-brief {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    gap: 10px;
    align-items: end;
    margin: 22px 0 8px;
    padding: 12px;
    border: 1px solid rgba(143, 238, 229, 0.22);
    border-radius: 22px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.038)),
            rgba(7, 11, 18, 0.58);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

body[data-page="home"] .vue-home-brief label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

body[data-page="home"] .vue-home-brief label span {
    color: #8feee7;
    font-size: 12px;
    font-weight: 950;
}

body[data-page="home"] .vue-home-brief textarea {
    width: 100%;
    min-height: 76px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    color: #f8fbff;
    background: rgba(4, 8, 14, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    resize: vertical;
}

body[data-page="home"] .vue-home-brief textarea::placeholder {
    color: rgba(238, 246, 255, 0.48);
}

body[data-page="home"] .vue-home-brief-actions {
    display: grid;
    gap: 8px;
}

body[data-page="home"] .vue-home-brief-actions .primary-link,
body[data-page="home"] .vue-home-brief-actions .secondary-btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    border-radius: 14px;
    white-space: nowrap;
}

body[data-page="home"] .vue-home-brief-chips {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

body[data-page="home"] .vue-home-brief-chips::-webkit-scrollbar {
    display: none;
}

body[data-page="home"] .vue-home-brief-chips button {
    flex: 0 0 auto;
    max-width: min(280px, 76vw);
    overflow: hidden;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    color: rgba(238, 246, 255, 0.82);
    background: rgba(255, 255, 255, 0.07);
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

body[data-page="home"] .vue-home-brief-chips button:hover,
body[data-page="home"] .vue-home-brief-chips button:focus-visible {
    color: #061019;
    background: linear-gradient(135deg, #8feee7, #ffe47a);
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-brief {
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 18px;
        padding: 10px;
        border-radius: 18px;
    }

    body[data-page="home"] .vue-home-brief textarea {
        min-height: 72px;
        border-radius: 14px;
    }

    body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: 1fr 1fr;
    }

    body[data-page="home"] .vue-home-brief-actions .primary-link,
    body[data-page="home"] .vue-home-brief-actions .secondary-btn {
        min-width: 0;
        min-height: 40px;
        padding-inline: 10px;
        font-size: 13px;
    }
}

/* AI-first workbench: mobile width guard for the hero action rail and one-line brief entry. */
body[data-page="studio"] .vue-core-ai-brief,
body[data-page="studio"] .vue-core-ai-brief *,
body[data-page="studio"] .vue-route-director-actions,
body[data-page="studio"] .vue-route-director-actions * {
    box-sizing: border-box;
}

@media (max-width: 720px) {
    body[data-page="studio"] :is(#studioVueApp, .studio-vue-app, .studio-shell, .studio-main) {
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .primary-btn,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .vue-route-mode-chip {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* AI-first workbench pass 20260706: studio starts from one AI brief, advanced core fields stay folded. */
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto) !important;
    gap: 12px !important;
    align-items: end !important;
    padding: 14px !important;
    border: 1px solid rgba(143, 238, 229, 0.2) !important;
    border-radius: 20px !important;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.032)),
            rgba(8, 12, 20, 0.42) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief label {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief label > span {
    color: #8eeeed !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea {
    width: 100% !important;
    min-height: 88px !important;
    resize: vertical !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    padding: 13px 14px !important;
    color: #f7fbff !important;
    background: rgba(4, 7, 12, 0.68) !important;
    font: inherit !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    outline: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea:focus {
    border-color: rgba(143, 238, 229, 0.58) !important;
    box-shadow: 0 0 0 4px rgba(143, 238, 229, 0.12) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea::placeholder {
    color: rgba(238, 246, 255, 0.44) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions {
    display: grid !important;
    gap: 8px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions .primary-btn,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions .secondary-btn {
    min-height: 44px !important;
    justify-content: center !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips::-webkit-scrollbar {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button {
    flex: 0 0 auto !important;
    max-width: 260px !important;
    min-height: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    color: rgba(238, 246, 255, 0.82) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button:hover,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button:focus-visible {
    color: #081017 !important;
    background: linear-gradient(100deg, #8eeeed, #ffe47a) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-manual {
    display: block !important;
    margin-top: 12px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-manual > summary {
    min-height: 52px !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-manual > summary p {
    display: none !important;
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea {
        min-height: 102px !important;
        font-size: 14px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
        margin-bottom: 10px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head strong {
        font-size: 22px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head .primary-btn {
        min-height: 44px !important;
    }
}

/* Local design pass v394: OC archive film-folder signature. */
:root {
    --oc-night: #0d0b14;
    --oc-night-2: #151320;
    --oc-paper: #f7f4ea;
    --oc-paper-2: #ece5d4;
    --oc-cyan: #6ee7f2;
    --oc-gold: #f6d86b;
    --oc-berry: #ff6fae;
    --oc-ink: #111827;
    --oc-line-dark: rgba(255, 255, 255, 0.16);
    --oc-line-paper: rgba(13, 11, 20, 0.14);
}

body.animaker-theme-night:not([data-page="studio"]) {
    background:
            radial-gradient(circle at 14% 8%, rgba(110, 231, 242, 0.12), transparent 30rem),
            radial-gradient(circle at 86% 10%, rgba(255, 111, 174, 0.1), transparent 26rem),
            linear-gradient(180deg, #090810, #12101b 44%, #0d0b14);
}

body.animaker-theme-night:not([data-page="studio"]) .primary-link,
body.animaker-theme-night:not([data-page="studio"]) .primary-btn,
body[data-page="studio"].studio-theme-night .primary-link,
body[data-page="studio"].studio-theme-night .primary-btn {
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), #c7f7eb 50%, var(--oc-gold));
    box-shadow: 0 14px 34px rgba(110, 231, 242, 0.2);
}

.vue-home-feature,
.oc-dossier-card,
.oc-archive-card,
.vue-board-dock {
    isolation: isolate;
}

.vue-home-feature {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: stretch;
    min-height: 420px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(247, 244, 234, 0.1), rgba(255, 255, 255, 0.04)),
            rgba(13, 11, 20, 0.74);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
}

.vue-home-feature-rail {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 14px;
    padding: 18px 0;
    border-right: 1px dashed rgba(255, 255, 255, 0.2);
    color: rgba(247, 244, 234, 0.88);
    background:
            radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 3px, transparent 4px) center top 16px / 18px 28px repeat-y,
            linear-gradient(180deg, rgba(110, 231, 242, 0.2), rgba(255, 111, 174, 0.14));
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.vue-home-feature-rail span {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.vue-home-feature-rail strong {
    color: var(--oc-gold);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.vue-home-feature > img {
    grid-column: 2;
    min-height: 420px;
    opacity: 0.88;
}

.vue-home-feature-body {
    position: absolute;
    right: 26px;
    bottom: 26px;
    left: 84px;
    z-index: 2;
    max-width: 430px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(13, 11, 20, 0.7);
    backdrop-filter: blur(18px);
}

.vue-home-feature-body::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px -1px;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--oc-cyan), var(--oc-gold), var(--oc-berry));
}

.vue-home-feature-body span,
.vue-home-feature-body p {
    color: rgba(247, 244, 234, 0.75);
}

.vue-home-feature-body strong {
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
}

.vue-home-dossier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.vue-home-dossier-tags em,
.oc-archive-meta span,
.vue-board-file-stamps span,
.vue-login-pass span,
.vue-login-pass strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.vue-home-dossier-tags em,
.vue-board-file-stamps span {
    color: #111827;
    background: rgba(247, 244, 234, 0.9);
}

.oc-dossier-card,
.oc-archive-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.16) !important;
    border-radius: 22px !important;
    background:
            linear-gradient(145deg, rgba(247, 244, 234, 0.08), rgba(255, 255, 255, 0.035)),
            rgba(16, 15, 25, 0.82) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24) !important;
}

.oc-dossier-card::after,
.oc-archive-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 12px;
    background:
            radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 3px, transparent 4px) center 14px / 12px 26px repeat-y,
            rgba(255, 255, 255, 0.045);
    pointer-events: none;
}

.oc-dossier-spine,
.oc-archive-index {
    position: absolute;
    top: 14px;
    left: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.oc-dossier-spine span,
.oc-archive-index span {
    letter-spacing: 0.12em;
}

.oc-dossier-lines {
    display: grid;
    gap: 6px;
    margin: 8px 0 12px;
}

.oc-dossier-lines i {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, rgba(110, 231, 242, 0.58), rgba(246, 216, 107, 0.36), transparent);
}

.oc-archive-cover {
    display: block;
    position: relative;
}

.oc-archive-cover::after {
    content: "";
    position: absolute;
    inset: auto 14px 14px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background:
            linear-gradient(90deg, rgba(110, 231, 242, 0.28), rgba(246, 216, 107, 0.18)),
            rgba(13, 11, 20, 0.42);
    backdrop-filter: blur(10px);
}

.oc-archive-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 8px;
}

.oc-archive-meta span {
    color: rgba(247, 244, 234, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

.oc-dossier-card .card-body,
.oc-archive-card .card-body {
    color: rgba(247, 244, 234, 0.82);
}

.oc-dossier-card h3 a,
.oc-archive-card h3 a,
.oc-archive-card blockquote {
    color: #fff;
}

.oc-dossier-card p,
.oc-archive-card p,
.oc-archive-card .muted {
    color: rgba(247, 244, 234, 0.68);
}

.oc-archive-card .pill,
.oc-dossier-card .pill {
    color: #111827;
    background: var(--oc-gold);
}

.oc-archive-card .secondary-btn,
.oc-dossier-card .secondary-btn {
    color: #f7f4ea;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
}

.vue-board-dock {
    position: relative;
    overflow: hidden;
    padding-top: 42px;
    border-radius: 24px;
    background:
            linear-gradient(145deg, rgba(247, 244, 234, 0.08), rgba(255, 255, 255, 0.035)),
            rgba(13, 11, 20, 0.9);
}

.vue-board-dock::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 14px;
    background:
            radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 3px, transparent 4px) center 14px / 14px 28px repeat-y,
            rgba(255, 255, 255, 0.045);
}

.vue-board-dossier-rail {
    position: absolute;
    top: 12px;
    right: 16px;
    left: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(247, 244, 234, 0.74);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.vue-board-dossier-rail strong {
    color: var(--oc-gold);
}

.vue-board-cover {
    border-radius: 20px;
}

.vue-board-file-stamps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px;
}

.vue-login-card-head p {
    margin: 2px 0 0;
    color: rgba(247, 244, 234, 0.64);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-login-pass {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background:
            linear-gradient(100deg, rgba(110, 231, 242, 0.12), rgba(246, 216, 107, 0.1)),
            rgba(255, 255, 255, 0.045);
}

.vue-login-pass span {
    color: rgba(247, 244, 234, 0.72);
    background: transparent;
}

.vue-login-pass strong {
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
}

body.animaker-theme-night[data-page="login"] .auth-card {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(247, 244, 234, 0.1), rgba(255, 255, 255, 0.045)),
            rgba(13, 11, 20, 0.74);
    box-shadow: 0 30px 84px rgba(0, 0, 0, 0.36);
}

/* Local UI-first pass v452: keep login focused on entering the OC workspace. */
body[data-page="login"] .auth-shell {
    background-position: center;
    padding-top: clamp(26px, 4vw, 58px);
    padding-bottom: clamp(30px, 4.6vw, 64px);
}

body[data-page="login"] .auth-card {
    padding: clamp(20px, 2.5vw, 28px);
}

body[data-page="login"] .vue-login-shell .auth-card {
    gap: 10px;
}

body[data-page="login"] .auth-card label {
    gap: 5px;
}

body[data-page="login"] :is(.auth-card input, .auth-card textarea) {
    min-height: 40px;
    padding: 10px 12px;
}

body[data-page="login"] .vue-login-card-head p {
    max-width: 28em;
    color: rgba(112, 107, 124, 0.8);
    font-size: 13px;
    line-height: 1.45;
}

body[data-page="login"] .vue-login-pass {
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 14px;
}

body[data-page="login"] .vue-login-pass span {
    color: rgba(112, 107, 124, 0.78);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="login"] .vue-login-pass strong {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
}

body[data-page="login"] .auth-card textarea {
    min-height: 58px;
    resize: vertical;
}

body[data-page="login"] .vue-password-meter {
    gap: 7px;
}

body[data-page="login"] .vue-password-rules {
    gap: 5px;
}

body[data-page="login"] .vue-password-rules span {
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
}

body.animaker-theme-night[data-page="login"] .vue-login-card-head p,
body.animaker-theme-night[data-page="login"] .vue-login-pass span {
    color: rgba(248, 245, 255, 0.72);
}

/* Local UI-first pass v454: make the following feed previewable without auth/OSS. */
body[data-page="feed"] .vue-feed-source-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    max-width: 760px;
    margin-top: 2px;
    padding: 12px 14px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 20px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.94), rgba(255, 255, 255, 0.86)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.16), transparent 34%);
    box-shadow: 0 10px 28px rgba(39, 28, 62, 0.05);
}

body[data-page="feed"] .vue-feed-source-notice span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #0f6f7a;
    background: rgba(33, 183, 197, 0.14);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

body[data-page="feed"] .vue-feed-source-notice p {
    margin: 0;
    color: rgba(23, 21, 31, 0.68);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

@media (max-width: 560px) {
    body[data-page="feed"] .vue-feed-source-notice {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .vue-home-feature {
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 360px;
    }

    .vue-home-feature > img {
        min-height: 360px;
    }

    .vue-home-feature-body {
        left: 60px;
        right: 14px;
        bottom: 14px;
        padding: 14px;
    }

    .vue-home-dossier-tags em {
        min-height: 24px;
        padding-inline: 8px;
        font-size: 11px;
    }

    .oc-dossier-spine,
    .oc-archive-index {
        left: 20px;
    }

    .vue-board-dock {
        padding-top: 38px;
    }
}

/* V2.2 studio modes: quick draft for new players, advanced desk for OC power users. */
body[data-page="studio"] {
    background:
            linear-gradient(180deg, rgba(246, 248, 252, 0.96), rgba(255, 255, 255, 0.98) 34%, rgba(246, 252, 253, 0.96)),
            linear-gradient(115deg, rgba(33, 183, 197, 0.08), transparent 34%, rgba(255, 209, 102, 0.08));
}

body[data-page="studio"].studio-theme-night {
    --ink: #f8f5ff;
    --text: #e1dced;
    --muted: #b9b1ca;
    --line: rgba(255, 255, 255, 0.13);
    --paper: #0f0e18;
    --panel: #181723;
    --cyan: #37d5e5;
    --teal: #45c8d3;
    --yellow: #ffd166;
    --green: #76ddb1;
    --mint: #76ddb1;
    --violet: #a891ff;
    color: var(--text);
    background:
            radial-gradient(circle at 12% 8%, rgba(55, 213, 229, 0.18), transparent 30rem),
            radial-gradient(circle at 88% 18%, rgba(168, 145, 255, 0.18), transparent 28rem),
            linear-gradient(180deg, #11101b, #171421 48%, #0f0e18);
}

body[data-page="studio"] .topbar {
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.9);
}

body[data-page="studio"].studio-theme-night .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(15, 14, 24, 0.82);
}

.studio-hero-title.page-title {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 310px;
    align-content: end;
    margin-bottom: 18px;
    padding: 34px;
    border: 1px solid rgba(230, 225, 236, 0.82);
    border-radius: 8px;
    color: #fff;
    background:
            linear-gradient(90deg, rgba(12, 14, 26, 0.92), rgba(12, 14, 26, 0.64) 44%, rgba(12, 14, 26, 0.1) 75%),
            url("/animaker/img/generated/studio-oc-workbench-hero-v1.webp") center / cover no-repeat;
    box-shadow: 0 22px 68px rgba(39, 28, 62, 0.16);
}

.studio-hero-title.page-title::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(18, 16, 28, 0.62));
    pointer-events: none;
}

.studio-hero-title.page-title > * {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.studio-hero-title.page-title h1,
.studio-hero-title.page-title p,
.studio-hero-title.page-title .eyebrow {
    color: #fff;
    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.studio-theme-switch {
    display: inline-flex;
    width: fit-content;
    gap: 6px;
    margin-top: 16px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

.studio-theme-switch button {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.studio-theme-switch button:hover,
.studio-theme-switch button.active {
    color: #17151f;
    background: #fff;
}

.studio-hero-beats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 760px);
    margin-top: 18px;
}

.studio-hero-beats article {
    display: grid;
    gap: 6px;
    min-height: 96px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.studio-hero-beats span {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 950;
}

.studio-hero-beats strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.28;
}

.studio-hero-beats small {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.studio-mode-hub {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 18px;
    margin: 0 0 22px;
    padding: 18px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 252, 0.94)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.1), rgba(255, 209, 102, 0.08), rgba(123, 97, 255, 0.08));
    box-shadow: 0 22px 60px rgba(39, 28, 62, 0.12);
    backdrop-filter: blur(18px);
}

.studio-mode-hub::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(90deg, rgba(23, 21, 31, 0.04) 1px, transparent 1px),
            linear-gradient(180deg, rgba(23, 21, 31, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    opacity: 0.46;
    pointer-events: none;
}

.studio-mode-copy,
.studio-quick-panel {
    position: relative;
    z-index: 1;
}

.studio-mode-copy {
    display: grid;
    align-content: center;
    gap: 12px;
    min-width: 0;
}

.studio-mode-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(26px, 4vw, 44px);
    line-height: 1.06;
}

.studio-mode-copy p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.7;
}

.studio-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.studio-mode-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

.studio-mode-roadmaps {
    position: relative;
    min-height: 146px;
}

.studio-mode-roadmap {
    display: none;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.92), rgba(255, 255, 255, 0.84)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.18), transparent 32%);
}

body:not(.studio-mode-advanced) .studio-mode-roadmap[data-mode-roadmap="quick"],
.studio-mode-quick .studio-mode-roadmap[data-mode-roadmap="quick"],
.studio-mode-advanced .studio-mode-roadmap[data-mode-roadmap="advanced"] {
    display: grid;
}

.studio-mode-advanced .studio-mode-roadmap[data-mode-roadmap="quick"] {
    display: none;
}

.studio-mode-roadmap[data-mode-roadmap="advanced"] {
    border-color: rgba(123, 97, 255, 0.24);
    background:
            linear-gradient(135deg, rgba(247, 244, 255, 0.94), rgba(255, 255, 255, 0.84)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.14), transparent 34%);
}

.studio-mode-roadmap span {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.12);
    font-size: 12px;
    font-weight: 950;
}

.studio-mode-roadmap[data-mode-roadmap="advanced"] span {
    color: var(--violet);
    background: rgba(123, 97, 255, 0.12);
}

.studio-mode-roadmap strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.32;
}

.studio-mode-roadmap ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-mode-roadmap[data-mode-roadmap="advanced"] ol {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.studio-mode-roadmap li {
    min-height: 54px;
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 9px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.studio-mode-roadmap b {
    color: var(--teal);
    font-size: 11px;
}

.studio-mode-roadmap[data-mode-roadmap="advanced"] b {
    color: var(--violet);
}

.studio-mode-proof article {
    min-height: 96px;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 253, 255, 0.72)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.12), transparent 34%);
}

.studio-mode-proof article:nth-child(2) {
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(250, 247, 255, 0.74)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.13), transparent 34%);
}

.studio-mode-proof span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.03em;
}

.studio-mode-proof strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;
}

.studio-mode-proof small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.studio-mode-card {
    --mode-accent: var(--teal);
    position: relative;
    overflow: hidden;
    min-height: 132px;
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 16px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    text-align: left;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.studio-mode-card[data-studio-mode="advanced"] {
    --mode-accent: var(--violet);
}

.studio-mode-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--mode-accent), rgba(255, 209, 102, 0.72));
    opacity: 0.38;
}

.studio-mode-card:hover,
.studio-mode-card.active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mode-accent) 48%, white);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--mode-accent) 18%, transparent);
}

.studio-mode-card.active {
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 255, 0.92)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.16), rgba(255, 209, 102, 0.12));
}

.studio-mode-card.active::before {
    opacity: 1;
}

.studio-mode-card span,
.studio-quick-head span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.studio-mode-card strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.22;
}

.studio-mode-card small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.studio-mode-card em {
    width: fit-content;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0 10px;
    color: #fff;
    background: #16131d;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.studio-mode-card.active em {
    color: #101521;
    background: var(--yellow);
}

.studio-quick-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.28);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(18, 16, 28, 0.96), rgba(44, 42, 54, 0.95));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 50px rgba(23, 21, 31, 0.18);
}

.studio-quick-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 16% 18%, rgba(255, 209, 102, 0.2), transparent 24%),
            radial-gradient(circle at 82% 12%, rgba(33, 183, 197, 0.22), transparent 26%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 26px),
            linear-gradient(90deg, rgba(18, 16, 28, 0.82), rgba(18, 16, 28, 0.62));
    opacity: 0.86;
    pointer-events: none;
}

.studio-quick-head {
    display: grid;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.studio-quick-head strong {
    color: #fff;
    font-size: 20px;
    line-height: 1.22;
}

.studio-quick-guide {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.studio-quick-guide span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 900;
}

.studio-quick-guide b {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #17151f;
    background: var(--yellow);
    font-size: 12px;
}

.studio-quick-presets {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.studio-quick-presets button {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.1);
    font-weight: 900;
    cursor: pointer;
}

.studio-quick-presets button:hover {
    color: #17151f;
    border-color: rgba(255, 209, 102, 0.68);
    background: #ffd166;
}

.studio-quick-presets button.active {
    color: #17151f;
    border-color: rgba(255, 209, 102, 0.82);
    background: linear-gradient(135deg, #ffd166, #ffefb0);
    box-shadow: 0 10px 28px rgba(255, 209, 102, 0.2);
}

.studio-spark-strip {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-spark-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.studio-spark-head span {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.studio-spark-head strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.35;
    text-align: right;
}

.studio-spark-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.studio-spark-actions button {
    min-height: 108px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
    align-content: start;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    text-align: left;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.09);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.studio-spark-actions button:hover {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.58);
    background: rgba(255, 255, 255, 0.16);
}

.studio-spark-actions button span {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #17151f;
    background: var(--cyan);
    font-size: 12px;
    font-weight: 950;
}

.studio-spark-actions button strong {
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
}

.studio-spark-actions button small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.studio-quick-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.studio-quick-actions .primary-btn {
    grid-column: 1 / -1;
}

.studio-quick-status {
    position: relative;
    z-index: 1;
    min-height: 44px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.studio-ai-bridge,
.studio-publish-bridge {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 253, 255, 0.92)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.1), rgba(255, 209, 102, 0.08));
    box-shadow: 0 14px 34px rgba(39, 28, 62, 0.06);
}

.studio-publish-bridge {
    border-color: rgba(123, 97, 255, 0.2);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 248, 255, 0.92)),
            linear-gradient(90deg, rgba(123, 97, 255, 0.09), rgba(87, 204, 153, 0.08));
}

.studio-bridge-head {
    display: grid;
    gap: 6px;
}

.studio-bridge-head span,
.studio-bridge-flow span,
.studio-bridge-status span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.studio-bridge-head strong {
    color: var(--ink);
    font-size: 22px;
    line-height: 1.2;
}

.studio-bridge-head p,
.studio-bridge-status small,
.studio-bridge-flow p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.studio-bridge-status {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(255, 209, 102, 0.34);
    border-radius: 8px;
    background: rgba(255, 249, 226, 0.62);
}

.studio-bridge-status[data-ai-state="ready"] {
    border-color: rgba(87, 204, 153, 0.34);
    background: rgba(241, 255, 248, 0.72);
}

.studio-bridge-status[data-ai-state="warn"] {
    border-color: rgba(255, 209, 102, 0.52);
    background: rgba(255, 250, 235, 0.76);
}

.studio-bridge-status strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
}

.studio-bridge-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.studio-bridge-flow article {
    display: grid;
    gap: 6px;
    min-height: 126px;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.studio-bridge-flow strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.24;
}

.studio-bridge-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.studio-mode-quick .studio-panel[data-step-panel="story"] {
    display: none;
}

.studio-mode-quick .vue-route-steps button[data-route-step="story"] {
    display: none;
}

.studio-mode-quick .studio-workbench {
    grid-template-columns: minmax(220px, 0.64fr) minmax(440px, 1.42fr) minmax(300px, 0.88fr);
}

.studio-mode-quick .studio-panel[data-step-panel="core"],
.studio-mode-quick .studio-panel[data-step-panel="visual"],
.studio-mode-quick .studio-panel[data-step-panel="ai"] {
    border-color: rgba(33, 183, 197, 0.32);
}

.studio-mode-quick .vue-core-form,
.studio-mode-quick .vue-visual-grid,
.studio-mode-quick .vue-image-director-grid {
    gap: 10px;
}

.studio-mode-advanced .vue-core-quick-panel {
    display: none;
}

.studio-mode-quick .vue-core-field,
.studio-mode-quick .vue-visual-field,
.studio-mode-quick .vue-image-field {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-color: rgba(33, 183, 197, 0.16);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 253, 0.86)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.1), transparent 36%);
}

.studio-mode-quick .vue-core-field::before,
.studio-mode-quick .vue-visual-field::before,
.studio-mode-quick .vue-image-field::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--yellow));
    opacity: 0.58;
}

.studio-mode-quick .vue-core-field input,
.studio-mode-quick .vue-core-field select,
.studio-mode-quick .vue-visual-field input,
.studio-mode-quick .vue-visual-field textarea,
.studio-mode-quick .vue-image-field textarea {
    border-color: rgba(33, 183, 197, 0.18);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.studio-mode-quick .vue-core-field small,
.studio-mode-quick .vue-visual-field small,
.studio-mode-quick .vue-image-field small {
    color: color-mix(in srgb, var(--muted) 82%, var(--teal));
}

.studio-mode-advanced .studio-mode-hub {
    border-color: rgba(123, 97, 255, 0.24);
}

.studio-mode-advanced .studio-mode-card[data-studio-mode="advanced"].active {
    border-color: rgba(123, 97, 255, 0.42);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 244, 255, 0.93)),
            linear-gradient(90deg, rgba(123, 97, 255, 0.12), rgba(255, 209, 102, 0.1));
}

body[data-page="studio"].studio-theme-night .studio-hero-title.page-title {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(90deg, rgba(10, 9, 16, 0.92), rgba(17, 15, 26, 0.72) 48%, rgba(18, 16, 28, 0.24) 82%),
            url("/animaker/img/generated/studio-oc-workbench-hero-v1.webp") center / cover no-repeat;
    box-shadow: 0 28px 78px rgba(0, 0, 0, 0.32);
}

body[data-page="studio"].studio-theme-night .studio-mode-hub,
body[data-page="studio"].studio-theme-night .studio-panel,
body[data-page="studio"].studio-theme-night .studio-path-banner article,
body[data-page="studio"].studio-theme-night .vue-reference-dock,
body[data-page="studio"].studio-theme-night .studio-wizard-nav,
body[data-page="studio"].studio-theme-night .studio-ai-bridge,
body[data-page="studio"].studio-theme-night .studio-publish-bridge,
body[data-page="studio"].studio-theme-night .vue-route-next,
body[data-page="studio"].studio-theme-night .vue-route-focus-card,
body[data-page="studio"].studio-theme-night .vue-route-progress,
body[data-page="studio"].studio-theme-night .vue-assist-card,
body[data-page="studio"].studio-theme-night .vue-core-dock,
body[data-page="studio"].studio-theme-night .vue-visual-dock,
body[data-page="studio"].studio-theme-night .vue-story-dock,
body[data-page="studio"].studio-theme-night .vue-image-dock,
body[data-page="studio"].studio-theme-night .vue-publish-dock {
    border-color: rgba(255, 255, 255, 0.12);
    background:
            linear-gradient(145deg, rgba(28, 26, 40, 0.95), rgba(18, 17, 28, 0.92)),
            radial-gradient(circle at 100% 0, rgba(55, 213, 229, 0.12), transparent 34%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
}

body[data-page="studio"].studio-theme-night .studio-mode-hub::before {
    background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

body[data-page="studio"].studio-theme-night .studio-mode-card,
body[data-page="studio"].studio-theme-night .studio-hero-beats article,
body[data-page="studio"].studio-theme-night .studio-mode-proof article,
body[data-page="studio"].studio-theme-night .studio-mode-roadmap,
body[data-page="studio"].studio-theme-night .studio-mode-roadmap li,
body[data-page="studio"].studio-theme-night .studio-bridge-flow article,
body[data-page="studio"].studio-theme-night .vue-route-more,
body[data-page="studio"].studio-theme-night .vue-reference-grid article,
body[data-page="studio"].studio-theme-night .vue-core-mission,
body[data-page="studio"].studio-theme-night .vue-core-summary article,
body[data-page="studio"].studio-theme-night .vue-core-briefing article,
body[data-page="studio"].studio-theme-night .vue-visual-route-card,
body[data-page="studio"].studio-theme-night .vue-visual-route-card article,
body[data-page="studio"].studio-theme-night .vue-visual-board article,
body[data-page="studio"].studio-theme-night .vue-visual-next-action,
body[data-page="studio"].studio-theme-night .vue-visual-checks button,
body[data-page="studio"].studio-theme-night .vue-visual-kit-card,
body[data-page="studio"].studio-theme-night .vue-studio-refine,
body[data-page="studio"].studio-theme-night .vue-visual-summary article,
body[data-page="studio"].studio-theme-night .vue-story-board article,
body[data-page="studio"].studio-theme-night .vue-story-next-action,
body[data-page="studio"].studio-theme-night .vue-story-checks button,
body[data-page="studio"].studio-theme-night .vue-story-summary article,
body[data-page="studio"].studio-theme-night .vue-image-brief article,
body[data-page="studio"].studio-theme-night .vue-image-director,
body[data-page="studio"].studio-theme-night .vue-image-director-grid button,
body[data-page="studio"].studio-theme-night .vue-image-readiness,
body[data-page="studio"].studio-theme-night .vue-image-readiness-grid article,
body[data-page="studio"].studio-theme-night .vue-image-hint,
body[data-page="studio"].studio-theme-night .vue-publish-checks button,
body[data-page="studio"].studio-theme-night .vue-publish-asset-grid article,
body[data-page="studio"].studio-theme-night .vue-publish-pack,
body[data-page="studio"].studio-theme-night .vue-publish-social-grid article,
body[data-page="studio"].studio-theme-night .vue-publish-preview,
body[data-page="studio"].studio-theme-night .vue-publish-decision,
body[data-page="studio"].studio-theme-night .vue-publish-mode-grid article,
body[data-page="studio"].studio-theme-night .vue-publish-options article {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
            rgba(255, 255, 255, 0.035);
}

body[data-page="studio"].studio-theme-night .studio-mode-card.active,
body[data-page="studio"].studio-theme-night .studio-mode-card:hover,
body[data-page="studio"].studio-theme-night.studio-mode-advanced .studio-mode-card[data-studio-mode="advanced"].active {
    border-color: rgba(55, 213, 229, 0.42);
    background:
            linear-gradient(145deg, rgba(55, 213, 229, 0.18), rgba(168, 145, 255, 0.1)),
            rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 46px rgba(55, 213, 229, 0.14);
}

body[data-page="studio"].studio-theme-night .studio-mode-card em {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
}

body[data-page="studio"].studio-theme-night .studio-mode-card.active em {
    color: #101521;
    background: #ffd166;
}

body[data-page="studio"].studio-theme-night .vue-studio-refine > summary strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-studio-refine > summary p {
    color: rgba(248, 245, 255, 0.72);
}

body[data-page="studio"].studio-theme-night .vue-studio-refine > summary em {
    color: #9ff3ff;
    border-color: rgba(55, 213, 229, 0.24);
    background: rgba(55, 213, 229, 0.1);
}

body[data-page="studio"].studio-theme-night .vue-visual-manual > summary em,
body[data-page="studio"].studio-theme-night .vue-story-manual > summary em {
    color: #d8ceff;
    border-color: rgba(180, 154, 255, 0.26);
    background: rgba(180, 154, 255, 0.1);
}

body[data-page="studio"].studio-theme-night .vue-image-manual > summary em {
    color: #ffc6dd;
    border-color: rgba(255, 119, 169, 0.28);
    background: rgba(255, 119, 169, 0.1);
}

body[data-page="studio"].studio-theme-night .vue-publish-manual > summary em {
    color: #b7ffd8;
    border-color: rgba(87, 204, 153, 0.26);
    background: rgba(87, 204, 153, 0.1);
}

body[data-page="studio"].studio-theme-night .vue-studio-refine > summary::after {
    color: #101521;
    background: #ffd166;
}

body[data-page="studio"].studio-theme-night input,
body[data-page="studio"].studio-theme-night textarea,
body[data-page="studio"].studio-theme-night select,
body[data-page="studio"].studio-theme-night .vue-field-suggestions button,
body[data-page="studio"].studio-theme-night .vue-core-field,
body[data-page="studio"].studio-theme-night .vue-visual-field,
body[data-page="studio"].studio-theme-night .vue-story-field,
body[data-page="studio"].studio-theme-night .vue-image-field {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.07);
}

body[data-page="studio"].studio-theme-night .vue-creator-mode-coach {
    border-color: rgba(88, 224, 231, 0.22);
    background:
            linear-gradient(135deg, rgba(16, 23, 31, 0.92), rgba(27, 24, 38, 0.82)),
            radial-gradient(circle at 0 0, rgba(88, 224, 231, 0.12), transparent 42%);
}

body[data-page="studio"].studio-theme-night .vue-creator-mode-coach[data-creator-mode="advanced"] {
    border-color: rgba(180, 154, 255, 0.26);
    background:
            linear-gradient(135deg, rgba(27, 24, 38, 0.92), rgba(17, 15, 26, 0.82)),
            radial-gradient(circle at 100% 0, rgba(180, 154, 255, 0.14), transparent 44%);
}

body[data-page="studio"].studio-theme-night .vue-creator-mode-coach strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-creator-mode-coach p {
    color: rgba(248, 245, 255, 0.72);
}

body[data-page="studio"].studio-theme-night .vue-core-quick-panel,
body[data-page="studio"].studio-theme-night .vue-core-quick-next,
body[data-page="studio"].studio-theme-night .vue-core-quick-grid article {
    border-color: rgba(255, 255, 255, 0.12);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04)),
            radial-gradient(circle at 100% 0, rgba(88, 224, 231, 0.12), transparent 42%);
}

body[data-page="studio"].studio-theme-night .vue-core-mission[data-mission-state="ready"],
body[data-page="studio"].studio-theme-night .vue-visual-route-card article.done {
    border-color: rgba(118, 221, 177, 0.28);
    background:
            linear-gradient(145deg, rgba(118, 221, 177, 0.12), rgba(255, 255, 255, 0.045)),
            rgba(255, 255, 255, 0.035);
}

body[data-page="studio"].studio-theme-night .vue-visual-route-card button {
    color: #9ff3ff;
    border-color: rgba(55, 213, 229, 0.24);
    background: rgba(55, 213, 229, 0.1);
}

body[data-page="studio"].studio-theme-night .vue-core-quick-next strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-core-quick-next p {
    color: rgba(248, 245, 255, 0.72);
}

body[data-page="studio"].studio-theme-night .vue-core-quick-grid article.done {
    border-color: rgba(118, 221, 177, 0.28);
    background:
            linear-gradient(145deg, rgba(118, 221, 177, 0.1), rgba(255, 255, 255, 0.04)),
            radial-gradient(circle at 100% 0, rgba(118, 221, 177, 0.12), transparent 42%);
}

body[data-page="studio"].studio-theme-night .vue-core-quick-grid button {
    color: var(--ink);
    border-color: rgba(88, 224, 231, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

body[data-page="studio"].studio-theme-night .studio-wizard-nav strong,
body[data-page="studio"].studio-theme-night .vue-route-more summary,
body[data-page="studio"].studio-theme-night .vue-reference-head h2 {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .studio-wizard-nav small,
body[data-page="studio"].studio-theme-night .vue-route-more summary small,
body[data-page="studio"].studio-theme-night .vue-reference-head p:not(.eyebrow) {
    color: rgba(248, 245, 255, 0.72);
}

body[data-page="studio"].studio-theme-night input::placeholder,
body[data-page="studio"].studio-theme-night textarea::placeholder {
    color: rgba(225, 220, 237, 0.48);
}

body[data-page="studio"].studio-theme-night .secondary-btn,
body[data-page="studio"].studio-theme-night .ghost-link,
body[data-page="studio"].studio-theme-night .nav a:hover,
body[data-page="studio"].studio-theme-night .nav a.active,
body[data-page="studio"].studio-theme-night .shared-nav-links a:hover,
body[data-page="studio"].studio-theme-night .shared-nav-links a.active {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

body[data-page="studio"].studio-theme-night .primary-btn,
body[data-page="studio"].studio-theme-night .primary-link {
    color: #11101b;
    background: linear-gradient(135deg, var(--cyan), var(--yellow));
}

body[data-page="studio"].studio-theme-night .studio-bridge-status,
body[data-page="studio"].studio-theme-night .studio-bridge-status[data-ai-state="warn"],
body[data-page="studio"].studio-theme-night .studio-bridge-status[data-ai-state="ready"] {
    border-color: rgba(255, 209, 102, 0.3);
    background: rgba(255, 209, 102, 0.08);
}

body[data-page="studio"].studio-theme-night .studio-theme-switch button.active,
body[data-page="studio"].studio-theme-night .studio-theme-switch button:hover {
    color: #11101b;
    background: linear-gradient(135deg, #37d5e5, #ffd166);
}

@media (max-width: 1180px) {
    .studio-mode-quick .studio-workbench {
        grid-template-columns: minmax(230px, 0.76fr) minmax(0, 1.24fr);
    }
}

@media (max-width: 900px) {
    .studio-hero-title.page-title {
        min-height: 220px;
        padding: 24px;
    }

    .studio-mode-hub,
    .studio-mode-switch,
    .studio-mode-proof,
    .studio-hero-beats,
    .studio-mode-roadmap ol,
    .studio-mode-roadmap[data-mode-roadmap="advanced"] ol,
    .studio-quick-guide,
    .studio-bridge-flow,
    .studio-quick-actions,
    .studio-spark-actions {
        grid-template-columns: 1fr;
    }

    .studio-quick-actions .primary-btn {
        grid-column: auto;
    }

    .studio-mode-quick .studio-workbench {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .studio-hero-title.page-title {
        min-height: 210px;
        padding: 20px;
        background-position: 58% center;
    }

    .studio-hero-title.page-title > * {
        max-width: min(100%, 330px);
    }

    .studio-hero-title.page-title h1 {
        max-width: 7.2em;
        font-size: clamp(34px, 11vw, 44px);
        line-height: 1.06;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .studio-hero-title.page-title p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.72;
    }

    .studio-mode-hub,
    .studio-quick-panel {
        padding: 14px;
    }

    .studio-quick-presets {
        grid-template-columns: 1fr;
    }

    .studio-spark-head {
        display: grid;
        justify-content: start;
    }

    .studio-spark-head strong {
        text-align: left;
    }

    .studio-bridge-actions .primary-link,
    .studio-bridge-actions .primary-btn,
    .studio-bridge-actions .secondary-btn {
        width: 100%;
        justify-content: center;
    }

    .studio-mode-card {
        min-height: 0;
    }
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    color: var(--text);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    background:
            linear-gradient(135deg, rgba(255, 209, 102, 0.22), transparent 28rem),
            linear-gradient(225deg, rgba(33, 183, 197, 0.18), transparent 26rem),
            var(--paper);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 72px;
    padding: 0 5vw;
    border-bottom: 1px solid rgba(230, 225, 236, 0.8);
    background: rgba(251, 250, 252, 0.86);
    backdrop-filter: blur(18px);
}

.brand {
    color: var(--ink);
    font-weight: 900;
    font-size: 20px;
    white-space: nowrap;
}

.nav {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.nav a {
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
}

.nav a:hover,
.nav a.active {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 8px 22px rgba(39, 28, 62, 0.08);
}

.nav-button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.nav-button:hover {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 8px 22px rgba(39, 28, 62, 0.08);
}

.nav-notification-link {
    position: relative;
}

.nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: #b42318;
    font-size: 11px;
    line-height: 1;
}

.shared-nav-root:empty {
    display: none;
}

body[data-shared-nav-active="true"] .topbar > .nav,
body[data-shared-nav-active="true"] .topbar > .primary-link {
    display: none;
}

.shared-nav-root {
    flex: 1;
    min-width: 0;
}

.shared-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.shared-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.shared-nav-links::-webkit-scrollbar {
    display: none;
}

.shared-nav-links a {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.shared-nav-links a:hover,
.shared-nav-links a.active {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 8px 22px rgba(39, 28, 62, 0.08);
}

.shared-nav-links a:hover {
    transform: translateY(-1px);
}

.shared-nav-user {
    padding-right: 28px !important;
}

.shared-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
}

.shared-nav-status {
    max-width: 180px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.primary-btn,
.secondary-btn,
.primary-link,
.ghost-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

.primary-btn,
.primary-link {
    color: #fff;
    background: var(--ink);
}

.secondary-btn,
.ghost-link {
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
}

.secondary-btn.danger {
    color: #b42318;
}

.secondary-btn.is-active {
    color: #fff;
    background: var(--cyan);
    border-color: var(--cyan);
}

.primary-btn.is-following {
    background: var(--cyan);
}

main {
    width: min(1180px, 90vw);
    margin: 0 auto;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 36px;
    align-items: center;
    min-height: calc(100vh - 172px);
    padding: 64px 0 34px;
}

.hero-copy h1,
.page-title h1 {
    margin: 10px 0 18px;
    color: var(--ink);
    font-size: clamp(44px, 8vw, 86px);
    line-height: 0.98;
    letter-spacing: 0;
}

.hero-copy p,
.page-title p {
    max-width: 660px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.eyebrow {
    margin: 0;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero-panel {
    position: relative;
    min-height: 460px;
    border-radius: 8px;
    overflow: hidden;
    background:
            linear-gradient(180deg, rgba(23, 21, 31, 0.06), rgba(23, 21, 31, 0.42)),
            url("/animaker/img/generated/home-hero-oc-studio.webp") center / cover;
    box-shadow: var(--shadow);
}

.signal-card {
    position: absolute;
    right: 22px;
    top: 24px;
    width: 178px;
    padding: 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow);
}

.signal-card.dark {
    top: auto;
    right: auto;
    left: 22px;
    bottom: 24px;
    color: #fff;
    background: rgba(23, 21, 31, 0.9);
}

.signal-card span,
.signal-card small,
.muted {
    color: var(--muted);
}

.signal-card.dark small {
    color: rgba(255, 255, 255, 0.72);
}

.signal-card strong {
    display: block;
    margin: 8px 0;
    color: inherit;
    font-size: 38px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 48px;
}

.metric,
.project-card,
.work-card,
.character-card,
.list-item,
.post-item,
.role-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.metric {
    padding: 22px;
}

.metric span {
    display: block;
    color: var(--muted);
}

.metric strong {
    color: var(--ink);
    font-size: 36px;
}

.stats-grid .home-metric-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 236px;
    padding: 20px;
    color: inherit;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.92)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.13), transparent 35%);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.stats-grid .home-metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--pink), var(--yellow));
}

.stats-grid .home-metric-card:hover {
    transform: translateY(-4px);
    border-color: rgba(33, 183, 197, 0.42);
    box-shadow: 0 22px 54px rgba(39, 28, 62, 0.13);
}

.metric-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-weight: 900;
}

.metric-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.12);
    font-size: 13px;
    font-weight: 900;
}

.home-metric-card strong {
    display: block;
    margin-top: 14px;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1;
}

.metric-visual {
    width: 100%;
    height: 104px;
    margin-top: 16px;
    border-radius: 8px;
    object-fit: cover;
    background: #17151f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.home-metric-card p {
    margin: 14px 0 18px;
    color: var(--text);
    line-height: 1.68;
}

.metric-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(230, 225, 236, 0.82);
}

.metric-foot small {
    color: var(--muted);
    font-weight: 800;
}

.metric-foot em {
    color: var(--cyan);
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.section-heading,
.row-between,
.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.section-heading {
    margin: 46px 0 18px;
}

.section-heading h2,
.page-title h1 {
    color: var(--ink);
}

.section-heading h2 {
    margin: 6px 0 0;
    font-size: 30px;
}

.section-heading > a {
    color: var(--cyan);
    font-weight: 900;
}

.compact {
    margin-top: 0;
}

.project-grid,
.work-grid,
.character-grid,
.player-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.community-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-grid.wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card,
.work-card,
.character-card,
.community-card,
.player-card {
    overflow: hidden;
}

.community-card,
.player-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.project-card img {
    height: 210px;
}

.work-card > img,
.work-card > a > img {
    height: 280px;
    object-position: center 32%;
}

.community-card > img {
    height: 300px;
}

.character-card img {
    height: 320px;
}

.card-body {
    padding: 18px;
}

.card-body h3,
.list-item h3,
.post-item h3,
.role-row h3 {
    margin: 12px 0 8px;
    color: var(--ink);
    font-size: 20px;
}

.card-body p,
.list-item p,
.post-item p,
.role-row p {
    color: var(--muted);
    line-height: 1.65;
}

.pill,
.tag-row span,
.post-item span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 209, 102, 0.42);
    font-size: 13px;
    font-weight: 900;
}

.success-pill {
    background: rgba(87, 204, 153, 0.28);
}

.danger-pill {
    color: #b42318;
    background: rgba(180, 35, 24, 0.12);
}

.muted-pill {
    background: rgba(112, 107, 124, 0.12);
}

.tag-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.progress {
    height: 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #eee8f4;
}

.progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow));
}

.card-foot {
    margin-top: 14px;
    color: var(--muted);
    font-weight: 700;
}

.creator-line,
.social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.creator-line {
    margin-top: 14px;
    color: var(--ink);
    font-weight: 900;
}

.creator-line img,
.player-card > img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.social-row {
    justify-content: space-between;
    margin-top: 16px;
    color: var(--muted);
    font-weight: 800;
}

.social-row .secondary-btn {
    min-height: 34px;
    padding: 0 12px;
}

.player-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px;
}

.player-card > img {
    width: 58px;
    height: 58px;
}

.player-card h3 {
    margin: 0 0 6px;
    color: var(--ink);
}

.player-card p,
.player-card small {
    display: block;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 54px 0 80px;
}

.list-item,
.post-item,
.role-row {
    padding: 18px;
    margin-bottom: 14px;
}

.list-item,
.role-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.page-title {
    padding: 56px 0 28px;
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr) minmax(150px, 0.7fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.05);
}

.filter-bar label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.filter-bar input,
.filter-bar select {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.load-more-row {
    display: flex;
    justify-content: center;
    margin: 24px 0 80px;
}

.filter-count {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.14);
    font-weight: 900;
    white-space: nowrap;
}

.table-list {
    margin-bottom: 80px;
}

.designer-board {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 28px;
}

.avatar-preview,
.designer-form {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.avatar-preview {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 24px;
}

.avatar-preview h2 {
    margin: 8px 0;
    color: var(--ink);
    font-size: 30px;
}

.designer-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 24px;
}

.generator-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.preview-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.preview-tags span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.16);
    font-weight: 900;
    font-size: 13px;
}

.ai-prompt-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(33, 183, 197, 0.1), rgba(255, 93, 143, 0.08)),
            #fff;
}

.designer-form .ai-prompt-panel textarea {
    min-height: 170px;
    font-size: 13px;
    line-height: 1.72;
}

.designer-form label,
.field-label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.designer-form input,
.designer-form select,
.designer-form textarea {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.designer-form textarea {
    padding: 12px;
    resize: vertical;
}

.form-wide {
    grid-column: 1 / -1;
}

.toast-error,
.toast-success {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 30;
    max-width: min(420px, calc(100vw - 40px));
    padding: 14px 16px;
    border-radius: 8px;
    color: #fff;
    background: var(--ink);
    box-shadow: var(--shadow);
    font-weight: 800;
}

.toast-error {
    background: #b42318;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(23, 21, 31, 0.42);
}

.comment-modal {
    width: min(520px, 100%);
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.comment-modal h2 {
    margin: 0;
    color: var(--ink);
}

.comment-modal textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    resize: vertical;
}

.comment-modal label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.comment-modal input,
.comment-modal select {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.edit-modal {
    width: min(720px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: calc(100vh - 44px);
    overflow: auto;
}

.edit-modal h2,
.edit-modal label:last-of-type,
.edit-modal .modal-actions {
    grid-column: 1 / -1;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.role-row {
    grid-template-columns: 112px minmax(0, 1.25fr) minmax(190px, 0.7fr) auto;
}

.role-row-cover {
    width: 112px;
    height: 78px;
    border-radius: 8px;
    object-fit: cover;
    background: #17151f;
}

.challenge-list {
    margin-bottom: 48px;
}

.role-row strong,
.role-row span {
    display: block;
}

blockquote {
    margin: 16px 0;
    padding-left: 14px;
    border-left: 4px solid var(--pink);
    color: var(--ink);
    font-weight: 800;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 28px;
    align-items: stretch;
    padding: 58px 0 80px;
}

.auth-art,
.auth-card,
.profile-hero,
.manage-card,
.favorite-card,
.generation-card,
.comment-item,
.empty-state {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.auth-art {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px;
    color: #fff;
    background:
            linear-gradient(180deg, rgba(8, 13, 30, 0.08), rgba(8, 13, 30, 0.72)),
            url("/animaker/img/generated/home-hero-oc-studio.webp") center / cover;
}

.auth-art h1 {
    max-width: 640px;
    margin: 10px 0 16px;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1;
    letter-spacing: 0;
}

.auth-art p {
    max-width: 580px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.8;
}

.auth-card {
    display: grid;
    gap: 16px;
    align-content: center;
    padding: 28px;
}

.auth-card h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 28px;
}

.auth-card label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.auth-card input,
.auth-card textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.auth-card textarea {
    min-height: 86px;
    padding: 12px;
    resize: vertical;
}

.auth-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.auth-switch button {
    border: 0;
    color: var(--cyan);
    background: transparent;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.profile-hero {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    margin: 52px 0 22px;
    padding: 24px;
}

.profile-hero img {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #fff;
}

.profile-hero h1 {
    margin: 8px 0;
    color: var(--ink);
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1;
    letter-spacing: 0;
}

.profile-hero p {
    max-width: 680px;
    color: var(--muted);
    line-height: 1.7;
}

.profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.manage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.manage-card {
    overflow: hidden;
}

.manage-card > img {
    height: 260px;
}

.favorite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 80px;
}

.generation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 80px;
}

.ip-project-grid,
.export-record-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 42px;
}

.following-grid,
.notification-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 42px;
}

.favorite-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
}

.favorite-card img {
    width: 92px;
    height: 92px;
    border-radius: 8px;
}

.favorite-card h3 {
    margin: 10px 0 6px;
    color: var(--ink);
}

.favorite-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.generation-card {
    overflow: hidden;
}

.ip-project-card,
.export-record-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.ip-project-card img {
    height: 190px;
}

.ip-project-card small {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    line-height: 1.5;
}

.export-record-card {
    display: grid;
    gap: 12px;
    align-content: space-between;
    padding: 16px;
}

.export-record-card h3 {
    margin: 10px 0 8px;
    color: var(--ink);
}

.export-record-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.post-create-modal p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.post-create-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.relation-existing {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    max-height: 240px;
    overflow: auto;
}

.relation-existing article {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.relation-existing span,
.relation-existing strong {
    color: var(--ink);
}

.relation-existing p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.generation-card img {
    height: 180px;
}

.generation-card > div {
    padding: 14px;
}

.generation-card p {
    color: var(--muted);
    line-height: 1.6;
}

.generation-card small {
    display: block;
    color: #b42318;
    line-height: 1.5;
}

.following-card,
.notification-card,
.feed-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.following-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
}

.following-card img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.following-card h3,
.notification-card h3,
.feed-card h3 {
    margin: 8px 0 6px;
    color: var(--ink);
}

.following-card p,
.notification-card p,
.feed-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.following-card small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-weight: 800;
}

.notification-card {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}

.notification-card.is-unread {
    border-color: rgba(33, 183, 197, 0.55);
    background: rgba(255, 255, 255, 0.98);
}

.notification-card img {
    width: 78px;
    height: 78px;
    border-radius: 8px;
    background: #f3eef8;
}

.notification-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.notification-actions .secondary-btn {
    min-height: 34px;
    padding: 0 12px;
}

.feed-stats {
    margin-bottom: 24px;
}

.feed-layout {
    margin-bottom: 38px;
}

.feed-list {
    display: grid;
    gap: 14px;
}

.feed-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
}

.feed-avatar img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
}

.feed-work {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
}

.feed-work img {
    width: 92px;
    height: 70px;
    border-radius: 8px;
}

.cocreate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 42px;
}

.cocreate-card,
.version-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.cocreate-card {
    overflow: hidden;
}

.cocreate-card > a > img {
    height: 180px;
}

.cocreate-card > div {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.cocreate-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.cocreate-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.version-timeline {
    position: relative;
    display: grid;
    gap: 12px;
    margin-bottom: 42px;
}

.version-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 17px;
    width: 2px;
    background: rgba(33, 183, 197, 0.24);
}

.version-card {
    position: relative;
    display: grid;
    gap: 8px;
    margin-left: 36px;
    padding: 14px 16px;
}

.version-card::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 18px;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 1px rgba(33, 183, 197, 0.32);
}

.version-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.version-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
}

.version-card p {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
}

.version-card small {
    color: var(--muted);
    font-weight: 800;
}

.version-modal {
    width: min(680px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
}

.detail-shell {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: start;
    padding: 52px 0 28px;
}

.detail-cover,
.detail-panel,
.detail-comments {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.detail-cover {
    overflow: hidden;
}

.detail-cover img {
    min-height: 620px;
}

.detail-panel {
    padding: 24px;
}

.detail-panel h1 {
    margin: 14px 0 12px;
    color: var(--ink);
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1;
    letter-spacing: 0;
}

.detail-panel p {
    color: var(--muted);
    line-height: 1.8;
}

.detail-creator {
    margin: 18px 0;
}

.detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.detail-field {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.detail-field span {
    display: block;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
}

.detail-field strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    line-height: 1.45;
}

.detail-actions {
    justify-content: flex-start;
}

.detail-comments {
    margin-bottom: 80px;
    padding: 22px;
}

.detail-recommend-grid {
    margin-bottom: 38px;
}

.comment-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    margin-top: 12px;
    box-shadow: none;
}

.comment-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.comment-item p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.comment-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.text-danger-btn {
    border: 0;
    padding: 0;
    color: #b42318;
    background: transparent;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.admin-login {
    display: grid;
    grid-template-columns: minmax(320px, 460px);
    margin-bottom: 80px;
}

.admin-console {
    margin-bottom: 80px;
}

.admin-toolbar {
    margin-bottom: 18px;
}

.admin-toolbar h2 {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 30px;
}

.admin-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px 0 16px;
}

.admin-panel {
    display: grid;
    gap: 12px;
}

.admin-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.admin-row img {
    width: 86px;
    height: 86px;
    border-radius: 8px;
}

.admin-row h3 {
    margin: 10px 0 6px;
    color: var(--ink);
}

.admin-row p {
    margin: 0 0 8px;
    color: var(--muted);
    line-height: 1.55;
}

.admin-row small {
    display: block;
    color: var(--muted);
    line-height: 1.5;
}

.admin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.danger-text {
    color: #b42318 !important;
}

body[data-page="admin"][data-admin-vue-active="true"] .admin-legacy {
    display: none;
}

.vue-admin-root:empty {
    display: none;
}

.vue-admin {
    display: grid;
    gap: 24px;
    padding: 48px 0 80px;
}

.vue-admin-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 22px;
    align-items: stretch;
}

.vue-admin-hero > div,
.vue-admin-login form,
.vue-admin-login aside,
.vue-admin-config,
.vue-admin-ops-brief,
.vue-admin-ops-checks article,
.vue-admin-provider,
.vue-admin-warning,
.vue-admin-workbench,
.vue-admin-row,
.vue-admin-metrics article,
.vue-admin-migration {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-admin-hero > div:first-child {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 320px;
    padding: 34px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.92)),
            radial-gradient(circle at 12% 12%, rgba(33, 183, 197, 0.2), transparent 28%),
            radial-gradient(circle at 88% 8%, rgba(255, 209, 102, 0.22), transparent 30%);
}

.vue-admin-hero h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(44px, 7vw, 78px);
    line-height: 0.98;
    letter-spacing: 0;
}

.vue-admin-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.vue-admin-hero-card {
    display: grid;
    align-content: end;
    gap: 12px;
    min-height: 320px;
    padding: 26px;
    color: #fff;
    background:
            linear-gradient(150deg, rgba(23, 21, 31, 0.96), rgba(49, 45, 64, 0.94)),
            radial-gradient(circle at 18% 16%, rgba(33, 183, 197, 0.26), transparent 36%);
}

.vue-admin-hero > .vue-admin-hero-card {
    color: #fff;
    background:
            linear-gradient(150deg, rgba(23, 21, 31, 0.96), rgba(49, 45, 64, 0.94)),
            radial-gradient(circle at 18% 16%, rgba(33, 183, 197, 0.26), transparent 36%);
}

.vue-admin-hero-card span,
.vue-admin-hero-card small {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.vue-admin-hero-card strong {
    font-size: 30px;
    line-height: 1.2;
}

.vue-admin-login {
    display: grid;
    grid-template-columns: minmax(320px, 0.7fr) minmax(260px, 0.3fr);
    gap: 18px;
    align-items: stretch;
}

.vue-admin-login form,
.vue-admin-login aside {
    display: grid;
    gap: 16px;
    padding: 24px;
}

.vue-admin-login h2,
.vue-admin-toolbar h2,
.vue-admin-config h2,
.vue-admin-ops-brief h2,
.vue-admin-provider h2,
.vue-admin-warning h2 {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 30px;
}

.vue-admin-login label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 900;
}

.vue-admin-login input,
.vue-admin-filters input,
.vue-admin-filters select {
    min-height: 44px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.vue-admin-login aside span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.1);
    color: var(--ink);
    font-weight: 800;
}

.vue-admin-toolbar,
.vue-admin-actions,
.vue-admin-tabs,
.vue-admin-filters,
.vue-admin-row-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vue-admin-toolbar {
    align-items: center;
    margin-bottom: 0;
}

.vue-admin-actions {
    justify-content: flex-end;
}

.vue-admin-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.vue-admin-metrics article {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 8px;
    min-height: 142px;
    padding: 18px;
}

.vue-admin-metrics article::before {
    content: "";
    position: absolute;
    inset: auto -24px -34px auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(33, 183, 197, 0.15);
}

.vue-admin-metrics .tone-danger::before {
    background: rgba(180, 35, 24, 0.14);
}

.vue-admin-metrics .tone-notice::before {
    background: rgba(255, 209, 102, 0.26);
}

.vue-admin-metrics span,
.vue-admin-metrics small {
    color: var(--muted);
    font-weight: 800;
}

.vue-admin-metrics strong {
    color: var(--ink);
    font-size: 38px;
    line-height: 1;
}

.vue-admin-migration {
    display: grid;
    grid-template-columns: minmax(260px, 0.34fr) minmax(0, 0.46fr) minmax(260px, 0.2fr);
    gap: 12px;
    padding: 18px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.92)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.12), transparent 30%),
            radial-gradient(circle at 100% 4%, rgba(255, 209, 102, 0.15), transparent 26%);
}

.vue-admin-migration-brief,
.vue-admin-migration-grid article,
.vue-admin-migration-next {
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-admin-migration-brief {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    color: #fff;
    background: linear-gradient(150deg, rgba(23, 21, 31, 0.98), rgba(48, 44, 61, 0.96));
}

.vue-admin-migration-brief h2,
.vue-admin-migration-brief p {
    margin: 0;
    color: #fff;
}

.vue-admin-migration-brief h2 {
    font-size: 25px;
    line-height: 1.18;
}

.vue-admin-migration-brief strong {
    color: #fff;
    font-size: 58px;
    line-height: 0.95;
}

.vue-admin-migration-brief p,
.vue-admin-migration-brief small {
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.62;
}

.vue-admin-migration-brief .eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.vue-admin-migration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-admin-migration-grid article {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 156px;
    padding: 14px;
}

.vue-admin-migration-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(23, 21, 31, 0.18);
}

.vue-admin-migration-grid article.tone-good::before {
    background: var(--green);
}

.vue-admin-migration-grid article.tone-warn::before {
    background: var(--yellow);
}

.vue-admin-migration-grid article.tone-danger::before {
    background: var(--pink);
}

.vue-admin-migration-grid span,
.vue-admin-migration-next span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vue-admin-migration-grid strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.22;
}

.vue-admin-migration-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-admin-migration-grid small {
    display: block;
    padding-top: 8px;
    border-top: 1px solid rgba(23, 21, 31, 0.08);
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.vue-admin-migration-next {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 16px;
}

.vue-admin-migration-next ol {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 20px;
    color: var(--text);
    font-size: 13px;
    font-weight: 820;
    line-height: 1.58;
}

.vue-admin-migration-next li::marker {
    color: var(--aqua);
    font-weight: 900;
}

.vue-admin-config {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.vue-admin-config-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
    gap: 14px;
    align-items: stretch;
}

.vue-admin-config-head p {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-admin-config-head aside {
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(246, 250, 252, 0.95);
}

.vue-admin-config-head aside.tone-danger {
    border-color: rgba(180, 35, 24, 0.22);
    background: rgba(180, 35, 24, 0.06);
}

.vue-admin-config-head aside.tone-warn {
    border-color: rgba(255, 209, 102, 0.5);
    background: rgba(255, 209, 102, 0.12);
}

.vue-admin-config-head aside.tone-good {
    border-color: rgba(34, 139, 88, 0.22);
    background: rgba(34, 139, 88, 0.06);
}

.vue-admin-config-head aside span,
.vue-admin-config-head aside small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.5;
}

.vue-admin-config-head aside strong {
    color: var(--ink);
    font-size: 24px;
}

.vue-admin-secret-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.14), transparent 32%);
}

.vue-admin-secret-rail.tone-danger {
    border-color: rgba(180, 35, 24, 0.24);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 246, 0.92)),
            radial-gradient(circle at 0 0, rgba(255, 93, 143, 0.16), transparent 34%);
}

.vue-admin-secret-rail.tone-warn {
    border-color: rgba(255, 209, 102, 0.52);
}

.vue-admin-secret-rail.tone-good {
    border-color: rgba(87, 204, 153, 0.32);
}

.vue-admin-secret-rail article {
    display: grid;
    gap: 7px;
    align-content: start;
    min-height: 122px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.76);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
}

.vue-admin-secret-rail span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-admin-secret-rail strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
}

.vue-admin-secret-rail p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-admin-runtime {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.vue-admin-runtime article {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 8px;
    min-height: 118px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-admin-runtime article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(23, 21, 31, 0.18);
}

.vue-admin-runtime article.tone-good::before {
    background: var(--green);
}

.vue-admin-runtime article.tone-warn::before {
    background: var(--yellow);
}

.vue-admin-runtime article.tone-danger::before {
    background: var(--pink);
}

.vue-admin-runtime span,
.vue-admin-runtime small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

.vue-admin-runtime strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.28;
}

.vue-admin-config-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vue-admin-config-grid article {
    display: grid;
    gap: 12px;
    align-content: start;
    min-height: 250px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.92));
}

.vue-admin-config-grid article.status-MISSING {
    border-color: rgba(180, 35, 24, 0.24);
}

.vue-admin-config-grid article.status-WARN {
    border-color: rgba(255, 209, 102, 0.55);
}

.vue-admin-config-grid h3 {
    margin: 0;
    color: var(--ink);
    font-size: 19px;
}

.vue-admin-config-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-admin-config-items {
    display: grid;
    gap: 8px;
}

.vue-admin-config-items span {
    display: grid;
    grid-template-columns: minmax(110px, 0.45fr) minmax(0, 0.55fr);
    gap: 8px;
    align-items: center;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-admin-config-items strong {
    color: var(--ink);
    font-size: 13px;
}

.vue-admin-config-items em {
    overflow: hidden;
    color: var(--muted);
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vue-admin-config-items .is-missing {
    background: rgba(180, 35, 24, 0.08);
}

.vue-admin-config-items .is-missing em {
    color: #b42318;
}

.vue-admin-config-guide {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.7fr) minmax(320px, 1fr);
    gap: 12px;
}

.vue-admin-config-guide article,
.vue-admin-config-guide pre,
.vue-admin-env-snippets {
    min-height: 220px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(246, 250, 252, 0.92);
}

.vue-admin-config-guide article {
    display: grid;
    gap: 12px;
    align-content: start;
}

.vue-admin-config-guide h3 {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
}

.vue-admin-config-guide p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.vue-admin-config-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vue-admin-config-actions small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.5;
}

.vue-admin-config-guide article > span {
    color: var(--ink);
    font-weight: 900;
}

.vue-admin-config-guide ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 22px;
    color: var(--text);
    line-height: 1.6;
}

.vue-admin-config-guide li::marker {
    color: var(--aqua);
    font-weight: 900;
}

.vue-admin-config-guide pre {
    overflow: auto;
    color: var(--text);
    font: 800 12px/1.65 var(--font);
    white-space: pre-wrap;
}

.vue-admin-env-snippets {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.vue-admin-env-snippets label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.vue-admin-env-snippets label > span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.vue-admin-env-snippets pre {
    min-height: 120px;
    max-height: 260px;
    margin: 0;
    background: rgba(255, 255, 255, 0.72);
}

.vue-admin-rollout {
    display: grid;
    grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.64fr);
    gap: 12px;
}

.vue-admin-rollout-brief,
.vue-admin-rollout-grid article {
    border: 1px solid var(--line);
    border-radius: 8px;
}

.vue-admin-rollout-brief {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 18px;
    background: linear-gradient(150deg, rgba(23, 21, 31, 0.98), rgba(52, 47, 62, 0.96));
    color: #fff;
}

.vue-admin-rollout-brief h3,
.vue-admin-rollout-brief p {
    margin: 0;
    color: #fff;
}

.vue-admin-rollout-brief h3 {
    font-size: 24px;
}

.vue-admin-rollout-brief strong {
    color: #fff;
    font-size: 54px;
    line-height: 0.95;
}

.vue-admin-rollout-brief p {
    line-height: 1.65;
}

.vue-admin-rollout-brief .eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.vue-admin-rollout-brief.tone-danger {
    border-color: rgba(180, 35, 24, 0.5);
    background: linear-gradient(150deg, #17151f, #402629);
}

.vue-admin-rollout-brief.tone-warn {
    border-color: rgba(255, 209, 102, 0.55);
}

.vue-admin-rollout-brief.tone-good {
    border-color: rgba(34, 139, 88, 0.45);
}

.vue-admin-rollout-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vue-admin-rollout-stats span {
    display: grid;
    gap: 4px;
    min-height: 68px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 850;
}

.vue-admin-rollout-stats b {
    color: #fff;
    font-size: 24px;
    line-height: 1;
}

.vue-admin-rollout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-admin-rollout-grid article {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 156px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.vue-admin-rollout-grid article.tone-good {
    border-color: rgba(34, 139, 88, 0.22);
}

.vue-admin-rollout-grid article.tone-warn {
    border-color: rgba(255, 209, 102, 0.5);
    background: rgba(255, 250, 235, 0.78);
}

.vue-admin-rollout-grid article.tone-danger {
    border-color: rgba(180, 35, 24, 0.24);
    background: rgba(255, 245, 244, 0.82);
}

.vue-admin-rollout-grid h4 {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
}

.vue-admin-rollout-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.vue-admin-rollout-grid small {
    display: block;
    padding-top: 8px;
    border-top: 1px solid rgba(23, 21, 31, 0.08);
    color: var(--ink);
    font-weight: 850;
    line-height: 1.5;
}

.vue-admin-ops {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 14px;
}

.vue-admin-ops-brief {
    display: grid;
    gap: 16px;
    padding: 22px;
    color: #fff;
    background:
            linear-gradient(150deg, rgba(23, 21, 31, 0.97), rgba(47, 43, 61, 0.95)),
            radial-gradient(circle at 12% 0%, rgba(33, 183, 197, 0.22), transparent 34%),
            radial-gradient(circle at 92% 12%, rgba(255, 209, 102, 0.18), transparent 28%);
}

.vue-admin-ops-brief h2,
.vue-admin-ops-brief p,
.vue-admin-ops-brief small {
    color: #fff;
}

.vue-admin-ops-brief .eyebrow,
.vue-admin-ops-brief small {
    color: rgba(255, 255, 255, 0.72);
}

.vue-admin-ops-brief p {
    margin: 8px 0 0;
    line-height: 1.7;
}

.vue-admin-ops-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-admin-ops-kpis span {
    display: grid;
    gap: 4px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.vue-admin-ops-kpis strong {
    color: #fff;
    font-size: 24px;
    line-height: 1;
}

.vue-admin-ops-brief pre {
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(0, 0, 0, 0.18);
    font: 800 13px/1.65 var(--font);
    white-space: pre-wrap;
}

.vue-admin-ops-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.vue-admin-ops-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vue-admin-ops-checks article {
    display: grid;
    align-content: space-between;
    gap: 14px;
    min-height: 190px;
    padding: 18px;
}

.vue-admin-ops-checks h3 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
}

.vue-admin-ops-checks p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.vue-admin-ops-checks .tone-good {
    border-color: rgba(34, 139, 88, 0.22);
}

.vue-admin-ops-checks .tone-warn {
    border-color: rgba(255, 209, 102, 0.5);
}

.vue-admin-ops-checks .tone-danger {
    border-color: rgba(180, 35, 24, 0.22);
}

.vue-admin-oss-smoke {
    grid-column: 1 / -1;
    overflow: hidden;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 252, 0.94)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.16), transparent 32%);
}

.vue-admin-oss-smoke.tone-good {
    border-color: rgba(34, 139, 88, 0.26);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 255, 249, 0.9)),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.18), transparent 32%);
}

.vue-admin-oss-smoke.tone-warn {
    border-color: rgba(255, 209, 102, 0.54);
}

.vue-admin-oss-smoke.tone-danger {
    border-color: rgba(180, 35, 24, 0.28);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 246, 0.92)),
            radial-gradient(circle at 100% 0, rgba(255, 93, 143, 0.14), transparent 34%);
}

.vue-admin-oss-smoke > .row-between {
    align-items: flex-start;
}

.vue-admin-oss-smoke span:not(.pill) {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-admin-oss-smoke h3 {
    margin-top: 5px;
}

.vue-admin-oss-smoke-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.vue-admin-oss-smoke-grid span {
    display: grid;
    gap: 5px;
    min-height: 62px;
    padding: 10px;
    border: 1px solid rgba(230, 225, 236, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
}

.vue-admin-oss-smoke-grid strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.vue-admin-oss-smoke-grid em {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 830;
    line-height: 1.45;
    text-transform: none;
}

.vue-admin-provider {
    display: grid;
    grid-template-columns: 220px repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: stretch;
    padding: 18px;
}

.vue-admin-provider > div {
    display: grid;
    align-content: center;
}

.vue-admin-provider article {
    display: grid;
    gap: 8px;
    min-height: 108px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(246, 250, 252, 0.95), rgba(255, 255, 255, 0.96));
}

.vue-admin-provider strong {
    color: var(--ink);
    font-size: 18px;
}

.vue-admin-provider span,
.vue-admin-provider small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.5;
}

.vue-admin-warning {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    padding: 22px;
}

.vue-admin-warning ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vue-admin-warning li {
    padding: 12px 14px;
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 209, 102, 0.18);
    line-height: 1.6;
}

.vue-admin-workbench {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.vue-admin-tabs button span {
    margin-left: 8px;
    color: inherit;
    opacity: 0.72;
}

.vue-admin-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
}

.vue-admin-list {
    display: grid;
    gap: 12px;
}

.vue-admin-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
}

.vue-admin-row > img {
    width: 96px;
    height: 96px;
    border-radius: 8px;
}

.vue-admin-row h3 {
    margin: 10px 0 6px;
    color: var(--ink);
    font-size: 20px;
}

.vue-admin-row p {
    margin: 0 0 8px;
    color: var(--muted);
    line-height: 1.55;
}

.vue-admin-row small {
    display: block;
    color: var(--muted);
    line-height: 1.5;
}

.vue-admin-row-actions {
    justify-content: flex-end;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 28px;
    text-align: center;
}

.empty-state h2 {
    margin: 0 0 10px;
    color: var(--ink);
}

.empty-state p {
    color: var(--muted);
}

.vue-empty-hint {
    max-width: 620px;
    margin: 8px auto 0;
}

.vue-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.vue-empty-actions .primary-btn,
.vue-empty-actions .secondary-btn {
    min-height: 44px;
    border-radius: 18px;
}

.empty-state.small {
    color: var(--muted);
    font-weight: 800;
}

.ip-detail-shell {
    padding: 48px 0 80px;
}

.ip-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 28px;
}

.ip-hero-cover,
.ip-hero-copy,
.ip-detail-section,
.ip-character-card,
.relation-map,
.relation-line-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.ip-hero-cover {
    overflow: hidden;
    min-height: 430px;
}

.ip-hero-cover img {
    height: 100%;
    min-height: 430px;
}

.ip-hero-copy {
    display: grid;
    align-content: center;
    gap: 16px;
    padding: 30px;
}

.ip-hero-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
    letter-spacing: 0;
}

.ip-hero-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.ip-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.ip-detail-section {
    padding: 18px;
}

.ip-detail-section span {
    color: var(--cyan);
    font-weight: 900;
}

.ip-detail-section p {
    margin: 10px 0 0;
    color: var(--text);
    line-height: 1.7;
}

.relation-map {
    position: relative;
    height: min(620px, 68vw);
    min-height: 420px;
    overflow: hidden;
    margin-bottom: 14px;
    background:
            linear-gradient(135deg, rgba(255, 209, 102, 0.18), transparent 60%),
            linear-gradient(225deg, rgba(33, 183, 197, 0.16), transparent 58%),
            #fff;
}

.relation-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.relation-map line {
    stroke: rgba(33, 183, 197, 0.62);
    stroke-width: 0.7;
}

.relation-center,
.relation-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    text-align: center;
}

.relation-center {
    left: 50%;
    top: 50%;
    width: 148px;
    min-height: 148px;
    padding: 14px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    color: var(--ink);
    background: #fff;
}

.relation-center strong,
.relation-center span {
    display: block;
}

.relation-center strong {
    font-size: 18px;
    line-height: 1.25;
}

.relation-center span {
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
}

.relation-node {
    width: 126px;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(39, 28, 62, 0.12);
}

.relation-node img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
}

.relation-node span {
    font-weight: 900;
    font-size: 13px;
    line-height: 1.25;
}

.relation-line-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 36px;
}

.relation-line-card {
    padding: 14px;
}

.relation-line-card span,
.relation-line-card strong {
    display: block;
}

.relation-line-card span {
    color: var(--muted);
    font-weight: 800;
}

.relation-line-card strong {
    margin-top: 8px;
    color: var(--ink);
    font-size: 18px;
}

.relation-line-card p {
    margin: 8px 0 0;
    color: var(--text);
    line-height: 1.55;
}

.ip-character-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 80px;
}

.ip-character-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
}

.ip-character-card img {
    height: 100%;
    min-height: 190px;
}

.ip-character-card > div {
    padding: 16px 16px 16px 0;
}

.ip-character-card h3 {
    margin: 10px 0 8px;
    color: var(--ink);
}

.ip-character-card p,
.ip-character-card small {
    color: var(--muted);
    line-height: 1.55;
}

.ip-character-card p {
    margin: 0 0 10px;
}

body[data-page="ip"][data-ip-vue-active="true"] .ip-detail-legacy {
    display: none;
}

.vue-ip-root:empty {
    display: none;
}

.vue-ip {
    display: grid;
    gap: 24px;
    padding: 48px 0 80px;
}

.vue-ip-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    gap: 24px;
    align-items: stretch;
}

.vue-ip-cover,
.vue-ip-copy,
.vue-ip-section-grid article,
.vue-relation-map,
.vue-relation-lines article,
.vue-ip-character-card,
.vue-ip-version-list article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-ip-cover {
    overflow: hidden;
    min-height: 430px;
    background: #111827;
}

.vue-ip-cover img {
    height: 100%;
    min-height: 430px;
    object-position: center 32%;
}

.vue-ip-copy {
    display: grid;
    align-content: center;
    gap: 16px;
    padding: 30px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.92)),
            radial-gradient(circle at 16% 16%, rgba(255, 209, 102, 0.18), transparent 30%),
            radial-gradient(circle at 88% 10%, rgba(33, 183, 197, 0.18), transparent 28%);
}

.vue-ip-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
    letter-spacing: 0;
}

.vue-ip-copy blockquote {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.45;
}

.vue-ip-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.vue-ip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-ip-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vue-ip-stats article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-ip-stats span,
.vue-ip-section-grid span,
.vue-relation-lines span,
.vue-ip-version-list span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.vue-ip-stats strong {
    color: var(--ink);
    font-size: 34px;
    line-height: 1;
}

.vue-ip-stats small,
.vue-ip-version-list small {
    color: var(--muted);
    line-height: 1.45;
}

.vue-ip-series {
    display: grid;
    grid-template-columns: minmax(280px, 0.76fr) minmax(420px, 1.24fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(38, 35, 50, 0.96)),
            radial-gradient(circle at 10% 10%, rgba(33, 183, 197, 0.2), transparent 34%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.18), transparent 30%);
    box-shadow: 0 22px 60px rgba(22, 19, 29, 0.17);
}

.vue-ip-series-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 6px;
}

.vue-ip-series-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.8vw, 50px);
    line-height: 1.08;
    letter-spacing: 0;
}

.vue-ip-series-copy p,
.vue-ip-series-copy small {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.76;
}

.vue-ip-series-score {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
}

.vue-ip-series-score strong {
    color: #ffd166;
    font-size: 56px;
    line-height: 0.9;
}

.vue-ip-series-score span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 900;
}

.vue-ip-series-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-ip-series-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-ip-series-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-ip-series-grid article {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 184px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-ip-series-grid article.done {
    border-color: rgba(33, 183, 197, 0.4);
    background: rgba(33, 183, 197, 0.13);
}

.vue-ip-series-grid span {
    color: #ffd166;
    font-size: 12px;
    font-weight: 900;
}

.vue-ip-series-grid strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.24;
}

.vue-ip-series-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-ip-series-grid a {
    align-self: end;
    color: #b9f5ff;
    font-size: 13px;
    font-weight: 900;
}

.vue-ip-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vue-ip-section-grid article {
    padding: 18px;
}

.vue-ip-section-grid span {
    color: var(--cyan);
}

.vue-ip-section-grid p,
.vue-relation-lines p {
    margin: 10px 0 0;
    color: var(--text);
    line-height: 1.7;
}

.vue-ip-production {
    display: grid;
    grid-template-columns: minmax(280px, 0.76fr) minmax(360px, 1.24fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 252, 0.94)),
            radial-gradient(circle at 8% 10%, rgba(33, 183, 197, 0.16), transparent 30%),
            radial-gradient(circle at 98% 8%, rgba(255, 209, 102, 0.16), transparent 30%);
    box-shadow: 0 16px 48px rgba(39, 28, 62, 0.07);
}

.vue-ip-production-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 8px;
}

.vue-ip-production-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(30px, 3.5vw, 48px);
    line-height: 1.08;
}

.vue-ip-production-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.76;
}

.vue-ip-production-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-ip-production-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-ip-production-grid article,
.vue-ip-next-cast {
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-ip-production-grid article {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 178px;
    padding: 16px 16px 16px 18px;
}

.vue-ip-production-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--pink));
}

.vue-ip-production-grid span,
.vue-ip-next-cast .row-between span,
.vue-ip-next-cast-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-ip-production-grid strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.3;
}

.vue-ip-production-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.62;
}

.vue-ip-production-grid a,
.vue-ip-next-cast .row-between a,
.vue-ip-next-cast-grid a {
    color: var(--cyan);
    font-weight: 900;
}

.vue-ip-next-cast {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px;
}

.vue-ip-next-cast .row-between strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 18px;
}

.vue-ip-next-cast-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-ip-next-cast-grid article {
    display: grid;
    gap: 8px;
    min-height: 168px;
    padding: 12px;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 8px;
    background: rgba(23, 21, 31, 0.03);
}

.vue-ip-next-cast-grid strong {
    color: var(--ink);
    line-height: 1.3;
}

.vue-ip-next-cast-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.vue-ip-cocreate {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1.18fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 252, 0.94)),
            radial-gradient(circle at 12% 8%, rgba(255, 209, 102, 0.16), transparent 30%),
            radial-gradient(circle at 100% 12%, rgba(33, 183, 197, 0.14), transparent 32%);
    box-shadow: 0 16px 48px rgba(39, 28, 62, 0.07);
}

.vue-ip-cocreate-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 8px;
}

.vue-ip-cocreate-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.08;
}

.vue-ip-cocreate-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.76;
}

.vue-ip-cocreate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-ip-cocreate-copy small {
    color: #0b5561;
    font-weight: 850;
    line-height: 1.5;
}

.vue-ip-roadmap {
    display: grid;
    gap: 10px;
}

.vue-ip-roadmap article {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    padding: 16px 16px 16px 18px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-ip-roadmap article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--yellow), var(--cyan));
}

.vue-ip-roadmap span,
.vue-ip-cocreate-brief span,
.vue-ip-check-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-ip-roadmap strong {
    display: block;
    margin-top: 6px;
    color: var(--ink);
    font-size: 18px;
}

.vue-ip-roadmap p {
    margin: 9px 0 0;
    color: var(--text);
    line-height: 1.7;
}

.vue-ip-cocreate-brief {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 8px;
    background: rgba(22, 19, 29, 0.9);
    color: #fff;
}

.vue-ip-cocreate-brief strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 18px;
}

.vue-ip-cocreate-brief small {
    color: rgba(255, 255, 255, 0.74);
    font-weight: 800;
}

.vue-ip-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-ip-check-grid article {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.vue-ip-check-grid article.done {
    border-color: rgba(87, 204, 153, 0.42);
    background: rgba(87, 204, 153, 0.1);
}

.vue-ip-check-grid strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 15px;
}

.vue-ip-check-grid p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    line-height: 1.55;
}

.vue-ip-cocreate-brief pre {
    overflow-x: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
    font: inherit;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.vue-ip-block {
    display: grid;
    gap: 16px;
}

.vue-relation-wrap {
    display: grid;
    gap: 14px;
}

.vue-relation-map {
    position: relative;
    height: min(620px, 68vw);
    min-height: 420px;
    overflow: hidden;
    background:
            linear-gradient(135deg, rgba(255, 209, 102, 0.18), transparent 60%),
            linear-gradient(225deg, rgba(33, 183, 197, 0.16), transparent 58%),
            #fff;
}

.vue-relation-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vue-relation-map line {
    stroke: rgba(33, 183, 197, 0.62);
    stroke-width: 0.7;
}

.vue-relation-center,
.vue-relation-node {
    position: absolute;
    display: grid;
    place-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
}

.vue-relation-center {
    left: 50%;
    top: 50%;
    width: 148px;
    min-height: 148px;
    padding: 14px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    color: var(--ink);
    background: #fff;
}

.vue-relation-center strong {
    font-size: 18px;
    line-height: 1.25;
}

.vue-relation-center span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.vue-relation-node {
    width: 126px;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(39, 28, 62, 0.12);
}

.vue-relation-node img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
}

.vue-relation-node span {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.vue-relation-lines {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vue-relation-lines article {
    padding: 14px;
}

.vue-relation-lines strong,
.vue-ip-version-list strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.35;
}

.vue-ip-character-grid,
.vue-ip-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vue-ip-character-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
}

.vue-ip-character-card img {
    height: 100%;
    min-height: 220px;
}

.vue-ip-character-card > div {
    padding: 18px 18px 18px 0;
}

.vue-ip-character-card h3 {
    margin: 12px 0 8px;
    color: var(--ink);
    font-size: 22px;
}

.vue-ip-character-card p,
.vue-ip-character-card small {
    color: var(--muted);
    line-height: 1.6;
}

.vue-ip-character-card p {
    margin: 0 0 10px;
}

.vue-ip-version-list {
    display: grid;
    gap: 10px;
}

.vue-ip-version-list article {
    display: grid;
    gap: 6px;
    padding: 14px;
}

.export-shell {
    padding: 48px 0 80px;
}

.export-preview {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.export-cover,
.export-summary,
.export-card-sheet,
.export-copy-grid article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.export-cover {
    overflow: hidden;
    min-height: 420px;
}

.export-cover img {
    height: 100%;
    min-height: 420px;
}

.export-summary {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 30px;
}

.export-summary h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1;
    letter-spacing: 0;
}

.export-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.export-actions,
.export-templates {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.template-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 209, 102, 0.3);
    font-weight: 800;
    font-size: 13px;
}

.export-card-sheet {
    padding: 26px;
    margin-bottom: 24px;
}

.export-card-head {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.export-card-head span {
    color: var(--muted);
    font-weight: 800;
}

.export-card-head strong {
    color: var(--ink);
    font-size: 34px;
}

.export-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.export-section-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.export-section-card span {
    color: var(--cyan);
    font-weight: 900;
}

.export-section-card p {
    margin: 10px 0 0;
    color: var(--text);
    line-height: 1.7;
}

.export-character-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.export-character-strip {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.export-character-strip img {
    width: 82px;
    height: 82px;
    border-radius: 8px;
}

.export-character-strip strong,
.export-character-strip span {
    display: block;
}

.export-character-strip strong {
    color: var(--ink);
}

.export-character-strip span {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
}

.export-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.export-copy-grid article {
    padding: 18px;
}

.export-copy-grid h2 {
    margin: 0 0 12px;
    color: var(--ink);
}

.export-copy-grid pre {
    min-height: 220px;
    margin: 0;
    white-space: pre-wrap;
    color: var(--text);
    font: inherit;
    line-height: 1.7;
}

body[data-page="export"][data-export-vue-active="true"] .export-legacy {
    display: none;
}

.vue-export-root:empty {
    display: none;
}

.vue-export {
    padding: 48px 0 80px;
}

.vue-export-ready {
    display: grid;
    gap: 24px;
}

.vue-export-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 24px;
    align-items: stretch;
}

.vue-export-cover,
.vue-export-summary,
.vue-export-sheet,
.vue-export-copy-grid article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-export-cover {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: #111827;
}

.vue-export-cover img {
    height: 100%;
    min-height: 420px;
    object-position: center 30%;
}

.vue-export-cover-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 8px;
    color: #fff;
    background: rgba(18, 16, 28, 0.58);
    font-size: 13px;
    font-weight: 900;
    backdrop-filter: blur(14px);
}

.vue-export-summary {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: 30px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)),
            radial-gradient(circle at 12% 18%, rgba(33, 183, 197, 0.18), transparent 34%),
            radial-gradient(circle at 88% 6%, rgba(255, 209, 102, 0.2), transparent 26%);
}

.vue-export-summary h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1;
    letter-spacing: 0;
}

.vue-export-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.vue-export-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-export-flow article {
    min-height: 126px;
    padding: 14px;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
}

.vue-export-flow span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
}

.vue-export-flow strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 15px;
}

.vue-export-flow p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
}

.vue-export-actions,
.vue-export-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-export-status {
    color: var(--cyan) !important;
    font-weight: 900;
}

.vue-export-achievement {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(35, 32, 48, 0.96)),
            radial-gradient(circle at 10% 10%, rgba(255, 209, 102, 0.2), transparent 34%),
            radial-gradient(circle at 96% 0, rgba(33, 183, 197, 0.18), transparent 30%);
    box-shadow: 0 22px 62px rgba(22, 19, 29, 0.18);
}

.vue-export-achievement-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.vue-export-achievement-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 4.6vw, 58px);
    line-height: 1.02;
    letter-spacing: 0;
}

.vue-export-achievement-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.78;
}

.vue-export-achievement-score {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.vue-export-achievement-score strong {
    color: #ffd166;
    font-size: 58px;
    line-height: 0.9;
}

.vue-export-achievement-score span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 900;
}

.vue-export-achievement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-export-achievement-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-export-achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-export-achievement-grid article {
    min-height: 136px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-export-achievement-grid article.done {
    border-color: rgba(255, 209, 102, 0.38);
    background: rgba(255, 209, 102, 0.12);
}

.vue-export-achievement-grid span {
    color: #b9f5ff;
    font-size: 12px;
    font-weight: 900;
}

.vue-export-achievement-grid strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.25;
}

.vue-export-achievement-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-export-templates span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 209, 102, 0.3);
    font-size: 13px;
    font-weight: 800;
}

.vue-export-planner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 0.9fr);
    gap: 14px;
}

.vue-export-template-card,
.vue-export-checklist {
    min-height: 188px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.05);
}

.vue-export-template-card {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-export-template-card:hover,
.vue-export-template-card.active {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.46);
    box-shadow: 0 16px 38px rgba(33, 183, 197, 0.13);
}

.vue-export-template-card:focus-visible {
    outline: 3px solid rgba(33, 183, 197, 0.34);
    outline-offset: 3px;
}

.vue-export-template-card .row-between span,
.vue-export-checklist > span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vue-export-template-card .row-between strong {
    color: var(--ink);
    font-size: 13px;
}

.vue-export-template-card h2,
.vue-export-checklist h2 {
    margin: 18px 0 10px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.25;
}

.vue-export-template-card p,
.vue-export-template-card small {
    display: block;
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-export-template-card small {
    margin-top: 12px;
    color: var(--text);
    font-weight: 800;
}

.vue-export-checklist ul {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.vue-export-checklist li {
    padding-left: 18px;
    border-left: 3px solid rgba(23, 21, 31, 0.12);
}

.vue-export-checklist li.done {
    border-left-color: var(--cyan);
}

.vue-export-checklist strong {
    color: var(--ink);
}

.vue-export-checklist p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.vue-export-social-preview {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(249, 250, 252, 0.94)),
            radial-gradient(circle at 8% 10%, rgba(255, 209, 102, 0.18), transparent 30%),
            radial-gradient(circle at 100% 10%, rgba(229, 72, 119, 0.12), transparent 30%);
    box-shadow: 0 16px 44px rgba(39, 28, 62, 0.07);
}

.vue-export-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.vue-export-preview-head h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;
}

.vue-export-preview-head p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.72;
}

.vue-export-preview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.vue-export-preview-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1.18fr);
    gap: 16px;
    align-items: stretch;
}

.vue-export-share-card,
.vue-export-caption-card {
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(39, 28, 62, 0.05);
}

.vue-export-share-card {
    width: min(100%, 420px);
    margin: 0 auto;
    overflow: hidden;
}

.vue-export-share-card.is-long-card {
    aspect-ratio: 3 / 4;
}

.vue-export-share-card.is-vertical {
    aspect-ratio: 9 / 16;
    max-width: 360px;
}

.vue-export-share-card.is-archive {
    aspect-ratio: 4 / 5;
}

.vue-export-share-cover {
    position: relative;
    height: 58%;
    overflow: hidden;
    background: #111827;
}

.vue-export-share-card.is-vertical .vue-export-share-cover {
    height: 62%;
}

.vue-export-share-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.vue-export-share-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 44%, rgba(18, 16, 28, 0.7));
}

.vue-export-share-cover span {
    position: absolute;
    z-index: 1;
    left: 14px;
    bottom: 14px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 8px;
    padding: 0 10px;
    color: #fff;
    background: rgba(18, 16, 28, 0.58);
    font-size: 12px;
    font-weight: 900;
    backdrop-filter: blur(12px);
}

.vue-export-share-body {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.vue-export-share-body strong {
    color: var(--ink);
    font-size: 21px;
    line-height: 1.18;
}

.vue-export-share-body p {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.vue-export-share-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vue-export-share-tags span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
}

.vue-export-caption-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.vue-export-caption-card .row-between {
    align-items: flex-start;
}

.vue-export-caption-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-export-caption-card h3 {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.2;
}

.vue-export-caption-card > p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.65;
}

.vue-export-caption-sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-export-caption-sections div {
    min-height: 112px;
    padding: 12px;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 8px;
    background: rgba(23, 21, 31, 0.035);
}

.vue-export-caption-sections strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 14px;
}

.vue-export-caption-sections span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.vue-export-caption-card pre {
    max-height: 220px;
    overflow: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.vue-export-readiness {
    display: grid;
    grid-template-columns: minmax(300px, 0.86fr) minmax(420px, 1.14fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(33, 36, 48, 0.96)),
            radial-gradient(circle at 12% 10%, rgba(33, 183, 197, 0.18), transparent 32%),
            radial-gradient(circle at 90% 0, rgba(255, 209, 102, 0.16), transparent 30%);
    box-shadow: 0 22px 62px rgba(22, 19, 29, 0.16);
}

.vue-export-readiness-copy {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 8px;
}

.vue-export-readiness-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.08;
    letter-spacing: 0;
}

.vue-export-readiness-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.76;
}

.vue-export-playbook {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.vue-export-playbook span,
.vue-export-readiness-grid span {
    color: #b9f5ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-export-playbook strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.35;
}

.vue-export-playbook small {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 800;
    line-height: 1.55;
}

.vue-export-readiness-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-export-readiness-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-export-readiness-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-export-readiness-grid article {
    min-height: 156px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-export-readiness-grid article.done {
    border-color: rgba(33, 183, 197, 0.4);
    background: rgba(33, 183, 197, 0.13);
}

.vue-export-readiness-grid strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.25;
}

.vue-export-readiness-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.58;
}

.vue-export-readiness-grid small {
    color: rgba(255, 209, 102, 0.86);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
}

.vue-export-launch {
    display: grid;
    grid-template-columns: minmax(280px, 0.86fr) minmax(320px, 1.14fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 252, 0.94)),
            radial-gradient(circle at 12% 8%, rgba(255, 209, 102, 0.16), transparent 30%),
            radial-gradient(circle at 100% 12%, rgba(33, 183, 197, 0.14), transparent 32%);
    box-shadow: 0 16px 48px rgba(39, 28, 62, 0.07);
}

.vue-export-launch-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 8px;
}

.vue-export-launch-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
}

.vue-export-launch-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.76;
}

.vue-export-launch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-export-launch-grid {
    display: grid;
    gap: 10px;
}

.vue-export-launch-grid article {
    position: relative;
    overflow: hidden;
    min-height: 116px;
    padding: 16px 16px 16px 18px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-export-launch-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--yellow), var(--cyan));
}

.vue-export-launch-grid span,
.vue-export-launch-brief span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-export-launch-grid p {
    margin: 9px 0 0;
    color: var(--text);
    line-height: 1.7;
}

.vue-export-launch-brief {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 8px;
    background: rgba(22, 19, 29, 0.9);
    color: #fff;
}

.vue-export-launch-brief strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 18px;
}

.vue-export-launch-brief small {
    max-width: 420px;
    color: rgba(255, 255, 255, 0.74);
    font-weight: 800;
    line-height: 1.5;
    text-align: right;
}

.vue-export-launch-brief ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.65;
}

.vue-export-launch-brief pre {
    overflow-x: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
    font: inherit;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.vue-export-sheet {
    padding: 26px;
}

.vue-export-sheet-head {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.vue-export-sheet-head span {
    color: var(--muted);
    font-weight: 800;
}

.vue-export-sheet-head strong {
    color: var(--ink);
    font-size: 34px;
}

.vue-export-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vue-export-section-grid article {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.vue-export-section-grid span {
    color: var(--cyan);
    font-weight: 900;
}

.vue-export-section-grid p {
    margin: 10px 0 0;
    color: var(--text);
    line-height: 1.7;
}

.vue-export-character-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.vue-export-character-list a {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-weight: 900;
}

.vue-export-character-list img {
    width: 82px;
    height: 82px;
    border-radius: 8px;
}

.vue-export-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.vue-export-copy-grid article {
    padding: 18px;
}

.vue-export-copy-grid h2 {
    margin: 0;
    color: var(--ink);
}

.vue-export-copy-meta {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(23, 21, 31, 0.04);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.vue-export-copy-grid pre {
    min-height: 220px;
    margin: 14px 0 0;
    white-space: pre-wrap;
    color: var(--text);
    font: inherit;
    line-height: 1.7;
}

.vue-export-empty {
    padding: 48px 0 80px;
}

@media (max-width: 1180px) {
    .vue-export-planner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    .topbar,
    .export-actions,
    .export-copy-grid,
    .vue-export-actions,
    .vue-export-launch-actions,
    .vue-export-readiness-actions,
    .vue-export-preview-actions,
    .vue-export-copy-grid {
        display: none !important;
    }

    body {
        background: #fff;
    }

    main {
        width: 100%;
    }

    .export-shell {
        padding: 0;
    }

    .export-card-sheet,
    .export-preview,
    .vue-export-sheet,
    .vue-export-hero {
        box-shadow: none;
        page-break-inside: avoid;
    }
}

@media (max-width: 900px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 18px 5vw;
    }

    .nav {
        width: 100%;
        overflow-x: auto;
    }

    .hero,
    .split,
    .auth-shell,
    .manage-grid,
    .favorite-grid,
    .generation-grid,
    .ip-project-grid,
    .export-record-grid,
    .cocreate-grid,
    .following-grid,
    .notification-grid,
    .detail-shell,
    .detail-meta,
    .export-preview,
    .export-section-grid,
    .export-character-list,
    .export-copy-grid,
    .vue-export-hero,
    .vue-export-achievement,
    .vue-export-achievement-grid,
    .vue-export-social-preview,
    .vue-export-flow,
    .vue-export-planner,
    .vue-export-preview-grid,
    .vue-export-launch,
    .vue-export-launch-grid,
    .vue-export-readiness,
    .vue-export-readiness-grid,
    .vue-export-caption-sections,
    .vue-export-section-grid,
    .vue-export-character-list,
    .vue-export-copy-grid,
    .ip-hero,
    .ip-detail-grid,
    .relation-line-grid,
    .ip-character-grid,
    .ip-character-card,
    .vue-ip-hero,
    .vue-ip-stats,
    .vue-ip-series,
    .vue-ip-series-grid,
    .vue-ip-section-grid,
    .vue-ip-production,
    .vue-ip-production-grid,
    .vue-ip-next-cast-grid,
    .vue-ip-cocreate,
    .vue-ip-roadmap,
    .vue-ip-check-grid,
    .vue-relation-lines,
    .vue-ip-character-grid,
    .vue-ip-activity-grid,
    .vue-ip-character-card,
    .vue-admin-hero,
    .vue-admin-login,
    .vue-admin-metrics,
    .vue-admin-migration,
    .vue-admin-migration-grid,
    .vue-admin-config-head,
    .vue-admin-secret-rail,
    .vue-admin-runtime,
    .vue-admin-config-grid,
    .vue-admin-config-guide,
    .vue-admin-rollout,
    .vue-admin-rollout-grid,
    .vue-admin-ops,
    .vue-admin-ops-checks,
    .vue-admin-provider,
    .vue-admin-warning,
    .vue-admin-filters,
    .vue-admin-row,
    .vue-home-hero,
    .vue-home-feature,
    .vue-home-metrics,
    .vue-home-next,
    .vue-home-work-grid,
    .vue-home-ip-grid,
    .vue-home-feed-grid,
    .vue-home-empty-band,
    .vue-home-lower,
    .admin-row,
    .feed-card,
    .project-grid,
    .project-grid.wide,
    .work-grid,
    .character-grid,
    .player-strip,
    .filter-bar,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
        padding-top: 38px;
    }

    .hero-panel {
        min-height: 360px;
    }

    .role-row {
        grid-template-columns: 1fr;
    }

    .role-row-cover {
        width: 100%;
        height: 160px;
    }

    .designer-board,
    .avatar-preview,
    .designer-form,
    .profile-hero,
    .edit-modal {
        grid-template-columns: 1fr;
    }

    .auth-art {
        min-height: 380px;
    }

    .detail-cover img {
        min-height: 360px;
    }

    .admin-actions {
        justify-content: flex-start;
    }

    .relation-map {
        height: 560px;
    }

    .relation-node {
        width: 104px;
    }

    .ip-character-card > div {
        padding: 16px;
    }
}

/* V2 visual polish: richer product feel and tighter mobile interaction. */
html {
    scroll-behavior: smooth;
}

body {
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(251, 250, 252, 0.94) 46%, rgba(246, 249, 250, 0.98)),
            linear-gradient(120deg, rgba(33, 183, 197, 0.11), transparent 34rem),
            linear-gradient(300deg, rgba(255, 93, 143, 0.10), transparent 32rem),
            var(--paper);
}

.topbar {
    min-height: 66px;
    border-bottom: 1px solid rgba(230, 225, 236, 0.72);
    background: rgba(251, 250, 252, 0.78);
    box-shadow: 0 12px 32px rgba(39, 28, 62, 0.06);
}

.brand {
    letter-spacing: 0;
}

.brand::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--cyan));
    box-shadow: 0 0 0 5px rgba(33, 183, 197, 0.10);
    vertical-align: 1px;
}

.nav {
    min-width: 0;
}

.nav a {
    position: relative;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.nav a:hover {
    transform: translateY(-1px);
}

.primary-btn,
.secondary-btn,
.primary-link,
.ghost-link,
.nav-button {
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.primary-btn:hover,
.primary-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(23, 21, 31, 0.22);
}

.secondary-btn:hover,
.ghost-link:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.46);
    box-shadow: 0 12px 28px rgba(39, 28, 62, 0.10);
}

.primary-btn:active,
.secondary-btn:active,
.primary-link:active,
.ghost-link:active {
    transform: translateY(0);
}

body[data-page="home"] main {
    width: 100%;
}

body[data-page="home"] main > section:not(.hero),
body[data-page="home"] main > .split {
    width: min(1180px, 90vw);
    margin-left: auto;
    margin-right: auto;
}

.vue-home-root:empty {
    display: none;
}

.vue-home {
    display: grid;
    gap: 28px;
    padding-bottom: 80px;
}

.vue-home-hero {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(340px, 1.04fr);
    gap: 0;
    min-height: min(760px, calc(100vh - 66px));
    overflow: hidden;
    color: #fff;
    background:
            linear-gradient(90deg, rgba(15, 14, 24, 0.94), rgba(15, 14, 24, 0.72) 44%, rgba(15, 14, 24, 0.18)),
            url("/animaker/img/generated/home-hero-oc-studio.webp") center / cover no-repeat;
}

.vue-home-copy {
    display: grid;
    align-content: center;
    gap: 18px;
    min-width: 0;
    padding: 72px 0 72px max(5vw, calc((100vw - 1180px) / 2));
}

.vue-home-copy .eyebrow {
    color: var(--yellow);
}

.vue-home-copy h1 {
    max-width: min(100%, 920px);
    margin: 0;
    color: #fff;
    font-size: clamp(54px, 7.2vw, 96px);
    line-height: 0.95;
    letter-spacing: 0;
    overflow-wrap: normal;
}

.vue-home-copy h1 span {
    display: block;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
}

.vue-home-copy p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 19px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.vue-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.vue-home-actions .primary-link {
    background: #fff;
    color: var(--ink);
}

.vue-home-actions .secondary-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.26);
}

.vue-home-hero-routes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(680px, 100%);
    margin-top: 8px;
}

.vue-home-hero-routes a {
    display: grid;
    gap: 6px;
    min-height: 118px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
            rgba(16, 15, 24, 0.38);
    backdrop-filter: blur(16px);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.18);
}

.vue-home-hero-routes a:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 209, 102, 0.42);
    background:
            linear-gradient(135deg, rgba(255, 209, 102, 0.18), rgba(33, 183, 197, 0.12)),
            rgba(16, 15, 24, 0.46);
}

.vue-home-hero-routes span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--yellow);
    background: rgba(255, 209, 102, 0.14);
    font-size: 11px;
    font-weight: 950;
}

.vue-home-hero-routes strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.24;
}

.vue-home-hero-routes small {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 850;
    line-height: 1.5;
}

.vue-home-feature {
    align-self: end;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    width: min(520px, 84%);
    margin: 0 max(5vw, calc((100vw - 1180px) / 2)) 58px auto;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #fff;
    background: rgba(16, 15, 24, 0.72);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.vue-home-feature img {
    height: 230px;
    border-radius: 8px;
    object-position: center 28%;
}

.vue-home-feature > div {
    display: grid;
    align-content: center;
    gap: 10px;
}

.vue-home-feature span,
.vue-home-feature p {
    color: rgba(255, 255, 255, 0.72);
}

.vue-home-feature strong {
    font-size: 28px;
    line-height: 1.2;
}

.vue-home-feature p {
    margin: 0;
    line-height: 1.65;
}

.vue-home > section:not(.vue-home-hero),
.vue-home > .section-heading,
.vue-home > .vue-home-lower {
    width: min(1180px, 90vw);
    margin-left: auto;
    margin-right: auto;
}

.vue-home-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.vue-home-metrics a,
.vue-home-next,
.vue-home-next a,
.vue-home-creation-card,
.vue-home-starter-card,
.vue-home-work-card,
.vue-home-ip-card,
.vue-home-feed-card,
.vue-home-empty-band,
.vue-home-list a,
.vue-home-creator-list a,
.vue-home-template-list a,
.vue-home-post-list article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-home-metrics a {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 10px;
    min-height: 286px;
    padding: 16px;
}

.vue-home-metrics img {
    height: 116px;
    border-radius: 8px;
}

.vue-home-metrics span {
    color: var(--muted);
    font-weight: 900;
}

.vue-home-metrics strong {
    color: var(--ink);
    font-size: 40px;
    line-height: 1;
}

.vue-home-metrics p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-home-metrics small {
    color: var(--cyan);
    font-weight: 900;
}

.vue-home-creation {
    display: grid;
    gap: 18px;
}

.vue-home-creation-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.vue-home-creation-head h2 {
    margin: 6px 0 8px;
    color: var(--ink);
    font-size: 36px;
    line-height: 1.12;
}

.vue-home-creation-head p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

.vue-home-creation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.vue-home-creation-card {
    overflow: hidden;
    display: grid;
    grid-template-rows: 210px minmax(0, 1fr);
    color: var(--ink);
}

.vue-home-creation-card img {
    height: 210px;
    object-position: center 28%;
}

.vue-home-creation-card > div {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.vue-home-creation-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.25;
}

.vue-home-creation-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.vue-home-creation-card small {
    color: #5f6473;
    font-weight: 800;
}

.vue-home-creation-card strong {
    align-self: end;
    color: var(--cyan);
}

.vue-home-starter-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vue-home-starter-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 9px;
    min-height: 172px;
    padding: 18px;
    color: #fff;
    background:
            linear-gradient(135deg, rgba(20, 20, 30, 0.96), rgba(44, 39, 54, 0.95));
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 46px rgba(31, 24, 44, 0.16);
}

.vue-home-starter-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--cyan);
}

.vue-home-starter-card:nth-child(2)::before {
    background: #ff7aa7;
}

.vue-home-starter-card:nth-child(3)::before {
    background: #ffd166;
}

.vue-home-starter-card:nth-child(4)::before {
    background: #70d6a7;
}

.vue-home-starter-card span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 900;
}

.vue-home-starter-card strong {
    font-size: 21px;
    line-height: 1.3;
}

.vue-home-starter-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
}

.vue-home-starter-card small {
    color: #7bdce6;
    font-weight: 900;
}

.vue-home-next {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
    align-items: stretch;
}

.vue-home-next > div {
    display: grid;
    align-content: center;
}

.vue-home-next h2 {
    margin: 6px 0 0;
    color: var(--ink);
    font-size: 30px;
}

.vue-home-next a {
    display: grid;
    gap: 8px;
    padding: 16px;
    background: #fff;
}

.vue-home-next strong {
    color: var(--ink);
    font-size: 20px;
}

.vue-home-next span {
    color: var(--muted);
    line-height: 1.55;
}

.vue-home-work-grid,
.vue-home-ip-grid,
.vue-home-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.vue-home-work-card,
.vue-home-ip-card,
.vue-home-feed-card {
    overflow: hidden;
}

.vue-home-work-card > a img,
.vue-home-ip-card > a img,
.vue-home-feed-card > a img {
    height: 260px;
    object-position: center 28%;
}

.vue-home-work-card > div,
.vue-home-ip-card > div,
.vue-home-feed-card > div {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.vue-home-work-card h3,
.vue-home-ip-card h3,
.vue-home-feed-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 23px;
    line-height: 1.3;
}

.vue-home-work-card p,
.vue-home-ip-card p,
.vue-home-feed-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.vue-home-empty-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)),
            radial-gradient(circle at 88% 8%, rgba(33, 183, 197, 0.15), transparent 30%);
}

.vue-home-empty-band h2 {
    margin: 6px 0 8px;
    color: var(--ink);
    font-size: 32px;
}

.vue-home-empty-band p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-home-lower {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.vue-home-list,
.vue-home-creator-list,
.vue-home-template-list,
.vue-home-post-list {
    display: grid;
    gap: 12px;
}

.vue-home-list a,
.vue-home-creator-list a {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
}

.vue-home-list img,
.vue-home-creator-list img {
    width: 86px;
    height: 86px;
    border-radius: 8px;
}

.vue-home-creator-list img {
    border-radius: 50%;
}

.vue-home-list strong,
.vue-home-creator-list strong,
.vue-home-template-list strong,
.vue-home-post-list strong {
    display: block;
    color: var(--ink);
    line-height: 1.3;
}

.vue-home-list span,
.vue-home-creator-list span,
.vue-home-template-list span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
}

.vue-home-template-list a,
.vue-home-post-list article {
    padding: 16px;
}

.vue-home-post-list span {
    color: var(--cyan);
    font-size: 13px;
    font-weight: 900;
}

.vue-home-post-list p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

body[data-page="home"] .hero {
    width: 100%;
    grid-template-columns: 1fr;
    position: relative;
    overflow: hidden;
    min-height: min(760px, calc(100vh - 66px));
    margin-bottom: 24px;
    padding: 84px 5vw 118px;
    color: #fff;
    background:
            linear-gradient(90deg, rgba(8, 13, 30, 0.88), rgba(8, 13, 30, 0.58) 42%, rgba(8, 13, 30, 0.18) 72%),
            linear-gradient(180deg, rgba(8, 13, 30, 0.08), rgba(8, 13, 30, 0.68)),
            url("/animaker/img/generated/home-hero-oc-studio.webp") center / cover;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 28px 70px rgba(39, 28, 62, 0.18);
}

body[data-page="home"] .hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
}

body[data-page="home"] .hero-copy {
    position: relative;
    z-index: 1;
    width: min(780px, 90vw);
}

body[data-page="home"] .hero-copy h1,
body[data-page="home"] .hero-copy p {
    color: #fff;
    text-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
}

body[data-page="home"] .hero-copy > p:last-of-type {
    color: rgba(255, 255, 255, 0.78);
}

body[data-page="home"] .hero .eyebrow {
    color: var(--yellow);
}

body[data-page="home"] .hero-panel {
    position: absolute;
    right: 5vw;
    bottom: 34px;
    width: min(420px, 36vw);
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(20px);
}

body[data-page="home"] .signal-card,
body[data-page="home"] .signal-card.dark {
    position: static;
    width: auto;
    padding: 16px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

body[data-page="home"] .signal-card small,
body[data-page="home"] .signal-card span {
    color: rgba(255, 255, 255, 0.72);
}

.stats-grid,
.work-grid,
.project-grid,
.ip-project-grid,
.cocreate-grid,
.player-strip,
.favorite-grid,
.generation-grid,
.following-grid,
.notification-grid {
    align-items: stretch;
}

.work-card,
.project-card,
.character-card,
.player-card,
.ip-project-card,
.cocreate-card,
.manage-card,
.favorite-card,
.generation-card,
.notification-card,
.feed-card,
.auth-card,
.detail-panel,
.detail-cover,
.detail-comments,
.designer-form,
.avatar-preview,
.empty-state,
.list-item,
.role-row {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.work-card:hover,
.project-card:hover,
.character-card:hover,
.player-card:hover,
.ip-project-card:hover,
.cocreate-card:hover,
.manage-card:hover,
.favorite-card:hover,
.generation-card:hover,
.notification-card:hover,
.feed-card:hover {
    transform: translateY(-4px);
    border-color: rgba(33, 183, 197, 0.38);
    box-shadow: 0 22px 54px rgba(39, 28, 62, 0.13);
}

.card-body h3,
.work-card h3,
.project-card h3,
.cocreate-card h3,
.detail-panel h1 {
    letter-spacing: 0;
}

.card-body p,
.work-card p,
.project-card p,
.cocreate-card p,
.detail-panel p,
.page-title p {
    line-height: 1.72;
}

.pill {
    border: 1px solid rgba(33, 183, 197, 0.18);
    background: rgba(33, 183, 197, 0.12);
}

.section-heading {
    margin-top: 42px;
}

.section-heading h2 {
    letter-spacing: 0;
}

body[data-page="login"] {
    background: #090d1b;
}

body[data-page="login"] .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.16);
    background: rgba(9, 13, 27, 0.64);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
}

body[data-page="login"] .brand,
body[data-page="login"] .nav a {
    color: rgba(255, 255, 255, 0.84);
}

body[data-page="login"] .nav a.active,
body[data-page="login"] .nav a:hover {
    color: #16131d;
}

body[data-page="login"] .topbar .primary-btn {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.92);
    color: #16131d;
}

body[data-page="login"] main {
    width: 100%;
    min-height: calc(100vh - 66px);
}

body[data-page="login"] .auth-shell {
    position: relative;
    min-height: calc(100vh - 66px);
    grid-template-columns: minmax(0, 1fr) minmax(340px, 456px);
    gap: clamp(32px, 6vw, 92px);
    align-items: center;
    margin: 0;
    padding: clamp(44px, 7vw, 94px) 5vw clamp(54px, 8vw, 110px);
    overflow: hidden;
    background:
            radial-gradient(circle at 18% 24%, rgba(255, 209, 102, 0.22), transparent 30%),
            linear-gradient(90deg, rgba(6, 9, 21, 0.9), rgba(6, 9, 21, 0.64) 46%, rgba(6, 9, 21, 0.22) 76%),
            linear-gradient(180deg, rgba(6, 9, 21, 0.08), rgba(6, 9, 21, 0.78)),
            url("/animaker/img/generated/login-oc-studio-bg-v1.webp") center / cover;
}

body[data-page="login"] .auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
            linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 78%);
}

body[data-page="login"] .auth-art {
    position: relative;
    z-index: 1;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
}

body[data-page="login"] .auth-art .eyebrow {
    color: var(--yellow);
}

body[data-page="login"] .auth-art h1 {
    max-width: 690px;
    margin: 12px 0 20px;
    color: #fff;
    font-size: clamp(44px, 6.4vw, 84px);
    line-height: 0.98;
    text-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

body[data-page="login"] .auth-art p {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
}

body[data-page="login"] .auth-card {
    position: relative;
    z-index: 1;
    align-self: center;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 28px 76px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(24px);
}

.vue-login-root:empty {
    display: none;
}

.vue-login-shell .auth-card {
    gap: 15px;
}

.vue-login-art {
    display: grid;
    align-content: center;
}

.vue-login-flow {
    display: grid;
    max-width: 640px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.vue-login-flow article {
    min-height: 112px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(8, 13, 30, 0.38);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
}

.vue-login-flow strong {
    color: #fff;
    font-size: 15px;
}

.vue-login-flow span {
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.7;
}

.vue-login-card-head {
    display: grid;
    gap: 8px;
}

.vue-login-card-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(22, 19, 29, 0.04);
}

.vue-auth-tabs button {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.vue-auth-tabs button.active {
    color: #fff;
    background: #16131d;
    box-shadow: 0 10px 26px rgba(22, 19, 29, 0.18);
}

.vue-password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    gap: 8px;
}

.vue-password-field button {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.vue-password-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 10px;
    align-items: center;
}

.vue-password-meter > div {
    overflow: hidden;
    height: 8px;
    border-radius: 8px;
    background: rgba(112, 107, 124, 0.16);
}

.vue-password-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgba(112, 107, 124, 0.36);
    transition: width 0.2s ease, background 0.2s ease;
}

.vue-password-meter strong {
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.vue-password-meter.tone-weak span {
    background: #ff5d8f;
}

.vue-password-meter.tone-ok span {
    background: #ffd166;
}

.vue-password-meter.tone-strong span {
    background: #57cc99;
}

.vue-password-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vue-password-rules span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(112, 107, 124, 0.12);
    font-size: 12px;
    font-weight: 900;
}

.vue-password-rules span.done {
    color: #1f7f58;
    background: rgba(87, 204, 153, 0.16);
}

.vue-login-status {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(33, 183, 197, 0.08);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.vue-login-status.is-success {
    border-color: rgba(87, 204, 153, 0.42);
    color: #1f7f58;
    background: rgba(87, 204, 153, 0.12);
}

.vue-login-status.is-error {
    border-color: rgba(255, 93, 143, 0.34);
    color: #b42356;
    background: rgba(255, 93, 143, 0.1);
}

.vue-me-root:empty {
    display: none;
}

.vue-me-dashboard {
    display: grid;
    gap: 18px;
    margin: 42px 0 28px;
}

.vue-me-hero {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) minmax(260px, 340px);
    gap: 22px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 252, 0.88)),
            radial-gradient(circle at 12% 16%, rgba(33, 183, 197, 0.18), transparent 34%),
            radial-gradient(circle at 92% 8%, rgba(255, 209, 102, 0.2), transparent 28%);
    box-shadow: 0 20px 62px rgba(39, 28, 62, 0.09);
}

.vue-me-avatar {
    width: 116px;
    height: 116px;
    align-self: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #f3eef8;
    box-shadow: 0 18px 36px rgba(39, 28, 62, 0.14);
}

.vue-me-hero-copy {
    display: grid;
    align-content: center;
    gap: 10px;
}

.vue-me-hero-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(32px, 4.8vw, 58px);
    line-height: 1;
    letter-spacing: 0;
}

.vue-me-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

.vue-me-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.vue-me-next {
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.08);
    border-radius: 8px;
    background: rgba(22, 19, 29, 0.86);
    color: #fff;
}

.vue-me-next span {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vue-me-next strong {
    font-size: 22px;
    line-height: 1.2;
}

.vue-me-next p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
}

.vue-me-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vue-me-stats article,
.vue-me-workflow article,
.vue-me-section-nav a {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-me-stats article {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.vue-me-stats span,
.vue-me-section-nav span,
.vue-me-workflow span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.vue-me-stats strong {
    color: var(--ink);
    font-size: 34px;
    line-height: 1;
}

/* Local design pass v399: clarify ownership boundaries in the creator center. */
.vue-me-ownership {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    gap: 16px;
    padding: clamp(18px, 2.4vw, 26px);
    overflow: hidden;
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 28px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 252, 0.88)),
            radial-gradient(circle at 88% 12%, rgba(33, 183, 197, 0.16), transparent 32%),
            radial-gradient(circle at 8% 86%, rgba(255, 209, 102, 0.16), transparent 30%);
    box-shadow: 0 22px 54px rgba(39, 28, 62, 0.08);
}

.vue-me-ownership::before {
    content: "MY OC ASSETS";
    position: absolute;
    top: 16px;
    right: 18px;
    color: rgba(23, 21, 31, 0.16);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.16em;
}

.vue-me-ownership-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.vue-me-ownership-copy h2 {
    max-width: 460px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.08;
}

.vue-me-ownership-copy p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.vue-me-ownership-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-me-ownership-card {
    min-height: 202px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-me-ownership-card:hover,
.vue-me-ownership-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.36);
    box-shadow: 0 18px 34px rgba(39, 28, 62, 0.12);
}

.vue-me-ownership-card.active {
    color: #f7f4ea;
    border-color: rgba(255, 255, 255, 0.2);
    background:
            linear-gradient(150deg, rgba(23, 21, 31, 0.96), rgba(52, 43, 70, 0.92)),
            radial-gradient(circle at 80% 14%, rgba(110, 231, 242, 0.24), transparent 34%);
}

.vue-me-ownership-card span {
    width: fit-content;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: rgba(23, 21, 31, 0.74);
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.vue-me-ownership-card.active span {
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
}

.vue-me-ownership-card strong {
    font-size: 17px;
    line-height: 1.25;
}

.vue-me-ownership-card em {
    color: var(--cyan);
    font-size: 32px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

.vue-me-ownership-card.active em {
    color: var(--oc-gold);
}

.vue-me-ownership-card p {
    margin: 0;
    color: rgba(23, 21, 31, 0.62);
    font-size: 13px;
    line-height: 1.58;
}

.vue-me-ownership-card.active p {
    color: rgba(247, 244, 234, 0.74);
}

.vue-me-ownership-card b {
    margin-top: auto;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 950;
}

.vue-me-ownership-card.active b {
    color: var(--oc-gold);
}

/* Local UI-first pass v448: make the creator center previewable without live account data. */
.vue-me-source-notice {
    display: grid;
    gap: 6px;
    max-width: 780px;
    margin-top: 2px;
    padding: 12px 14px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 18px;
    background:
            linear-gradient(135deg, rgba(33, 183, 197, 0.10), rgba(255, 209, 102, 0.08)),
            rgba(255, 255, 255, 0.72);
}

.vue-me-source-notice span {
    width: fit-content;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.vue-me-source-notice p {
    margin: 0;
    color: rgba(23, 21, 31, 0.68);
    font-size: 13px;
    font-weight: 820;
    line-height: 1.65;
}

.vue-me-inventory {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 2.4vw, 24px);
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 28px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 252, 0.9)),
            radial-gradient(circle at 8% 12%, rgba(110, 231, 242, 0.14), transparent 32%),
            radial-gradient(circle at 100% 4%, rgba(255, 111, 174, 0.11), transparent 28%);
    box-shadow: 0 22px 54px rgba(39, 28, 62, 0.08);
}

.vue-me-inventory-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.vue-me-inventory-head h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
}

.vue-me-inventory-head p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.72;
}

.vue-me-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vue-me-inventory-panel {
    min-width: 0;
    min-height: 250px;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
}

.vue-me-inventory-panel.is-wide {
    grid-column: span 2;
}

.vue-me-inventory-panel > .row-between span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-me-inventory-panel > .row-between strong {
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
}

.vue-me-mini-list,
.vue-me-message-list,
.vue-me-chip-list,
.vue-me-shot-list {
    min-width: 0;
    display: grid;
    gap: 0;
}

.vue-me-mini-list a,
.vue-me-message-list a,
.vue-me-chip-list a {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid rgba(22, 19, 29, 0.08);
    color: var(--ink);
}

.vue-me-mini-list a:first-child,
.vue-me-message-list a:first-child,
.vue-me-chip-list a:first-child {
    border-top: 0;
    padding-top: 0;
}

.vue-me-mini-list a {
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
}

.vue-me-mini-list.compact a {
    grid-template-columns: 58px minmax(0, 1fr);
}

.vue-me-mini-list img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
    object-fit: cover;
    object-position: center 28%;
    background: #111827;
}

.vue-me-mini-list strong,
.vue-me-message-list strong,
.vue-me-chip-list strong,
.vue-me-shot-list strong {
    color: var(--ink);
    line-height: 1.24;
}

.vue-me-mini-list p,
.vue-me-message-list p {
    display: -webkit-box;
    overflow: hidden;
    margin: 4px 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 780;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vue-me-mini-list small,
.vue-me-message-list small,
.vue-me-chip-list small {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.35;
}

.vue-me-message-list a.unread {
    padding-left: 10px;
    border-left: 3px solid var(--pink);
}

.vue-me-chip-list a {
    min-height: 64px;
    align-content: center;
}

.vue-me-shot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-me-shot-list a {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: end;
    min-height: 168px;
    padding: 10px;
    border-radius: 18px;
    color: #fff;
    background: #111827;
}

.vue-me-shot-list img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    opacity: 0.88;
}

.vue-me-shot-list a::after {
    content: "";
    position: absolute;
    inset: 36% 0 0;
    background: linear-gradient(180deg, transparent, rgba(17, 24, 39, 0.82));
}

.vue-me-shot-list span,
.vue-me-shot-list strong {
    position: relative;
    z-index: 1;
}

.vue-me-shot-list span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #111827;
    background: rgba(247, 244, 234, 0.9);
    font-size: 11px;
    font-weight: 950;
}

.vue-me-shot-list strong {
    margin-top: 7px;
    color: #fff;
    font-size: 14px;
}

.vue-me-inventory-empty {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 820;
    line-height: 1.7;
}

@media (max-width: 980px) {
    .vue-me-inventory-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .vue-me-inventory-grid {
        grid-template-columns: 1fr;
    }

    .vue-me-inventory-panel.is-wide {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .vue-me-inventory {
        border-radius: 22px;
        padding: 14px;
    }

    .vue-me-inventory-panel {
        min-height: 0;
        border-radius: 18px;
        padding: 14px;
    }

    .vue-me-mini-list a {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .vue-me-shot-list {
        grid-template-columns: 1fr;
    }

    .vue-me-shot-list a {
        min-height: 188px;
    }
}

.vue-me-triage {
    display: grid;
    grid-template-columns: minmax(280px, 0.74fr) minmax(420px, 1.26fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(38, 35, 50, 0.96)),
            radial-gradient(circle at 10% 10%, rgba(33, 183, 197, 0.2), transparent 34%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.18), transparent 30%);
    box-shadow: 0 22px 60px rgba(22, 19, 29, 0.17);
}

.vue-me-triage-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 6px;
}

.vue-me-triage-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.8vw, 50px);
    line-height: 1.08;
    letter-spacing: 0;
}

.vue-me-triage-copy p,
.vue-me-triage-copy small {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.76;
}

.vue-me-triage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-me-triage-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-me-triage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-me-triage-grid article {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-me-triage-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--cyan);
}

.vue-me-triage-grid article.tone-hot::before {
    background: var(--pink);
}

.vue-me-triage-grid article.tone-warn::before {
    background: var(--yellow);
}

.vue-me-triage-grid article.tone-good::before {
    background: var(--green);
}

.vue-me-triage-grid span {
    color: #ffd166;
    font-size: 12px;
    font-weight: 900;
}

.vue-me-triage-grid strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.24;
}

.vue-me-triage-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-me-triage-grid a {
    align-self: end;
    color: #b9f5ff;
    font-size: 13px;
    font-weight: 900;
}

.vue-me-more-section {
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 14px 34px rgba(39, 28, 62, 0.055);
}

.vue-me-more-section > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 86px;
    padding: 16px 18px;
    cursor: pointer;
}

.vue-me-more-section > summary::-webkit-details-marker {
    display: none;
}

.vue-me-more-section > summary span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
}

.vue-me-more-section > summary strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.2;
}

.vue-me-more-section > summary::after {
    content: "展开";
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 999px;
    color: #fff;
    background: #17131f;
    font-weight: 900;
}

.vue-me-more-section[open] > summary::after {
    content: "收起";
}

.vue-me-more-section .vue-me-ops-desk {
    padding: 0 18px 18px;
}

.vue-me-ops-desk {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(380px, 1.18fr) minmax(280px, 0.72fr);
    gap: 14px;
    align-items: stretch;
}

.vue-me-ops-focus,
.vue-me-health-grid article,
.vue-me-operating-queue {
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 38px rgba(39, 28, 62, 0.07);
}

.vue-me-ops-focus {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 18px;
    background:
            linear-gradient(140deg, rgba(22, 19, 29, 0.95), rgba(44, 39, 56, 0.9)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.2), rgba(255, 209, 102, 0.14));
    color: #fff;
}

.vue-me-ops-focus .eyebrow {
    color: var(--yellow);
}

.vue-me-ops-focus h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.08;
}

.vue-me-ops-focus p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.75;
}

.vue-me-ops-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-me-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vue-me-health-grid article {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 178px;
    padding: 16px;
}

.vue-me-health-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--cyan);
}

.vue-me-health-grid article.tone-good::before {
    background: var(--green);
}

.vue-me-health-grid article.tone-warn::before {
    background: var(--yellow);
}

.vue-me-health-grid article.tone-hot::before {
    background: var(--pink);
}

.vue-me-health-grid span,
.vue-me-operating-queue > .row-between span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-me-health-grid .row-between strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}

.vue-me-health-grid h3,
.vue-me-operating-queue h3 {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
}

.vue-me-health-grid p,
.vue-me-operating-queue p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.vue-me-health-grid a,
.vue-me-operating-queue a {
    color: var(--cyan);
    font-weight: 900;
}

.vue-me-operating-queue {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.vue-me-operating-queue > .row-between small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.4;
    text-align: right;
}

.vue-me-operating-queue article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 8px;
    background: rgba(23, 21, 31, 0.025);
}

.vue-me-operating-queue article > strong {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.12);
    font-size: 18px;
}

.vue-me-pipeline {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 252, 0.94)),
            radial-gradient(circle at 6% 14%, rgba(33, 183, 197, 0.16), transparent 32%),
            radial-gradient(circle at 96% 4%, rgba(255, 93, 143, 0.1), transparent 28%);
    box-shadow: 0 16px 48px rgba(39, 28, 62, 0.07);
}

.vue-me-pipeline-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.vue-me-pipeline-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.08;
}

.vue-me-pipeline-head p {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-me-pipeline-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.vue-me-pipeline-actions small {
    flex-basis: 100%;
    color: #0b5561;
    font-weight: 850;
    line-height: 1.45;
    text-align: right;
}

.vue-me-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vue-me-pipeline-grid article {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 300px;
    padding: 16px;
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 34px rgba(39, 28, 62, 0.06);
}

.vue-me-pipeline-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--pink));
}

.vue-me-pipeline-grid article.is-clear::before {
    background: linear-gradient(180deg, var(--green), var(--cyan));
}

.vue-me-pipeline-lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vue-me-pipeline-lane-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-me-pipeline-lane-head strong {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.12);
    font-size: 16px;
}

.vue-me-pipeline-grid h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.3;
}

.vue-me-pipeline-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.vue-me-pipeline-items {
    display: grid;
    gap: 8px;
}

.vue-me-pipeline-items a {
    display: grid;
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 8px;
    color: inherit;
    background: rgba(23, 21, 31, 0.03);
}

.vue-me-pipeline-items strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    line-height: 1.35;
}

.vue-me-pipeline-items span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-me-pipeline-items em,
.vue-me-pipeline-action {
    color: var(--cyan);
    font-style: normal;
    font-weight: 900;
}

.vue-me-pipeline-empty {
    padding: 10px;
    border: 1px dashed rgba(33, 183, 197, 0.32);
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.06);
}

.vue-me-pipeline-action {
    align-self: end;
    margin-top: auto;
}

.vue-me-achievement {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1.18fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 252, 0.94)),
            radial-gradient(circle at 10% 10%, rgba(255, 209, 102, 0.16), transparent 30%),
            radial-gradient(circle at 100% 12%, rgba(255, 93, 143, 0.12), transparent 32%);
    box-shadow: 0 16px 48px rgba(39, 28, 62, 0.07);
}

.vue-me-achievement-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 8px;
}

.vue-me-achievement-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.08;
}

.vue-me-achievement-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.76;
}

.vue-me-achievement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-me-achievement-copy small {
    color: #0b5561;
    font-weight: 850;
    line-height: 1.5;
}

.vue-me-achievement-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.vue-me-achievement-grid article {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-me-achievement-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(23, 21, 31, 0.16);
}

.vue-me-achievement-grid article.done {
    border-color: rgba(87, 204, 153, 0.34);
    background: rgba(247, 255, 251, 0.92);
}

.vue-me-achievement-grid article.done::before {
    background: linear-gradient(180deg, var(--green), var(--cyan));
}

.vue-me-achievement-grid span,
.vue-me-sprint span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-me-achievement-grid strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
}

.vue-me-achievement-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.vue-me-achievement-grid a {
    color: var(--cyan);
    font-weight: 900;
}

.vue-me-sprint {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 8px;
    background: rgba(22, 19, 29, 0.9);
    color: #fff;
}

.vue-me-sprint strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 18px;
}

.vue-me-sprint small,
.vue-me-sprint p {
    color: rgba(255, 255, 255, 0.74);
    font-weight: 800;
    line-height: 1.5;
}

.vue-me-sprint ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vue-me-sprint li {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.vue-me-sprint li strong {
    margin: 0;
    font-size: 15px;
}

.vue-me-sprint li p {
    margin: 7px 0 0;
    font-size: 13px;
}

.vue-me-sprint pre {
    overflow-x: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
    font: inherit;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.vue-me-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vue-me-workflow article {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.vue-me-workflow article.done {
    border-color: rgba(87, 204, 153, 0.34);
    background: rgba(247, 255, 251, 0.92);
}

.vue-me-workflow h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
}

.vue-me-workflow p {
    min-height: 50px;
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-me-workflow a {
    color: var(--cyan);
    font-weight: 900;
}

.vue-me-command-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 0.95fr);
    gap: 12px;
}

.vue-me-command-card,
.vue-me-export-queue {
    min-height: 230px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-me-command-card {
    overflow: hidden;
}

.vue-me-command-card img {
    width: 100%;
    height: 132px;
    object-fit: cover;
    object-position: center 28%;
    background: #15131d;
}

.vue-me-command-card div,
.vue-me-export-queue {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.vue-me-command-card span,
.vue-me-export-queue > .row-between span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vue-me-command-card h2,
.vue-me-export-queue h2 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.vue-me-command-card p,
.vue-me-export-queue p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-me-command-card a,
.vue-me-export-queue a {
    color: var(--cyan);
    font-weight: 900;
}

.vue-me-export-list {
    display: grid;
    gap: 8px;
}

.vue-me-export-list a {
    display: grid;
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 8px;
    color: inherit;
    background: rgba(23, 21, 31, 0.03);
}

.vue-me-export-list strong {
    color: var(--ink);
    line-height: 1.35;
}

.vue-me-export-list span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.vue-me-section-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.vue-me-section-nav a {
    display: grid;
    gap: 6px;
    padding: 12px;
    color: inherit;
}

.vue-me-section-nav strong {
    color: var(--ink);
    font-size: 15px;
}

.vue-me-section-nav a:hover {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.38);
    box-shadow: 0 18px 42px rgba(39, 28, 62, 0.1);
}

body[data-page="gallery"][data-gallery-vue-active="true"] .gallery-legacy {
    display: none;
}

.vue-gallery-root:empty {
    display: none;
}

.vue-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    min-width: 0;
    padding: 44px 0 80px;
}

.vue-gallery-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 24px;
    align-items: stretch;
    padding: 26px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 252, 0.9)),
            radial-gradient(circle at 18% 16%, rgba(33, 183, 197, 0.2), transparent 34%),
            radial-gradient(circle at 88% 6%, rgba(255, 209, 102, 0.22), transparent 26%);
    box-shadow: 0 20px 62px rgba(39, 28, 62, 0.09);
}

.vue-gallery-hero.has-feature {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
}

.vue-gallery-copy {
    display: grid;
    align-content: center;
    gap: 12px;
    min-width: 0;
}

.vue-gallery-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(42px, 7vw, 82px);
    line-height: 0.96;
    letter-spacing: 0;
}

.vue-gallery-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.vue-gallery-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.vue-gallery-feature {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border-radius: 8px;
    background: #111827;
    color: #fff;
}

.vue-gallery-feature img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.36s ease;
}

.vue-gallery-feature:hover img {
    transform: scale(1.035);
}

.vue-gallery-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 34%, rgba(9, 13, 27, 0.8));
}

.vue-gallery-feature div {
    position: absolute;
    z-index: 1;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 8px;
}

.vue-gallery-feature strong {
    color: #fff;
    font-size: 26px;
    line-height: 1.15;
}

.vue-gallery-feature small {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.vue-gallery-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vue-gallery-stats article,
.vue-gallery-ip,
.vue-gallery-feed-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-gallery-stats article {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.vue-gallery-stats span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.vue-gallery-stats strong {
    color: var(--ink);
    font-size: 34px;
    line-height: 1;
}

.vue-gallery-stats small {
    color: var(--muted);
    line-height: 1.5;
}

.vue-gallery-source-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 20px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.94), rgba(255, 255, 255, 0.86)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.16), transparent 34%);
    box-shadow: 0 10px 28px rgba(39, 28, 62, 0.05);
}

.vue-gallery-source-notice span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #0f6f7a;
    background: rgba(33, 183, 197, 0.14);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.vue-gallery-source-notice p {
    margin: 0;
    color: rgba(23, 21, 31, 0.68);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

.vue-gallery-source-notice.is-hero {
    max-width: 760px;
    margin-top: 2px;
}

.vue-gallery-pulse {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.28fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(247, 252, 253, 0.94)),
            radial-gradient(circle at 8% 8%, rgba(33, 183, 197, 0.16), transparent 30%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.16), transparent 28%);
    box-shadow: 0 16px 46px rgba(39, 28, 62, 0.07);
}

.vue-gallery-pulse-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 6px;
}

.vue-gallery-pulse-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.08;
    letter-spacing: 0;
}

.vue-gallery-pulse-copy p,
.vue-gallery-pulse-copy small {
    margin: 0;
    color: var(--muted);
    line-height: 1.76;
}

.vue-gallery-pulse-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-gallery-pulse-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-gallery-pulse-grid article {
    min-height: 184px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.vue-gallery-pulse-grid article.ready {
    border-color: rgba(33, 183, 197, 0.34);
    background: rgba(246, 252, 253, 0.96);
}

.vue-gallery-pulse-grid span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-gallery-pulse-grid strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.24;
}

.vue-gallery-pulse-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-gallery-pulse-grid a,
.vue-gallery-pulse-grid button {
    align-self: end;
    width: fit-content;
    border: 0;
    padding: 0;
    color: #0b7d8b;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.vue-gallery-mission {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(38, 35, 50, 0.96)),
            radial-gradient(circle at 10% 10%, rgba(33, 183, 197, 0.2), transparent 34%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.18), transparent 30%);
    box-shadow: 0 22px 60px rgba(22, 19, 29, 0.17);
}

.vue-gallery-mission-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.vue-gallery-mission-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.04;
    letter-spacing: 0;
}

.vue-gallery-mission-copy p,
.vue-gallery-mission-copy small {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.78;
}

.vue-gallery-mission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-gallery-mission-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-gallery-mission-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-gallery-mission-grid article {
    min-height: 196px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-gallery-mission-grid span {
    color: #ffd166;
    font-size: 12px;
    font-weight: 900;
}

.vue-gallery-mission-grid strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.24;
}

.vue-gallery-mission-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-gallery-mission-grid a,
.vue-gallery-mission-grid button {
    align-self: end;
    width: fit-content;
    border: 0;
    padding: 0;
    color: #b9f5ff;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.vue-gallery-creator-radar {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1.18fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.92)),
            radial-gradient(circle at 8% 8%, rgba(33, 183, 197, 0.18), transparent 30%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.16), transparent 28%);
    box-shadow: 0 16px 46px rgba(39, 28, 62, 0.07);
}

.vue-gallery-radar-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 8px;
}

.vue-gallery-radar-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
}

.vue-gallery-radar-copy p,
.vue-gallery-radar-copy small {
    margin: 0;
    color: var(--muted);
    line-height: 1.72;
}

.vue-gallery-radar-actions,
.vue-gallery-radar-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-gallery-radar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vue-gallery-radar-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(39, 28, 62, 0.05);
}

.vue-gallery-radar-main {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    color: inherit;
}

.vue-gallery-radar-main img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
}

.vue-gallery-radar-main h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
}

.vue-gallery-radar-main p,
.vue-gallery-radar-main small {
    display: block;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.vue-gallery-radar-card-actions .primary-btn,
.vue-gallery-radar-card-actions .secondary-btn {
    flex: 1 1 120px;
}

.vue-gallery-cocreate {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(123, 97, 255, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(250, 248, 255, 0.94)),
            linear-gradient(90deg, rgba(123, 97, 255, 0.08), transparent 56%);
    box-shadow: 0 14px 40px rgba(39, 28, 62, 0.06);
}

.vue-gallery-cocreate-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.vue-gallery-cocreate-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.12;
}

.vue-gallery-cocreate-copy p,
.vue-gallery-cocreate-copy small {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
}

.vue-gallery-cocreate-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vue-gallery-cocreate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-gallery-cocreate-grid article {
    min-height: 158px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
}

.vue-gallery-cocreate-grid article.ready {
    border-color: rgba(123, 97, 255, 0.3);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(251, 249, 255, 0.92)),
            linear-gradient(180deg, rgba(123, 97, 255, 0.08), transparent 58%);
}

.vue-gallery-cocreate-grid span {
    color: #4e35a5;
    font-size: 12px;
    font-weight: 900;
}

.vue-gallery-cocreate-grid strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.22;
}

.vue-gallery-cocreate-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-gallery-ip-grid,
.vue-gallery-feed,
.vue-gallery-work-grid,
.vue-gallery-creator-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vue-gallery-ip,
.vue-gallery-feed-card {
    overflow: hidden;
    color: inherit;
}

.vue-gallery-ip img,
.vue-gallery-feed-card > img {
    height: 190px;
    background: #111827;
}

.vue-gallery-ip div,
.vue-gallery-feed-card div:not(.row-between) {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.vue-gallery-ip h3,
.vue-gallery-feed-card h3 {
    margin: 0;
    color: var(--ink);
}

.vue-gallery-ip p,
.vue-gallery-feed-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-gallery-ip small {
    color: var(--muted);
    font-weight: 800;
}

.vue-gallery-workspace {
    display: grid;
    gap: 18px;
}

.vue-gallery-discovery {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 251, 0.92)),
            radial-gradient(circle at 8% 12%, rgba(33, 183, 197, 0.16), transparent 26%),
            radial-gradient(circle at 96% 4%, rgba(255, 209, 102, 0.18), transparent 24%);
    box-shadow: 0 16px 46px rgba(39, 28, 62, 0.07);
}

.vue-gallery-discovery-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.vue-gallery-discovery-head h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 28px;
    letter-spacing: 0;
}

.vue-gallery-discovery-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-gallery-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.vue-gallery-chip-row > span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.vue-filter-chip,
.vue-sort-chip {
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.88);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-filter-chip {
    min-height: 36px;
    padding: 0 12px;
}

.vue-sort-chip {
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 12px;
    text-align: left;
}

.vue-filter-chip:hover,
.vue-sort-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.38);
    box-shadow: 0 10px 24px rgba(39, 28, 62, 0.08);
}

.vue-filter-chip.is-active,
.vue-sort-chip.is-active {
    border-color: rgba(33, 183, 197, 0.72);
    background: rgba(219, 250, 253, 0.92);
    color: #0b5561;
}

.vue-sort-chip small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.45;
}

.vue-gallery-sort-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.vue-gallery-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr) minmax(150px, 0.7fr) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.05);
}

.vue-gallery-filter label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.vue-gallery-filter input,
.vue-gallery-filter select {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.vue-gallery-filter-meta {
    display: grid;
    gap: 6px;
    justify-items: end;
    min-width: 140px;
}

.vue-gallery-filter-meta small {
    max-width: 240px;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.vue-gallery-action-status {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    color: #0b5561;
    background: rgba(219, 250, 253, 0.82);
    font-weight: 850;
    line-height: 1.4;
}

.vue-gallery-loading-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vue-gallery-skeleton {
    display: grid;
    gap: 14px;
    min-height: 320px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-gallery-skeleton span,
.vue-gallery-skeleton strong,
.vue-gallery-skeleton small {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(236, 241, 244, 0.9), rgba(250, 252, 252, 0.95), rgba(236, 241, 244, 0.9));
    background-size: 220% 100%;
    animation: gallerySkeleton 1.2s ease-in-out infinite;
}

.vue-gallery-skeleton span {
    height: 180px;
}

.vue-gallery-skeleton strong {
    width: 62%;
    height: 24px;
}

.vue-gallery-skeleton small {
    width: 86%;
    height: 16px;
}

@keyframes gallerySkeleton {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.vue-gallery-creators {
    display: grid;
    gap: 16px;
}

.vue-gallery-creator-strip .player-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
}

.vue-work-root:empty {
    display: none;
}

.vue-work-dock {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) minmax(260px, 360px);
    gap: 20px;
    align-items: stretch;
    margin: 42px 0 24px;
    padding: 20px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)),
            radial-gradient(circle at 12% 18%, rgba(33, 183, 197, 0.2), transparent 34%),
            radial-gradient(circle at 90% 4%, rgba(255, 209, 102, 0.2), transparent 26%);
    box-shadow: 0 20px 62px rgba(39, 28, 62, 0.09);
}

.vue-work-cover {
    overflow: hidden;
    border-radius: 8px;
    background: #111827;
}

.vue-work-cover img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.36s ease;
}

.vue-work-cover:hover img {
    transform: scale(1.035);
}

.vue-work-main {
    display: grid;
    align-content: center;
    gap: 10px;
}

.vue-work-main h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(34px, 5.2vw, 62px);
    line-height: 1;
    letter-spacing: 0;
}

.vue-work-main blockquote {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.vue-work-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vue-work-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.08);
    font-size: 13px;
    font-weight: 900;
}

.vue-work-side {
    display: grid;
    gap: 14px;
    align-content: center;
    padding: 16px;
    border: 1px solid rgba(22, 19, 29, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.vue-work-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-work-stats article {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.vue-work-stats span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.vue-work-stats strong {
    color: var(--ink);
    font-size: 20px;
    line-height: 1.1;
}

.vue-work-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vue-work-next {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-work-action-path {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background: rgba(247, 252, 253, 0.86);
}

.vue-work-action-path > strong {
    color: var(--ink);
    font-size: 13px;
}

.vue-work-action-path article {
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-work-action-path span {
    color: #0b5561;
    font-size: 12px;
    font-weight: 900;
}

.vue-work-action-path p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.vue-work-nav {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.vue-work-nav a {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: inherit;
}

.vue-work-nav strong {
    color: var(--ink);
    font-size: 14px;
}

.vue-work-nav span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

body[data-page="feed"][data-feed-vue-active="true"] .feed-legacy {
    display: none;
}

.vue-feed-root:empty {
    display: none;
}

.vue-feed {
    display: grid;
    gap: 24px;
    padding: 44px 0 80px;
}

.vue-feed-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 22px;
    align-items: stretch;
    padding: 24px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)),
            radial-gradient(circle at 12% 18%, rgba(33, 183, 197, 0.18), transparent 34%),
            radial-gradient(circle at 90% 4%, rgba(255, 209, 102, 0.2), transparent 26%);
    box-shadow: 0 20px 62px rgba(39, 28, 62, 0.09);
}

.vue-feed-hero > div {
    display: grid;
    align-content: center;
    gap: 12px;
}

.vue-feed-hero h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(40px, 6.2vw, 76px);
    line-height: 0.98;
    letter-spacing: 0;
}

.vue-feed-hero p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.vue-feed-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.vue-feed-next {
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.08);
    border-radius: 8px;
    background: rgba(22, 19, 29, 0.86);
    color: #fff;
}

.vue-feed-next span {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vue-feed-next strong {
    font-size: 24px;
    line-height: 1.15;
}

.vue-feed-next p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
}

.vue-feed-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vue-feed-stats article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-feed-stats span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.vue-feed-stats strong {
    color: var(--ink);
    font-size: 34px;
    line-height: 1;
}

.vue-feed-stats small {
    color: var(--muted);
    line-height: 1.5;
}

.vue-feed-response {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(244, 252, 252, 0.94)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.08), transparent 56%);
    box-shadow: 0 14px 40px rgba(39, 28, 62, 0.06);
}

.vue-feed-response-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.vue-feed-response-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.12;
}

.vue-feed-response-copy p,
.vue-feed-response-copy small {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
}

.vue-feed-response-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vue-feed-response-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-feed-response-grid article {
    min-height: 158px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
}

.vue-feed-response-grid article.ready {
    border-color: rgba(33, 183, 197, 0.3);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(246, 252, 253, 0.92)),
            linear-gradient(180deg, rgba(33, 183, 197, 0.08), transparent 58%);
}

.vue-feed-response-grid span {
    color: #0b5561;
    font-size: 12px;
    font-weight: 900;
}

.vue-feed-response-grid strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.22;
}

.vue-feed-response-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-feed-loop {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(123, 97, 255, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 255, 0.94)),
            radial-gradient(circle at 6% 10%, rgba(123, 97, 255, 0.14), transparent 30%),
            radial-gradient(circle at 98% 0, rgba(255, 209, 102, 0.16), transparent 28%);
    box-shadow: 0 16px 44px rgba(39, 28, 62, 0.07);
}

.vue-feed-loop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.vue-feed-loop-head h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 30px;
    line-height: 1.14;
}

.vue-feed-loop-head p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-feed-loop-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-feed-loop-grid article {
    position: relative;
    overflow: hidden;
    min-height: 202px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
}

.vue-feed-loop-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(23, 21, 31, 0.16);
}

.vue-feed-loop-grid article[data-loop-state="ready"]::before {
    background: linear-gradient(180deg, var(--cyan), var(--pink));
}

.vue-feed-loop-grid article[data-loop-state="done"] {
    border-color: rgba(87, 204, 153, 0.34);
    background: rgba(247, 255, 251, 0.92);
}

.vue-feed-loop-grid article[data-loop-state="done"]::before {
    background: linear-gradient(180deg, var(--green), var(--cyan));
}

.vue-feed-loop-grid span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
}

.vue-feed-loop-grid strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
}

.vue-feed-loop-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-feed-loop-grid a {
    align-self: end;
    color: var(--cyan);
    font-weight: 900;
}

.vue-feed-command {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 252, 0.92)),
            radial-gradient(circle at 8% 6%, rgba(255, 209, 102, 0.18), transparent 30%),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.14), transparent 28%);
    box-shadow: 0 16px 44px rgba(39, 28, 62, 0.07);
}

.vue-feed-command-head {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
    gap: 16px;
    align-items: start;
}

.vue-feed-command-head h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 30px;
    line-height: 1.14;
}

.vue-feed-command-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-feed-filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.vue-feed-filter-chip {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.88);
    font: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-feed-filter-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.44);
    box-shadow: 0 10px 24px rgba(39, 28, 62, 0.08);
}

.vue-feed-filter-chip.is-active {
    border-color: rgba(33, 183, 197, 0.64);
    background: rgba(219, 250, 253, 0.92);
}

.vue-feed-filter-chip strong {
    font-size: 13px;
}

.vue-feed-filter-chip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.vue-feed-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vue-feed-priority-grid article {
    min-height: 152px;
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.vue-feed-priority-grid article.ready {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 255, 250, 0.92)),
            linear-gradient(180deg, rgba(87, 204, 153, 0.1), transparent 56%);
}

.vue-feed-priority-grid span {
    color: #0b5561;
    font-size: 12px;
    font-weight: 900;
}

.vue-feed-priority-grid strong {
    color: var(--ink);
    font-size: 30px;
    line-height: 1;
}

.vue-feed-priority-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-feed-following-strip {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.vue-feed-following-strip > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vue-feed-following-strip a:not(.secondary-btn) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    padding: 5px 9px 5px 5px;
    color: var(--ink);
    background: #fff;
    font-size: 13px;
    font-weight: 900;
}

.vue-feed-following-strip img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.vue-feed-actor-line {
    width: fit-content;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 900;
}

.vue-feed-list {
    display: grid;
    gap: 14px;
}

.vue-feed-empty {
    display: grid;
}

.vue-feed-recommend {
    display: grid;
    gap: 16px;
}

.vue-feed-player-grid,
.vue-feed-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vue-feed-player-grid .player-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    padding: 14px;
}

.vue-feed-player-main {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    color: inherit;
}

.vue-feed-player-main img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 28%;
}

.vue-feed-player-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(23, 21, 31, 0.08);
}

.vue-feed-player-actions a:not(.secondary-btn) {
    color: var(--cyan);
    font-weight: 900;
}

.vue-feed-follow-status {
    margin: -4px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    color: #0b5561;
    background: rgba(33, 183, 197, 0.07);
    font-weight: 850;
    line-height: 1.5;
}

body[data-page="templates"][data-templates-vue-active="true"] .templates-legacy {
    display: none;
}

.vue-templates-root:empty {
    display: none;
}

.vue-templates {
    display: grid;
    gap: 24px;
    padding: 44px 0 80px;
}

.vue-templates-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 24px;
    align-items: stretch;
    padding: 26px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)),
            radial-gradient(circle at 12% 18%, rgba(33, 183, 197, 0.18), transparent 34%),
            radial-gradient(circle at 88% 6%, rgba(255, 209, 102, 0.2), transparent 26%);
    box-shadow: 0 20px 62px rgba(39, 28, 62, 0.09);
}

.vue-templates-copy {
    display: grid;
    align-content: center;
    gap: 12px;
}

.vue-templates-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(40px, 6.4vw, 76px);
    line-height: 0.98;
    letter-spacing: 0;
}

.vue-templates-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.vue-templates-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.vue-template-source-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 20px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.94), rgba(255, 255, 255, 0.86)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.16), transparent 34%);
    box-shadow: 0 10px 28px rgba(39, 28, 62, 0.05);
}

.vue-template-source-notice span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #0f6f7a;
    background: rgba(33, 183, 197, 0.14);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.vue-template-source-notice p {
    margin: 0;
    color: rgba(23, 21, 31, 0.68);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

.vue-template-source-notice.is-hero {
    max-width: 760px;
    margin-top: 2px;
}

.vue-template-pathfinder,
.vue-character-pathfinder {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)),
            radial-gradient(circle at 8% 8%, rgba(33, 183, 197, 0.16), transparent 30%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 26%);
    box-shadow: 0 18px 52px rgba(39, 28, 62, 0.07);
}

.vue-pathfinder-copy {
    display: grid;
    align-content: center;
    gap: 10px;
}

.vue-pathfinder-copy h2 {
    margin: 4px 0 4px;
    color: var(--ink);
    font-size: clamp(30px, 3.8vw, 48px);
    line-height: 1.06;
    letter-spacing: 0;
}

.vue-pathfinder-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.72;
}

.vue-pathfinder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vue-creator-nextline {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid rgba(22, 19, 29, 0.16);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(35, 32, 48, 0.96)),
            radial-gradient(circle at 9% 10%, rgba(33, 183, 197, 0.22), transparent 31%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.18), transparent 30%);
    box-shadow: 0 22px 62px rgba(22, 19, 29, 0.18);
}

.vue-character-nextline {
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(36, 33, 50, 0.96)),
            radial-gradient(circle at 9% 10%, rgba(255, 93, 143, 0.18), transparent 30%),
            radial-gradient(circle at 96% 0, rgba(33, 183, 197, 0.18), transparent 30%);
}

.vue-nextline-copy {
    display: grid;
    align-content: center;
    gap: 12px;
    min-width: 0;
}

.vue-nextline-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.05;
    letter-spacing: 0;
}

.vue-nextline-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.76;
}

.vue-nextline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.vue-nextline-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-nextline-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-nextline-steps a {
    position: relative;
    min-height: 198px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: inherit;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.vue-nextline-steps a:hover {
    transform: translateY(-2px);
    border-color: rgba(185, 245, 255, 0.46);
    background: rgba(255, 255, 255, 0.12);
}

.vue-nextline-steps span {
    width: fit-content;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 0 10px;
    color: #11101b;
    background: #ffd166;
    font-size: 12px;
    font-weight: 950;
}

.vue-nextline-steps strong {
    color: #fff;
    font-size: 20px;
    line-height: 1.22;
}

.vue-nextline-steps p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.62;
}

.vue-nextline-steps b {
    align-self: end;
    width: fit-content;
    color: #b9f5ff;
    font-size: 13px;
    font-weight: 950;
}

.vue-path-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 10px;
    min-height: 288px;
    padding: 18px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    color: inherit;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 253, 0.9));
    box-shadow: 0 12px 34px rgba(39, 28, 62, 0.07);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-pathfinder-grid .vue-path-card:first-child {
    border-color: rgba(33, 183, 197, 0.34);
    color: #fff;
    background:
            linear-gradient(145deg, rgba(22, 19, 29, 0.98), rgba(39, 36, 52, 0.96)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.2), transparent 32%);
    box-shadow: 0 20px 52px rgba(22, 19, 29, 0.17);
}

.vue-pathfinder-grid .vue-path-card:first-child strong {
    color: #fff;
}

.vue-pathfinder-grid .vue-path-card:first-child p,
.vue-pathfinder-grid .vue-path-card:first-child small {
    color: rgba(255, 255, 255, 0.76);
}

.vue-pathfinder-grid .vue-path-card:first-child li {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.08);
}

.vue-path-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--cyan);
}

.vue-path-card:nth-child(2)::before {
    background: var(--pink);
}

.vue-path-card:hover {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.42);
    box-shadow: 0 20px 48px rgba(39, 28, 62, 0.1);
}

.vue-path-card span {
    width: fit-content;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    color: #0b5561;
    background: rgba(33, 183, 197, 0.1);
    font-size: 12px;
    font-weight: 950;
}

.vue-path-card:nth-child(2) span {
    color: #8a2145;
    background: rgba(255, 93, 143, 0.1);
}

.vue-path-card strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1.18;
}

.vue-path-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.62;
}

.vue-path-card ol {
    display: grid;
    gap: 7px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.vue-path-card li {
    position: relative;
    min-height: 28px;
    padding: 5px 8px 5px 28px;
    border-radius: 8px;
    color: #3f344a;
    background: rgba(22, 19, 29, 0.045);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.vue-path-card li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    transform: translateY(-50%);
}

.vue-path-card:nth-child(2) li::before {
    background: var(--pink);
}

.vue-path-card small {
    color: var(--muted);
    font-weight: 850;
    line-height: 1.5;
}

.vue-path-card b {
    align-self: end;
    width: fit-content;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 8px;
    color: #11101b;
    background: linear-gradient(135deg, #9ff3ff, #ffd166);
    font-size: 13px;
    font-weight: 950;
}

.vue-template-feature {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border-radius: 8px;
    background: #111827;
    color: #fff;
}

.vue-template-feature img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    object-position: center 34%;
    transition: transform 0.36s ease;
}

.vue-template-feature:hover img {
    transform: scale(1.035);
}

.vue-template-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 32%, rgba(9, 13, 27, 0.82));
}

.vue-template-feature div {
    position: absolute;
    z-index: 1;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 8px;
}

.vue-template-feature strong {
    color: #fff;
    font-size: 26px;
    line-height: 1.15;
}

.vue-template-feature small {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.vue-templates-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vue-templates-stats article,
.vue-template-mini {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-templates-stats article {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.vue-templates-stats span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.vue-templates-stats strong {
    color: var(--ink);
    font-size: 34px;
    line-height: 1;
}

.vue-templates-stats small {
    color: var(--muted);
    line-height: 1.5;
}

.vue-template-starter {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(37, 34, 48, 0.96)),
            radial-gradient(circle at 10% 10%, rgba(33, 183, 197, 0.2), transparent 34%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.18), transparent 30%);
    box-shadow: 0 22px 60px rgba(22, 19, 29, 0.17);
}

.vue-template-starter-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.vue-template-starter-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.04;
    letter-spacing: 0;
}

.vue-template-starter-copy p,
.vue-template-starter-copy small {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.78;
}

.vue-template-starter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-template-starter-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-template-starter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-template-starter-grid article {
    min-height: 196px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-template-starter-grid span {
    color: #ffd166;
    font-size: 12px;
    font-weight: 900;
}

.vue-template-starter-grid strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.24;
}

.vue-template-starter-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-template-starter-grid a {
    align-self: end;
    color: #b9f5ff;
    font-size: 13px;
    font-weight: 900;
}

.vue-template-more,
.vue-character-more {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 252, 0.92)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.08), rgba(255, 209, 102, 0.08));
    box-shadow: 0 18px 48px rgba(39, 28, 62, 0.07);
}

.vue-template-more > summary,
.vue-character-more > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 16px;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.vue-template-more > summary::-webkit-details-marker,
.vue-character-more > summary::-webkit-details-marker {
    display: none;
}

.vue-template-more > summary h2,
.vue-character-more > summary h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: 0;
}

.vue-template-more > summary p,
.vue-character-more > summary p {
    max-width: 740px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-template-more > summary > strong,
.vue-character-more > summary > strong {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 999px;
    padding: 0 14px;
    color: #0b5561;
    background: rgba(33, 183, 197, 0.08);
    font-size: 13px;
    white-space: nowrap;
}

.vue-template-more > summary::after,
.vue-character-more > summary::after {
    content: "展开";
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 14px;
    color: #fff;
    background: #16131d;
    font-size: 13px;
    font-weight: 900;
}

.vue-template-more[open] > summary::after,
.vue-character-more[open] > summary::after {
    content: "收起";
    background: rgba(22, 19, 29, 0.78);
}

.vue-template-more[open],
.vue-character-more[open] {
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 252, 0.94)),
            radial-gradient(circle at 6% 0, rgba(33, 183, 197, 0.1), transparent 30%);
}

.vue-template-rank,
.vue-template-workspace {
    display: grid;
    gap: 16px;
}

.vue-template-match {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(244, 252, 252, 0.94)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.08), transparent 56%);
}

.vue-template-match-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.vue-template-match-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.12;
}

.vue-template-match-copy p,
.vue-template-match-copy small {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
}

.vue-template-keywords {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vue-template-keywords span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    padding: 0 10px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.08);
    font-size: 12px;
    font-weight: 900;
}

.vue-template-match-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vue-template-fit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-template-fit-grid article {
    min-height: 158px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-template-fit-grid article.ready {
    border-color: rgba(87, 204, 153, 0.36);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 255, 250, 0.92)),
            linear-gradient(180deg, rgba(87, 204, 153, 0.1), transparent 56%);
}

.vue-template-fit-grid span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-template-fit-grid strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.22;
}

.vue-template-fit-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-template-social {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(31, 28, 43, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(249, 247, 252, 0.92)),
            linear-gradient(90deg, rgba(255, 209, 102, 0.16), rgba(33, 183, 197, 0.1));
    box-shadow: 0 18px 48px rgba(39, 28, 62, 0.08);
}

.vue-template-social-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.vue-template-social-head h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.15;
}

.vue-template-social-head p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-template-social-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vue-template-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vue-template-social-grid article {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 210px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
}

.vue-template-social-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.vue-template-social-top span {
    color: #0b5561;
    font-size: 12px;
    font-weight: 900;
}

.vue-template-social-top strong {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 0 10px;
    color: #16131f;
    background: #ffd166;
    font-size: 12px;
    font-weight: 900;
}

.vue-template-social-grid h3 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.vue-template-social-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
}

.vue-template-social-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vue-template-social-points span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    padding: 0 9px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.08);
    font-size: 12px;
    font-weight: 900;
}

.vue-template-social-brief {
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid rgba(31, 28, 43, 0.1);
    border-radius: 8px;
    padding: 14px;
    color: #3f344a;
    background: rgba(255, 255, 255, 0.72);
    font: 800 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.vue-template-guide {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.92)),
            radial-gradient(circle at 10% 8%, rgba(33, 183, 197, 0.16), transparent 28%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.16), transparent 24%);
    box-shadow: 0 16px 46px rgba(39, 28, 62, 0.07);
}

.vue-template-guide-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.vue-template-guide-head h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 28px;
    letter-spacing: 0;
}

.vue-template-guide-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-template-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.vue-template-chip-row > span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.vue-template-chip {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.88);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-template-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.38);
    box-shadow: 0 10px 24px rgba(39, 28, 62, 0.08);
}

.vue-template-chip.is-active {
    border-color: rgba(33, 183, 197, 0.72);
    background: rgba(219, 250, 253, 0.92);
    color: #0b5561;
}

.vue-template-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vue-template-guide-grid article {
    display: grid;
    gap: 8px;
    min-height: 156px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.vue-template-guide-grid span {
    color: #0b5561;
    font-size: 12px;
    font-weight: 900;
}

.vue-template-guide-grid strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.3;
}

.vue-template-guide-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.vue-template-rank-grid,
.vue-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vue-template-mini {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    color: inherit;
}

.vue-template-mini img {
    width: 96px;
    height: 86px;
    border-radius: 8px;
    background: #111827;
}

.vue-template-mini div {
    display: grid;
    gap: 6px;
}

.vue-template-mini span,
.vue-template-mini small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.vue-template-mini strong {
    color: var(--ink);
}

.vue-template-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(160px, 0.75fr) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.05);
}

.vue-template-filter label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.vue-template-filter input,
.vue-template-filter select {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.vue-template-filter-meta {
    display: grid;
    gap: 6px;
    justify-items: end;
    min-width: 140px;
}

.vue-template-filter-meta small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.vue-template-card > img {
    height: 220px;
    background: #111827;
}

body[data-page="characters"][data-characters-vue-active="true"] .characters-legacy {
    display: none;
}

.vue-characters-root:empty {
    display: none;
}

.vue-characters {
    display: grid;
    gap: 24px;
    padding: 44px 0 80px;
}

.vue-characters-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 24px;
    align-items: stretch;
    padding: 26px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.9)),
            radial-gradient(circle at 12% 18%, rgba(33, 183, 197, 0.18), transparent 34%),
            radial-gradient(circle at 88% 6%, rgba(255, 209, 102, 0.2), transparent 26%);
    box-shadow: 0 20px 62px rgba(39, 28, 62, 0.09);
}

.vue-characters-copy {
    display: grid;
    align-content: center;
    gap: 12px;
}

.vue-characters-copy h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(40px, 6.4vw, 76px);
    line-height: 0.98;
    letter-spacing: 0;
}

.vue-characters-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

.vue-characters-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.vue-hero-boundary-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 780px;
    margin-top: 12px;
}

.vue-hero-boundary-card {
    min-height: 122px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 13px;
    color: #17151f;
    text-decoration: none;
    border: 1px solid rgba(23, 21, 31, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-hero-boundary-card:hover,
.vue-hero-boundary-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.34);
    box-shadow: 0 16px 34px rgba(17, 24, 39, 0.1);
}

.vue-hero-boundary-card.active {
    color: #f7f4ea;
    border-color: rgba(255, 255, 255, 0.24);
    background:
            linear-gradient(150deg, rgba(23, 21, 31, 0.96), rgba(49, 42, 63, 0.92)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.18), rgba(255, 209, 102, 0.14));
}

.vue-hero-boundary-card span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: rgba(23, 21, 31, 0.68);
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.vue-hero-boundary-card.active span {
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
}

.vue-hero-boundary-card strong {
    font-size: 16px;
    line-height: 1.22;
}

.vue-hero-boundary-card p {
    max-width: none;
    margin: 0;
    color: rgba(23, 21, 31, 0.62);
    font-size: 13px;
    line-height: 1.5;
}

.vue-hero-boundary-card.active p {
    color: rgba(247, 244, 234, 0.74);
}

.vue-hero-boundary-card b {
    margin-top: auto;
    color: var(--oc-cyan);
    font-size: 13px;
    font-weight: 950;
}

.vue-hero-boundary-card.active b {
    color: var(--oc-gold);
}

.vue-character-feature {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border-radius: 8px;
    background: #111827;
    color: #fff;
}

.vue-character-feature img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.36s ease, filter 0.36s ease;
}

.vue-character-feature:hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.03);
}

.vue-character-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(180deg, transparent 32%, rgba(9, 13, 27, 0.82)),
            linear-gradient(120deg, rgba(33, 183, 197, 0.18), transparent 45%);
}

.vue-character-feature div {
    position: absolute;
    z-index: 1;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 8px;
}

.vue-character-feature strong {
    color: #fff;
    font-size: 26px;
    line-height: 1.15;
}

.vue-character-feature small {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.vue-characters-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vue-characters-stats article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-characters-stats span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.vue-characters-stats strong {
    color: var(--ink);
    font-size: 34px;
    line-height: 1;
}

.vue-characters-stats small {
    color: var(--muted);
    line-height: 1.5;
}

.vue-character-queue {
    display: grid;
    grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(35, 32, 48, 0.96)),
            radial-gradient(circle at 10% 12%, rgba(33, 183, 197, 0.18), transparent 32%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.15), transparent 30%);
    box-shadow: 0 20px 58px rgba(22, 19, 29, 0.16);
}

.vue-character-queue-copy {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 6px;
}

.vue-character-queue-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
}

.vue-character-queue-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.76;
}

.vue-character-queue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-character-queue-grid article {
    overflow: hidden;
    min-height: 252px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-character-queue-grid img {
    width: 100%;
    height: 124px;
    object-fit: cover;
    object-position: center 28%;
}

.vue-character-queue-grid div {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.vue-character-queue-grid span {
    color: #b9f5ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-character-queue-grid strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.25;
}

.vue-character-queue-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.58;
}

.vue-character-queue-grid a {
    color: #ffd166;
    font-size: 13px;
    font-weight: 900;
}

.vue-character-dimensions {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(123, 97, 255, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 255, 0.94)),
            radial-gradient(circle at 4% 12%, rgba(123, 97, 255, 0.14), transparent 28%),
            radial-gradient(circle at 98% 0, rgba(33, 183, 197, 0.14), transparent 28%);
    box-shadow: 0 16px 46px rgba(39, 28, 62, 0.07);
}

.vue-character-dimensions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.vue-character-dimensions-head h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 30px;
    line-height: 1.12;
}

.vue-character-dimensions-head p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-character-dimension-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-character-dimension-grid article {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 222px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-character-dimension-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vue-character-dimension-top span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
}

.vue-character-dimension-top strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}

.vue-character-dimension-grid h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.25;
}

.vue-character-dimension-grid p,
.vue-character-dimension-grid small {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-character-dimension-meter,
.vue-character-card-progress > span {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(22, 19, 29, 0.08);
}

.vue-character-dimension-meter i,
.vue-character-card-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--pink));
}

.vue-character-dimension-grid a {
    align-self: end;
    color: var(--cyan);
    font-weight: 900;
}

.vue-character-completion {
    display: grid;
    grid-template-columns: minmax(280px, 0.88fr) minmax(360px, 1.12fr);
    gap: 16px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(36, 33, 48, 0.96)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.16), rgba(255, 209, 102, 0.12));
    box-shadow: 0 20px 58px rgba(22, 19, 29, 0.16);
}

.vue-character-completion-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
}

.vue-character-completion-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: 0;
}

.vue-character-completion-copy p,
.vue-character-completion-copy small {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-weight: 800;
    line-height: 1.7;
}

.vue-character-score {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.vue-character-score strong {
    color: #ffd166;
    font-size: 56px;
    line-height: 0.9;
}

.vue-character-score span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 900;
}

.vue-character-completion-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vue-character-completion-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-character-completion-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.vue-character-completion-grid article {
    min-height: 188px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-character-completion-grid article.done {
    border-color: rgba(33, 183, 197, 0.38);
    background: rgba(33, 183, 197, 0.13);
}

.vue-character-completion-grid span {
    color: #ffd166;
    font-size: 12px;
    font-weight: 900;
}

.vue-character-completion-grid strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.25;
}

.vue-character-completion-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-character-completion-grid a {
    align-self: end;
    color: #b9f5ff;
    font-size: 13px;
    font-weight: 900;
}

.vue-character-worlds,
.vue-character-workspace {
    display: grid;
    gap: 16px;
}

.vue-character-remix {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 93, 143, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 247, 250, 0.94)),
            linear-gradient(90deg, rgba(255, 93, 143, 0.07), transparent 56%);
}

.vue-character-remix-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.vue-character-remix-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.12;
}

.vue-character-remix-copy p,
.vue-character-remix-copy small {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
}

.vue-character-remix-refs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vue-character-remix-refs span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 93, 143, 0.22);
    border-radius: 8px;
    padding: 0 10px;
    color: #8a2145;
    background: rgba(255, 93, 143, 0.08);
    font-size: 12px;
    font-weight: 900;
}

.vue-character-remix-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vue-character-remix-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-character-remix-grid article {
    min-height: 158px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
}

.vue-character-remix-grid article.ready {
    border-color: rgba(255, 93, 143, 0.28);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 249, 252, 0.92)),
            linear-gradient(180deg, rgba(255, 93, 143, 0.08), transparent 58%);
}

.vue-character-remix-grid span {
    color: #8a2145;
    font-size: 12px;
    font-weight: 900;
}

.vue-character-remix-grid strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.22;
}

.vue-character-remix-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-character-guide {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.92)),
            radial-gradient(circle at 10% 8%, rgba(33, 183, 197, 0.16), transparent 28%),
            radial-gradient(circle at 96% 0, rgba(255, 93, 143, 0.12), transparent 24%);
    box-shadow: 0 16px 46px rgba(39, 28, 62, 0.07);
}

.vue-character-guide-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.vue-character-guide-head h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 28px;
    letter-spacing: 0;
}

.vue-character-guide-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-character-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vue-character-guide-grid article {
    display: grid;
    gap: 8px;
    min-height: 156px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.vue-character-guide-grid span {
    color: #0b5561;
    font-size: 12px;
    font-weight: 900;
}

.vue-character-guide-grid strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.3;
}

.vue-character-guide-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.vue-world-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-world-chip-row .secondary-btn.is-active {
    color: #fff;
    background: #16131d;
    border-color: #16131d;
}

.vue-character-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(160px, 0.75fr) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.05);
}

.vue-character-filter label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
}

.vue-character-filter input,
.vue-character-filter select {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.vue-character-filter-meta {
    display: grid;
    gap: 6px;
    justify-items: end;
    min-width: 150px;
}

.vue-character-filter-meta small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.vue-character-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vue-character-card > a {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111827;
}

.vue-character-card > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(180deg, transparent 48%, rgba(12, 16, 28, 0.5)),
            linear-gradient(120deg, rgba(33, 183, 197, 0.14), transparent 42%);
    pointer-events: none;
}

.vue-character-card > a > img {
    height: 280px;
    background: #111827;
    object-position: center 30%;
    transition: transform 0.36s ease, filter 0.36s ease;
}

.vue-character-card:hover > a > img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.03);
}

.vue-character-card blockquote {
    margin: 12px 0 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.7;
}

.vue-character-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.vue-character-palette span {
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(22, 19, 29, 0.12);
}

.vue-character-card-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid rgba(33, 183, 197, 0.16);
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.06);
}

.vue-character-card-progress strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
}

.vue-character-card-progress small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.4;
}

body[data-page="user"][data-user-profile-vue-active="true"] .user-profile-legacy {
    display: none;
}

.vue-user-profile-root:empty {
    display: none;
}

.vue-user-profile {
    display: grid;
    gap: 24px;
    padding: 44px 0 80px;
}

.vue-user-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
    gap: 24px;
    align-items: stretch;
    padding: 26px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.92)),
            radial-gradient(circle at 16% 16%, rgba(255, 93, 143, 0.14), transparent 30%),
            radial-gradient(circle at 88% 10%, rgba(33, 183, 197, 0.18), transparent 28%);
    box-shadow: 0 20px 62px rgba(39, 28, 62, 0.09);
}

.vue-user-identity {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.vue-user-identity > img {
    width: 128px;
    height: 128px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #111827;
    box-shadow: 0 18px 44px rgba(39, 28, 62, 0.16);
}

.vue-user-identity h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.98;
    letter-spacing: 0;
}

.vue-user-identity p {
    max-width: 680px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.vue-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.inline-error {
    color: #b42318;
    font-weight: 800;
}

.vue-user-feature {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border-radius: 8px;
    background: #111827;
    color: #fff;
}

.vue-user-feature img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.36s ease, filter 0.36s ease;
}

.vue-user-feature:hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.03);
}

.vue-user-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(180deg, transparent 32%, rgba(9, 13, 27, 0.82)),
            linear-gradient(120deg, rgba(255, 93, 143, 0.16), transparent 45%);
}

.vue-user-feature div {
    position: absolute;
    z-index: 1;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 8px;
}

.vue-user-feature strong {
    color: #fff;
    font-size: 26px;
    line-height: 1.15;
}

.vue-user-feature small {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.vue-user-next {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 260px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
}

.vue-user-next span,
.vue-user-stats span,
.vue-user-about span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.vue-user-next strong {
    color: var(--ink);
    font-size: 30px;
}

.vue-user-next p,
.vue-user-about p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.vue-user-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.vue-user-stats article,
.vue-user-about article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.vue-user-stats strong {
    color: var(--ink);
    font-size: 32px;
    line-height: 1;
}

.vue-user-stats small {
    color: var(--muted);
    line-height: 1.45;
}

.vue-user-fit {
    display: grid;
    grid-template-columns: minmax(280px, 0.76fr) minmax(420px, 1.24fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(38, 35, 50, 0.96)),
            radial-gradient(circle at 10% 10%, rgba(33, 183, 197, 0.2), transparent 34%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.18), transparent 30%);
    box-shadow: 0 22px 60px rgba(22, 19, 29, 0.17);
}

.vue-user-fit-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 6px;
}

.vue-user-fit-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.8vw, 50px);
    line-height: 1.08;
    letter-spacing: 0;
}

.vue-user-fit-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.76;
}

.vue-user-fit-score {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.vue-user-fit-score strong {
    color: #ffd166;
    font-size: 56px;
    line-height: 0.9;
}

.vue-user-fit-score span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 900;
}

.vue-user-fit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-user-fit-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-user-fit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-user-fit-grid article {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 178px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-user-fit-grid article.done {
    border-color: rgba(33, 183, 197, 0.4);
    background: rgba(33, 183, 197, 0.13);
}

.vue-user-fit-grid span {
    color: #ffd166;
    font-size: 12px;
    font-weight: 900;
}

.vue-user-fit-grid strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.24;
}

.vue-user-fit-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.58;
}

.vue-user-fit-grid a,
.vue-user-fit-grid button {
    align-self: end;
    width: fit-content;
    border: 0;
    padding: 0;
    color: #b9f5ff;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.vue-user-fit-grid button:disabled {
    cursor: progress;
    opacity: 0.7;
}

.vue-user-about {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 16px;
}

.vue-user-about strong {
    color: var(--ink);
    font-size: 22px;
}

.vue-user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vue-user-tags a {
    padding: 8px 10px;
    border: 1px solid rgba(33, 183, 197, 0.26);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.08);
    font-size: 13px;
    font-weight: 900;
}

.vue-user-route {
    display: grid;
    grid-template-columns: minmax(280px, 0.74fr) minmax(360px, 1.26fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 252, 0.94)),
            radial-gradient(circle at 8% 12%, rgba(255, 209, 102, 0.16), transparent 30%),
            radial-gradient(circle at 94% 8%, rgba(33, 183, 197, 0.16), transparent 28%);
    box-shadow: 0 16px 48px rgba(39, 28, 62, 0.07);
}

.vue-user-route-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 8px;
}

.vue-user-route-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
}

.vue-user-route-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.76;
}

.vue-user-route-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-user-route-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-user-route-steps article {
    position: relative;
    overflow: hidden;
    min-height: 178px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 16px 16px 16px 18px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-user-route-steps article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--pink), var(--cyan));
}

.vue-user-route-steps span,
.vue-user-inspiration .row-between span,
.vue-user-inspiration-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-user-route-steps strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.3;
}

.vue-user-route-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.62;
}

.vue-user-route-steps a,
.vue-user-route-steps .link-button,
.vue-user-inspiration .row-between a,
.vue-user-inspiration-grid a {
    color: var(--cyan);
    font-weight: 900;
}

.vue-user-route-steps .link-button {
    justify-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.vue-user-route-steps .link-button:disabled {
    cursor: wait;
    opacity: 0.62;
}

.vue-user-inspiration {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(22, 19, 29, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.vue-user-inspiration .row-between strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 18px;
}

.vue-user-inspiration-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-user-inspiration-grid article {
    overflow: hidden;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
}

.vue-user-inspiration-grid img {
    width: 100%;
    height: 132px;
    object-fit: cover;
    object-position: center 30%;
    background: #111827;
}

.vue-user-inspiration-grid div {
    display: grid;
    gap: 7px;
    padding: 12px;
}

.vue-user-inspiration-grid strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    line-height: 1.3;
}

.vue-user-inspiration-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.vue-user-cocreate {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 252, 0.94)),
            radial-gradient(circle at 12% 6%, rgba(33, 183, 197, 0.16), transparent 30%),
            radial-gradient(circle at 100% 12%, rgba(255, 93, 143, 0.13), transparent 32%);
    box-shadow: 0 16px 48px rgba(39, 28, 62, 0.07);
}

.vue-user-cocreate-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 8px;
}

.vue-user-cocreate-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
}

.vue-user-cocreate-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.76;
}

.vue-user-cocreate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-user-cocreate-grid {
    display: grid;
    gap: 10px;
}

.vue-user-cocreate-grid article {
    position: relative;
    overflow: hidden;
    min-height: 116px;
    padding: 16px 16px 16px 18px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-user-cocreate-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--yellow));
}

.vue-user-cocreate-grid span,
.vue-user-brief span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-user-cocreate-grid p {
    margin: 9px 0 0;
    color: var(--text);
    line-height: 1.7;
}

.vue-user-brief {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 8px;
    background: rgba(22, 19, 29, 0.9);
    color: #fff;
}

.vue-user-brief strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 18px;
}

.vue-user-brief pre {
    overflow-x: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.06);
    font: inherit;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.vue-user-brief small {
    color: rgba(255, 255, 255, 0.76);
    font-weight: 800;
}

.vue-user-works {
    display: grid;
    gap: 16px;
}

.vue-user-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vue-user-work-card > a {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111827;
}

.vue-user-work-card > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(180deg, transparent 48%, rgba(12, 16, 28, 0.5)),
            linear-gradient(120deg, rgba(33, 183, 197, 0.14), transparent 42%);
    pointer-events: none;
}

.vue-user-work-card > a > img {
    height: 280px;
    background: #111827;
    object-position: center 30%;
    transition: transform 0.36s ease, filter 0.36s ease;
}

.vue-user-work-card:hover > a > img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.03);
}

@media (max-width: 1100px) {
    body[data-page="login"] .auth-shell {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        gap: 32px;
    }

    body[data-page="login"] .auth-art h1 {
        font-size: clamp(38px, 5vw, 56px);
    }

    body[data-page="login"] .auth-card {
        padding: 28px;
    }

    .vue-login-flow {
        grid-template-columns: 1fr;
    }

    .vue-me-hero,
    .vue-me-ownership,
    .vue-me-triage,
    .vue-me-triage-grid,
    .vue-me-ops-desk,
    .vue-me-health-grid,
    .vue-me-pipeline-grid,
    .vue-me-achievement,
    .vue-me-achievement-grid,
    .vue-me-sprint ol,
    .vue-me-workflow {
        grid-template-columns: 1fr;
    }

    .vue-me-pipeline-head {
        display: grid;
        align-items: start;
    }

    .vue-me-pipeline-actions {
        justify-content: flex-start;
    }

    .vue-me-pipeline-actions small {
        text-align: left;
    }

    .vue-me-pipeline-grid article {
        min-height: 0;
    }

    .vue-me-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vue-me-ownership-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vue-me-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vue-me-section-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vue-gallery-hero,
    .vue-gallery-stats,
    .vue-gallery-pulse,
    .vue-gallery-pulse-grid,
    .vue-gallery-mission,
    .vue-gallery-mission-grid,
    .vue-gallery-creator-radar,
    .vue-gallery-radar-grid,
    .vue-gallery-cocreate,
    .vue-gallery-cocreate-grid,
    .vue-gallery-ip-grid,
    .vue-gallery-feed,
    .vue-gallery-work-grid,
    .vue-gallery-sort-row,
    .vue-gallery-loading-grid,
    .vue-gallery-filter,
    .vue-gallery-creator-strip {
        grid-template-columns: 1fr;
    }

    .vue-gallery-hero.has-feature {
        grid-template-columns: 1fr;
    }

    .vue-gallery-discovery-head {
        display: grid;
    }

    .vue-gallery-filter-meta {
        justify-items: start;
    }

    .vue-gallery-filter-meta small {
        max-width: none;
        text-align: left;
    }

    .vue-gallery-mission-grid article {
        min-height: 0;
    }

    .vue-work-dock,
    .vue-work-nav {
        grid-template-columns: 1fr;
    }

    .vue-work-cover img {
        max-height: 360px;
    }

    .vue-feed-hero,
    .vue-feed-stats,
    .vue-feed-response,
    .vue-feed-response-grid,
    .vue-feed-loop-grid,
    .vue-feed-command-head,
    .vue-feed-priority-grid,
    .vue-feed-player-grid,
    .vue-feed-work-grid {
        grid-template-columns: 1fr;
    }

    .vue-feed-loop-head {
        display: grid;
    }

    .vue-feed-filter-row {
        justify-content: flex-start;
    }

    .vue-templates-hero,
    .vue-templates-stats,
    .vue-creator-nextline,
    .vue-nextline-steps,
    .vue-template-pathfinder,
    .vue-pathfinder-grid,
    .vue-template-starter,
    .vue-template-starter-grid,
    .vue-template-match,
    .vue-template-fit-grid,
    .vue-template-social-grid,
    .vue-template-guide-grid,
    .vue-template-rank-grid,
    .vue-template-grid,
    .vue-template-filter,
    .vue-characters-hero,
    .vue-characters-stats,
    .vue-character-pathfinder,
    .vue-character-queue,
    .vue-character-queue-grid,
    .vue-character-dimension-grid,
    .vue-character-completion,
    .vue-character-completion-grid,
    .vue-character-remix,
    .vue-character-remix-grid,
    .vue-character-guide-grid,
    .vue-character-grid,
    .vue-character-filter,
    .vue-user-hero,
    .vue-user-stats,
    .vue-user-fit,
    .vue-user-fit-grid,
    .vue-user-about,
    .vue-user-route,
    .vue-user-route-steps,
    .vue-user-inspiration-grid,
    .vue-user-cocreate,
    .vue-user-work-grid {
        grid-template-columns: 1fr;
    }

    .vue-export-preview-head {
        display: grid;
    }

    .vue-export-preview-actions {
        justify-content: flex-start;
    }

    .vue-template-guide-head {
        display: grid;
    }

    .vue-template-social-head {
        display: grid;
    }

    .vue-template-social-actions {
        justify-content: flex-start;
    }

    .vue-template-starter-grid article {
        min-height: 0;
    }

    .vue-template-filter-meta {
        justify-items: start;
    }

    .vue-template-filter-meta small {
        text-align: left;
    }

    .vue-character-guide-head {
        display: grid;
    }

    .vue-template-more > summary,
    .vue-character-more > summary {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .vue-character-dimensions-head {
        display: grid;
    }

    .vue-character-filter-meta {
        justify-items: start;
    }

    .vue-character-filter-meta small {
        text-align: left;
    }

    .vue-user-identity {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .vue-user-identity > img {
        width: 96px;
        height: 96px;
    }
}

.auth-card input,
.auth-card textarea,
.designer-form input,
.designer-form select,
.designer-form textarea,
.comment-modal input,
.comment-modal select,
.comment-modal textarea,
.filter-bar input,
.filter-bar select {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-card input:focus,
.auth-card textarea:focus,
.designer-form input:focus,
.designer-form select:focus,
.designer-form textarea:focus,
.comment-modal input:focus,
.comment-modal select:focus,
.comment-modal textarea:focus,
.filter-bar input:focus,
.filter-bar select:focus {
    outline: none;
    border-color: rgba(33, 183, 197, 0.72);
    box-shadow: 0 0 0 4px rgba(33, 183, 197, 0.12);
    background: #fff;
}

body[data-page="studio"] .page-title {
    padding-top: 44px;
}

.designer-board {
    gap: 22px;
}

.avatar-preview {
    position: sticky;
    top: 92px;
    overflow: hidden;
    align-self: start;
    min-height: 360px;
    background:
            linear-gradient(145deg, rgba(23, 21, 31, 0.94), rgba(50, 47, 58, 0.82)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.18), rgba(255, 93, 143, 0.14));
    color: #fff;
}

.avatar-preview h2,
.avatar-preview p {
    color: #fff;
}

.avatar-preview .eyebrow {
    color: var(--yellow);
}

.designer-form {
    background: rgba(255, 255, 255, 0.94);
}

.generator-actions {
    padding: 8px;
    border: 1px solid rgba(230, 225, 236, 0.82);
    border-radius: 8px;
    background: rgba(251, 250, 252, 0.76);
}

.revealable {
    opacity: 0;
    transform: translateY(18px);
}

.revealable.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.42s ease, transform 0.42s ease;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }

    .revealable {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .vue-me-command-grid,
    .vue-me-health-grid,
    .vue-me-ownership-grid,
    .vue-me-stats,
    .vue-me-section-nav {
        grid-template-columns: 1fr;
    }

    .vue-me-operating-queue article {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .vue-me-operating-queue article > a {
        grid-column: 2;
    }

    .vue-me-command-card img {
        height: 160px;
    }
}

/* Production UX pass 20260707 v600: lighter AI-first OC studio, balanced day/night themes. */
body.animaker-theme-day,
body:not(.animaker-theme-night) {
    --ink: #1a2233;
    --text: #334155;
    --muted: #64748b;
    --line: rgba(24, 41, 61, 0.12);
    --paper: #f7fbfb;
    --panel: rgba(255, 255, 255, 0.84);
    --shadow: 0 18px 54px rgba(29, 47, 70, 0.12);
    background:
            radial-gradient(circle at 12% 8%, rgba(112, 226, 218, 0.2), transparent 28rem),
            radial-gradient(circle at 86% 0%, rgba(255, 231, 128, 0.18), transparent 28rem),
            linear-gradient(180deg, #fbfefe 0%, #f3faf9 52%, #fffdf8 100%) !important;
}

body.animaker-theme-night {
    --ink: #f6f8fd;
    --text: #dce6f2;
    --muted: #9fb0c5;
    --line: rgba(232, 240, 255, 0.13);
    --paper: #0f141d;
    --panel: rgba(17, 23, 34, 0.78);
    --shadow: 0 20px 62px rgba(0, 0, 0, 0.28);
    background:
            radial-gradient(circle at 14% 10%, rgba(75, 206, 214, 0.18), transparent 30rem),
            radial-gradient(circle at 86% 4%, rgba(255, 216, 112, 0.1), transparent 28rem),
            linear-gradient(180deg, #0c1119 0%, #111827 52%, #0d121b 100%) !important;
}

body.animaker-theme-day .topbar,
body:not(.animaker-theme-night) .topbar {
    border-bottom: 1px solid rgba(24, 41, 61, 0.08) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 12px 34px rgba(29, 47, 70, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
}

body.animaker-theme-night .topbar {
    border-bottom: 1px solid rgba(232, 240, 255, 0.1) !important;
    background: rgba(12, 17, 26, 0.82) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(18px) saturate(1.05) !important;
}

body.animaker-theme-night :is(.shared-nav-links a, .nav-button, .brand, .primary-link, .secondary-btn, .ghost-link) {
    color: var(--ink);
}

body.animaker-theme-night :is(.shared-nav-links a:hover, .shared-nav-links a.active) {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.vue-home-gateway {
    background-position: 58% 42% !important;
    background-size: cover !important;
}

body.animaker-theme-day .vue-home-gateway,
body:not(.animaker-theme-night) .vue-home-gateway {
    color: #182033 !important;
    background-image:
            linear-gradient(90deg, rgba(251, 254, 254, 0.92) 0%, rgba(251, 254, 254, 0.68) 38%, rgba(251, 254, 254, 0.12) 74%),
            var(--home-gateway-image) !important;
}

body.animaker-theme-night .vue-home-gateway {
    color: #f6f8fd !important;
    background-image:
            linear-gradient(90deg, rgba(7, 10, 16, 0.88) 0%, rgba(7, 10, 16, 0.58) 44%, rgba(7, 10, 16, 0.18) 78%),
            var(--home-gateway-image) !important;
}

.vue-home-gateway-copy {
    margin-left: clamp(16px, 6vw, 92px) !important;
}

.vue-home-gateway-copy h1 {
    max-width: 7.2em !important;
    font-size: clamp(58px, 9vw, 128px) !important;
    line-height: 0.9 !important;
    text-wrap: balance !important;
}

.vue-home-gateway-copy p {
    max-width: 560px !important;
    color: color-mix(in srgb, currentColor 76%, transparent) !important;
    font-size: clamp(17px, 1.65vw, 23px) !important;
}

.vue-home-gateway-copy span,
.vue-home-gateway-cue {
    color: inherit !important;
    border-color: color-mix(in srgb, currentColor 16%, transparent) !important;
    background: rgba(255, 255, 255, 0.34) !important;
    box-shadow: 0 14px 38px rgba(29, 47, 70, 0.1) !important;
}

body.animaker-theme-night .vue-home-gateway-copy span,
body.animaker-theme-night .vue-home-gateway-cue {
    background: rgba(10, 14, 22, 0.48) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24) !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    min-height: max(660px, calc(100dvh - 66px)) !important;
    grid-template-columns: minmax(390px, 0.9fr) minmax(320px, 480px) !important;
    background-position: 58% 42% !important;
    background-size: cover !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(251, 254, 254, 0.92) 0%, rgba(251, 254, 254, 0.64) 42%, rgba(251, 254, 254, 0.24) 72%),
            url("/animaker/img/generated/ux/default-oc-ai-cover-v5.webp") !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(7, 10, 16, 0.9) 0%, rgba(7, 10, 16, 0.64) 46%, rgba(7, 10, 16, 0.3) 76%),
            url("/animaker/img/generated/ux/default-oc-ai-cover-v5.webp") !important;
}

body[data-page="home"] section.vue-home-hero::before {
    background:
            radial-gradient(circle at 22% 26%, rgba(76, 214, 213, 0.16), transparent 24rem),
            radial-gradient(circle at 74% 18%, rgba(255, 220, 128, 0.14), transparent 24rem) !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 7.8em !important;
    font-size: clamp(54px, 6.6vw, 100px) !important;
    line-height: 0.94 !important;
    color: var(--ink) !important;
}

body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 590px !important;
    color: var(--text) !important;
}

body[data-page="home"] .vue-home-brief,
body[data-page="home"] .vue-home-feature,
body[data-page="studio"] .studio-panel.is-active,
body[data-page="studio"] .vue-board-dock {
    border-color: var(--line) !important;
    background: var(--panel) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night :is(.vue-home-brief, .vue-home-feature, .vue-home-metrics a, .vue-home-creation-card, .vue-template-card, .vue-character-card, .work-card, .auth-card, .vue-creation-command, .studio-panel, .vue-board-dock) {
    border-color: var(--line) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.026)),
            var(--panel) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="home"] .vue-home-feature {
    min-height: clamp(360px, 48vh, 520px) !important;
    overflow: hidden !important;
}

body[data-page="home"] .vue-home-feature img {
    object-position: 58% 38% !important;
}

body[data-page="studio"] .vue-board-cover,
body[data-page="studio"] .vue-board-cover img,
body[data-page="studio"] .vue-board-empty-cover,
body[data-page="studio"] .vue-board-empty-stage {
    min-height: 420px !important;
    height: 420px !important;
}

body[data-page="studio"] .vue-board-default-art img {
    object-position: 57% 36% !important;
    filter: saturate(1.02) contrast(1.02) !important;
}

body[data-page="studio"].studio-theme-night .vue-board-default-art {
    opacity: 0.88 !important;
}

body[data-page="studio"] .vue-board-empty-head {
    background: rgba(255, 255, 255, 0.78) !important;
}

body[data-page="studio"].studio-theme-night .vue-board-empty-head {
    background: rgba(9, 13, 20, 0.68) !important;
}

@media (max-width: 1180px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        background-position: 64% 44% !important;
    }
}

@media (max-width: 760px) {
    .vue-home-gateway {
        background-position: 61% 38% !important;
    }

    .vue-home-gateway-copy {
        margin: 0 !important;
        padding-inline: 16px !important;
    }

    .vue-home-gateway-copy h1 {
        max-width: 6.5em !important;
        font-size: clamp(44px, 14vw, 66px) !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: 0 !important;
        padding: 26px 16px 34px !important;
        background-position: 64% 20% !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(40px, 12.5vw, 58px) !important;
    }

    body[data-page="studio"] .vue-board-cover,
    body[data-page="studio"] .vue-board-cover img,
    body[data-page="studio"] .vue-board-empty-cover,
    body[data-page="studio"] .vue-board-empty-stage {
        min-height: 270px !important;
        height: 270px !important;
    }
}

@media (max-width: 900px) {
    .topbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        min-height: auto;
        padding: 12px 4vw 10px;
    }

    .brand {
        flex: 1 1 auto;
        font-size: 18px;
    }

    .shared-nav-root {
        order: 3;
        width: 100%;
        flex-basis: 100%;
    }

    .shared-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        width: 100%;
    }

    .shared-nav-links {
        width: 100%;
        gap: 5px;
        padding: 2px 0 4px;
    }

    .shared-nav-links a {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        font-size: 12.5px;
        line-height: 1;
    }

    .shared-nav-actions {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .shared-nav-actions::-webkit-scrollbar {
        display: none;
    }

    .shared-nav-actions .primary-link,
    .shared-nav-actions .nav-button {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .shared-nav-status {
        flex: 0 0 auto;
        max-width: 58vw;
    }

    .topbar > .primary-link {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .nav {
        order: 3;
        width: 100%;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 0 4px;
        scrollbar-width: none;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    .nav a {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
    }

    body[data-page="home"] .hero {
        min-height: calc(100vh - 118px);
        padding: 44px 5vw 28px;
        border-radius: 0 0 18px 18px;
    }

    body[data-page="home"] .hero-copy h1 {
        font-size: clamp(42px, 15vw, 62px);
    }

    body[data-page="home"] .hero-panel {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        margin-top: 28px;
    }

    body[data-page="login"] .auth-shell {
        min-height: calc(100vh - 116px);
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 34px 5vw 48px;
        background-position: 58% center;
    }

    body[data-page="login"] .auth-art {
        min-height: auto;
        padding: 0;
    }

    body[data-page="login"] .auth-art h1 {
        max-width: 560px;
        font-size: clamp(34px, 12vw, 52px);
    }

    body[data-page="login"] .auth-art p {
        max-width: 520px;
        font-size: 16px;
    }

    body[data-page="login"] .auth-card {
        width: min(100%, 460px);
        padding: 22px;
    }

    .avatar-preview {
        position: relative;
        top: auto;
    }

    .generator-actions {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .generator-actions::-webkit-scrollbar {
        display: none;
    }

    .generator-actions .secondary-btn,
    .generator-actions .primary-btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 520px) {
    main {
        width: min(100% - 28px, 1180px);
    }

    .hero-copy h1,
    .page-title h1 {
        font-size: clamp(38px, 13vw, 54px);
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body[data-page="home"] main > section:not(.hero),
    body[data-page="home"] main > .split {
        width: min(100% - 28px, 1180px);
    }

    body[data-page="home"] .hero-panel {
        grid-template-columns: 1fr;
    }

    .vue-templates-actions .primary-link,
    .vue-templates-actions .secondary-btn,
    .vue-me-triage-actions .primary-btn,
    .vue-me-triage-actions .secondary-btn,
    .vue-me-triage-grid a,
    .vue-me-pipeline-actions .primary-link,
    .vue-me-pipeline-actions .secondary-btn,
    .vue-me-pipeline-action,
    .vue-feed-loop-head .secondary-btn,
    .vue-feed-loop-grid a,
    .vue-gallery-pulse-actions .primary-btn,
    .vue-gallery-pulse-actions .secondary-btn,
    .vue-gallery-pulse-grid a,
    .vue-gallery-pulse-grid button,
    .vue-gallery-mission-actions .primary-link,
    .vue-gallery-mission-actions .secondary-btn,
    .vue-gallery-mission-grid a,
    .vue-gallery-mission-grid button,
    .vue-template-starter-actions .primary-link,
    .vue-template-starter-actions .secondary-btn,
    .vue-template-starter-grid a,
    .vue-template-match-actions .primary-link,
    .vue-template-match-actions .secondary-btn,
    .vue-template-social-actions .primary-link,
    .vue-template-social-actions .secondary-btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .nav {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .designer-board,
    .designer-board > *,
    .avatar-preview,
    .designer-form {
        min-width: 0;
        width: 100%;
    }

    .designer-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .designer-form label,
    .designer-form .form-wide,
    .designer-form input,
    .designer-form select,
    .designer-form textarea,
    .generator-actions {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .avatar-preview,
    .designer-form {
        padding: 20px;
    }
}

/* V3 OC gallery polish: richer character presentation and creator-facing detail pages. */
.work-card,
.community-card,
.character-card,
.template-card {
    position: relative;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 253, 0.9)),
            #fff;
}

.work-card > a,
.community-card > a {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111827;
}

.work-card > a::after,
.community-card > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            linear-gradient(180deg, transparent 44%, rgba(12, 16, 28, 0.52)),
            linear-gradient(120deg, rgba(33, 183, 197, 0.18), transparent 42%);
    pointer-events: none;
}

.work-card > img,
.work-card > a > img,
.community-card > a > img,
.character-card > img {
    background: #111827;
    transition: transform 0.36s ease, filter 0.36s ease;
}

.work-card:hover > img,
.work-card:hover > a > img,
.community-card:hover > a > img,
.character-card:hover > img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.03);
}

body[data-page="gallery"] .work-card.is-sample {
    border-color: rgba(33, 183, 197, 0.24);
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 252, 253, 0.92)),
            #fff;
}

body[data-page="gallery"] .work-card.is-sample::before {
    content: "UI PREVIEW";
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #0b5561;
    background: rgba(240, 253, 255, 0.9);
    box-shadow: 0 8px 20px rgba(15, 111, 122, 0.14);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.community-card > a > img {
    height: 300px;
    object-position: center 32%;
}

.work-card .creator-line img,
.community-card .creator-line img,
.feed-card .creator-line img,
.detail-creator img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 28%;
    transform: none;
    filter: none;
}

.card-body .pill {
    max-width: 100%;
}

body[data-page="work"] main {
    width: min(100% - 48px, 1280px);
}

body[data-page="work"] .detail-shell {
    display: block;
    padding: 44px 0 26px;
}

body[data-page="work"][data-work-vue-active="true"] .work-detail-legacy {
    display: none;
}

.vue-work-experience {
    display: grid;
    gap: 0;
    padding: 44px 0 80px;
}

.vue-work-experience > .vue-work-dock {
    margin-bottom: 28px;
}

.vue-detail-shell {
    padding-top: 0 !important;
}

.vue-detail-notice {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    color: var(--ink) !important;
    background: rgba(33, 183, 197, 0.08);
    font-weight: 800;
}

.vue-work-launchpad {
    display: grid;
    grid-template-columns: minmax(280px, 0.76fr) minmax(360px, 1.24fr);
    gap: 16px;
    margin: 0 0 28px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(37, 34, 49, 0.96)),
            radial-gradient(circle at 9% 10%, rgba(33, 183, 197, 0.24), transparent 32%),
            radial-gradient(circle at 95% 0, rgba(255, 209, 102, 0.18), transparent 28%);
    box-shadow: 0 24px 64px rgba(22, 19, 29, 0.18);
}

.vue-work-launchpad-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.vue-work-launchpad-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4.2vw, 52px);
    line-height: 1.05;
    letter-spacing: 0;
}

.vue-work-launchpad-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.78;
}

.vue-work-launchpad-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.vue-work-launchpad-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-work-launchpad-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.vue-work-launchpad-grid article {
    min-height: 214px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.vue-work-launchpad-grid article.is-active {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.78);
    background: rgba(33, 183, 197, 0.16);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.vue-work-mode-picker {
    all: unset;
    display: grid;
    gap: 9px;
    cursor: pointer;
}

.vue-work-mode-picker:focus-visible {
    outline: 3px solid rgba(185, 245, 255, 0.9);
    outline-offset: 4px;
    border-radius: 8px;
}

.vue-work-launchpad-grid span,
.vue-work-task-head span,
.vue-work-task-steps span {
    color: #ffd166;
    font-size: 12px;
    font-weight: 900;
}

.vue-work-launchpad-grid strong,
.vue-work-task-head strong,
.vue-work-task-steps strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.24;
}

.vue-work-launchpad-grid p,
.vue-work-task-head p,
.vue-work-task-steps p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.62;
}

.vue-work-launchpad-grid a {
    align-self: end;
    color: #b9f5ff;
    font-size: 13px;
    font-weight: 900;
}

.vue-work-task-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)),
            rgba(0, 0, 0, 0.16);
}

.vue-work-task-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vue-work-task-head > div {
    display: grid;
    gap: 7px;
}

.vue-work-task-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-work-task-steps article {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 150px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-work-task-steps strong {
    font-size: 16px;
}

.vue-work-task-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.vue-work-task-copy .secondary-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-work-task-copy small {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.vue-work-launchpad-checklist {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.06);
}

.vue-work-launchpad-checklist strong {
    color: #fff;
    font-size: 15px;
}

.vue-work-launchpad-checklist ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vue-work-launchpad-checklist li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-work-launchpad-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--cyan);
}

.vue-work-readiness {
    display: grid;
    grid-template-columns: minmax(280px, 0.74fr) minmax(420px, 1.26fr);
    gap: 16px;
    margin: 0 0 28px;
    padding: 18px;
    border: 1px solid rgba(22, 19, 29, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(34, 37, 48, 0.96)),
            radial-gradient(circle at 10% 12%, rgba(255, 209, 102, 0.18), transparent 30%),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.18), transparent 30%);
    box-shadow: 0 22px 62px rgba(22, 19, 29, 0.17);
}

.vue-work-readiness-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 6px;
}

.vue-work-readiness-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.8vw, 50px);
    line-height: 1.08;
    letter-spacing: 0;
}

.vue-work-readiness-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.76;
}

.vue-work-readiness-score {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.vue-work-readiness-score strong {
    color: #ffd166;
    font-size: 58px;
    line-height: 0.9;
}

.vue-work-readiness-score span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 900;
}

.vue-work-readiness-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-work-readiness-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-work-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-work-readiness-grid article {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 154px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-work-readiness-grid article.done {
    border-color: rgba(33, 183, 197, 0.4);
    background: rgba(33, 183, 197, 0.13);
}

.vue-work-readiness-grid span {
    color: #b9f5ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-work-readiness-grid strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.25;
}

.vue-work-readiness-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.58;
}

.vue-work-readiness-grid small {
    color: rgba(255, 209, 102, 0.86);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.48;
}

.oc-detail-hero {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
    gap: 24px;
    align-items: stretch;
}

.oc-poster {
    position: sticky;
    top: 90px;
    min-height: 720px;
    background:
            radial-gradient(circle at 20% 12%, rgba(33, 183, 197, 0.26), transparent 34%),
            radial-gradient(circle at 84% 18%, rgba(255, 209, 102, 0.22), transparent 30%),
            #111827;
}

.oc-poster img {
    min-height: 720px;
    height: 100%;
    object-position: center;
}

.oc-poster::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
            linear-gradient(180deg, rgba(12, 16, 28, 0.04), rgba(12, 16, 28, 0.42)),
            linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 28%);
    pointer-events: none;
}

.oc-cover-glass {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    color: #fff;
    background: rgba(12, 16, 28, 0.55);
    backdrop-filter: blur(18px);
}

.oc-cover-glass span {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.oc-cover-glass strong {
    text-align: right;
}

.oc-profile-panel {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.9)),
            radial-gradient(circle at 100% 0, rgba(255, 93, 143, 0.13), transparent 28%);
}

.oc-profile-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 190px;
    height: 190px;
    border-radius: 0 0 0 100%;
    background: linear-gradient(135deg, rgba(33, 183, 197, 0.18), rgba(255, 209, 102, 0.2));
    pointer-events: none;
}

.oc-kicker,
.oc-profile-panel h1,
.oc-profile-panel blockquote,
.oc-profile-panel .detail-creator,
.oc-story-lead,
.oc-stat-strip,
.oc-profile-panel .detail-actions {
    position: relative;
    z-index: 1;
}

.oc-profile-panel blockquote {
    margin: 18px 0 16px;
    padding: 18px 20px;
    border-left: 4px solid var(--cyan);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.08);
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 900;
    line-height: 1.34;
}

.oc-tag-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.oc-tag-row span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    font-size: 13px;
}

.oc-story-lead {
    margin: 20px 0 22px;
    padding: 18px;
    border: 1px solid rgba(230, 225, 236, 0.82);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.72);
}

.oc-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.oc-stat-strip div {
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.85);
    border-radius: 8px;
    background: #fff;
}

.oc-stat-strip span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.oc-stat-strip strong {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 24px;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.vue-comment-starters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.vue-comment-starters.is-modal {
    grid-template-columns: 1fr;
    margin: -4px 0 0;
}

.vue-comment-prompt {
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(247, 252, 253, 0.9);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-comment-prompt:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.5);
    box-shadow: 0 10px 24px rgba(39, 28, 62, 0.08);
}

.oc-detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: 20px;
    margin-top: 22px;
}

.oc-profile-card,
.oc-lore-card {
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 32px rgba(39, 28, 62, 0.06);
}

.oc-profile-card {
    padding: 22px;
}

.oc-section-head span,
.oc-lore-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.oc-section-head h2 {
    margin: 6px 0 16px;
    color: var(--ink);
    font-size: 28px;
}

.palette-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(251, 250, 252, 0.92);
}

.palette-row > span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.color-palette.is-compact {
    gap: 6px;
}

.color-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.color-chip i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 7px 14px rgba(23, 21, 31, 0.14);
}

.color-chip code {
    color: var(--muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
}

.color-palette.is-compact .color-chip {
    padding: 5px 7px;
}

.palette-empty {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.card-foot.has-palette {
    align-items: flex-start;
    gap: 10px;
}

.card-foot.has-palette .color-palette {
    flex: 1;
}

.token-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.token-chip-row span {
    padding: 5px 8px;
    border: 1px solid rgba(230, 225, 236, 0.95);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.compact-meta {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

.oc-lore-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.oc-lore-card {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    padding: 18px;
}

.oc-lore-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--cyan);
}

.oc-lore-card p {
    margin: 10px 0 0;
    color: var(--text);
    line-height: 1.78;
}

.vue-work-cocreate {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 1fr);
    gap: 16px;
    margin: 24px 0 30px;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 252, 0.94)),
            radial-gradient(circle at 8% 4%, rgba(255, 93, 143, 0.14), transparent 30%),
            radial-gradient(circle at 100% 22%, rgba(33, 183, 197, 0.16), transparent 32%);
    box-shadow: 0 16px 48px rgba(39, 28, 62, 0.07);
}

.vue-work-cocreate-copy {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 8px;
}

.vue-work-cocreate-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
}

.vue-work-cocreate-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.76;
}

.vue-work-principles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vue-work-principles span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 999px;
    color: #0b5561;
    background: rgba(33, 183, 197, 0.08);
    font-size: 13px;
    font-weight: 900;
}

.vue-work-cocreate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vue-work-cocreate-grid {
    display: grid;
    gap: 10px;
}

.vue-work-cocreate-card {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    padding: 16px 16px 16px 18px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.vue-work-cocreate-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--pink));
}

.vue-work-cocreate-card span,
.vue-work-brief span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-work-cocreate-card p {
    margin: 9px 0 0;
    color: var(--text);
    line-height: 1.7;
}

.vue-work-brief {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(22, 19, 29, 0.1);
    border-radius: 8px;
    background: rgba(22, 19, 29, 0.9);
    color: #fff;
}

.vue-work-brief strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 18px;
}

.vue-work-brief pre {
    overflow-x: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.06);
    font: inherit;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.vue-work-brief small {
    color: rgba(255, 255, 255, 0.76);
    font-weight: 800;
}

.accent-violet::before {
    background: var(--violet);
}

.accent-pink::before {
    background: var(--pink);
}

.accent-green::before {
    background: var(--green);
}

.accent-yellow::before {
    background: var(--yellow);
}

.accent-dark::before {
    background: var(--ink);
}

@media (max-width: 900px) {
    body[data-page="work"] main {
        width: min(100% - 28px, 1280px);
    }

    .oc-detail-hero,
    .oc-detail-grid,
    .oc-lore-grid,
    .vue-work-launchpad,
    .vue-work-launchpad-grid,
    .vue-work-readiness,
    .vue-work-readiness-grid,
    .vue-work-task-steps,
    .vue-work-launchpad-checklist ul,
    .vue-work-cocreate,
    .vue-comment-starters {
        grid-template-columns: 1fr;
    }

    .oc-poster {
        position: relative;
        top: auto;
        min-height: 460px;
    }

    .oc-poster img {
        min-height: 460px;
    }

    .oc-profile-panel {
        padding: 22px;
    }

    .vue-work-launchpad-grid article {
        min-height: 0;
    }

    .vue-work-task-head {
        display: grid;
    }
}

@media (max-width: 520px) {
    .oc-stat-strip {
        grid-template-columns: 1fr;
    }

    .oc-cover-glass {
        align-items: flex-start;
        flex-direction: column;
    }

    .vue-work-launchpad-actions .primary-btn,
    .vue-work-launchpad-actions .secondary-btn,
    .vue-work-launchpad-grid a,
    .vue-work-task-head .primary-btn,
    .vue-work-task-copy .secondary-btn,
    .vue-work-readiness-actions .primary-btn,
    .vue-work-readiness-actions .secondary-btn {
        width: 100%;
    }
}

/* V4 studio guidance: make the creator's next action obvious and playful. */
.studio-guide {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(280px, 0.94fr);
    gap: 16px;
    margin: 0 0 22px;
}

.vue-assist-shell {
    min-height: 0;
}

.vue-assist-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(247, 253, 255, 0.9)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.16), transparent 40%);
    box-shadow: 0 16px 42px rgba(39, 28, 62, 0.09);
}

.vue-assist-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.vue-assist-head h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 18px;
}

.vue-assist-head p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-assist-head strong {
    width: 54px;
    height: 54px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255, 209, 102, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.54);
}

.vue-assist-head strong span {
    font-size: 15px;
    line-height: 1;
}

.vue-assist-head strong small {
    margin-top: 3px;
    color: color-mix(in srgb, var(--ink) 68%, var(--muted));
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
}

.vue-assist-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23, 21, 31, 0.08);
}

.vue-assist-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow));
    transition: width 0.22s ease;
}

.vue-assist-launch {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(255, 209, 102, 0.42);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 249, 226, 0.74)),
            linear-gradient(90deg, rgba(255, 209, 102, 0.18), rgba(33, 183, 197, 0.1));
}

.vue-assist-launch span {
    color: #9d6f00;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vue-assist-launch strong {
    color: var(--ink);
    line-height: 1.28;
}

.vue-assist-launch p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.vue-assist-launch > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vue-assist-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.vue-assist-groups button,
.vue-assist-missing button {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}

.vue-assist-groups button {
    display: grid;
    gap: 4px;
    min-height: 86px;
    padding: 10px;
    text-align: left;
}

.vue-assist-groups button:hover,
.vue-assist-groups button.active {
    border-color: rgba(33, 183, 197, 0.45);
    box-shadow: 0 10px 28px rgba(33, 183, 197, 0.12);
}

.vue-assist-groups button.done {
    background: rgba(87, 204, 153, 0.13);
}

.vue-assist-groups span,
.vue-assist-missing span,
.vue-assist-prompt span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.vue-assist-groups strong {
    color: var(--ink);
}

.vue-assist-groups small {
    color: var(--muted);
}

.vue-assist-missing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vue-assist-missing button {
    padding: 7px 10px;
    color: var(--ink);
    font-weight: 800;
}

.vue-assist-prompt {
    padding: 12px;
    border-radius: 8px;
    background: rgba(23, 21, 31, 0.04);
}

.vue-assist-prompt p {
    margin: 6px 0 0;
    color: var(--text);
    line-height: 1.6;
}

.vue-operation-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(230, 225, 236, 0.95);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.vue-operation-panel[data-operation-tone="running"] {
    border-color: rgba(33, 183, 197, 0.42);
    box-shadow: 0 10px 26px rgba(33, 183, 197, 0.12);
}

.vue-operation-panel[data-operation-tone="done"] {
    border-color: rgba(87, 204, 153, 0.38);
    background: rgba(246, 255, 251, 0.9);
}

.vue-operation-panel[data-operation-tone="warn"] {
    border-color: rgba(255, 209, 102, 0.54);
    background: rgba(255, 251, 239, 0.92);
}

.vue-operation-line {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.vue-operation-line span {
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
}

.vue-operation-line strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vue-operation-line small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vue-operation-panel .secondary-btn {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 12px;
    white-space: nowrap;
}

.vue-generation-progress {
    padding: 0;
}

.vue-generation-feedback {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 248, 255, 0.92)),
            linear-gradient(90deg, rgba(255, 93, 143, 0.08), rgba(33, 183, 197, 0.08));
}

.vue-generation-feedback[data-feedback-tone="good"] {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 255, 249, 0.9)),
            linear-gradient(90deg, rgba(87, 204, 153, 0.12), rgba(33, 183, 197, 0.08));
}

.vue-generation-feedback[data-feedback-tone="warn"] {
    border-color: rgba(255, 209, 102, 0.5);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 235, 0.9)),
            linear-gradient(90deg, rgba(255, 209, 102, 0.12), rgba(33, 183, 197, 0.08));
}

.vue-generation-feedback[data-feedback-tone="running"] {
    border-color: rgba(33, 183, 197, 0.4);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 255, 0.9)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.14), rgba(255, 209, 102, 0.08));
}

.vue-generation-feedback-head {
    display: grid;
    gap: 4px;
}

.vue-generation-feedback-head span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-generation-feedback-head strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.35;
}

.vue-generation-feedback-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-generation-feedback-chips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.vue-generation-feedback-chips b {
    display: grid;
    gap: 3px;
    min-height: 52px;
    align-content: center;
    padding: 7px 6px;
    border-radius: 8px;
    background: rgba(23, 21, 31, 0.06);
    text-align: center;
}

.vue-generation-feedback-chips b.done {
    background: rgba(87, 204, 153, 0.16);
}

.vue-generation-feedback-chips span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.vue-generation-feedback-chips em {
    color: var(--ink);
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
    line-height: 1.2;
}

.vue-generation-feedback small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.vue-generation-feedback .secondary-btn {
    width: 100%;
    min-height: 34px;
    font-size: 12px;
}

.vue-ai-capability-strip,
.vue-ai-capability-panel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.vue-ai-capability-strip {
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 255, 0.9)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.1), rgba(255, 209, 102, 0.08));
}

.vue-ai-capability-strip[data-capability-state="good"],
.vue-ai-capability-panel[data-capability-state="good"] {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 255, 249, 0.9)),
            linear-gradient(90deg, rgba(87, 204, 153, 0.12), rgba(33, 183, 197, 0.08));
}

.vue-ai-capability-strip[data-capability-state="warn"],
.vue-ai-capability-strip[data-capability-state="loading"],
.vue-ai-capability-panel[data-capability-state="warn"],
.vue-ai-capability-panel[data-capability-state="loading"] {
    border-color: rgba(255, 209, 102, 0.5);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 235, 0.9)),
            linear-gradient(90deg, rgba(255, 209, 102, 0.12), rgba(33, 183, 197, 0.08));
}

.vue-ai-capability-strip[data-capability-state="danger"],
.vue-ai-capability-panel[data-capability-state="danger"] {
    border-color: rgba(180, 35, 24, 0.28);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 245, 244, 0.92)),
            linear-gradient(90deg, rgba(255, 93, 143, 0.12), rgba(255, 209, 102, 0.08));
}

.vue-ai-capability-strip span,
.vue-ai-capability-panel span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-ai-capability-strip strong,
.vue-ai-capability-panel > div > strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
}

.vue-ai-capability-strip p,
.vue-ai-capability-panel p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-ai-capability-strip small,
.vue-ai-capability-panel > small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.vue-ai-capability-pills,
.vue-ai-capability-grid {
    display: grid;
    gap: 8px;
}

.vue-ai-capability-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vue-ai-capability-pills b {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(23, 21, 31, 0.06);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
}

.vue-ai-capability-strip .secondary-btn {
    width: 100%;
    min-height: 34px;
    font-size: 12px;
}

.vue-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.vue-section-title.compact {
    align-items: center;
}

.vue-section-title span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.vue-section-title strong {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.35;
}

.vue-starter-panel,
.vue-nudge-panel {
    display: grid;
    gap: 10px;
}

.vue-starter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-starter-grid button {
    position: relative;
    overflow: hidden;
    min-height: 116px;
    display: grid;
    align-content: end;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    text-align: left;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.94)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--starter-color), transparent 78%), transparent 42%);
    cursor: pointer;
}

.vue-starter-grid button::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--starter-color);
}

.vue-starter-grid button:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--starter-color), white 45%);
    box-shadow: 0 14px 30px rgba(39, 28, 62, 0.1);
}

.vue-starter-grid span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
}

.vue-starter-grid strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

.vue-starter-grid small {
    color: var(--muted);
    line-height: 1.45;
}

.vue-nudge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vue-nudge-row button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.82);
    font-weight: 900;
    cursor: pointer;
}

.vue-nudge-row button:hover {
    color: var(--ink);
    border-color: rgba(33, 183, 197, 0.42);
    background: rgba(33, 183, 197, 0.1);
}

.vue-route-dock {
    display: grid;
    gap: 14px;
}

.vue-route-next,
.vue-route-focus-card,
.vue-route-progress {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 253, 255, 0.93)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.14), transparent 36%);
    box-shadow: 0 16px 42px rgba(39, 28, 62, 0.08);
}

.vue-route-next h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.18;
}

.vue-route-next p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.6;
}

.vue-draft-status,
.vue-launch-status {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.08);
}

.vue-draft-status span,
.vue-launch-status span {
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vue-draft-status strong,
.vue-launch-status strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.vue-draft-status small,
.vue-launch-status small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-launch-status {
    border-color: rgba(255, 209, 102, 0.34);
    background:
            linear-gradient(135deg, rgba(255, 249, 226, 0.88), rgba(255, 255, 255, 0.82)),
            rgba(255, 209, 102, 0.1);
}

.vue-launch-status span {
    color: #9d6f00;
}

.vue-launch-status[data-launch-mode^="edit"] {
    border-color: rgba(123, 97, 255, 0.28);
    background:
            linear-gradient(135deg, rgba(246, 243, 255, 0.92), rgba(255, 255, 255, 0.82)),
            rgba(123, 97, 255, 0.08);
}

.vue-launch-status[data-launch-mode$="error"],
.vue-launch-status[data-launch-mode="edit-forbidden"],
.vue-launch-status[data-launch-mode="boot-error"] {
    border-color: rgba(255, 119, 119, 0.28);
    background: rgba(255, 119, 119, 0.08);
}

.vue-draft-restore {
    justify-self: start;
    min-height: 32px;
    margin-top: 4px;
    padding: 0 12px;
    border: 1px solid rgba(33, 183, 197, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(33, 183, 197, 0.12);
}

.vue-draft-restore:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.42);
    background: #fff;
}

.vue-draft-status[data-draft-state="saved"],
.vue-draft-status[data-draft-state="restored"] {
    border-color: rgba(87, 204, 153, 0.3);
    background: rgba(87, 204, 153, 0.1);
}

.vue-draft-status[data-draft-state="unavailable"] {
    border-color: rgba(255, 119, 119, 0.28);
    background: rgba(255, 119, 119, 0.08);
}

.vue-route-next .primary-btn {
    width: 100%;
}

.vue-route-focus-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(33, 183, 197, 0.3);
    background:
            linear-gradient(135deg, rgba(22, 19, 29, 0.98), rgba(35, 33, 48, 0.96)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.24), transparent 38%),
            radial-gradient(circle at 0 100%, rgba(255, 209, 102, 0.16), transparent 34%);
    box-shadow: 0 20px 56px rgba(22, 19, 29, 0.18);
}

.vue-route-focus-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--cyan), var(--yellow));
}

.vue-route-focus-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.vue-route-focus-copy span {
    width: fit-content;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 0 10px;
    color: #11101b;
    background: #ffd166;
    font-size: 12px;
    font-weight: 950;
}

.vue-route-focus-copy strong {
    color: #fff;
    font-size: 24px;
    line-height: 1.16;
}

.vue-route-focus-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.62;
}

.vue-route-focus-copy small {
    color: rgba(185, 245, 255, 0.86);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.48;
}

.vue-route-mini-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 4px;
}

.vue-route-mini-steps button {
    min-width: 0;
    min-height: 46px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--animaker-radius-control);
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.075);
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.vue-route-mini-steps button:hover {
    transform: translateY(-1px);
    border-color: rgba(185, 245, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
}

.vue-route-mini-steps button.active {
    border-color: rgba(255, 209, 102, 0.55);
    background:
            linear-gradient(145deg, rgba(255, 209, 102, 0.2), rgba(255, 255, 255, 0.09)),
            rgba(255, 255, 255, 0.08);
}

.vue-route-mini-steps button.complete:not(.active) {
    border-color: rgba(87, 204, 153, 0.34);
    background: rgba(87, 204, 153, 0.12);
}

.vue-route-mini-steps span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    font-weight: 950;
}

.vue-route-mini-steps strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vue-route-focus-actions {
    display: grid;
    gap: 8px;
}

.vue-route-focus-actions .primary-btn,
.vue-route-focus-actions .secondary-btn {
    width: 100%;
}

.vue-route-focus-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-route-focus-actions .secondary-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.vue-route-hero-shell,
.vue-route-top-shell {
    margin-top: 18px;
}

.vue-route-hero-shell .vue-route-dock,
.vue-route-top-shell .vue-route-dock {
    gap: 0;
}

.vue-route-hero-shell .vue-route-next,
.vue-route-hero-shell .vue-route-progress,
.vue-route-hero-shell .vue-route-more,
.vue-route-top-shell .vue-route-next,
.vue-route-top-shell .vue-route-progress,
.vue-route-top-shell .vue-route-more {
    display: none;
}

.vue-route-hero-shell .vue-route-focus-card,
.vue-route-top-shell .vue-route-focus-card {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.52fr);
    align-items: center;
    margin: 0;
    border-color: rgba(255, 209, 102, 0.3);
    box-shadow: 0 22px 58px rgba(22, 19, 29, 0.2);
}

.vue-route-hero-shell .vue-route-focus-card {
    max-width: 920px;
    background:
            linear-gradient(135deg, rgba(18, 16, 28, 0.88), rgba(35, 33, 48, 0.76)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.26), transparent 38%),
            radial-gradient(circle at 0 100%, rgba(255, 209, 102, 0.18), transparent 34%);
    backdrop-filter: blur(10px);
}

.vue-route-hero-shell .vue-route-focus-copy strong,
.vue-route-top-shell .vue-route-focus-copy strong {
    font-size: clamp(22px, 2.8vw, 34px);
}

.vue-route-hero-shell .vue-route-focus-actions,
.vue-route-top-shell .vue-route-focus-actions {
    align-self: stretch;
    align-content: center;
}

.vue-route-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vue-route-progress-head span {
    color: var(--muted);
    font-weight: 900;
}

.vue-route-progress-head strong {
    color: var(--ink);
    font-size: 18px;
}

.vue-action-feedback {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
}

.vue-action-feedback span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(23, 21, 31, 0.08);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.vue-action-feedback strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
}

.vue-action-feedback small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-action-feedback[data-action-state="running"] {
    border-color: rgba(255, 209, 102, 0.46);
    background: rgba(255, 209, 102, 0.12);
}

.vue-action-feedback[data-action-state="running"] span {
    background: rgba(255, 209, 102, 0.22);
    color: #8a5d00;
}

.vue-action-feedback[data-action-state="done"] {
    border-color: rgba(87, 204, 153, 0.34);
    background: rgba(87, 204, 153, 0.1);
}

.vue-action-feedback[data-action-state="done"] span {
    background: rgba(87, 204, 153, 0.18);
    color: #18765c;
}

.vue-action-feedback[data-action-state="warning"] {
    border-color: rgba(255, 119, 119, 0.32);
    background: rgba(255, 119, 119, 0.08);
}

.vue-action-feedback[data-action-state="warning"] span {
    background: rgba(255, 119, 119, 0.16);
    color: #ad3232;
}

.vue-session-status {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-session-status span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(23, 21, 31, 0.08);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.vue-session-status strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
}

.vue-session-status small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-session-status .secondary-btn {
    width: fit-content;
    min-height: 34px;
    padding: 8px 12px;
    font-size: 12px;
}

.vue-session-status[data-session-state="signed-in"] {
    border-color: rgba(87, 204, 153, 0.34);
    background: rgba(87, 204, 153, 0.1);
}

.vue-session-status[data-session-state="signed-in"] span {
    background: rgba(87, 204, 153, 0.18);
    color: #18765c;
}

.vue-session-status[data-session-state="guest"] {
    border-color: rgba(255, 209, 102, 0.42);
    background: rgba(255, 209, 102, 0.12);
}

.vue-session-status[data-session-state="guest"] span {
    background: rgba(255, 209, 102, 0.22);
    color: #8a5d00;
}

.vue-route-mode-card {
    display: grid;
    gap: 6px;
    padding: 11px 12px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.92), rgba(255, 255, 255, 0.82)),
            rgba(33, 183, 197, 0.08);
}

.vue-route-mode-card span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(33, 183, 197, 0.16);
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
}

.vue-route-mode-card strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.35;
}

.vue-route-mode-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-route-mode-card .secondary-btn {
    width: fit-content;
    min-height: 34px;
    padding: 8px 12px;
    font-size: 12px;
}

.vue-route-mode-card[data-creator-mode="advanced"] {
    border-color: rgba(123, 97, 255, 0.26);
    background:
            linear-gradient(135deg, rgba(247, 244, 255, 0.94), rgba(255, 255, 255, 0.84)),
            rgba(123, 97, 255, 0.08);
}

.vue-route-mode-card[data-creator-mode="advanced"] span {
    background: rgba(123, 97, 255, 0.14);
    color: var(--violet);
}

.vue-route-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(23, 21, 31, 0.08);
}

.vue-route-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow));
    transition: width 0.22s ease;
}

.vue-route-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.vue-route-steps button {
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: left;
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}

.vue-route-steps button:hover,
.vue-route-steps button.active {
    border-color: rgba(33, 183, 197, 0.45);
    box-shadow: 0 10px 28px rgba(33, 183, 197, 0.12);
}

.vue-route-steps button.complete {
    background: rgba(87, 204, 153, 0.13);
}

.vue-route-steps span {
    grid-row: span 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.12);
    font-size: 12px;
    font-weight: 900;
}

.vue-route-steps button.complete span {
    color: #fff;
    background: var(--mint);
}

.vue-route-steps strong {
    min-width: 0;
    color: var(--ink);
    line-height: 1.2;
}

.vue-route-steps small {
    color: var(--muted);
    font-weight: 800;
}

.vue-route-more {
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.vue-route-more summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.vue-route-more summary::-webkit-details-marker {
    display: none;
}

.vue-route-more summary span {
    font-weight: 950;
}

.vue-route-more summary small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.vue-route-more-grid {
    display: grid;
    gap: 10px;
    padding: 0 10px 10px;
}

.vue-route-steps button.manual-active {
    border-color: rgba(33, 183, 197, 0.48);
    box-shadow: 0 12px 28px rgba(33, 183, 197, 0.14);
}

.vue-step-head-shell {
    min-width: 0;
}

.vue-step-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.vue-step-head h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.18;
}

.vue-step-head p:not(.eyebrow) {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.65;
}

.vue-step-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.vue-step-state {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(230, 225, 236, 0.95);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.vue-step-state.active {
    color: #137c86;
    border-color: rgba(33, 183, 197, 0.38);
    background: rgba(33, 183, 197, 0.12);
}

.vue-step-state.done {
    color: #1c7d59;
    border-color: rgba(87, 204, 153, 0.38);
    background: rgba(87, 204, 153, 0.14);
}

.vue-assist-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vue-assist-actions button:active,
.vue-assist-groups button:active,
.vue-assist-missing button:active,
.vue-operation-panel button:active {
    transform: translateY(1px);
}

.vue-assist-groups button.active {
    position: relative;
}

.vue-assist-groups button.active::after {
    content: "";
    position: absolute;
    inset: 8px auto 8px 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--teal);
}

.studio-field-pulse {
    outline: 2px solid rgba(33, 183, 197, 0.44);
    outline-offset: 3px;
    animation: studioFieldPulse 1.4s ease;
}

.studio-step-pulse {
    animation: studioStepPulse 0.9s ease;
}

@keyframes studioFieldPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 183, 197, 0.28);
    }
    60% {
        box-shadow: 0 0 0 12px rgba(33, 183, 197, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(33, 183, 197, 0);
    }
}

@keyframes studioStepPulse {
    0% {
        box-shadow: inset 0 0 0 2px rgba(33, 183, 197, 0.22), 0 18px 40px rgba(33, 183, 197, 0.1);
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(33, 183, 197, 0), 0 0 0 rgba(33, 183, 197, 0);
    }
}

.studio-rail > .legacy-bridge {
    display: none !important;
}

.studio-panel .legacy-bridge,
.ai-prompt-panel .legacy-bridge,
.studio-preview .legacy-bridge {
    display: none !important;
}

.vue-core-shell {
    min-width: 0;
}

.vue-visual-shell {
    min-width: 0;
}

.vue-story-shell {
    min-width: 0;
}

.vue-image-shell {
    min-width: 0;
}

.vue-publish-shell {
    min-width: 0;
}

.vue-board-shell {
    min-width: 0;
}

.vue-core-dock {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(33, 183, 197, 0.23);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 255, 0.95)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.2), transparent 35%);
    box-shadow: 0 16px 42px rgba(39, 28, 62, 0.08);
}

.vue-core-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.vue-core-head h3 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.2;
}

.vue-core-head p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.vue-core-head > span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 209, 102, 0.32);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.vue-core-mission,
.vue-visual-route-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(241, 253, 255, 0.92), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 36%);
}

.vue-core-mission {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.vue-core-mission[data-mission-state="ready"] {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(135deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.16), transparent 36%);
}

.vue-core-mission span,
.vue-visual-route-card span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
}

.vue-core-mission[data-mission-state="ready"] span,
.vue-visual-route-card article.done span {
    color: #237b5a;
}

.vue-core-mission strong,
.vue-visual-route-card strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.25;
}

.vue-core-mission p,
.vue-visual-route-card p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-core-mission > div:last-child {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.vue-studio-refine {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(247, 252, 253, 0.82)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.1), transparent 36%);
}

.vue-studio-refine[open] {
    border-color: rgba(33, 183, 197, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.9)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.12), transparent 36%);
}

.vue-studio-refine > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.vue-studio-refine > summary::-webkit-details-marker {
    display: none;
}

.vue-studio-refine:not([open]) > :not(summary) {
    display: none !important;
}

.vue-studio-refine > summary span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.vue-studio-refine > summary strong {
    display: block;
    margin: 3px 0 4px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.24;
}

.vue-studio-refine > summary p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-studio-refine > summary em {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 999px;
    padding: 0 12px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.08);
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.vue-studio-refine > summary::after {
    content: "展开细修";
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 12px;
    color: #fff;
    background: #16131d;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.vue-studio-refine[open] > summary::after {
    content: "收起细修";
    background: rgba(22, 19, 29, 0.74);
}

.vue-core-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vue-core-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
}

.vue-core-field.wide {
    grid-column: 1 / -1;
}

.vue-core-field > span,
.vue-core-summary span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-core-field input,
.vue-core-field select {
    width: 100%;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    font: inherit;
    font-size: 14px;
}

.vue-core-field input:focus,
.vue-core-field select:focus {
    border-color: rgba(33, 183, 197, 0.78);
    outline: 3px solid rgba(33, 183, 197, 0.14);
}

.vue-core-field small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-field-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}

.vue-field-suggestions button {
    min-height: 30px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 999px;
    color: color-mix(in srgb, var(--ink) 82%, var(--teal));
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 253, 255, 0.82)),
            rgba(33, 183, 197, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.vue-field-suggestions button:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.46);
    background:
            linear-gradient(135deg, rgba(239, 252, 253, 0.98), rgba(255, 249, 226, 0.88)),
            rgba(33, 183, 197, 0.08);
    box-shadow: 0 10px 22px rgba(33, 183, 197, 0.1);
}

.vue-field-suggestions.is-visual button {
    border-color: rgba(123, 97, 255, 0.18);
    color: color-mix(in srgb, var(--ink) 84%, var(--violet));
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 246, 255, 0.82)),
            rgba(123, 97, 255, 0.05);
}

.vue-field-suggestions.is-visual button:hover {
    border-color: rgba(123, 97, 255, 0.42);
    background:
            linear-gradient(135deg, rgba(248, 246, 255, 0.98), rgba(241, 255, 248, 0.82)),
            rgba(123, 97, 255, 0.07);
}

.vue-field-suggestions.is-story button {
    border-color: rgba(255, 209, 102, 0.26);
    color: color-mix(in srgb, var(--ink) 84%, #9d6f00);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 249, 226, 0.84)),
            rgba(255, 209, 102, 0.06);
}

.vue-field-suggestions.is-story button:hover {
    border-color: rgba(255, 209, 102, 0.52);
    background:
            linear-gradient(135deg, rgba(255, 249, 226, 0.98), rgba(240, 253, 255, 0.82)),
            rgba(255, 209, 102, 0.08);
}

.vue-core-field.is-missing {
    border-color: rgba(255, 209, 102, 0.34);
    background: rgba(255, 249, 226, 0.48);
}

.vue-core-field.is-missing > span::after,
.vue-core-field.is-complete > span::after {
    content: "可补";
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 999px;
    color: #9d6f00;
    background: rgba(255, 209, 102, 0.2);
    font-size: 11px;
    font-weight: 900;
}

.vue-core-field.is-complete {
    border-color: rgba(87, 204, 153, 0.24);
    background: rgba(241, 255, 248, 0.54);
}

.vue-core-field.is-complete > span::after {
    content: "已写";
    color: #237b5a;
    background: rgba(87, 204, 153, 0.18);
}

.vue-core-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-core-summary article {
    min-height: 104px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-core-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-core-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-core-actions button {
    min-height: 126px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    text-align: left;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.94)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.12), transparent 42%);
    cursor: pointer;
}

.vue-core-actions button:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.46);
    box-shadow: 0 14px 32px rgba(39, 28, 62, 0.1);
}

.vue-core-actions button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.vue-core-actions span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
}

.vue-core-actions strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
}

.vue-core-actions small {
    color: var(--muted);
    line-height: 1.55;
}

.vue-core-briefing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-core-briefing article {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 253, 255, 0.9)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.1), transparent 40%);
}

.vue-core-briefing span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-core-chipline {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.vue-core-chipline strong,
.vue-core-chipline button {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    padding: 0 10px;
    color: var(--ink);
    background: #fff;
    font-size: 12px;
    font-weight: 900;
}

.vue-core-chipline button {
    cursor: pointer;
}

.vue-core-chipline.is-warning button {
    border-color: rgba(255, 209, 102, 0.5);
    background: rgba(255, 246, 217, 0.92);
}

.vue-core-chipline.is-ready strong {
    border-color: rgba(87, 204, 153, 0.36);
    background: rgba(241, 255, 248, 0.94);
}

.vue-core-briefing p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-core-quick-panel {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 255, 0.9)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.12), transparent 42%);
}

.vue-core-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-core-quick-next {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.94), rgba(255, 255, 255, 0.86)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 42%);
}

.vue-core-quick-next span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
}

.vue-core-quick-next strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.3;
}

.vue-core-quick-next p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

.vue-core-quick-grid article {
    position: relative;
    min-height: 154px;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 42%);
}

.vue-core-quick-grid article::before {
    content: "";
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--yellow));
}

.vue-core-quick-grid article.done {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.14), transparent 42%);
}

.vue-core-quick-grid span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
}

.vue-core-quick-grid strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
}

.vue-core-quick-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-core-quick-grid div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.vue-core-quick-grid button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 999px;
    color: color-mix(in srgb, var(--ink) 84%, var(--teal));
    background: rgba(255, 255, 255, 0.78);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.vue-core-quick-grid button:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.42);
    box-shadow: 0 10px 22px rgba(33, 183, 197, 0.1);
}

.vue-creator-mode-coach {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.94), rgba(255, 255, 255, 0.84)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.14), transparent 42%);
}

.vue-creator-mode-coach::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--cyan), var(--mint), var(--yellow));
}

.vue-creator-mode-coach > div {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding-left: 4px;
}

.vue-creator-mode-coach span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(33, 183, 197, 0.14);
    color: var(--teal);
    font-size: 11px;
    font-weight: 950;
}

.vue-creator-mode-coach strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.25;
}

.vue-creator-mode-coach p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-creator-mode-coach .secondary-btn {
    min-height: 38px;
    padding: 8px 12px;
    white-space: nowrap;
}

.vue-creator-mode-coach[data-creator-mode="advanced"] {
    border-color: rgba(123, 97, 255, 0.28);
    background:
            linear-gradient(135deg, rgba(248, 245, 255, 0.95), rgba(255, 255, 255, 0.86)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.16), transparent 42%);
}

.vue-creator-mode-coach[data-creator-mode="advanced"]::before {
    background: linear-gradient(180deg, var(--violet), var(--pink));
}

.vue-creator-mode-coach[data-creator-mode="advanced"] span {
    background: rgba(123, 97, 255, 0.14);
    color: var(--violet);
}

@media (max-width: 760px) {
    .vue-core-quick-grid {
        grid-template-columns: 1fr;
    }

    .vue-creator-mode-coach {
        grid-template-columns: 1fr;
    }

    .vue-creator-mode-coach .secondary-btn {
        width: 100%;
    }
}

.vue-core-inspiration {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(250, 252, 255, 0.9)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 42%);
}

.vue-section-title.compact strong {
    font-size: 14px;
}

.vue-core-inspiration-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.vue-core-inspiration-grid button {
    position: relative;
    min-height: 132px;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: hidden;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    padding: 13px;
    text-align: left;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 253, 0.9)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pack-color) 24%, transparent), transparent 48%);
    cursor: pointer;
}

.vue-core-inspiration-grid button::before {
    content: "";
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: var(--pack-color);
}

.vue-core-inspiration-grid button:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--pack-color) 46%, rgba(230, 225, 236, 0.92));
    box-shadow: 0 14px 30px rgba(39, 28, 62, 0.1);
}

.vue-core-inspiration-grid button.is-applied {
    border-color: color-mix(in srgb, var(--pack-color) 58%, rgba(87, 204, 153, 0.46));
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pack-color) 22%, transparent), transparent 44%);
}

.vue-core-inspiration-grid b {
    position: absolute;
    right: 10px;
    top: 10px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #237b5a;
    background: rgba(87, 204, 153, 0.18);
    font-size: 11px;
    font-weight: 900;
}

.vue-core-inspiration-grid span {
    width: max-content;
    max-width: 100%;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--ink);
    background: color-mix(in srgb, var(--pack-color) 18%, #fff);
    font-size: 12px;
    font-weight: 900;
}

.vue-core-inspiration-grid strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

.vue-core-inspiration-grid small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-candidate-panel {
    display: grid;
    gap: 10px;
}

.vue-candidate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-candidate-grid button,
.vue-candidate-empty {
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-candidate-grid button {
    position: relative;
    display: grid;
    gap: 7px;
    min-height: 124px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
}

.vue-candidate-grid button:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 93, 143, 0.38);
    box-shadow: 0 14px 32px rgba(255, 93, 143, 0.1);
}

.vue-candidate-grid button.is-applied {
    border-color: rgba(87, 204, 153, 0.46);
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.88)),
            rgba(87, 204, 153, 0.08);
}

.vue-candidate-grid b {
    position: absolute;
    right: 10px;
    top: 10px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #237b5a;
    background: rgba(87, 204, 153, 0.18);
    font-size: 11px;
    font-weight: 900;
}

.vue-candidate-grid span {
    width: max-content;
    max-width: 100%;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 8px;
    color: var(--cyan);
    background: rgba(33, 183, 197, 0.1);
    font-size: 12px;
    font-weight: 900;
}

.vue-candidate-grid strong {
    color: var(--ink);
    font-size: 18px;
}

.vue-candidate-grid small,
.vue-candidate-grid em {
    color: var(--muted);
    line-height: 1.5;
}

.vue-candidate-grid em {
    font-style: normal;
    font-weight: 800;
}

.vue-candidate-empty {
    min-height: 72px;
    display: grid;
    place-items: center;
    padding: 14px;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
}

.vue-visual-dock {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(230, 225, 236, 0.94);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 255, 0.96)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.14), transparent 38%),
            radial-gradient(circle at 100% 12%, rgba(255, 209, 102, 0.16), transparent 36%);
    box-shadow: 0 16px 42px rgba(39, 28, 62, 0.08);
}

.vue-visual-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.vue-visual-head h3 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.2;
}

.vue-visual-head p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-visual-head > strong {
    min-width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255, 209, 102, 0.28);
    font-size: 15px;
}

.vue-visual-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(230, 225, 236, 0.82);
}

.vue-visual-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--mint), var(--yellow));
    transition: width 0.25s ease;
}

.vue-visual-route-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vue-visual-route-card article {
    position: relative;
    overflow: hidden;
    min-height: 164px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
}

.vue-visual-route-card article::before {
    content: "";
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: var(--cyan);
}

.vue-visual-route-card article:nth-child(2)::before {
    background: var(--pink);
}

.vue-visual-route-card article:nth-child(3)::before {
    background: var(--yellow);
}

.vue-visual-route-card article.done {
    border-color: rgba(87, 204, 153, 0.3);
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.86)),
            rgba(87, 204, 153, 0.08);
}

.vue-visual-route-card button {
    align-self: end;
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.08);
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.vue-visual-route-card button:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.42);
    box-shadow: 0 10px 22px rgba(33, 183, 197, 0.1);
}

.vue-visual-board {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
}

.vue-visual-board article,
.vue-visual-next-action,
.vue-visual-presets {
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(247, 252, 253, 0.9)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.1), transparent 42%);
}

.vue-visual-board article {
    display: grid;
    align-content: start;
    gap: 9px;
}

.vue-visual-board span,
.vue-visual-presets .vue-section-title span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-visual-board strong {
    color: var(--ink);
    font-size: 19px;
    line-height: 1.25;
}

.vue-visual-board p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-visual-next-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    background:
            linear-gradient(135deg, rgba(255, 249, 226, 0.86), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 0 0, rgba(255, 209, 102, 0.14), transparent 36%);
}

.vue-visual-next-action[data-next-state="ready"] {
    border-color: rgba(87, 204, 153, 0.28);
    background:
            linear-gradient(135deg, rgba(241, 255, 248, 0.9), rgba(255, 255, 255, 0.88)),
            rgba(87, 204, 153, 0.08);
}

.vue-visual-next-action span {
    color: #9d6f00;
    font-size: 12px;
    font-weight: 900;
}

.vue-visual-next-action[data-next-state="ready"] span {
    color: #237b5a;
}

.vue-visual-next-action strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 17px;
}

.vue-visual-next-action p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-visual-checks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.vue-visual-checks button {
    display: grid;
    gap: 4px;
    min-height: 64px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    padding: 9px;
    text-align: left;
    background: #fff;
    cursor: pointer;
}

.vue-visual-checks button.done {
    border-color: rgba(87, 204, 153, 0.38);
    background: rgba(242, 255, 248, 0.92);
}

.vue-visual-checks strong {
    font-size: 13px;
}

.vue-visual-checks small {
    color: var(--muted);
    font-weight: 800;
}

.vue-visual-presets {
    display: grid;
    gap: 10px;
}

.vue-visual-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.vue-visual-preset-grid button {
    position: relative;
    min-height: 104px;
    display: grid;
    align-content: start;
    gap: 7px;
    overflow: hidden;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    padding: 12px;
    text-align: left;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(250, 252, 255, 0.92)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--preset-color) 22%, transparent), transparent 44%);
    cursor: pointer;
}

.vue-visual-preset-grid button::before {
    content: "";
    width: 32px;
    height: 4px;
    border-radius: 999px;
    background: var(--preset-color);
}

.vue-visual-preset-grid button:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--preset-color) 44%, rgba(230, 225, 236, 0.92));
    box-shadow: 0 14px 30px rgba(39, 28, 62, 0.1);
}

.vue-visual-preset-grid button.is-applied {
    border-color: color-mix(in srgb, var(--preset-color) 58%, rgba(87, 204, 153, 0.46));
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--preset-color) 22%, transparent), transparent 44%);
}

.vue-visual-preset-grid b {
    position: absolute;
    right: 10px;
    top: 10px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #237b5a;
    background: rgba(87, 204, 153, 0.18);
    font-size: 11px;
    font-weight: 900;
}

.vue-visual-preset-grid span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-visual-preset-grid strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

.vue-visual-preset-grid small {
    color: var(--muted);
    line-height: 1.45;
}

.vue-visual-kit {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 255, 0.9)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.1), transparent 42%);
}

.vue-visual-kit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-visual-kit-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(250, 252, 255, 0.9)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--detail-color) 14%, transparent), transparent 42%);
}

.vue-visual-kit-card::before {
    content: "";
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: var(--detail-color);
}

.vue-visual-kit-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.vue-visual-kit-head span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-visual-kit-head strong {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--ink);
    background: color-mix(in srgb, var(--detail-color) 14%, #fff);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.vue-visual-kit-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vue-visual-kit-options button {
    min-height: 86px;
    display: grid;
    align-content: start;
    gap: 6px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    padding: 10px;
    text-align: left;
    background: rgba(255, 255, 255, 0.86);
    cursor: pointer;
}

.vue-visual-kit-options button:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--detail-color) 44%, rgba(230, 225, 236, 0.9));
    box-shadow: 0 12px 26px rgba(39, 28, 62, 0.09);
}

.vue-visual-kit-options button.active {
    border-color: color-mix(in srgb, var(--detail-color) 62%, rgba(87, 204, 153, 0.42));
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.88)),
            color-mix(in srgb, var(--detail-color) 9%, transparent);
}

.vue-visual-kit-options b {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.25;
}

.vue-visual-kit-options small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-visual-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
}

.vue-visual-manual {
    border-color: rgba(123, 97, 255, 0.2);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(249, 247, 255, 0.84)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.1), transparent 36%);
}

.vue-visual-manual[open] {
    border-color: rgba(123, 97, 255, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 247, 255, 0.9)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.12), transparent 36%);
}

.vue-visual-manual > summary span,
.vue-visual-manual > summary em {
    color: var(--violet);
}

.vue-visual-manual > summary em {
    border-color: rgba(123, 97, 255, 0.18);
    background: rgba(123, 97, 255, 0.08);
}

.vue-visual-field > span,
.vue-visual-palette span,
.vue-visual-summary span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-visual-field input,
.vue-visual-field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    font: inherit;
    font-size: 14px;
    line-height: 1.62;
    resize: vertical;
}

.vue-visual-field textarea {
    min-height: 124px;
}

.vue-visual-field input:focus,
.vue-visual-field textarea:focus {
    border-color: rgba(33, 183, 197, 0.78);
    outline: 3px solid rgba(33, 183, 197, 0.14);
}

.vue-visual-field small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-visual-field.is-missing {
    border-color: rgba(255, 209, 102, 0.34);
    background: rgba(255, 249, 226, 0.48);
}

.vue-visual-field.is-missing > span::after,
.vue-visual-field.is-complete > span::after {
    content: "可补";
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 999px;
    color: #9d6f00;
    background: rgba(255, 209, 102, 0.2);
    font-size: 11px;
    font-weight: 900;
}

.vue-visual-field.is-complete {
    border-color: rgba(87, 204, 153, 0.24);
    background: rgba(241, 255, 248, 0.54);
}

.vue-visual-field.is-complete > span::after {
    content: "已写";
    color: #237b5a;
    background: rgba(87, 204, 153, 0.18);
}

.vue-visual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vue-visual-palette {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
}

.vue-visual-palette > div:first-child {
    display: grid;
    gap: 4px;
}

.vue-visual-palette strong {
    color: var(--ink);
    font-size: 14px;
}

.vue-visual-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vue-visual-swatches button {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(23, 21, 31, 0.12), 0 10px 18px rgba(39, 28, 62, 0.12);
    cursor: pointer;
}

.vue-visual-swatches button.active {
    box-shadow: 0 0 0 3px rgba(33, 183, 197, 0.28), 0 10px 20px rgba(39, 28, 62, 0.14);
    transform: translateY(-1px);
}

.vue-visual-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-visual-summary article {
    min-height: 116px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-visual-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-visual-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.vue-story-dock {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(230, 225, 236, 0.94);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 247, 0.96)),
            radial-gradient(circle at 0 0, rgba(123, 97, 255, 0.12), transparent 34%),
            radial-gradient(circle at 100% 6%, rgba(87, 204, 153, 0.15), transparent 34%);
    box-shadow: 0 16px 42px rgba(39, 28, 62, 0.08);
}

.vue-story-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.vue-story-head h3 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.2;
}

.vue-story-head p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-story-head > strong {
    min-width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: rgba(123, 97, 255, 0.14);
    font-size: 15px;
}

.vue-story-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(230, 225, 236, 0.82);
}

.vue-story-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7b61ff, var(--mint), var(--yellow));
    transition: width 0.25s ease;
}

.vue-story-board {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
}

.vue-story-board article,
.vue-story-next-action,
.vue-story-presets {
    padding: 14px;
    border: 1px solid rgba(123, 97, 255, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(252, 249, 255, 0.92)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.1), transparent 42%);
}

.vue-story-board article {
    display: grid;
    align-content: start;
    gap: 9px;
}

.vue-story-board span,
.vue-story-presets .vue-section-title span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-story-board strong {
    color: var(--ink);
    font-size: 19px;
    line-height: 1.25;
}

.vue-story-board p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-story-next-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    background:
            linear-gradient(135deg, rgba(246, 243, 255, 0.9), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 0 0, rgba(123, 97, 255, 0.12), transparent 36%);
}

.vue-story-next-action[data-next-state="ready"] {
    border-color: rgba(87, 204, 153, 0.28);
    background:
            linear-gradient(135deg, rgba(241, 255, 248, 0.9), rgba(255, 255, 255, 0.88)),
            rgba(87, 204, 153, 0.08);
}

.vue-story-next-action span {
    color: #5a46c7;
    font-size: 12px;
    font-weight: 900;
}

.vue-story-next-action[data-next-state="ready"] span {
    color: #237b5a;
}

.vue-story-next-action strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 17px;
}

.vue-story-next-action p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-story-checks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.vue-story-checks button {
    display: grid;
    gap: 4px;
    min-height: 64px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    padding: 9px;
    text-align: left;
    background: #fff;
    cursor: pointer;
}

.vue-story-checks button.done {
    border-color: rgba(87, 204, 153, 0.38);
    background: rgba(242, 255, 248, 0.92);
}

.vue-story-checks strong {
    color: var(--ink);
    font-size: 13px;
}

.vue-story-checks small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.vue-story-presets {
    display: grid;
    gap: 10px;
}

.vue-story-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.vue-story-preset-grid button {
    position: relative;
    min-height: 104px;
    display: grid;
    align-content: start;
    gap: 7px;
    overflow: hidden;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    padding: 12px;
    text-align: left;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(252, 251, 255, 0.92)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--preset-color) 22%, transparent), transparent 44%);
    cursor: pointer;
}

.vue-story-preset-grid button::before {
    content: "";
    width: 32px;
    height: 4px;
    border-radius: 999px;
    background: var(--preset-color);
}

.vue-story-preset-grid button:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--preset-color) 44%, rgba(230, 225, 236, 0.92));
    box-shadow: 0 14px 30px rgba(39, 28, 62, 0.1);
}

.vue-story-preset-grid button.is-applied {
    border-color: color-mix(in srgb, var(--preset-color) 58%, rgba(87, 204, 153, 0.46));
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--preset-color) 22%, transparent), transparent 44%);
}

.vue-story-preset-grid b {
    position: absolute;
    right: 10px;
    top: 10px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #237b5a;
    background: rgba(87, 204, 153, 0.18);
    font-size: 11px;
    font-weight: 900;
}

.vue-story-preset-grid span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-story-preset-grid strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

.vue-story-preset-grid small {
    color: var(--muted);
    line-height: 1.45;
}

.vue-story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vue-story-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vue-story-manual {
    border-color: rgba(123, 97, 255, 0.2);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(251, 249, 255, 0.84)),
            radial-gradient(circle at 0 0, rgba(123, 97, 255, 0.1), transparent 34%),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.1), transparent 34%);
}

.vue-story-manual[open] {
    border-color: rgba(123, 97, 255, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(251, 249, 255, 0.9)),
            radial-gradient(circle at 0 0, rgba(123, 97, 255, 0.12), transparent 34%),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.12), transparent 34%);
}

.vue-story-manual > summary span,
.vue-story-manual > summary em {
    color: var(--violet);
}

.vue-story-manual > summary em {
    border-color: rgba(123, 97, 255, 0.18);
    background: rgba(123, 97, 255, 0.08);
}

.vue-story-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
}

.vue-story-field.wide {
    grid-column: 1 / -1;
}

.vue-story-field > span,
.vue-story-summary span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-story-field input,
.vue-story-field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    font: inherit;
    font-size: 14px;
    line-height: 1.62;
    resize: vertical;
}

.vue-story-field textarea {
    min-height: 112px;
}

.vue-story-field.wide textarea {
    min-height: 154px;
}

.vue-story-field input:focus,
.vue-story-field textarea:focus {
    border-color: rgba(123, 97, 255, 0.62);
    outline: 3px solid rgba(123, 97, 255, 0.12);
}

.vue-story-field small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-story-field.is-missing {
    border-color: rgba(123, 97, 255, 0.24);
    background: rgba(246, 243, 255, 0.5);
}

.vue-story-field.is-missing > span::after,
.vue-story-field.is-complete > span::after {
    content: "可补";
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 999px;
    color: #5a46c7;
    background: rgba(123, 97, 255, 0.14);
    font-size: 11px;
    font-weight: 900;
}

.vue-story-field.is-complete {
    border-color: rgba(87, 204, 153, 0.24);
    background: rgba(241, 255, 248, 0.54);
}

.vue-story-field.is-complete > span::after {
    content: "已写";
    color: #237b5a;
    background: rgba(87, 204, 153, 0.18);
}

.vue-story-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-story-summary article {
    min-height: 126px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-story-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-story-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.vue-image-dock {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(230, 225, 236, 0.94);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 255, 0.96)),
            radial-gradient(circle at 0 0, rgba(255, 93, 143, 0.12), transparent 38%);
    box-shadow: 0 16px 42px rgba(39, 28, 62, 0.08);
}

.vue-image-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    gap: 16px;
    align-items: start;
}

.vue-image-head h3 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.2;
}

.vue-image-head p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-image-status {
    display: grid;
    gap: 8px;
}

.vue-image-status span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.12);
    font-size: 12px;
    font-weight: 900;
}

.vue-image-brief {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-image-brief article {
    min-height: 112px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-image-brief span,
.vue-image-field > span,
.vue-image-missing > span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-image-brief strong {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.2;
}

.vue-image-brief small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-image-director {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 93, 143, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 251, 0.9)),
            radial-gradient(circle at 100% 0, rgba(255, 93, 143, 0.12), transparent 42%);
}

.vue-image-director-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.vue-image-director-grid button {
    position: relative;
    min-height: 124px;
    display: grid;
    align-content: start;
    gap: 7px;
    overflow: hidden;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    text-align: left;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(250, 252, 255, 0.9)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.12), transparent 42%);
    cursor: pointer;
}

.vue-image-director-grid button::before {
    content: "";
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pink), var(--yellow));
}

.vue-image-director-grid button:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 93, 143, 0.38);
    box-shadow: 0 14px 30px rgba(255, 93, 143, 0.1);
}

.vue-image-director-grid button.done {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.94), rgba(255, 255, 255, 0.88)),
            rgba(87, 204, 153, 0.08);
}

.vue-image-director-grid span {
    color: var(--pink);
    font-size: 12px;
    font-weight: 950;
}

.vue-image-director-grid strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

.vue-image-director-grid small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-image-readiness {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 252, 252, 0.92)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.12), transparent 40%);
}

.vue-image-readiness[data-readiness-state="warn"],
.vue-image-readiness[data-readiness-state="missing"] {
    border-color: rgba(255, 209, 102, 0.34);
    background:
            linear-gradient(135deg, rgba(255, 249, 226, 0.9), rgba(255, 255, 255, 0.88)),
            rgba(255, 209, 102, 0.08);
}

.vue-image-readiness[data-readiness-state="failed"],
.vue-image-readiness[data-readiness-state="blocked"] {
    border-color: rgba(255, 119, 119, 0.28);
    background:
            linear-gradient(135deg, rgba(255, 245, 245, 0.94), rgba(255, 255, 255, 0.88)),
            rgba(255, 119, 119, 0.06);
}

.vue-image-readiness[data-readiness-state="done"],
.vue-image-readiness[data-readiness-state="ready"] {
    border-color: rgba(87, 204, 153, 0.3);
    background:
            linear-gradient(135deg, rgba(241, 255, 248, 0.9), rgba(255, 255, 255, 0.88)),
            rgba(87, 204, 153, 0.08);
}

.vue-image-readiness[data-readiness-state="mock"] {
    border-color: rgba(33, 183, 197, 0.34);
    background:
            linear-gradient(135deg, rgba(239, 253, 255, 0.92), rgba(255, 255, 255, 0.88)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.1), rgba(255, 209, 102, 0.1));
}

.vue-image-readiness[data-readiness-state="running"] {
    border-color: rgba(99, 102, 241, 0.28);
    background:
            linear-gradient(135deg, rgba(245, 247, 255, 0.94), rgba(255, 255, 255, 0.9)),
            radial-gradient(circle at 100% 0, rgba(99, 102, 241, 0.12), transparent 42%);
}

.vue-image-readiness-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.vue-image-readiness-head span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-image-readiness[data-readiness-state="warn"] .vue-image-readiness-head span,
.vue-image-readiness[data-readiness-state="missing"] .vue-image-readiness-head span {
    color: #9d6f00;
}

.vue-image-readiness[data-readiness-state="failed"] .vue-image-readiness-head span,
.vue-image-readiness[data-readiness-state="blocked"] .vue-image-readiness-head span {
    color: #b94a48;
}

.vue-image-readiness[data-readiness-state="done"] .vue-image-readiness-head span,
.vue-image-readiness[data-readiness-state="ready"] .vue-image-readiness-head span {
    color: #237b5a;
}

.vue-image-readiness[data-readiness-state="mock"] .vue-image-readiness-head span {
    color: #087f8f;
}

.vue-image-readiness[data-readiness-state="running"] .vue-image-readiness-head span {
    color: #4f46e5;
}

.vue-image-readiness-head strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 17px;
}

.vue-image-readiness-head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-image-readiness-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.vue-image-readiness-grid article {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 106px;
    padding: 11px 12px 11px 14px;
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.vue-image-readiness-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
    background: var(--yellow);
}

.vue-image-readiness-grid article.done::before {
    background: var(--green);
}

.vue-image-readiness-grid span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.vue-image-readiness-grid strong {
    color: var(--ink);
    font-size: 14px;
}

.vue-image-readiness-grid p {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.48;
}

.vue-image-missing {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 209, 102, 0.14);
}

.vue-image-missing button {
    min-height: 32px;
    border: 1px solid rgba(255, 209, 102, 0.46);
    border-radius: 8px;
    padding: 0 10px;
    color: var(--ink);
    background: #fff;
    font-weight: 900;
}

.vue-ai-capability-panel {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-color: rgba(123, 97, 255, 0.2);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 246, 255, 0.92)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.14), transparent 34%),
            radial-gradient(circle at 0 100%, rgba(33, 183, 197, 0.1), transparent 30%);
}

.vue-ai-capability-panel > div:first-child {
    display: grid;
    gap: 4px;
    max-width: 760px;
}

.vue-ai-capability-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--violet), var(--cyan), var(--yellow));
    opacity: 0.72;
}

.vue-ai-capability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vue-ai-capability-grid article {
    display: grid;
    gap: 6px;
    min-height: 92px;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.vue-ai-capability-grid article strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.vue-ai-capability-grid article small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-external-pack {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(33, 183, 197, 0.26);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 252, 252, 0.92)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.12), transparent 40%);
}

.vue-external-pack::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--cyan), rgba(255, 209, 102, 0.86));
}

.vue-external-pack-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.vue-external-pack-head span,
.vue-external-pack > small {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-external-pack-head h4 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.vue-external-pack-head p,
.vue-external-pack > small {
    margin: 0;
    line-height: 1.6;
}

.vue-external-pack-head p {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.vue-external-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vue-external-grid button {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 5px;
    min-height: 74px;
    padding: 10px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    text-align: left;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.vue-external-grid button.active,
.vue-external-grid button:hover {
    border-color: rgba(33, 183, 197, 0.48);
    background: rgba(239, 252, 253, 0.94);
}

.vue-external-grid button.active::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--cyan);
}

.vue-external-grid strong {
    color: var(--ink);
    font-size: 14px;
}

.vue-external-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.vue-external-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vue-external-checks article {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 11px 12px 11px 14px;
    border: 1px solid rgba(230, 225, 236, 0.88);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.vue-external-checks article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
    background: var(--yellow);
}

.vue-external-checks article.done::before {
    background: var(--green);
}

.vue-external-checks span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vue-external-checks strong {
    color: var(--ink);
    font-size: 14px;
}

.vue-external-checks p {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.48;
}

.vue-external-pack pre {
    max-height: 230px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid rgba(23, 21, 31, 0.12);
    border-radius: 8px;
    padding: 14px;
    color: rgba(255, 255, 255, 0.88);
    background:
            linear-gradient(145deg, rgba(23, 21, 31, 0.96), rgba(47, 43, 58, 0.96)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.16), transparent 34%);
    font: inherit;
    font-size: 12px;
    line-height: 1.65;
}

.vue-image-field {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
}

.vue-image-manual {
    border-color: rgba(255, 93, 143, 0.2);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 252, 0.84)),
            radial-gradient(circle at 0 0, rgba(255, 93, 143, 0.1), transparent 34%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.12), transparent 34%);
}

.vue-image-manual[open] {
    border-color: rgba(255, 93, 143, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 252, 0.9)),
            radial-gradient(circle at 0 0, rgba(255, 93, 143, 0.12), transparent 34%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 34%);
}

.vue-image-manual > summary span,
.vue-image-manual > summary em {
    color: var(--pink);
}

.vue-image-manual > summary em {
    border-color: rgba(255, 93, 143, 0.18);
    background: rgba(255, 93, 143, 0.08);
}

.vue-image-field textarea {
    width: 100%;
    min-height: 204px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
    font-size: 13px;
    line-height: 1.72;
    resize: vertical;
}

.vue-image-field.compact textarea {
    min-height: 92px;
}

.vue-image-field textarea:focus {
    border-color: rgba(33, 183, 197, 0.78);
    outline: 3px solid rgba(33, 183, 197, 0.14);
}

.vue-image-field small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.vue-image-field.is-missing {
    border-color: rgba(255, 209, 102, 0.34);
    background: rgba(255, 249, 226, 0.48);
}

.vue-image-field.is-missing > span::after,
.vue-image-field.is-complete > span::after {
    content: "可补";
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 999px;
    color: #9d6f00;
    background: rgba(255, 209, 102, 0.2);
    font-size: 11px;
    font-weight: 900;
}

.vue-image-field.is-complete {
    border-color: rgba(87, 204, 153, 0.24);
    background: rgba(241, 255, 248, 0.54);
}

.vue-image-field.is-complete > span::after {
    content: "已写";
    color: #237b5a;
    background: rgba(87, 204, 153, 0.18);
}

.vue-image-hint {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.1);
}

.vue-image-hint p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-image-hint span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.vue-action-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 93, 143, 0.24);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 250, 0.94)),
            radial-gradient(circle at 100% 0, rgba(255, 93, 143, 0.12), transparent 42%);
}

.vue-action-notice p {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.6;
}

.vue-image-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.vue-publish-dock {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(230, 225, 236, 0.94);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 255, 0.96)),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.16), transparent 36%);
    box-shadow: 0 16px 42px rgba(39, 28, 62, 0.08);
}

.vue-publish-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.vue-publish-head h3 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.2;
}

.vue-publish-head p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-publish-head > strong {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: rgba(87, 204, 153, 0.22);
    font-size: 15px;
}

.vue-publish-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(230, 225, 236, 0.8);
}

.vue-publish-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), var(--cyan));
    transition: width 0.25s ease;
}

.vue-publish-manual {
    border-color: rgba(87, 204, 153, 0.22);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 255, 251, 0.84)),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.12), transparent 40%);
}

.vue-publish-manual[open] {
    border-color: rgba(87, 204, 153, 0.4);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 255, 250, 0.92)),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.14), transparent 40%);
}

.vue-publish-manual > summary span,
.vue-publish-manual > summary em {
    color: var(--green);
}

.vue-publish-manual > summary em {
    border-color: rgba(87, 204, 153, 0.24);
    background: rgba(87, 204, 153, 0.1);
}

.vue-publish-refine-body {
    display: grid;
    gap: 14px;
    margin-top: 2px;
}

.vue-publish-checks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.vue-publish-checks button {
    min-height: 112px;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    text-align: left;
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}

.vue-publish-checks button.done {
    border-color: rgba(87, 204, 153, 0.48);
    background: rgba(87, 204, 153, 0.1);
}

.vue-publish-checks span,
.vue-publish-options span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-publish-checks strong,
.vue-publish-options strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.2;
}

.vue-publish-checks small,
.vue-publish-options p,
.vue-publish-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-publish-assets {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.06);
}

.vue-publish-asset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vue-publish-asset-grid article {
    display: grid;
    gap: 6px;
    min-height: 118px;
    padding: 10px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.vue-publish-asset-grid article.ready {
    border-color: rgba(87, 204, 153, 0.36);
    background: rgba(87, 204, 153, 0.09);
}

.vue-publish-asset-grid span {
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
}

.vue-publish-asset-grid strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}

.vue-publish-asset-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.vue-publish-pack {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(123, 97, 255, 0.18);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(250, 248, 255, 0.92)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.12), transparent 42%);
}

.vue-publish-pack-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.vue-publish-pack-head span,
.vue-publish-social-grid span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-publish-pack-head strong {
    display: block;
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.25;
}

.vue-publish-pack-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-publish-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vue-publish-social-grid article {
    display: grid;
    gap: 7px;
    min-height: 142px;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
}

.vue-publish-social-grid article.ready {
    border-color: rgba(123, 97, 255, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 248, 255, 0.94)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.12), transparent 42%);
}

.vue-publish-social-grid strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

.vue-publish-social-grid p,
.vue-publish-social-grid small {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-publish-social-grid small {
    margin-top: auto;
    color: var(--text);
}

.vue-publish-preview {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 253, 255, 0.92)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.12), transparent 42%);
}

.vue-publish-preview[data-preview-state="ready"] {
    border-color: rgba(87, 204, 153, 0.36);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 255, 249, 0.94)),
            radial-gradient(circle at 0 0, rgba(87, 204, 153, 0.14), transparent 42%);
}

.vue-publish-preview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.vue-publish-preview-head span,
.vue-publish-caption-preview > span,
.vue-publish-preview-gaps > span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-publish-preview-head strong {
    display: block;
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.vue-publish-preview-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-publish-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 10px;
}

.vue-publish-card-preview,
.vue-publish-caption-preview {
    overflow: hidden;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.vue-publish-card-preview {
    display: grid;
    grid-template-rows: 190px minmax(0, 1fr);
}

.vue-publish-card-cover {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
            linear-gradient(145deg, rgba(28, 23, 37, 0.92), rgba(48, 43, 58, 0.88)),
            radial-gradient(circle at 20% 10%, rgba(255, 209, 102, 0.2), transparent 36%);
}

.vue-publish-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vue-publish-card-cover > div {
    display: grid;
    gap: 6px;
    place-items: center;
    text-align: center;
    color: #fff;
}

.vue-publish-card-cover span {
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vue-publish-card-cover strong {
    font-size: 19px;
    line-height: 1.2;
}

.vue-publish-card-body {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.vue-publish-card-body > span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-publish-card-body h4 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.2;
}

.vue-publish-card-body p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-publish-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}

.vue-publish-card-tags small {
    padding: 5px 8px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(33, 183, 197, 0.08);
    font-size: 11px;
    font-weight: 900;
}

.vue-publish-caption-preview {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 12px;
}

.vue-publish-caption-preview pre {
    min-height: 190px;
    max-height: 260px;
    overflow: auto;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.8);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(250, 248, 255, 0.7);
    font: 800 12px/1.65 var(--font);
    white-space: pre-wrap;
}

.vue-publish-caption-preview small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.vue-publish-preview-gaps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vue-publish-preview-gaps button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.82);
    font-weight: 900;
    cursor: pointer;
}

.vue-publish-preview-gaps button:hover {
    border-color: rgba(33, 183, 197, 0.45);
    background: rgba(33, 183, 197, 0.1);
}

.vue-publish-decision {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 255, 0.92)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.1), rgba(255, 209, 102, 0.08));
}

.vue-publish-decision[data-decision-tone="good"] {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 255, 249, 0.9)),
            linear-gradient(90deg, rgba(87, 204, 153, 0.12), rgba(33, 183, 197, 0.08));
}

.vue-publish-decision[data-decision-tone="warn"] {
    border-color: rgba(255, 209, 102, 0.52);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 235, 0.9)),
            linear-gradient(90deg, rgba(255, 209, 102, 0.12), rgba(33, 183, 197, 0.08));
}

.vue-publish-decision[data-decision-tone="danger"] {
    border-color: rgba(180, 35, 24, 0.28);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 245, 244, 0.92)),
            linear-gradient(90deg, rgba(255, 93, 143, 0.12), rgba(255, 209, 102, 0.08));
}

.vue-publish-decision-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.vue-publish-decision-head span,
.vue-publish-gap-row > span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-publish-decision-head strong {
    display: block;
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.vue-publish-decision-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-publish-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vue-publish-mode-grid article {
    display: grid;
    gap: 6px;
    min-height: 124px;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-publish-mode-grid article.recommended {
    border-color: rgba(33, 183, 197, 0.42);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 252, 253, 0.94));
}

.vue-publish-mode-grid article.ready:not(.recommended) {
    border-color: rgba(87, 204, 153, 0.28);
}

.vue-publish-mode-grid span {
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
}

.vue-publish-mode-grid strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

.vue-publish-mode-grid p,
.vue-publish-mode-grid small {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.vue-publish-mode-grid small {
    margin-top: auto;
    color: var(--text);
}

.vue-publish-gap-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vue-publish-gap-row button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.82);
    font-weight: 900;
    cursor: pointer;
}

.vue-publish-gap-row button:hover {
    border-color: rgba(33, 183, 197, 0.45);
    background: rgba(33, 183, 197, 0.1);
}

.vue-publish-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-publish-options article {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 184px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.vue-publish-options .primary-option {
    border-color: rgba(255, 93, 143, 0.3);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 247, 250, 0.94)),
            radial-gradient(circle at 100% 0, rgba(255, 93, 143, 0.13), transparent 40%);
}

.vue-publish-options button {
    margin-top: auto;
}

.vue-post-create-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(87, 204, 153, 0.34);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 255, 250, 0.94)),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.18), transparent 40%);
}

.vue-post-create-panel span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-post-create-panel h3 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.25;
}

.vue-post-create-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-post-create-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

body[data-page="studio"] .vue-publish-completion {
    position: relative;
    overflow: hidden;
    gap: 16px;
    padding: 18px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: var(--animaker-radius-panel);
    background:
            radial-gradient(circle at 8% 10%, rgba(255, 209, 102, 0.28), transparent 26%),
            radial-gradient(circle at 92% 0, rgba(79, 214, 224, 0.24), transparent 30%),
            linear-gradient(135deg, #181622, #35293c 58%, #1c2835);
    box-shadow: 0 24px 58px rgba(22, 18, 33, 0.24);
}

body[data-page="studio"] .vue-publish-completion::after {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--animaker-radius-panel) - 6px);
}

.vue-publish-completion-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.vue-publish-completion-mark {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.vue-publish-completion-mark span,
body[data-page="studio"] .vue-publish-completion-main > div > span {
    color: rgba(255, 255, 255, 0.72);
}

.vue-publish-completion-mark span {
    font-size: 12px;
    letter-spacing: 0.08em;
}

.vue-publish-completion-mark strong {
    color: #ffd166;
    font-size: 20px;
    line-height: 1;
}

body[data-page="studio"] .vue-publish-completion h3 {
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
}

body[data-page="studio"] .vue-publish-completion p {
    color: rgba(248, 245, 255, 0.82);
}

.vue-publish-completion-track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vue-publish-completion-track article {
    display: grid;
    gap: 6px;
    min-height: 118px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--animaker-radius-card);
    background: rgba(255, 255, 255, 0.08);
}

.vue-publish-completion-track article.ready {
    border-color: rgba(118, 221, 177, 0.38);
    background:
            linear-gradient(145deg, rgba(118, 221, 177, 0.16), rgba(255, 255, 255, 0.06)),
            rgba(255, 255, 255, 0.07);
}

.vue-publish-completion-track span,
.vue-publish-completion-status {
    color: rgba(248, 245, 255, 0.68);
    font-size: 12px;
    font-weight: 900;
}

.vue-publish-completion-track strong {
    color: #fff;
    font-size: 15px;
}

body[data-page="studio"] .vue-publish-completion-track p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}

.vue-publish-completion-actions {
    position: relative;
    z-index: 1;
}

body[data-page="studio"] .vue-publish-completion .secondary-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
}

body[data-page="studio"] .vue-publish-completion .secondary-btn:hover {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.18);
}

.vue-publish-completion-status {
    position: relative;
    z-index: 1;
    margin: -4px 0 0;
}

.vue-publish-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.1);
}

.vue-publish-footer > div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vue-board-dock {
    display: grid;
    gap: 16px;
}

.vue-board-cover {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)),
            rgba(255, 255, 255, 0.06);
}

.vue-board-cover img {
    width: 100%;
    height: 310px;
    display: block;
    object-fit: cover;
}

.vue-board-empty-cover {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    display: grid;
    align-content: space-between;
    gap: 14px;
    padding: 18px 18px 56px;
    background:
            radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--board-accent, #21b7c5) 32%, transparent), transparent 28%),
            radial-gradient(circle at 82% 22%, rgba(255, 209, 102, 0.18), transparent 24%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 22px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 26px),
            linear-gradient(145deg, rgba(18, 16, 28, 0.98), rgba(38, 36, 52, 0.94));
}

.vue-board-empty-cover::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.vue-board-empty-cover::after {
    content: "";
    position: absolute;
    inset: 64px 24px 62px;
    border: 1px solid color-mix(in srgb, var(--board-accent, #21b7c5) 44%, rgba(255, 255, 255, 0.22));
    border-radius: var(--animaker-radius-card);
    background:
            linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.14) 49% 51%, transparent 51%),
            linear-gradient(180deg, transparent 49%, rgba(255, 255, 255, 0.08) 49% 50%, transparent 50%);
    opacity: 0.38;
    pointer-events: none;
}

.vue-board-empty-cover > * {
    position: relative;
    z-index: 2;
}

.vue-board-cover-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.vue-board-cover-topline span,
.vue-board-cover-topline strong {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(18, 16, 28, 0.58);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 950;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vue-board-cover-topline span {
    color: var(--yellow);
}

.vue-board-cover-topline strong {
    justify-content: flex-end;
    color: color-mix(in srgb, var(--board-accent, #21b7c5) 34%, #fff);
}

.vue-board-empty-head {
    display: grid;
    gap: 8px;
    width: min(100%, 360px);
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--animaker-radius-card);
    background: rgba(18, 16, 28, 0.72);
    backdrop-filter: blur(12px);
}

.vue-board-empty-head span,
.vue-board-empty-grid span {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
}

.vue-board-empty-head strong {
    max-width: 100%;
    color: #fff;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.vue-board-empty-head small {
    max-width: 100%;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.vue-board-empty-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(118px, 0.82fr) minmax(0, 1.18fr);
    gap: 12px;
    align-items: stretch;
    min-height: 168px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--animaker-radius-card);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045)),
            rgba(18, 16, 28, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.vue-board-empty-stage[data-stage-ready="prompt"] {
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 52%, rgba(255, 255, 255, 0.14));
    background:
            linear-gradient(145deg, color-mix(in srgb, var(--board-accent, #21b7c5) 14%, transparent), rgba(255, 255, 255, 0.055)),
            rgba(18, 16, 28, 0.52);
}

.vue-board-silhouette {
    position: relative;
    overflow: hidden;
    min-height: 144px;
    border: 1px solid color-mix(in srgb, var(--board-accent, #21b7c5) 44%, rgba(255, 255, 255, 0.13));
    border-radius: calc(var(--animaker-radius-card) + 4px);
    background:
            radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.2), transparent 28%),
            radial-gradient(circle at 50% 37%, color-mix(in srgb, var(--board-accent, #21b7c5) 28%, transparent), transparent 28%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.vue-board-silhouette::before,
.vue-board-silhouette::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid color-mix(in srgb, var(--board-accent, #21b7c5) 60%, rgba(255, 255, 255, 0.26));
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035)),
            rgba(18, 16, 28, 0.46);
}

.vue-board-silhouette::before {
    top: 24px;
    width: 58px;
    height: 66px;
    border-radius: 46% 46% 42% 42%;
    box-shadow: 0 0 42px color-mix(in srgb, var(--board-accent, #21b7c5) 28%, transparent);
}

.vue-board-silhouette::after {
    bottom: -22px;
    width: 110px;
    height: 90px;
    border-radius: 54px 54px 24px 24px;
}

.vue-board-silhouette i {
    position: absolute;
    z-index: 2;
    display: block;
    border-color: rgba(255, 255, 255, 0.44);
    border-style: solid;
    pointer-events: none;
}

.vue-board-hairline {
    top: 18px;
    left: calc(50% - 38px);
    width: 76px;
    height: 38px;
    border-width: 2px 0 0;
    border-radius: 50% 50% 0 0;
}

.vue-board-face-line {
    top: 60px;
    left: calc(50% - 18px);
    width: 36px;
    height: 10px;
    border-width: 0 0 2px;
    border-radius: 999px;
}

.vue-board-body-line {
    left: calc(50% - 48px);
    bottom: 26px;
    width: 96px;
    height: 42px;
    border-width: 2px 0 0;
    border-radius: 50% 50% 0 0;
}

.vue-board-prop-line {
    right: 16px;
    bottom: 28px;
    width: 38px;
    height: 74px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 18px 0;
    transform: rotate(-12deg);
}

.vue-board-blueprint {
    min-width: 0;
    display: grid;
    gap: 7px;
    align-content: start;
}

.vue-board-blueprint > span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #17151f;
    background: linear-gradient(135deg, #ffd166, #b9f5ff);
    font-size: 11px;
    font-weight: 950;
}

.vue-board-blueprint > strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.vue-board-blueprint > small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

.vue-board-blueprint-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 2px;
}

.vue-board-blueprint-lines em {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--animaker-radius-control);
    background: rgba(255, 255, 255, 0.055);
    font-style: normal;
}

.vue-board-blueprint-lines em.ready {
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 48%, rgba(255, 255, 255, 0.14));
    background: color-mix(in srgb, var(--board-accent, #21b7c5) 12%, rgba(255, 255, 255, 0.045));
}

.vue-board-blueprint-lines b {
    color: var(--yellow);
    font-size: 10px;
    font-weight: 950;
}

.vue-board-blueprint-lines span {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vue-board-empty-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.vue-board-empty-grid article {
    min-height: 76px;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(18, 16, 28, 0.56);
    backdrop-filter: blur(10px);
}

.vue-board-empty-grid article.ready {
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 46%, rgba(255, 255, 255, 0.12));
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06)),
            color-mix(in srgb, var(--board-accent, #21b7c5) 12%, transparent);
}

.vue-board-empty-grid strong {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.vue-board-cover-marks {
    position: absolute;
    inset: 26px;
    z-index: 1;
    pointer-events: none;
}

.vue-board-cover-marks i {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 58%, rgba(255, 255, 255, 0.3));
    border-style: solid;
    opacity: 0.82;
}

.vue-board-cover-marks i:nth-child(1) {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}

.vue-board-cover-marks i:nth-child(2) {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
}

.vue-board-cover-marks i:nth-child(3) {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
}

.vue-board-cover-marks i:nth-child(4) {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
}

.vue-board-empty-cover p {
    margin: 0;
    max-width: 92%;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.65;
    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}

.vue-board-cover > span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: #fff;
    background: rgba(23, 21, 31, 0.68);
    font-size: 13px;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.vue-board-info {
    display: grid;
    gap: 10px;
}

.vue-board-info h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.12;
}

.vue-board-info > p:not(.eyebrow) {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.55;
}

.vue-board-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vue-board-tags span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    color: #fff;
    background: rgba(33, 183, 197, 0.24);
    font-size: 13px;
    font-weight: 900;
}

.vue-board-palette {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 900;
}

.vue-board-readiness {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--animaker-radius-card);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045)),
            rgba(255, 255, 255, 0.055);
}

.vue-board-readiness[data-board-readiness="building"] {
    border-color: rgba(255, 209, 102, 0.22);
    background:
            linear-gradient(145deg, rgba(255, 209, 102, 0.12), rgba(255, 255, 255, 0.05)),
            rgba(255, 255, 255, 0.05);
}

.vue-board-readiness[data-board-readiness="complete"] {
    border-color: rgba(87, 204, 153, 0.3);
    background:
            linear-gradient(145deg, rgba(87, 204, 153, 0.14), rgba(255, 255, 255, 0.05)),
            rgba(255, 255, 255, 0.05);
}

.vue-board-readiness-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.vue-board-readiness-head div {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
            rgba(18, 16, 28, 0.3);
}

.vue-board-readiness-head span,
.vue-board-readiness-grid span {
    color: var(--yellow);
    font-size: 11px;
    font-weight: 950;
}

.vue-board-readiness-head strong {
    color: #fff;
    font-size: 24px;
    line-height: 1;
}

.vue-board-readiness-head p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.58;
}

.vue-board-readiness-bar {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.vue-board-readiness-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--yellow), #57cc99);
    transition: width 0.22s ease;
}

.vue-board-readiness-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.vue-board-readiness-grid button {
    min-width: 0;
    min-height: 72px;
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--animaker-radius-control);
    color: #fff;
    background: rgba(18, 16, 28, 0.28);
    cursor: pointer;
    text-align: left;
}

.vue-board-readiness-grid button.ready {
    border-color: rgba(87, 204, 153, 0.32);
    background:
            linear-gradient(145deg, rgba(87, 204, 153, 0.13), rgba(255, 255, 255, 0.05)),
            rgba(18, 16, 28, 0.2);
}

.vue-board-readiness-grid button:hover {
    transform: translateY(-1px);
    border-color: rgba(185, 245, 255, 0.32);
    background: rgba(255, 255, 255, 0.1);
}

.vue-board-readiness-grid strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
}

.vue-board-readiness-grid small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vue-board-next-action {
    min-height: 38px;
    border: 1px solid rgba(255, 209, 102, 0.38);
    border-radius: var(--animaker-radius-control);
    color: #17151f;
    background: linear-gradient(135deg, #ffd166, #9ff3ff);
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(33, 183, 197, 0.18);
}

.vue-board-next-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(33, 183, 197, 0.24);
}

.vue-board-summary {
    display: grid;
    gap: 10px;
}

.vue-board-summary article {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.vue-board-summary span {
    display: block;
    margin-bottom: 6px;
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
}

.vue-board-summary p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.6;
}

.vue-board-status,
.vue-board-notice {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.vue-board-status span {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
}

.vue-board-status p,
.vue-board-notice p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.vue-board-notice {
    border-color: rgba(255, 93, 143, 0.3);
    background:
            linear-gradient(145deg, rgba(255, 93, 143, 0.16), rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.06);
}

.vue-board-notice .secondary-btn {
    width: 100%;
    justify-content: center;
}

.vue-board-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vue-board-actions .primary-btn,
.vue-board-actions .secondary-btn {
    width: 100%;
    justify-content: center;
}

.designer-form label.needs-attention,
.designer-form input.needs-attention,
.designer-form textarea.needs-attention,
.designer-form select.needs-attention {
    border-color: rgba(255, 93, 143, 0.62);
}

.designer-form input.needs-attention,
.designer-form textarea.needs-attention,
.designer-form select.needs-attention {
    box-shadow: 0 0 0 4px rgba(255, 93, 143, 0.12);
}

@media (max-width: 900px) {
    .studio-guide {
        grid-template-columns: 1fr;
    }

}

/* V2.1 guided OC workstation: route, creation flow, and live character board. */
body[data-page="studio"] main {
    width: min(100% - 40px, 1440px);
}

.studio-workbench {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(440px, 1.34fr) minmax(300px, 0.84fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 56px;
}

.studio-path-banner {
    grid-column: 1 / -1;
    display: grid;
}

.studio-path-banner article {
    position: relative;
    overflow: hidden;
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.26);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(18, 16, 28, 0.98), rgba(35, 34, 49, 0.96)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.2), transparent 34%),
            radial-gradient(circle at 92% 0, rgba(255, 209, 102, 0.16), transparent 28%);
    box-shadow: 0 22px 58px rgba(22, 19, 29, 0.16);
}

body:not(.studio-mode-advanced) .studio-path-banner article[data-studio-path="quick"],
.studio-mode-quick .studio-path-banner article[data-studio-path="quick"],
.studio-mode-advanced .studio-path-banner article[data-studio-path="advanced"] {
    display: grid;
}

.studio-mode-advanced .studio-path-banner article[data-studio-path="quick"] {
    display: none;
}

.studio-path-banner article[data-studio-path="advanced"] {
    border-color: rgba(123, 97, 255, 0.28);
    background:
            linear-gradient(135deg, rgba(18, 16, 28, 0.98), rgba(38, 32, 52, 0.96)),
            radial-gradient(circle at 0 0, rgba(123, 97, 255, 0.22), transparent 34%),
            radial-gradient(circle at 92% 0, rgba(255, 209, 102, 0.16), transparent 28%);
}

.studio-path-banner span {
    grid-column: 1;
    color: #b9f5ff;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.studio-path-banner article[data-studio-path="advanced"] span {
    color: #d8ceff;
}

.studio-path-banner strong {
    grid-column: 1;
    color: #fff;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.08;
}

.studio-path-banner p {
    grid-column: 1;
    max-width: 820px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 800;
    line-height: 1.68;
}

.studio-path-banner div {
    grid-row: 1 / span 3;
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.studio-path-banner .secondary-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vue-reference-shell {
    margin: 0 0 72px;
}

.vue-reference-dock {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 255, 0.92)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.13), transparent 38%);
    box-shadow: 0 18px 46px rgba(39, 28, 62, 0.08);
}

.vue-reference-details {
    display: grid;
    gap: 14px;
}

.vue-reference-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    cursor: pointer;
    list-style: none;
}

.vue-reference-head::-webkit-details-marker {
    display: none;
}

.vue-reference-head::after {
    content: "展开辅助参考";
    grid-column: 1 / -1;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(33, 183, 197, 0.1);
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
}

.vue-reference-details[open] .vue-reference-head::after {
    content: "收起辅助参考";
}

.vue-reference-head h2 {
    margin: 4px 0 8px;
    color: var(--ink);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.1;
}

.vue-reference-head p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.65;
}

.vue-reference-head > strong {
    display: grid;
    min-width: 88px;
    min-height: 54px;
    place-items: center;
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.12);
    color: var(--teal);
    font-size: 20px;
}

.vue-reference-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding-top: 2px;
}

.vue-reference-grid article {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 220px;
    padding: 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.vue-reference-grid article.ready {
    border-color: rgba(87, 204, 153, 0.34);
    background: rgba(87, 204, 153, 0.09);
}

.vue-reference-grid span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.vue-reference-grid strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
}

.vue-reference-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.vue-reference-grid .secondary-btn {
    width: 100%;
    margin-top: auto;
    justify-content: center;
}

.studio-rail,
.studio-preview {
    position: sticky;
    top: 92px;
    align-self: start;
}

.studio-rail {
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.studio-route {
    grid-template-columns: 1fr;
}

.studio-route button {
    min-height: 48px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    text-align: left;
}

.studio-route button span {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(33, 183, 197, 0.12);
    color: var(--cyan);
    font-size: 11px;
}

.studio-route button.is-complete span {
    background: rgba(87, 204, 153, 0.16);
    color: #21966b;
}

.studio-flow.designer-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.studio-flow.designer-form.revealable,
.studio-preview.avatar-preview.revealable {
    opacity: 1;
    transform: none;
    transition: none;
}

.studio-panel {
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 8px;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 253, 0.94)),
            #fff;
    box-shadow: 0 16px 44px rgba(39, 28, 62, 0.07);
}

.studio-panel.is-active {
    border-color: rgba(33, 183, 197, 0.48);
    box-shadow: 0 20px 58px rgba(33, 183, 197, 0.13);
}

.studio-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.studio-panel-head h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.18;
}

.studio-panel-head p:not(.eyebrow) {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.65;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.studio-panel > label,
.field-grid > label {
    min-width: 0;
}

.ai-prompt-panel.studio-panel {
    border-color: rgba(33, 183, 197, 0.28);
    background:
            linear-gradient(135deg, rgba(33, 183, 197, 0.12), rgba(255, 93, 143, 0.08)),
            #fff;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-shell {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .studio-flow.designer-form {
    gap: 14px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
    display: grid;
    animation: studioStepIn 0.18s ease-out both;
}

@keyframes studioStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.studio-wizard-nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 8px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 253, 255, 0.92)),
            radial-gradient(circle at 0 100%, rgba(255, 209, 102, 0.16), transparent 36%);
    box-shadow: 0 16px 44px rgba(39, 28, 62, 0.08);
}

.studio-wizard-nav > div {
    min-width: 0;
    display: grid;
    gap: 3px;
    justify-items: center;
    text-align: center;
}

.studio-wizard-nav span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
}

.studio-wizard-nav strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
}

.studio-wizard-nav small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.studio-wizard-nav button:disabled {
    opacity: 0.46;
    cursor: not-allowed;
    transform: none;
}

.studio-preview.avatar-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    padding: 20px;
    background:
            radial-gradient(circle at 18% 8%, rgba(255, 93, 143, 0.22), transparent 32%),
            radial-gradient(circle at 86% 18%, rgba(33, 183, 197, 0.18), transparent 30%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 160px),
            linear-gradient(145deg, rgba(18, 16, 28, 0.98), rgba(44, 42, 55, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow: 0 24px 70px rgba(23, 21, 31, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    scrollbar-width: thin;
}

@media (max-width: 1180px) {
    .studio-workbench {
        grid-template-columns: minmax(230px, 0.76fr) minmax(0, 1.24fr);
    }

    .vue-reference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-preview.avatar-preview {
        grid-column: 1 / -1;
        position: relative;
        top: auto;
        max-height: none;
        overflow-y: visible;
        grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
    }
}

@media (max-width: 900px) {
    .studio-workbench {
        grid-template-columns: 1fr;
    }

    .studio-path-banner article {
        grid-template-columns: 1fr;
    }

    .studio-path-banner div {
        grid-row: auto;
        grid-column: 1;
        justify-content: flex-start;
    }

    .vue-reference-head,
    .vue-reference-grid,
    .vue-studio-refine > summary {
        grid-template-columns: 1fr;
    }

    .vue-studio-refine > summary::after,
    .vue-studio-refine > summary em {
        width: fit-content;
    }

    .studio-rail,
    .studio-preview {
        position: relative;
        top: auto;
    }

    .studio-preview.avatar-preview {
        order: -1;
        grid-template-columns: 1fr;
    }

    .studio-route {
        grid-template-columns: repeat(5, minmax(140px, 1fr));
        overflow-x: auto;
        scrollbar-width: none;
    }

    .studio-route::-webkit-scrollbar {
        display: none;
    }

    .field-grid,
    .vue-core-mission,
    .vue-visual-next-action,
    .vue-visual-route-card,
    .vue-story-next-action,
    .vue-core-inspiration-grid,
    .vue-publish-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-grid,
    .vue-visual-next-action,
    .vue-story-next-action,
    .vue-publish-preview-grid {
        grid-template-columns: 1fr;
    }

    .studio-panel-head,
    .vue-step-head {
        flex-direction: column;
    }

    .vue-publish-preview-head {
        grid-template-columns: 1fr;
    }

    .vue-publish-completion-main,
    .vue-publish-completion-track {
        grid-template-columns: 1fr;
    }

    .vue-step-side {
        width: 100%;
        justify-content: flex-start;
    }

    .studio-wizard-nav {
        grid-template-columns: 1fr 1fr;
    }

    .vue-route-hero-shell .vue-route-focus-card,
    .vue-route-top-shell .vue-route-focus-card {
        grid-template-columns: 1fr;
    }

    .vue-route-hero-shell .vue-route-focus-actions,
    .vue-route-top-shell .vue-route-focus-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .studio-wizard-nav > div {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-items: start;
        text-align: left;
    }

}

@media (max-width: 560px) {
    body[data-page="studio"] main {
        width: min(100% - 28px, 1440px);
        overflow-x: hidden;
    }

    .studio-panel,
    .studio-preview.avatar-preview,
    .studio-rail .vue-route-next,
    .studio-rail .vue-route-focus-card,
    .studio-rail .vue-route-progress,
    .studio-rail .vue-assist-card {
        padding: 16px;
    }

    .studio-panel-head h2,
    .vue-step-head h2 {
        font-size: 21px;
    }

    .studio-route {
        grid-template-columns: repeat(5, minmax(132px, 1fr));
    }

    .studio-flow .generator-actions,
    .vue-publish-preview-head {
        flex-wrap: wrap;
        overflow: visible;
    }

    .vue-publish-completion-main {
        align-items: start;
    }

    .vue-publish-completion-mark {
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    .studio-flow .generator-actions .primary-btn,
    .studio-flow .generator-actions .secondary-btn,
    .vue-publish-preview-head .secondary-btn {
        width: 100%;
    }

    .studio-wizard-nav {
        grid-template-columns: 1fr;
    }

    .studio-wizard-nav > div {
        grid-column: auto;
        grid-row: auto;
    }

    .studio-wizard-nav .primary-btn,
    .studio-wizard-nav .secondary-btn,
    .studio-path-banner .primary-btn,
    .studio-path-banner .secondary-btn,
    .vue-route-hero-shell .primary-btn,
    .vue-route-hero-shell .secondary-btn,
    .vue-route-top-shell .primary-btn,
    .vue-route-top-shell .secondary-btn,
    .vue-core-mission .primary-btn,
    .vue-core-mission .secondary-btn {
        width: 100%;
    }

    .vue-route-hero-shell .vue-route-focus-actions,
    .vue-route-top-shell .vue-route-focus-actions {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .topbar {
        overflow-x: hidden;
    }

    .brand {
        min-width: 0;
        white-space: normal;
    }

    .topbar > .primary-link {
        order: 2;
        width: 100%;
        justify-content: center;
    }

    .nav {
        order: 3;
        min-width: 0;
        max-width: 100%;
    }

    .nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .studio-workbench,
    .studio-rail,
    .studio-flow.designer-form,
    .studio-panel,
    .studio-preview.avatar-preview {
        min-width: 0;
    }

    .studio-rail {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .vue-assist-groups,
    .vue-assist-actions,
    .vue-operation-panel,
    .vue-generation-feedback-chips,
    .vue-ai-capability-pills,
    .vue-ai-capability-grid,
    .vue-core-form,
    .vue-core-actions,
    .vue-core-briefing,
    .vue-core-inspiration-grid,
    .vue-core-summary,
    .vue-candidate-grid,
    .vue-core-mission,
    .vue-visual-route-card,
    .vue-visual-board,
    .vue-visual-checks,
    .vue-visual-preset-grid,
    .vue-visual-kit-grid,
    .vue-visual-kit-options,
    .vue-visual-grid,
    .vue-visual-summary,
    .vue-story-board,
    .vue-story-checks,
    .vue-story-preset-grid,
    .vue-story-grid,
    .vue-story-grid.compact,
    .vue-story-summary,
    .vue-image-brief,
    .vue-image-readiness-grid,
    .vue-external-grid,
    .vue-external-checks,
    .vue-publish-checks,
    .vue-publish-asset-grid,
    .vue-publish-pack-head,
    .vue-publish-social-grid,
    .vue-publish-decision-head,
    .vue-publish-mode-grid,
    .vue-publish-options {
        grid-template-columns: 1fr;
    }

    .vue-assist-head,
    .vue-core-head,
    .vue-visual-head,
    .vue-visual-palette,
    .vue-story-head,
    .vue-image-head,
    .vue-image-readiness-head,
    .vue-image-hint,
    .vue-external-pack-head,
    .vue-action-notice,
    .vue-publish-head,
    .vue-publish-footer {
        grid-template-columns: 1fr;
    }

    .vue-visual-head > strong {
        width: auto;
        height: 38px;
        border-radius: 8px;
    }

    .vue-story-head > strong {
        width: auto;
        height: 38px;
        border-radius: 8px;
    }

    .vue-visual-swatches {
        justify-content: flex-start;
    }

    .vue-visual-actions .primary-btn,
    .vue-visual-actions .secondary-btn,
    .vue-story-actions .primary-btn,
    .vue-story-actions .secondary-btn,
    .vue-image-actions .primary-btn,
    .vue-image-actions .secondary-btn {
        width: 100%;
    }

    .vue-image-hint span {
        white-space: normal;
    }

    .vue-publish-head > strong {
        width: auto;
        height: 38px;
        border-radius: 8px;
    }

    .vue-publish-footer > div,
    .vue-action-notice .secondary-btn,
    .vue-post-create-actions,
    .vue-post-create-actions .primary-btn,
    .vue-post-create-actions .secondary-btn,
    .vue-publish-footer .secondary-btn,
    .vue-publish-options .primary-btn,
    .vue-publish-options .secondary-btn {
        width: 100%;
    }

    .vue-assist-head strong {
        width: auto;
        height: 38px;
        border-radius: 8px;
    }

    .vue-characters {
        padding-top: 28px;
    }

    .vue-characters-hero {
        padding: 18px;
    }

    .vue-characters-copy h1 {
        font-size: 42px;
    }

    .vue-characters-actions .primary-link,
    .vue-characters-actions .secondary-btn,
    .vue-character-dimensions-head .secondary-btn,
    .vue-character-completion-actions .primary-link,
    .vue-character-completion-actions .secondary-btn,
    .vue-character-queue-grid a,
    .vue-character-filter .filter-count,
    .vue-character-card .card-foot .secondary-btn,
    .vue-user-actions .primary-link,
    .vue-user-actions .primary-btn,
    .vue-user-actions .secondary-btn,
    .vue-user-fit-actions .primary-link,
    .vue-user-fit-actions .primary-btn,
    .vue-user-fit-actions .secondary-btn,
    .vue-user-fit-grid a,
    .vue-user-fit-grid button,
    .vue-user-route-actions .primary-link,
    .vue-user-route-actions .primary-btn,
    .vue-user-route-actions .secondary-btn,
    .vue-user-route-steps a,
    .vue-user-route-steps .link-button,
    .vue-user-work-card .social-row .secondary-btn,
    .vue-export-actions .primary-btn,
    .vue-export-actions .secondary-btn,
    .vue-export-achievement-actions .primary-btn,
    .vue-export-achievement-actions .secondary-btn {
        width: 100%;
    }

    .vue-user-profile {
        padding-top: 28px;
    }

    .vue-user-hero {
        padding: 18px;
    }

    .vue-user-identity {
        grid-template-columns: 1fr;
    }

    .vue-user-identity h1 {
        font-size: 42px;
    }

    .vue-export {
        padding-top: 28px;
    }

    .vue-export-summary,
    .vue-export-template-card,
    .vue-export-checklist,
    .vue-export-sheet,
    .vue-export-copy-grid article {
        padding: 18px;
    }

    .vue-ip {
        padding-top: 28px;
    }

    .vue-ip-copy,
    .vue-ip-section-grid article {
        padding: 18px;
    }

    .vue-ip-actions .primary-link,
    .vue-ip-actions .secondary-btn,
    .vue-ip-production-actions .primary-link,
    .vue-ip-production-actions .secondary-btn,
    .vue-ip-series-actions .primary-btn,
    .vue-ip-series-actions .secondary-btn,
    .vue-ip-series-grid a,
    .vue-ip-next-cast .row-between a,
    .vue-ip-production-grid a,
    .vue-ip-next-cast-grid a {
        width: 100%;
    }

    .vue-relation-map {
        min-height: 360px;
    }

    .vue-relation-node {
        width: 104px;
    }

    .vue-relation-node img {
        width: 52px;
        height: 52px;
    }

    .vue-ip-character-card > div {
        padding: 18px;
    }

    .vue-admin {
        padding-top: 28px;
    }

    .vue-admin-hero > div:first-child,
    .vue-admin-hero-card,
    .vue-admin-login form,
    .vue-admin-login aside,
    .vue-admin-migration,
    .vue-admin-migration-brief,
    .vue-admin-migration-grid article,
    .vue-admin-migration-next,
    .vue-admin-config,
    .vue-admin-rollout-brief,
    .vue-admin-rollout-grid article,
    .vue-admin-ops-brief,
    .vue-admin-ops-checks article,
    .vue-admin-provider,
    .vue-admin-warning,
    .vue-admin-workbench {
        padding: 18px;
    }

    .vue-admin-hero h1 {
        font-size: 42px;
    }

    .vue-admin-toolbar,
    .vue-admin-row {
        align-items: stretch;
    }

    .vue-admin-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vue-admin-actions {
        width: 100%;
    }

    .vue-admin-ops-kpis,
    .vue-admin-rollout-stats,
    .vue-admin-provider,
    .vue-admin-oss-smoke-grid {
        grid-template-columns: 1fr;
    }

    .vue-admin-config-items span {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vue-admin-config-actions,
    .vue-admin-config-actions .primary-btn,
    .vue-admin-config-actions .secondary-btn {
        width: 100%;
    }

    .vue-admin-tabs .secondary-btn,
    .vue-admin-actions .secondary-btn,
    .vue-admin-migration-brief .primary-btn,
    .vue-admin-ops-actions,
    .vue-admin-ops-actions .primary-btn,
    .vue-admin-row-actions,
    .vue-admin-row-actions .secondary-btn,
    .vue-admin-row-actions a {
        width: 100%;
    }

    .vue-admin-row > img {
        width: 100%;
        height: 220px;
    }

    .vue-admin-hero-card {
        min-height: 220px;
    }

    .vue-home {
        gap: 22px;
    }

    .vue-home-hero {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 0;
    }

    .vue-home-copy {
        width: min(calc(100vw - 56px), 260px);
        margin: 0 auto;
        padding: 58px 0 28px;
    }

    .vue-home-copy h1 {
        font-size: 38px;
    }

    .vue-home-copy p,
    .vue-home-feature p {
        word-break: break-all;
    }

    .vue-home-actions .primary-link,
    .vue-home-actions .secondary-btn {
        width: 100%;
        max-width: 100%;
    }

    .vue-home-hero-routes {
        grid-template-columns: 1fr;
    }

    .vue-home-feature {
        width: min(calc(100vw - 56px), 260px);
        grid-template-columns: 1fr;
        margin: 0 auto 28px;
    }

    .vue-home-feature img {
        height: 240px;
    }

    .vue-home-metrics,
    .vue-home-next,
    .vue-home-creation-grid,
    .vue-home-starter-strip,
    .vue-home-work-grid,
    .vue-home-ip-grid,
    .vue-home-feed-grid,
    .vue-home-empty-band,
    .vue-home-lower {
        grid-template-columns: 1fr;
    }

    .vue-home-creation-head {
        display: grid;
        gap: 12px;
    }

    .vue-home > section:not(.vue-home-hero),
    .vue-home > .section-heading,
    .vue-home > .vue-home-lower {
        width: min(100% - 28px, 1180px);
    }

    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-empty-band,
    .vue-home-creation-card > div,
    .vue-home-starter-card,
    .vue-home-template-list a,
    .vue-home-post-list article {
        padding: 16px;
    }

    .vue-home-creation-head h2 {
        font-size: 30px;
    }

    .vue-home-creation-card {
        grid-template-rows: 240px minmax(0, 1fr);
    }

    .vue-home-creation-card img {
        height: 240px;
    }

    .vue-home-work-card > a img,
    .vue-home-ip-card > a img,
    .vue-home-feed-card > a img {
        height: 300px;
    }

    .vue-home-list a,
    .vue-home-creator-list a {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .vue-home-list img,
    .vue-home-creator-list img {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 560px) {
    body[data-page="studio"] .topbar {
        overflow: visible;
    }

    body[data-page="studio"] .shared-nav-links,
    body[data-page="studio"] .nav {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 8px;
    }

    body[data-page="studio"] .shared-nav-links a,
    body[data-page="studio"] .nav a {
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    body[data-page="studio"] .shared-nav-actions {
        overflow: visible;
        flex-wrap: wrap;
    }
}

/* Global creator theme, shared by home, gallery, me, work detail and studio. */
body.animaker-theme-night {
    --ink: #f8f5ff;
    --text: #e1dced;
    --muted: #b9b1ca;
    --line: rgba(255, 255, 255, 0.13);
    --paper: #0f0e18;
    --panel: #181723;
    --cyan: #37d5e5;
    --teal: #45c8d3;
    --green: #76ddb1;
    --violet: #a891ff;
    color: var(--text);
    background:
            radial-gradient(circle at 12% 8%, rgba(55, 213, 229, 0.16), transparent 30rem),
            radial-gradient(circle at 88% 18%, rgba(168, 145, 255, 0.16), transparent 28rem),
            linear-gradient(180deg, #11101b, #171421 48%, #0f0e18);
}

.theme-toggle-button {
    min-width: 58px;
}

body.animaker-theme-night .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(15, 14, 24, 0.84);
}

body.animaker-theme-night .brand,
body.animaker-theme-night .hero-copy h1,
body.animaker-theme-night .page-title h1,
body.animaker-theme-night h1,
body.animaker-theme-night h2,
body.animaker-theme-night h3,
body.animaker-theme-night h4 {
    color: var(--ink);
}

body.animaker-theme-night .hero-copy p,
body.animaker-theme-night .page-title p,
body.animaker-theme-night p,
body.animaker-theme-night small {
    color: var(--muted);
}

body.animaker-theme-night .shared-nav-links a:hover,
body.animaker-theme-night .shared-nav-links a.active,
body.animaker-theme-night .nav a:hover,
body.animaker-theme-night .nav a.active,
body.animaker-theme-night .nav-button:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

body.animaker-theme-night .secondary-btn,
body.animaker-theme-night .ghost-link,
body.animaker-theme-night .theme-toggle-button {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

body.animaker-theme-night .primary-btn,
body.animaker-theme-night .primary-link {
    color: #11101b;
    background: linear-gradient(135deg, var(--cyan), var(--yellow));
}

body.animaker-theme-night:not([data-page="studio"]) .page-title,
body.animaker-theme-night:not([data-page="studio"]) .auth-card,
body.animaker-theme-night:not([data-page="studio"]) .hero-panel,
body.animaker-theme-night:not([data-page="studio"]) [class*="-card"],
body.animaker-theme-night:not([data-page="studio"]) [class*="-panel"],
body.animaker-theme-night:not([data-page="studio"]) [class*="-dock"],
body.animaker-theme-night:not([data-page="studio"]) [class*="-preview"],
body.animaker-theme-night:not([data-page="studio"]) [class*="-empty"],
body.animaker-theme-night:not([data-page="studio"]) [class*="-item"] {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.06);
}

body.animaker-theme-night input,
body.animaker-theme-night textarea,
body.animaker-theme-night select {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

body.animaker-theme-night input::placeholder,
body.animaker-theme-night textarea::placeholder {
    color: rgba(225, 220, 237, 0.52);
}

body.animaker-theme-night:is([data-page="home"], [data-page="login"]) {
    --muted: #c9c1d8;
    --text: #e7e0f3;
    --line: rgba(255, 255, 255, 0.16);
}

body.animaker-theme-night[data-page="home"] .vue-home {
    background:
            radial-gradient(circle at 10% 22%, rgba(55, 213, 229, 0.13), transparent 24rem),
            radial-gradient(circle at 86% 18%, rgba(255, 122, 167, 0.11), transparent 22rem);
}

body.animaker-theme-night[data-page="home"] .vue-home-hero {
    background:
            linear-gradient(90deg, rgba(12, 11, 19, 0.96), rgba(12, 11, 19, 0.76) 44%, rgba(12, 11, 19, 0.28)),
            radial-gradient(circle at 72% 24%, rgba(55, 213, 229, 0.2), transparent 28%),
            url("/animaker/img/generated/home-hero-oc-studio.webp") center / cover no-repeat;
}

body.animaker-theme-night[data-page="home"] .vue-home-feature,
body.animaker-theme-night[data-page="home"] .vue-home-hero-routes a {
    border-color: rgba(255, 255, 255, 0.18);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.055)),
            rgba(11, 11, 18, 0.72);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
}

body.animaker-theme-night[data-page="home"] .vue-home-actions .primary-link {
    color: #11101b;
    background: linear-gradient(135deg, #f8f5ff, #9ff3ff);
}

body.animaker-theme-night[data-page="home"] .vue-home-actions .secondary-btn {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

body.animaker-theme-night[data-page="home"] :is(
    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-next a,
    .vue-home-creation-card,
    .vue-home-work-card,
    .vue-home-ip-card,
    .vue-home-feed-card,
    .vue-home-empty-band,
    .vue-home-list a,
    .vue-home-creator-list a,
    .vue-home-template-list a,
    .vue-home-post-list article
) {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.044)),
            rgba(17, 16, 27, 0.9);
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.24);
}

body.animaker-theme-night[data-page="home"] .vue-home-starter-card {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(135deg, rgba(21, 22, 34, 0.96), rgba(42, 35, 56, 0.92)),
            radial-gradient(circle at 100% 0, rgba(55, 213, 229, 0.12), transparent 38%);
}

body.animaker-theme-night[data-page="home"] .vue-home-empty-band {
    background:
            radial-gradient(circle at 88% 8%, rgba(55, 213, 229, 0.18), transparent 30%),
            linear-gradient(135deg, rgba(17, 16, 27, 0.96), rgba(26, 24, 38, 0.92));
}

body.animaker-theme-night[data-page="home"] :is(
    .vue-home-copy p,
    .vue-home-feature span,
    .vue-home-feature p,
    .vue-home-creation-head p:last-child,
    .vue-home-metrics p,
    .vue-home-metrics span,
    .vue-home-next span,
    .vue-home-work-card p,
    .vue-home-ip-card p,
    .vue-home-feed-card p,
    .vue-home-empty-band p,
    .vue-home-list span,
    .vue-home-creator-list span,
    .vue-home-template-list span,
    .vue-home-post-list p,
    .vue-home-creation-card p,
    .vue-home-creation-card small
) {
    color: rgba(231, 224, 243, 0.82);
}

body.animaker-theme-night[data-page="home"] :is(
    .vue-home-metrics small,
    .vue-home-creation-card strong,
    .vue-home-post-list span
) {
    color: #9ff3ff;
}

body.animaker-theme-night[data-page="login"] .auth-shell {
    background:
            radial-gradient(circle at 17% 22%, rgba(255, 209, 102, 0.2), transparent 28%),
            radial-gradient(circle at 76% 18%, rgba(55, 213, 229, 0.18), transparent 30%),
            linear-gradient(90deg, rgba(8, 8, 16, 0.94), rgba(8, 8, 16, 0.7) 48%, rgba(8, 8, 16, 0.36) 78%),
            linear-gradient(180deg, rgba(8, 8, 16, 0.18), rgba(8, 8, 16, 0.86)),
            url("/animaker/img/generated/login-oc-studio-bg-v1.webp") center / cover;
}

body.animaker-theme-night[data-page="login"] .auth-card {
    border-color: rgba(255, 255, 255, 0.18);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.075)),
            rgba(16, 15, 24, 0.82);
    box-shadow: 0 28px 78px rgba(0, 0, 0, 0.36);
}

body.animaker-theme-night[data-page="login"] :is(
    .vue-login-flow article,
    .vue-auth-tabs,
    .vue-login-status,
    .vue-password-rules span
) {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.075);
}

body.animaker-theme-night[data-page="login"] .vue-auth-tabs button.active {
    color: #11101b;
    background: linear-gradient(135deg, #9ff3ff, #ffd166);
    box-shadow: 0 14px 30px rgba(55, 213, 229, 0.18);
}

body.animaker-theme-night[data-page="login"] :is(
    .vue-login-card-head p,
    .vue-login-status,
    .auth-switch span,
    .vue-password-meter strong,
    .vue-password-rules span
) {
    color: rgba(231, 224, 243, 0.82);
}

body.animaker-theme-night[data-page="login"] .vue-password-field button {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
}

body.animaker-theme-night[data-page="login"] .vue-login-status.is-success {
    color: #bff5d9;
    border-color: rgba(118, 221, 177, 0.44);
    background: rgba(118, 221, 177, 0.12);
}

body.animaker-theme-night[data-page="login"] .vue-login-status.is-error {
    color: #ffc1d3;
    border-color: rgba(255, 93, 143, 0.38);
    background: rgba(255, 93, 143, 0.12);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) {
    --muted: #c7bfd7;
    --line: rgba(255, 255, 255, 0.16);
}

body.animaker-theme-night[data-page="gallery"] .vue-gallery-hero {
    min-height: 310px;
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    color: #f8f5ff;
    background:
            linear-gradient(90deg, rgba(12, 11, 20, 0.96), rgba(12, 11, 20, 0.72) 52%, rgba(12, 11, 20, 0.42)),
            radial-gradient(circle at 82% 18%, rgba(55, 213, 229, 0.18), transparent 30%),
            radial-gradient(circle at 24% 88%, rgba(255, 209, 102, 0.16), transparent 34%),
            url("/animaker/img/generated/home-hero-oc-studio.webp") center / cover no-repeat;
    box-shadow: 0 28px 78px rgba(0, 0, 0, 0.3);
}

body.animaker-theme-night[data-page="gallery"] :is(
    .vue-gallery-copy h1,
    .vue-gallery-copy .eyebrow
) {
    color: #fff;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

body.animaker-theme-night[data-page="gallery"] .vue-gallery-copy p {
    color: rgba(248, 245, 255, 0.8);
}

body.animaker-theme-night[data-page="gallery"] .vue-gallery-actions .secondary-btn {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(
    .vue-gallery-stats article,
    .vue-templates-stats article,
    .vue-characters-stats article
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
            radial-gradient(circle at 100% 0, rgba(55, 213, 229, 0.14), transparent 46%),
            rgba(18, 17, 28, 0.9);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(
    .vue-gallery-stats span,
    .vue-templates-stats span,
    .vue-characters-stats span
) {
    color: #9ff3ff;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(
    .vue-gallery-stats strong,
    .vue-templates-stats strong,
    .vue-characters-stats strong
) {
    color: #fff;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(
    .vue-gallery-stats small,
    .vue-templates-stats small,
    .vue-characters-stats small
) {
    color: rgba(225, 220, 237, 0.82);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(
    .vue-gallery-pulse,
    .vue-gallery-mission,
    .vue-gallery-creator-radar,
    .vue-gallery-cocreate,
    .vue-gallery-workspace,
    .vue-gallery-discovery,
    .vue-creator-nextline,
    .vue-template-pathfinder,
    .vue-template-starter,
    .vue-template-more,
    .vue-template-match,
    .vue-template-social,
    .vue-template-guide,
    .vue-template-rank,
    .vue-template-workspace,
    .vue-character-pathfinder,
    .vue-character-queue,
    .vue-character-more,
    .vue-character-dimensions,
    .vue-character-completion,
    .vue-character-worlds,
    .vue-character-remix,
    .vue-character-guide,
    .vue-character-workspace
) {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045)),
            radial-gradient(circle at 100% 0, rgba(55, 213, 229, 0.1), transparent 36%),
            rgba(17, 16, 27, 0.88);
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.24);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(
    .vue-gallery-pulse-copy p,
    .vue-gallery-pulse-copy small,
    .vue-gallery-mission-copy p,
    .vue-gallery-mission-copy small,
    .vue-gallery-radar-copy p,
    .vue-gallery-radar-copy small,
    .vue-gallery-cocreate-copy p,
    .vue-gallery-cocreate-copy small,
    .vue-gallery-discovery-head p,
    .vue-pathfinder-copy p,
    .vue-template-starter-copy p,
    .vue-template-starter-copy small,
    .vue-template-match-copy p,
    .vue-template-match-copy small,
    .vue-template-social-head p,
    .vue-template-guide-head p,
    .vue-template-more > summary p,
    .vue-character-queue-copy p,
    .vue-character-dimensions-head p,
    .vue-character-completion-copy p,
    .vue-character-completion-copy small,
    .vue-character-remix-copy p,
    .vue-character-remix-copy small,
    .vue-character-guide-head p,
    .vue-character-more > summary p
) {
    color: rgba(248, 245, 255, 0.78);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"])
:is(.vue-template-more > summary > strong, .vue-character-more > summary > strong) {
    color: #9ff3ff;
    border-color: rgba(55, 213, 229, 0.24);
    background: rgba(55, 213, 229, 0.1);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-template-more > summary::after,
body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-character-more > summary::after {
    color: #101521;
    background: #ffd166;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission-grid article,
    .vue-gallery-radar-card,
    .vue-gallery-cocreate-grid article,
    .vue-gallery-ip,
    .vue-gallery-feed-card,
    .work-card,
    .vue-path-card,
    .vue-template-starter-grid article,
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-template-mini,
    .vue-template-card,
    .vue-nextline-steps a,
    .vue-character-queue-grid article,
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article,
    .vue-character-card
) {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
            rgba(255, 255, 255, 0.035);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(
    .vue-gallery-pulse-grid p,
    .vue-gallery-mission-grid p,
    .vue-gallery-radar-main p,
    .vue-gallery-radar-main small,
    .vue-gallery-cocreate-grid p,
    .vue-gallery-ip p,
    .vue-gallery-ip small,
    .vue-gallery-feed-card p,
    .card-body p,
    .social-row span,
    .vue-path-card p,
    .vue-path-card li,
    .vue-path-card small,
    .vue-template-starter-grid p,
    .vue-template-fit-grid p,
    .vue-template-social-grid p,
    .vue-template-guide-grid p,
    .vue-template-mini span,
    .vue-template-mini small,
    .vue-template-filter-meta small,
    .vue-nextline-copy p,
    .vue-nextline-steps p,
    .vue-character-queue-grid p,
    .vue-character-dimension-grid p,
    .vue-character-dimension-grid small,
    .vue-character-completion-grid p,
    .vue-character-remix-grid p,
    .vue-character-guide-grid p,
    .vue-character-filter-meta small,
    .vue-character-card blockquote,
    .vue-character-card-progress small
) {
    color: rgba(225, 220, 237, 0.82);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(.pill, .vue-filter-chip, .vue-sort-chip, .vue-template-chip, .vue-world-chip-row .secondary-btn) {
    color: var(--ink);
    border-color: rgba(55, 213, 229, 0.22);
    background: rgba(55, 213, 229, 0.1);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-path-card span {
    color: #9ff3ff;
    background: rgba(55, 213, 229, 0.1);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-path-card:nth-child(2) span {
    color: #ffc1d3;
    background: rgba(255, 93, 143, 0.12);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-path-card b {
    color: #101521;
    background: linear-gradient(135deg, #9ff3ff, #ffd166);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(.vue-gallery-filter, .vue-template-filter, .vue-character-filter) {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"])
:is(.filter-count, .vue-gallery-action-status, .vue-template-social-brief) {
    color: var(--ink);
}

body.animaker-theme-night:is([data-page="me"], [data-page="export"], [data-page="work"]) {
    --muted: #c7bfd7;
    --text: #e7e0f3;
    --line: rgba(255, 255, 255, 0.16);
}

body.animaker-theme-night:is([data-page="me"], [data-page="export"], [data-page="work"])
:is(
    .vue-me-hero,
    .vue-me-stats article,
    .vue-me-more-section,
    .vue-me-ops-focus,
    .vue-me-health-grid article,
    .vue-me-operating-queue,
    .vue-me-pipeline,
    .vue-me-pipeline-grid article,
    .vue-me-workflow article,
    .vue-me-command-card,
    .vue-me-export-queue,
    .vue-me-section-nav a,
    .vue-export-summary,
    .vue-export-sheet,
    .vue-export-copy-grid article,
    .vue-export-template-card,
    .vue-export-checklist,
    .vue-export-social-preview,
    .vue-export-share-card,
    .vue-export-caption-card,
    .vue-export-launch,
    .vue-export-launch-grid article,
    .vue-work-dock,
    .vue-work-side,
    .vue-work-action-path,
    .vue-work-nav a,
    .vue-work-launchpad,
    .vue-work-launchpad-grid article,
    .vue-work-task-card,
    .vue-work-launchpad-checklist,
    .detail-shell,
    .detail-panel,
    .detail-comments,
    .oc-profile-card,
    .oc-lore-card,
    .version-card,
    .comment-item,
    .work-card,
    .empty-state
) {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.044)),
            rgba(17, 16, 27, 0.9);
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.24);
}

body.animaker-theme-night:is([data-page="me"], [data-page="export"], [data-page="work"])
:is(
    .vue-me-triage,
    .vue-me-achievement,
    .vue-export-achievement,
    .vue-export-readiness,
    .vue-export-launch-brief,
    .vue-work-readiness
) {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            radial-gradient(circle at 12% 10%, rgba(55, 213, 229, 0.13), transparent 34%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.12), transparent 30%),
            linear-gradient(135deg, rgba(17, 16, 27, 0.98), rgba(26, 24, 38, 0.96));
}

body.animaker-theme-night:is([data-page="me"], [data-page="export"], [data-page="work"])
:is(
    .vue-me-hero-copy p,
    .vue-me-next p,
    .vue-me-triage-copy p,
    .vue-me-triage-copy small,
    .vue-me-triage-grid p,
    .vue-me-ops-focus p,
    .vue-me-health-grid p,
    .vue-me-operating-queue p,
    .vue-me-operating-queue small,
    .vue-me-more-section > summary strong,
    .vue-me-pipeline-head p,
    .vue-me-pipeline-grid p,
    .vue-me-pipeline-items span,
    .vue-me-achievement-copy p,
    .vue-me-sprint p,
    .vue-me-workflow p,
    .vue-me-command-card p,
    .vue-me-export-queue p,
    .vue-export-summary p,
    .vue-export-flow p,
    .vue-export-achievement-copy p,
    .vue-export-achievement-grid p,
    .vue-export-template-card p,
    .vue-export-template-card small,
    .vue-export-checklist p,
    .vue-export-preview-head p,
    .vue-export-share-body p,
    .vue-export-caption-card > p,
    .vue-export-caption-sections span,
    .vue-export-readiness-copy p,
    .vue-export-readiness-grid p,
    .vue-export-launch-copy p,
    .vue-export-launch-grid p,
    .vue-export-launch-brief small,
    .vue-export-launch-brief ol,
    .vue-export-section-grid p,
    .vue-export-copy-meta span,
    .vue-work-main blockquote,
    .vue-work-next,
    .vue-work-action-path p,
    .vue-work-readiness-copy p,
    .vue-work-readiness-grid p,
    .vue-work-launchpad-copy p,
    .vue-work-launchpad-grid p,
    .vue-work-task-head p,
    .vue-work-task-steps p,
    .vue-work-task-copy small,
    .vue-work-launchpad-checklist li,
    .detail-panel p,
    .detail-field strong,
    .oc-lore-card p,
    .version-card p,
    .comment-item p,
    .card-body p,
    .empty-state p
) {
    color: rgba(231, 224, 243, 0.84);
}

body.animaker-theme-night:is([data-page="me"], [data-page="export"], [data-page="work"]) .empty-state h2 {
    color: #fff;
}

body.animaker-theme-night[data-page="me"] .vue-me-more-section > summary strong {
    color: #fff;
}

body.animaker-theme-night[data-page="me"] .vue-me-more-section > summary span {
    color: #9ff3ff;
}

body.animaker-theme-night:is([data-page="me"], [data-page="export"], [data-page="work"])
:is(
    .vue-me-stats span,
    .vue-me-section-nav span,
    .vue-me-workflow span,
    .vue-me-health-grid span,
    .vue-me-operating-queue span,
    .vue-me-pipeline-lane-head span,
    .vue-export-caption-card span,
    .vue-export-launch-grid span,
    .vue-export-launch-brief span,
    .vue-export-sheet-head span,
    .vue-export-section-grid span,
    .vue-work-stats span,
    .vue-work-action-path span,
    .vue-work-nav span,
    .detail-field span,
    .version-card small,
    .muted
) {
    color: rgba(199, 191, 215, 0.9);
}

body.animaker-theme-night:is([data-page="me"], [data-page="export"], [data-page="work"])
:is(
    .vue-export-caption-card pre,
    .vue-export-copy-grid pre,
    .vue-me-sprint pre,
    .vue-work-brief pre
) {
    color: rgba(248, 245, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

body.animaker-theme-night:is([data-page="me"], [data-page="export"], [data-page="work"])
:is(
    .vue-export-share-tags span,
    .vue-export-status,
    .vue-me-health-grid a,
    .vue-me-operating-queue a,
    .vue-me-pipeline-action,
    .vue-work-launchpad-grid a,
    .vue-work-tags span,
    .oc-tag-row span,
    .pill
) {
    color: var(--ink);
    border-color: rgba(55, 213, 229, 0.22);
    background: rgba(55, 213, 229, 0.1);
}

body.animaker-theme-night:is([data-page="user"], [data-page="feed"], [data-page="ip"]) {
    --muted: #c7bfd7;
    --text: #e7e0f3;
    --line: rgba(255, 255, 255, 0.16);
}

body.animaker-theme-night:is([data-page="user"], [data-page="feed"], [data-page="ip"])
:is(
    .vue-user-hero,
    .vue-user-stats article,
    .vue-user-about article,
    .vue-user-fit,
    .vue-user-fit-grid article,
    .vue-user-route,
    .vue-user-route-steps article,
    .vue-user-inspiration,
    .vue-user-inspiration-grid article,
    .vue-user-cocreate,
    .vue-user-cocreate-grid article,
    .vue-user-brief,
    .vue-user-work-card,
    .vue-feed-hero,
    .vue-feed-next,
    .vue-feed-stats article,
    .vue-feed-response,
    .vue-feed-response-grid article,
    .vue-feed-loop,
    .vue-feed-loop-grid article,
    .vue-feed-command,
    .vue-feed-priority-grid article,
    .vue-feed-following-strip,
    .feed-card,
    .vue-feed-recommend,
    .vue-feed-player-card,
    .vue-feed-work-grid .work-card,
    .vue-ip-hero,
    .vue-ip-copy,
    .vue-ip-stats article,
    .vue-ip-section-grid article,
    .vue-ip-series,
    .vue-ip-series-grid article,
    .vue-ip-production,
    .vue-ip-production-grid article,
    .vue-ip-next-cast,
    .vue-ip-next-cast-grid article,
    .vue-ip-cocreate,
    .vue-ip-roadmap article,
    .vue-ip-cocreate-brief,
    .vue-ip-check-grid article,
    .vue-ip-block,
    .vue-relation-lines article,
    .vue-ip-character-card,
    .vue-ip-activity-card,
    .vue-ip-version-list article,
    .empty-state
) {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.044)),
            rgba(17, 16, 27, 0.9);
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.24);
}

body.animaker-theme-night:is([data-page="user"], [data-page="feed"], [data-page="ip"])
:is(
    .vue-user-fit,
    .vue-user-route,
    .vue-user-cocreate,
    .vue-feed-response,
    .vue-feed-loop,
    .vue-feed-command,
    .vue-ip-series,
    .vue-ip-production,
    .vue-ip-cocreate,
    .vue-ip-cocreate-brief
) {
    background:
            radial-gradient(circle at 10% 8%, rgba(55, 213, 229, 0.13), transparent 34%),
            radial-gradient(circle at 96% 0, rgba(255, 209, 102, 0.11), transparent 30%),
            linear-gradient(135deg, rgba(17, 16, 27, 0.98), rgba(26, 24, 38, 0.96));
}

body.animaker-theme-night:is([data-page="user"], [data-page="feed"], [data-page="ip"])
:is(
    .vue-user-identity p,
    .vue-user-feature small,
    .vue-user-next p,
    .vue-user-stats small,
    .vue-user-about p,
    .vue-user-fit-copy p,
    .vue-user-fit-grid p,
    .vue-user-route-copy p,
    .vue-user-route-steps p,
    .vue-user-inspiration-grid p,
    .vue-user-cocreate-copy p,
    .vue-user-cocreate-grid p,
    .vue-user-brief pre,
    .vue-feed-hero p,
    .vue-feed-next p,
    .vue-feed-stats small,
    .vue-feed-response-copy p,
    .vue-feed-response-copy small,
    .vue-feed-response-grid p,
    .vue-feed-loop-head p,
    .vue-feed-loop-grid p,
    .vue-feed-command-head p,
    .vue-feed-priority-grid p,
    .vue-feed-player-main p,
    .vue-feed-player-main small,
    .feed-main p,
    .vue-ip-copy blockquote,
    .vue-ip-copy p,
    .vue-ip-stats small,
    .vue-ip-section-grid p,
    .vue-ip-series-copy p,
    .vue-ip-series-copy small,
    .vue-ip-series-grid p,
    .vue-ip-production-copy p,
    .vue-ip-production-grid p,
    .vue-ip-next-cast-grid p,
    .vue-ip-cocreate-copy p,
    .vue-ip-roadmap p,
    .vue-ip-check-grid p,
    .vue-ip-cocreate-brief pre,
    .vue-relation-lines p,
    .vue-ip-character-card p,
    .vue-ip-character-card small,
    .vue-ip-activity-card p,
    .vue-ip-version-list small,
    .empty-state p
) {
    color: rgba(231, 224, 243, 0.84);
}

body.animaker-theme-night:is([data-page="user"], [data-page="feed"], [data-page="ip"]) .empty-state h2 {
    color: #fff;
}

body.animaker-theme-night:is([data-page="user"], [data-page="feed"], [data-page="ip"])
:is(
    .vue-user-next span,
    .vue-user-stats span,
    .vue-user-about span,
    .vue-user-fit-grid span,
    .vue-user-route-steps span,
    .vue-user-inspiration span,
    .vue-user-cocreate-grid span,
    .vue-user-brief span,
    .vue-feed-stats span,
    .vue-feed-response-grid span,
    .vue-feed-loop-grid span,
    .vue-feed-filter-chip span,
    .vue-feed-priority-grid span,
    .vue-feed-following-strip > span,
    .vue-ip-stats span,
    .vue-ip-section-grid span,
    .vue-ip-series-grid span,
    .vue-ip-production-grid span,
    .vue-ip-next-cast span,
    .vue-ip-roadmap span,
    .vue-ip-cocreate-brief span,
    .vue-ip-check-grid span,
    .vue-ip-version-list span,
    .muted
) {
    color: rgba(199, 191, 215, 0.9);
}

body.animaker-theme-night:is([data-page="user"], [data-page="feed"], [data-page="ip"])
:is(
    .vue-user-tags a,
    .vue-feed-filter-chip,
    .vue-feed-loop-grid a,
    .vue-feed-player-actions a:not(.secondary-btn),
    .vue-ip-production-grid a,
    .vue-ip-next-cast-grid a,
    .vue-ip-series-grid a,
    .pill
) {
    color: var(--ink);
    border-color: rgba(55, 213, 229, 0.22);
    background: rgba(55, 213, 229, 0.1);
}

body.animaker-theme-night:is([data-page="user"], [data-page="feed"], [data-page="ip"])
:is(
    .vue-user-brief pre,
    .vue-ip-cocreate-brief pre,
    .comment-modal
) {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

/* Local UX pass: make creation feel guided, less like nested forms. */
body[data-page="studio"] .studio-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"] .studio-panel.is-active {
    border-color: transparent;
    box-shadow: none;
}

body[data-page="studio"] .studio-rail .vue-route-next,
body[data-page="studio"] .studio-rail .vue-route-focus-card {
    display: none;
}

body[data-page="studio"] .vue-core-dock,
body[data-page="studio"] .vue-visual-dock,
body[data-page="studio"] .vue-story-dock,
body[data-page="studio"] .vue-image-dock,
body[data-page="studio"] .vue-publish-dock {
    border-color: rgba(230, 225, 236, 0.86);
    box-shadow: 0 14px 34px rgba(39, 28, 62, 0.055);
}

body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
) small {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
):is(:hover, :focus-within) small {
    max-height: 80px;
    opacity: 1;
    transform: translateY(0);
}

body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
) .vue-field-suggestions {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.2s ease, margin 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
):is(:hover, :focus-within) .vue-field-suggestions {
    max-height: 96px;
    margin-top: 2px;
    opacity: 1;
    transform: translateY(0);
}

body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
).is-missing > span::after,
body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
).is-complete > span::after {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-4px);
    white-space: nowrap;
    transition: max-width 0.18s ease, margin 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
):is(:hover, :focus-within).is-missing > span::after,
body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
):is(:hover, :focus-within).is-complete > span::after {
    max-width: 5em;
    margin-left: 8px;
    opacity: 1;
    transform: translateX(0);
}

body[data-page="studio"] .vue-studio-refine > summary p {
    display: none;
}

body[data-page="studio"] .vue-studio-refine[open] > summary p {
    display: block;
}

body[data-page="studio"] .vue-core-summary {
    display: none;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-copy p,
body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-copy small {
    color: rgba(255, 255, 255, 0.9);
}

body[data-page="studio"].studio-theme-night :is(
    .studio-mode-copy p,
    .studio-mode-roadmap li,
    .studio-path-banner p,
    .vue-step-head p:not(.eyebrow),
    .vue-core-head p:last-child,
    .vue-visual-head p:last-child,
    .vue-story-head p:last-child,
    .vue-image-head p:last-child,
    .vue-publish-head p:last-child,
    .vue-core-mission p,
    .vue-visual-route-card p,
    .vue-story-board p,
    .vue-image-readiness-head p,
    .vue-publish-preview-head p
) {
    color: rgba(248, 245, 255, 0.88);
}

body[data-page="studio"].studio-theme-night :is(
    .secondary-btn,
    .vue-core-quick-grid button,
    .vue-visual-route-card button,
    .vue-publish-preview-gaps button,
    .vue-publish-gap-row button
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-core-field input,
    .vue-core-field select,
    .vue-visual-field input,
    .vue-visual-field textarea,
    .vue-story-field input,
    .vue-story-field textarea,
    .vue-image-field textarea
) {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

body[data-page="studio"].studio-theme-night input::placeholder,
body[data-page="studio"].studio-theme-night textarea::placeholder {
    color: rgba(248, 245, 255, 0.64);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-templates-copy p,
    .vue-characters-copy p,
    .vue-pathfinder-copy p,
    .vue-template-more > summary p,
    .vue-character-more > summary p,
    .vue-character-dimension-grid p,
    .vue-template-guide-grid p,
    .vue-character-guide-grid p
) {
    color: rgba(248, 245, 255, 0.86);
}

/* Local UX pass: make template/character pages feel like choice-driven start screens, not catalogs. */
body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
    gap: 18px;
    padding-top: 32px;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
    align-items: center;
    min-height: 360px;
    padding: 22px 26px;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy, .vue-characters-copy) {
    gap: 10px;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
    max-width: 11em;
    font-size: clamp(46px, 5.2vw, 68px);
    line-height: 1.02;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy p, .vue-characters-copy p) {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.68;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
    height: 300px;
    min-height: 300px;
    box-shadow: 0 18px 42px rgba(22, 19, 29, 0.14);
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature img, .vue-character-feature img) {
    height: 100%;
    min-height: 300px;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(135deg, rgba(18, 17, 29, 0.96), rgba(36, 32, 47, 0.9)),
            radial-gradient(circle at 12% 18%, rgba(55, 213, 229, 0.2), transparent 34%),
            radial-gradient(circle at 86% 6%, rgba(255, 209, 102, 0.16), transparent 28%);
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.28);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
    color: #fff;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy p, .vue-characters-copy p) {
    color: rgba(248, 245, 255, 0.82);
}

body[data-page="characters"] .vue-character-feature img {
    object-position: center 24%;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-creator-nextline, .vue-character-nextline) {
    grid-template-columns: minmax(260px, 0.64fr) minmax(0, 1.36fr);
    gap: 14px;
    padding: 18px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-copy {
    gap: 10px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-copy h2 {
    max-width: 8.5em;
    font-size: clamp(28px, 3.1vw, 40px);
    line-height: 1.08;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-copy p {
    font-size: 14px;
    line-height: 1.62;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps {
    gap: 8px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps a {
    min-height: 118px;
    gap: 8px;
    padding: 14px;
    align-content: start;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps strong {
    font-size: 18px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps p {
    max-height: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps a:hover p,
body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps a:focus-visible p {
    max-height: 72px;
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-creator-nextline, .vue-character-nextline) {
        grid-template-columns: 1fr;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
        height: 360px;
    }
}

@media (max-width: 560px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
        max-width: 7.5em;
        font-size: clamp(34px, 10vw, 44px);
        line-height: 1.08;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy p, .vue-characters-copy p) {
        width: min(100%, 20em);
        overflow-wrap: anywhere;
    }

    body[data-page="templates"] .vue-template-source-notice {
        grid-template-columns: 1fr;
    }
}

/* Local UX pass: shorten the studio runway so the editable OC steps arrive sooner. */
body[data-page="studio"] .studio-hero-title.page-title {
    min-height: min(64vh, 660px);
    align-content: center;
    margin-bottom: 14px;
    padding: clamp(24px, 3vw, 34px);
}

body[data-page="studio"] .studio-hero-title.page-title > * {
    max-width: 900px;
}

body[data-page="studio"] .studio-hero-title.page-title h1 {
    max-width: 900px;
    margin-bottom: 14px;
    font-size: clamp(44px, 4.7vw, 70px);
    line-height: 0.98;
}

body[data-page="studio"] .studio-hero-title.page-title p:not(.eyebrow) {
    max-width: 720px;
    line-height: 1.58;
}

body[data-page="studio"] .studio-theme-switch {
    margin-top: 12px;
}

body[data-page="studio"] .vue-route-hero-shell {
    margin-top: 14px;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-card {
    max-width: 800px;
    min-height: 152px;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-copy strong {
    font-size: clamp(22px, 2.5vw, 30px);
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-copy small {
    display: none;
}

body[data-page="studio"] .studio-hero-beats {
    max-width: 800px;
    margin-top: 12px;
}

body[data-page="studio"] .studio-hero-beats article {
    min-height: 58px;
    gap: 4px;
    padding: 10px 12px;
}

body[data-page="studio"] .studio-hero-beats small {
    display: none;
}

body[data-page="studio"] .studio-mode-hub {
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    gap: 14px;
    margin-bottom: 14px;
    padding: 14px;
    box-shadow: 0 14px 34px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .studio-mode-copy {
    gap: 9px;
}

body[data-page="studio"] .studio-mode-copy h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.12;
}

body[data-page="studio"] .studio-mode-copy p:not(.eyebrow) {
    font-size: 13px;
    line-height: 1.52;
}

body[data-page="studio"] .studio-mode-roadmaps,
body[data-page="studio"] .studio-mode-proof {
    display: none;
}

body[data-page="studio"] .studio-mode-switch {
    gap: 8px;
}

body[data-page="studio"] .studio-mode-card {
    min-height: 78px;
    gap: 4px;
    padding: 12px;
}

body[data-page="studio"] .studio-mode-card strong {
    font-size: 16px;
}

body[data-page="studio"] .studio-mode-card small,
body[data-page="studio"] .studio-mode-card em {
    display: none;
}

body[data-page="studio"] .studio-quick-panel {
    gap: 10px;
    padding: 14px;
}

body[data-page="studio"] .studio-quick-head {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 10px;
}

body[data-page="studio"] .studio-quick-head strong {
    font-size: 17px;
}

body[data-page="studio"] .studio-quick-guide,
body[data-page="studio"] .studio-spark-strip,
body[data-page="studio"] .studio-quick-status {
    display: none;
}

body[data-page="studio"] .studio-quick-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="studio"] .studio-quick-presets button {
    min-height: 38px;
    padding: 8px;
}

body[data-page="studio"] .studio-quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="studio"] .studio-quick-actions .primary-btn {
    grid-column: auto;
}

body[data-page="studio"] .studio-path-banner {
    display: none;
}

body[data-page="studio"] .studio-workbench {
    margin-top: 14px;
}

body[data-page="studio"].studio-theme-night .vue-route-steps button {
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(248, 245, 255, 0.9);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: none;
}

body[data-page="studio"].studio-theme-night .vue-route-steps button:hover,
body[data-page="studio"].studio-theme-night .vue-route-steps button.active {
    border-color: rgba(55, 213, 229, 0.44);
    background: linear-gradient(135deg, rgba(55, 213, 229, 0.18), rgba(255, 209, 102, 0.12));
    box-shadow: 0 12px 28px rgba(55, 213, 229, 0.14);
}

body[data-page="studio"].studio-theme-night .vue-route-steps button.complete {
    background: rgba(87, 204, 153, 0.14);
}

body[data-page="studio"].studio-theme-night .vue-route-steps strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-route-steps small {
    color: rgba(231, 224, 243, 0.78);
}

body[data-page="studio"].studio-theme-night .vue-route-steps span {
    color: #9ff3ff;
    background: rgba(55, 213, 229, 0.16);
}

body[data-page="studio"].studio-theme-night .vue-route-steps button.active span {
    color: #14131d;
    background: linear-gradient(135deg, #9ff3ff, #ffd166);
}

/* Local UX pass: make the studio quick start feel like a launch strip, not a second dashboard. */
body[data-page="studio"] .studio-mode-hub {
    grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    margin: 12px 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

body[data-page="studio"] .studio-mode-hub::before {
    display: none;
}

body[data-page="studio"] .studio-mode-copy {
    align-content: center;
    gap: 10px;
    padding: 8px 0;
}

body[data-page="studio"] .studio-mode-copy p:not(.eyebrow) {
    display: none;
}

body[data-page="studio"] .studio-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}

body[data-page="studio"] .studio-mode-card {
    width: auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
}

body[data-page="studio"] .studio-mode-card::before,
body[data-page="studio"] .studio-mode-card span {
    display: none;
}

body[data-page="studio"] .studio-mode-card strong {
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

body[data-page="studio"] .studio-mode-card.active {
    background: linear-gradient(135deg, rgba(98, 214, 208, 0.96), rgba(255, 209, 102, 0.96));
}

body[data-page="studio"] .studio-quick-panel {
    grid-template-columns: minmax(170px, 0.35fr) minmax(0, 1fr) minmax(150px, auto);
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 16px;
}

body[data-page="studio"] .studio-quick-head {
    grid-template-columns: 1fr;
    gap: 5px;
}

body[data-page="studio"] .studio-quick-head strong {
    font-size: 16px;
}

body[data-page="studio"] .studio-quick-actions {
    grid-template-columns: 1fr;
}

body[data-page="studio"] .studio-quick-actions .secondary-btn {
    display: none;
}

@media (max-width: 900px) {
    body[data-page="studio"] .studio-hero-title.page-title {
        min-height: auto;
    }

    body[data-page="studio"] .studio-mode-hub,
    body[data-page="studio"] .studio-mode-switch,
    body[data-page="studio"] .studio-quick-presets,
    body[data-page="studio"] .studio-quick-actions {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .studio-quick-head {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .studio-quick-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    body[data-page="studio"],
    body[data-page="studio"] main {
        overflow-x: hidden;
    }

    body[data-page="studio"] .studio-hero-title.page-title > * {
        max-width: min(100%, 330px);
    }

    body[data-page="studio"] .studio-hero-title.page-title h1 {
        max-width: 7.2em;
        font-size: clamp(32px, 10vw, 42px);
        line-height: 1.06;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    body[data-page="studio"] .studio-hero-title.page-title p:not(.eyebrow) {
        width: min(100%, 20em);
        max-width: 100%;
        font-size: 15px;
        line-height: 1.72;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-card {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

@media (max-width: 560px) {
    body[data-page="gallery"] main {
        width: min(100% - 28px, 1180px);
    }

    body[data-page="gallery"] .vue-gallery {
        overflow-x: hidden;
        padding-top: 24px;
    }

    body[data-page="gallery"] .vue-gallery-hero,
    body[data-page="gallery"] .vue-gallery-pulse,
    body[data-page="gallery"] .vue-gallery-mission,
    body[data-page="gallery"] .vue-gallery-creator-radar,
    body[data-page="gallery"] .vue-gallery-cocreate,
    body[data-page="gallery"] .vue-gallery-discovery,
    body[data-page="gallery"] .vue-gallery-filter {
        padding: 16px;
    }

    body[data-page="gallery"] .vue-gallery-copy h1 {
        font-size: clamp(34px, 11vw, 44px);
    }

    body[data-page="gallery"] .vue-gallery-source-notice {
        grid-template-columns: 1fr;
    }

    .shared-nav-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
    }

    .shared-nav-links a {
        justify-content: center;
        width: 100%;
        min-height: 32px;
        padding: 0 6px;
        font-size: 12px;
    }

    .shared-nav-actions {
        overflow: visible;
        flex-wrap: wrap;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
        overflow-x: hidden;
        padding-top: 22px;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
        padding: 18px;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
        max-width: 100%;
        font-size: clamp(32px, 10vw, 38px);
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy p, .vue-characters-copy p) {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.72;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-actions, .vue-characters-actions) {
        display: grid;
        grid-template-columns: 1fr;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-actions .primary-link, .vue-templates-actions .secondary-btn, .vue-characters-actions .primary-link, .vue-characters-actions .secondary-btn) {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-hero-boundary-rail {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-hero-boundary-card {
        min-height: 0;
        padding: 12px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-hero-boundary-card p {
        max-width: none;
        font-size: 13px;
        line-height: 1.48;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
        height: 300px;
    }
}

/* Local UX pass: soften the box geometry across the creator surfaces. */
:root {
    --animaker-radius-control: 14px;
    --animaker-radius-card: 18px;
    --animaker-radius-panel: 24px;
    --animaker-radius-media: 20px;
}

body :is(
    .primary-link,
    .primary-btn,
    .secondary-btn,
    .ghost-link,
    .theme-toggle-button,
    .nav-button,
    .shared-nav-links a,
    .nav a,
    .pill,
    .vue-filter-chip,
    .vue-sort-chip,
    .vue-template-chip,
    .vue-world-chip-row .secondary-btn,
    button,
    input,
    textarea,
    select
) {
    border-radius: var(--animaker-radius-control);
}

body :is(
    .auth-card,
    .hero-panel,
    .work-card,
    .comment-modal,
    [class*="-card"],
    [class*="-dock"],
    [class*="-item"],
    [class*="-empty"],
    [class*="-preview"],
    [class*="-filter"],
    [class*="-row"]
) {
    border-radius: var(--animaker-radius-card);
}

body :is(
    .page-title,
    .studio-hero-title.page-title,
    .studio-mode-hub,
    .studio-workbench,
    .studio-quick-panel,
    .studio-panel,
    .vue-home-hero,
    .vue-templates-hero,
    .vue-characters-hero,
    .vue-creator-nextline,
    .vue-character-nextline,
    .vue-template-pathfinder,
    .vue-character-pathfinder,
    .vue-template-starter,
    .vue-character-queue,
    .vue-gallery-pulse,
    .vue-gallery-mission,
    .vue-gallery-creator-radar,
    .vue-gallery-cocreate,
    .vue-gallery-workspace,
    .vue-gallery-discovery
) {
    border-radius: var(--animaker-radius-panel);
}

body :is(
    .vue-template-feature,
    .vue-character-feature,
    .vue-template-feature img,
    .vue-character-feature img,
    .vue-template-card > img,
    .vue-character-card img,
    .work-card > img,
    .card-cover,
    .cover-preview,
    .export-preview
) {
    border-radius: var(--animaker-radius-media);
}

body :is(
    .vue-nextline-steps a,
    .vue-path-card,
    .vue-template-starter-grid article,
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-character-queue-grid article,
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article,
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission-grid article,
    .vue-gallery-cocreate-grid article,
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field
) {
    border-radius: var(--animaker-radius-card);
}

/* Local UX pass: keep guidance discoverable without making the page read like a manual. */
body[data-page="home"] .vue-home-hero-routes small,
body[data-page="home"] .vue-home-starter-card p,
body[data-page="gallery"] :is(.vue-gallery-pulse-grid p, .vue-gallery-mission-grid p) {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="home"] .vue-home-hero-routes a:is(:hover, :focus-visible) small,
body[data-page="home"] .vue-home-starter-card:is(:hover, :focus-visible) p,
body[data-page="gallery"] :is(.vue-gallery-pulse-grid article, .vue-gallery-mission-grid article):is(:hover, :focus-within) p {
    max-height: 96px;
    opacity: 1;
    transform: translateY(0);
}

body[data-page="home"] .vue-home-hero-routes a,
body[data-page="home"] .vue-home-starter-card,
body[data-page="gallery"] :is(.vue-gallery-pulse-grid article, .vue-gallery-mission-grid article) {
    align-content: start;
}

body[data-page="home"] .vue-home-hero-routes a {
    min-height: 92px;
}

body[data-page="gallery"] :is(.vue-gallery-pulse-grid article, .vue-gallery-mission-grid article) {
    min-height: 136px;
}

body[data-page="gallery"] :is(.vue-gallery-pulse-grid, .vue-gallery-mission-grid) {
    align-items: start;
}

/* Local UX pass v364: make the studio feel like guided creation instead of nested forms. */
body[data-page="studio"].studio-mode-quick .vue-route-progress {
    padding: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 32px rgba(39, 28, 62, 0.06);
}

body[data-page="studio"].studio-mode-quick .vue-route-progress-head span,
body[data-page="studio"].studio-mode-quick .vue-route-steps small {
    display: none;
}

body[data-page="studio"].studio-mode-quick .vue-route-progress-head {
    justify-content: flex-start;
}

body[data-page="studio"].studio-mode-quick .vue-route-progress-head strong {
    font-size: 16px;
}

body[data-page="studio"].studio-mode-quick .vue-route-steps {
    gap: 7px;
}

body[data-page="studio"].studio-mode-quick .vue-route-steps button {
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px 10px;
}

body[data-page="studio"].studio-mode-quick .vue-route-steps span {
    width: 28px;
    height: 28px;
}

body[data-page="studio"].studio-mode-quick .vue-route-more {
    margin-top: -4px;
    border-style: dashed;
    background: rgba(255, 255, 255, 0.48);
}

body[data-page="studio"].studio-mode-quick .vue-route-more:not([open]) {
    opacity: 0.72;
}

body[data-page="studio"].studio-mode-quick .vue-core-dock {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"].studio-mode-quick .vue-core-head {
    grid-template-columns: minmax(0, 1fr);
}

body[data-page="studio"].studio-mode-quick .vue-core-head p:last-child,
body[data-page="studio"].studio-mode-quick .vue-core-head > span,
body[data-page="studio"].studio-mode-quick .vue-core-mission p,
body[data-page="studio"].studio-mode-quick .vue-core-actions small,
body[data-page="studio"].studio-mode-quick .vue-creator-mode-coach,
body[data-page="studio"].studio-mode-quick .vue-core-summary,
body[data-page="studio"].studio-mode-quick .vue-candidate-empty {
    display: none;
}

body[data-page="studio"].studio-mode-quick .vue-core-mission {
    padding: 16px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.18), transparent 34%);
    box-shadow: 0 14px 34px rgba(39, 28, 62, 0.07);
}

body[data-page="studio"].studio-mode-quick .vue-core-mission:hover p,
body[data-page="studio"].studio-mode-quick .vue-core-mission:focus-within p {
    display: block;
}

body[data-page="studio"].studio-mode-quick .vue-core-mission > div:last-child {
    justify-content: flex-end;
}

body[data-page="studio"].studio-mode-quick .vue-core-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="studio"].studio-mode-quick .vue-core-actions button {
    position: relative;
    min-height: 92px;
    align-content: center;
    overflow: visible;
}

body[data-page="studio"].studio-mode-quick .vue-core-actions button:hover small,
body[data-page="studio"].studio-mode-quick .vue-core-actions button:focus-visible small {
    position: absolute;
    z-index: 5;
    left: 10px;
    right: 10px;
    bottom: calc(100% + 8px);
    display: block;
    padding: 9px 10px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: var(--animaker-radius-control);
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(39, 28, 62, 0.13);
}

body[data-page="studio"].studio-mode-quick .vue-core-inspiration,
body[data-page="studio"].studio-mode-quick .vue-core-quick-panel,
body[data-page="studio"].studio-mode-quick .vue-candidate-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"].studio-mode-quick .vue-board-dock {
    gap: 12px;
}

body[data-page="studio"].studio-mode-quick .vue-board-cover {
    min-height: 360px;
}

body[data-page="studio"].studio-mode-quick .vue-board-cover img,
body[data-page="studio"].studio-mode-quick .vue-board-empty-cover {
    height: 360px;
    min-height: 360px;
}

body[data-page="studio"].studio-mode-quick .vue-board-empty-cover {
    align-content: space-between;
    gap: 10px;
    padding: 18px 18px 50px;
}

body[data-page="studio"].studio-mode-quick .vue-board-cover-topline strong,
body[data-page="studio"].studio-mode-quick .vue-board-empty-grid,
body[data-page="studio"].studio-mode-quick .vue-board-empty-cover > p,
body[data-page="studio"].studio-mode-quick .vue-board-summary,
body[data-page="studio"].studio-mode-quick .vue-board-status {
    display: none;
}

body[data-page="studio"].studio-mode-quick .vue-board-empty-cover:hover .vue-board-empty-grid,
body[data-page="studio"].studio-mode-quick .vue-board-empty-cover:focus-within .vue-board-empty-grid {
    position: absolute;
    z-index: 4;
    left: 20px;
    right: 20px;
    bottom: 58px;
    display: grid;
}

body[data-page="studio"].studio-mode-quick .vue-board-empty-head {
    width: min(100%, 340px);
    padding: 12px 14px;
}

body[data-page="studio"].studio-mode-quick .vue-board-empty-stage {
    min-height: 148px;
    grid-template-columns: minmax(100px, 0.72fr) minmax(0, 1.28fr);
    padding: 10px;
}

body[data-page="studio"].studio-mode-quick .vue-board-silhouette {
    min-height: 126px;
}

body[data-page="studio"].studio-mode-quick .vue-board-blueprint > small {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body[data-page="studio"].studio-mode-quick .vue-board-empty-head small {
    display: none;
}

body[data-page="studio"].studio-mode-quick .vue-board-cover > span {
    min-height: 30px;
    font-size: 12px;
}

body[data-page="studio"].studio-mode-quick .vue-board-info > p:not(.eyebrow),
body[data-page="studio"].studio-mode-quick .vue-board-palette {
    display: none;
}

body[data-page="studio"].studio-mode-quick .vue-board-info {
    gap: 8px;
}

body[data-page="studio"].studio-mode-quick .vue-board-info h2 {
    font-size: 26px;
}

body[data-page="studio"].studio-mode-quick .vue-board-actions {
    grid-template-columns: 0.78fr 1.22fr;
}

body[data-page="studio"].studio-theme-night .vue-core-actions button:hover small,
body[data-page="studio"].studio-theme-night .vue-core-actions button:focus-visible small {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(22, 19, 29, 0.96);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

body[data-page="studio"].studio-theme-night .secondary-btn,
body[data-page="studio"].studio-theme-night .ghost-link {
    color: #f8f5ff;
}

body[data-page="studio"].studio-theme-night .nav a:hover,
body[data-page="studio"].studio-theme-night .nav a.active,
body[data-page="studio"].studio-theme-night .shared-nav-links a:hover,
body[data-page="studio"].studio-theme-night .shared-nav-links a.active {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

/* Local UX pass v365: apply the simplified creation rhythm to both quick and advanced modes. */
body[data-page="studio"] .vue-route-progress {
    padding: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 32px rgba(39, 28, 62, 0.06);
}

body[data-page="studio"] .vue-route-progress-head span,
body[data-page="studio"] .vue-route-steps small {
    display: none;
}

body[data-page="studio"] .vue-route-progress-head {
    justify-content: flex-start;
}

body[data-page="studio"] .vue-route-progress-head strong {
    font-size: 16px;
}

body[data-page="studio"] .vue-route-steps {
    gap: 7px;
}

body[data-page="studio"] .vue-route-steps button {
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px 10px;
}

body[data-page="studio"] .vue-route-steps span {
    width: 28px;
    height: 28px;
}

body[data-page="studio"] .vue-route-more {
    margin-top: -4px;
    border-style: dashed;
    background: rgba(255, 255, 255, 0.48);
}

body[data-page="studio"] .vue-route-more:not([open]) {
    opacity: 0.72;
}

body[data-page="studio"] .vue-core-dock {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"] .vue-core-head {
    grid-template-columns: minmax(0, 1fr);
}

body[data-page="studio"] .vue-core-head p:last-child,
body[data-page="studio"] .vue-core-head > span,
body[data-page="studio"] .vue-core-mission p,
body[data-page="studio"] .vue-core-actions small,
body[data-page="studio"] .vue-creator-mode-coach,
body[data-page="studio"] .vue-core-summary,
body[data-page="studio"] .vue-candidate-empty {
    display: none;
}

body[data-page="studio"] .vue-core-mission {
    padding: 16px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.18), transparent 34%);
    box-shadow: 0 14px 34px rgba(39, 28, 62, 0.07);
}

body[data-page="studio"] .vue-core-mission:hover p,
body[data-page="studio"] .vue-core-mission:focus-within p {
    display: block;
}

body[data-page="studio"] .vue-core-mission > div:last-child {
    justify-content: flex-end;
}

body[data-page="studio"] .vue-core-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="studio"] .vue-core-actions button {
    position: relative;
    min-height: 92px;
    align-content: center;
    overflow: visible;
}

body[data-page="studio"] .vue-core-actions button:hover small,
body[data-page="studio"] .vue-core-actions button:focus-visible small {
    position: absolute;
    z-index: 5;
    left: 10px;
    right: 10px;
    bottom: calc(100% + 8px);
    display: block;
    padding: 9px 10px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: var(--animaker-radius-control);
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(39, 28, 62, 0.13);
}

body[data-page="studio"] .vue-core-inspiration,
body[data-page="studio"] .vue-core-quick-panel,
body[data-page="studio"] .vue-candidate-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"] .vue-board-dock {
    gap: 12px;
}

body[data-page="studio"] .vue-board-cover {
    min-height: 360px;
}

body[data-page="studio"] .vue-board-cover img,
body[data-page="studio"] .vue-board-empty-cover {
    height: 360px;
    min-height: 360px;
}

body[data-page="studio"] .vue-board-empty-cover {
    align-content: space-between;
    gap: 10px;
    padding: 18px 18px 50px;
}

body[data-page="studio"] .vue-board-cover-topline strong,
body[data-page="studio"] .vue-board-empty-grid,
body[data-page="studio"] .vue-board-empty-cover > p,
body[data-page="studio"] .vue-board-summary,
body[data-page="studio"] .vue-board-status {
    display: none;
}

body[data-page="studio"] .vue-board-empty-cover:hover .vue-board-empty-grid,
body[data-page="studio"] .vue-board-empty-cover:focus-within .vue-board-empty-grid {
    position: absolute;
    z-index: 4;
    left: 20px;
    right: 20px;
    bottom: 58px;
    display: grid;
}

body[data-page="studio"] .vue-board-empty-head {
    width: min(100%, 340px);
    padding: 12px 14px;
}

body[data-page="studio"] .vue-board-empty-stage {
    min-height: 148px;
    grid-template-columns: minmax(100px, 0.72fr) minmax(0, 1.28fr);
    padding: 10px;
}

body[data-page="studio"] .vue-board-silhouette {
    min-height: 126px;
}

body[data-page="studio"] .vue-board-blueprint > small {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body[data-page="studio"] .vue-board-empty-head small {
    display: none;
}

body[data-page="studio"] .vue-board-cover > span {
    min-height: 30px;
    font-size: 12px;
}

body[data-page="studio"] .vue-board-info > p:not(.eyebrow),
body[data-page="studio"] .vue-board-palette {
    display: none;
}

body[data-page="studio"] .vue-board-info {
    gap: 8px;
}

body[data-page="studio"] .vue-board-info h2 {
    font-size: 26px;
}

body[data-page="studio"] .vue-board-actions {
    grid-template-columns: 0.78fr 1.22fr;
}

body[data-page="studio"].studio-theme-night .vue-core-actions button,
body[data-page="studio"].studio-theme-night .vue-core-inspiration-grid button,
body[data-page="studio"].studio-theme-night .vue-candidate-grid button,
body[data-page="studio"].studio-theme-night .vue-core-quick-grid article {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)),
            radial-gradient(circle at 100% 0, rgba(88, 224, 231, 0.12), transparent 42%),
            rgba(18, 17, 28, 0.88);
}

body[data-page="studio"].studio-theme-night .vue-core-actions strong,
body[data-page="studio"].studio-theme-night .vue-core-inspiration-grid strong,
body[data-page="studio"].studio-theme-night .vue-candidate-grid strong,
body[data-page="studio"].studio-theme-night .vue-core-quick-grid strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-core-actions span,
body[data-page="studio"].studio-theme-night .vue-core-inspiration-grid span,
body[data-page="studio"].studio-theme-night .vue-candidate-grid span,
body[data-page="studio"].studio-theme-night .vue-core-quick-grid span {
    color: #9ff3ff;
    background: rgba(55, 213, 229, 0.12);
}

body[data-page="studio"].studio-theme-night .vue-core-actions small,
body[data-page="studio"].studio-theme-night .vue-core-inspiration-grid small,
body[data-page="studio"].studio-theme-night .vue-candidate-grid small,
body[data-page="studio"].studio-theme-night .vue-candidate-grid em,
body[data-page="studio"].studio-theme-night .vue-core-quick-grid p {
    color: rgba(248, 245, 255, 0.76);
}

body[data-page="studio"].studio-theme-night .vue-core-inspiration-grid button.is-applied,
body[data-page="studio"].studio-theme-night .vue-candidate-grid button.is-applied {
    border-color: rgba(118, 221, 177, 0.32);
    background:
            linear-gradient(145deg, rgba(118, 221, 177, 0.12), rgba(255, 255, 255, 0.045)),
            rgba(18, 17, 28, 0.88);
}

/* Local UX pass v368: later studio steps should feel like a guided canvas, not a checklist. */
body[data-page="studio"] :is(
    .vue-visual-dock,
    .vue-story-dock,
    .vue-image-dock,
    .vue-publish-dock
) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"] :is(
    .vue-visual-head,
    .vue-story-head,
    .vue-image-head,
    .vue-publish-head,
    .vue-step-head
) {
    padding: 14px 0 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"] :is(
    .vue-visual-head > div > p:not(.eyebrow),
    .vue-story-head > div > p:not(.eyebrow),
    .vue-image-head > div > p:not(.eyebrow),
    .vue-publish-head > div > p:not(.eyebrow),
    .vue-step-head > div > p:not(.eyebrow),
    .studio-bridge-head p,
    .studio-bridge-flow p,
    .studio-path-banner p
) {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="studio"] :is(
    .vue-visual-head,
    .vue-story-head,
    .vue-image-head,
    .vue-publish-head,
    .vue-step-head,
    .studio-ai-bridge,
    .studio-publish-bridge,
    .studio-path-banner
):is(:hover, :focus-within) :is(
    p:not(.eyebrow),
    .studio-bridge-flow p
) {
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
}

body[data-page="studio"] :is(
    .vue-visual-route-card,
    .vue-visual-board,
    .vue-story-board,
    .vue-image-brief,
    .vue-publish-options
) {
    gap: 10px;
}

body[data-page="studio"] :is(
    .vue-visual-route-card article,
    .vue-visual-board article,
    .vue-visual-preset-grid button,
    .vue-visual-kit-card,
    .vue-story-board article,
    .vue-story-preset-grid button,
    .vue-image-brief article,
    .vue-image-director-grid button,
    .vue-image-readiness-grid article,
    .vue-publish-options article,
    .vue-publish-checks button,
    .vue-publish-asset-grid article,
    .vue-publish-social-grid article,
    .vue-publish-preview-grid article,
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article
) {
    position: relative;
    overflow: visible;
}

body[data-page="studio"] :is(
    .vue-visual-route-card p,
    .vue-visual-board p,
    .vue-visual-preset-grid small,
    .vue-visual-kit-options small,
    .vue-visual-next-action p,
    .vue-visual-summary p,
    .vue-story-board p,
    .vue-story-next-action p,
    .vue-story-preset-grid small,
    .vue-story-summary p,
    .vue-image-brief small,
    .vue-image-director-grid small,
    .vue-image-readiness-head p,
    .vue-image-readiness-grid p,
    .vue-external-pack-head p,
    .vue-external-checks p,
    .vue-publish-decision p,
    .vue-publish-options p,
    .vue-publish-checks small,
    .vue-publish-asset-grid p,
    .vue-publish-pack-head p,
    .vue-publish-social-grid p,
    .vue-publish-social-grid small,
    .vue-publish-preview-head p,
    .vue-publish-card-body p,
    .vue-publish-caption-preview small
) {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="studio"] :is(
    .vue-visual-route-card article,
    .vue-visual-board article,
    .vue-visual-preset-grid button,
    .vue-visual-kit-card,
    .vue-visual-next-action,
    .vue-visual-summary article,
    .vue-story-board article,
    .vue-story-next-action,
    .vue-story-preset-grid button,
    .vue-story-summary article,
    .vue-image-brief article,
    .vue-image-director-grid button,
    .vue-image-readiness,
    .vue-image-readiness-grid article,
    .vue-external-pack,
    .vue-external-checks article,
    .vue-publish-decision,
    .vue-publish-options article,
    .vue-publish-checks button,
    .vue-publish-asset-grid article,
    .vue-publish-pack,
    .vue-publish-social-grid article,
    .vue-publish-preview,
    .vue-publish-preview-grid article
):is(:hover, :focus-within) :is(p, small) {
    max-height: 150px;
    margin-top: 6px;
    opacity: 1;
    transform: translateY(0);
}

body[data-page="studio"] :is(
    .vue-visual-next-action,
    .vue-story-next-action,
    .vue-image-readiness,
    .vue-publish-decision
) {
    padding: 14px 16px;
    border-radius: var(--animaker-radius-panel);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 255, 0.82)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.16), transparent 36%);
    box-shadow: 0 14px 34px rgba(39, 28, 62, 0.07);
}

body[data-page="studio"] :is(
    .vue-visual-board,
    .vue-story-board,
    .vue-image-director,
    .vue-publish-pack,
    .vue-publish-preview
) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"] :is(.vue-visual-manual, .vue-story-manual, .vue-image-manual, .vue-publish-manual):not([open]) {
    opacity: 0.76;
}

body[data-page="studio"] :is(.vue-visual-manual, .vue-story-manual, .vue-image-manual, .vue-publish-manual) summary p {
    display: none;
}

body[data-page="templates"] :is(
    .vue-template-fit-grid p,
    .vue-template-social-grid p,
    .vue-template-social-points,
    .vue-template-guide-grid p
),
body[data-page="characters"] :is(
    .vue-character-dimension-grid p,
    .vue-character-dimension-grid small,
    .vue-character-completion-grid p,
    .vue-character-remix-grid p,
    .vue-character-guide-grid p
) {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="templates"] :is(
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article
):is(:hover, :focus-within) :is(p, .vue-template-social-points),
body[data-page="characters"] :is(
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article
):is(:hover, :focus-within) :is(p, small) {
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-visual-route-card article,
    .vue-visual-board article,
    .vue-visual-preset-grid button,
    .vue-visual-kit-card,
    .vue-visual-kit-options button,
    .vue-story-board article,
    .vue-story-preset-grid button,
    .vue-image-brief article,
    .vue-image-director-grid button,
    .vue-image-readiness-grid article,
    .vue-publish-options article,
    .vue-publish-checks button,
    .vue-publish-asset-grid article,
    .vue-publish-social-grid article,
    .vue-publish-preview-grid article,
    .studio-bridge-flow article
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)),
            radial-gradient(circle at 100% 0, rgba(88, 224, 231, 0.12), transparent 42%),
            rgba(18, 17, 28, 0.9);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-visual-next-action,
    .vue-story-next-action,
    .vue-image-readiness,
    .vue-publish-decision,
    .studio-ai-bridge,
    .studio-publish-bridge
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)),
            rgba(18, 17, 28, 0.86);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-visual-route-card strong,
    .vue-visual-board strong,
    .vue-story-board strong,
    .vue-image-brief strong,
    .vue-image-director-grid strong,
    .vue-image-readiness strong,
    .vue-publish-options strong,
    .vue-publish-decision strong,
    .studio-bridge-flow strong
) {
    color: #fff;
}

body[data-page="studio"].studio-theme-night :is(
    .vue-visual-route-card span,
    .vue-visual-board span,
    .vue-story-board span,
    .vue-image-brief span,
    .vue-image-director-grid span,
    .vue-image-readiness span,
    .vue-publish-options span,
    .vue-publish-decision span
) {
    color: #9ff3ff;
}

body[data-page="studio"].studio-theme-night :is(
    .vue-visual-route-card p,
    .vue-visual-board p,
    .vue-story-board p,
    .vue-image-brief small,
    .vue-image-director-grid small,
    .vue-image-readiness p,
    .vue-publish-options p,
    .vue-publish-decision p,
    .studio-bridge-flow p
) {
    color: rgba(248, 245, 255, 0.78);
}

/* Local UX pass v370: keep secondary page guidance available without turning pages into manuals. */
body :is(
    .vue-work-readiness-grid article,
    .vue-work-launchpad-grid article,
    .vue-work-task-steps article,
    .vue-work-launchpad-checklist,
    .vue-export-achievement-grid article,
    .vue-export-template-card,
    .vue-export-checklist li,
    .vue-export-readiness-grid article,
    .vue-ip-series-grid article,
    .vue-ip-production-grid article,
    .vue-ip-next-cast-grid article,
    .vue-ip-roadmap article,
    .vue-ip-check-grid article,
    .vue-me-pipeline-grid article,
    .vue-me-triage-grid article,
    .vue-me-achievement-grid article
) {
    position: relative;
    overflow: visible;
}

body[data-page="work"] :is(
    .vue-work-readiness-grid p,
    .vue-work-readiness-grid small,
    .vue-work-launchpad-grid p,
    .vue-work-task-head p,
    .vue-work-task-steps p,
    .vue-work-task-copy small,
    .vue-work-launchpad-checklist ul
),
body[data-page="export"] :is(
    .vue-export-flow p,
    .vue-export-achievement-grid p,
    .vue-export-template-card p,
    .vue-export-template-card small,
    .vue-export-checklist p,
    .vue-export-preview-head p,
    .vue-export-caption-card p,
    .vue-export-readiness-grid p,
    .vue-export-readiness-grid small
),
body[data-page="ip"] :is(
    .vue-ip-series-grid p,
    .vue-ip-production-copy p,
    .vue-ip-production-grid p,
    .vue-ip-next-cast-grid p,
    .vue-ip-cocreate-copy p,
    .vue-ip-roadmap p,
    .vue-ip-check-grid p
),
body[data-page="me"] :is(
    .vue-me-pipeline-grid p,
    .vue-me-pipeline-grid small,
    .vue-me-triage-grid p,
    .vue-me-achievement-grid p,
    .vue-me-achievement-grid small
) {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="work"] :is(
    .vue-work-readiness-grid article,
    .vue-work-launchpad-grid article,
    .vue-work-task-card,
    .vue-work-task-steps article,
    .vue-work-launchpad-checklist
):is(:hover, :focus-within) :is(p, small, ul),
body[data-page="export"] :is(
    .vue-export-flow article,
    .vue-export-achievement-grid article,
    .vue-export-template-card,
    .vue-export-checklist li,
    .vue-export-social-preview,
    .vue-export-readiness-grid article
):is(:hover, :focus-within) :is(p, small),
body[data-page="ip"] :is(
    .vue-ip-series-grid article,
    .vue-ip-production,
    .vue-ip-production-grid article,
    .vue-ip-next-cast-grid article,
    .vue-ip-cocreate,
    .vue-ip-roadmap article,
    .vue-ip-check-grid article
):is(:hover, :focus-within) p,
body[data-page="me"] :is(
    .vue-me-pipeline-grid article,
    .vue-me-triage-grid article,
    .vue-me-achievement-grid article
):is(:hover, :focus-within) :is(p, small) {
    max-height: 150px;
    margin-top: 6px;
    opacity: 1;
    transform: translateY(0);
}

body:is(.animaker-theme-night, .studio-theme-night) :is(
    .vue-work-readiness-grid article,
    .vue-work-launchpad-grid article,
    .vue-work-task-card,
    .vue-work-task-steps article,
    .vue-export-achievement-grid article,
    .vue-export-template-card,
    .vue-export-checklist,
    .vue-export-readiness-grid article,
    .vue-ip-series-grid article,
    .vue-ip-production-grid article,
    .vue-ip-next-cast-grid article,
    .vue-ip-roadmap article,
    .vue-ip-check-grid article,
    .vue-me-pipeline-grid article,
    .vue-me-triage-grid article,
    .vue-me-achievement-grid article
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)),
            radial-gradient(circle at 100% 0, rgba(88, 224, 231, 0.1), transparent 42%),
            rgba(18, 17, 28, 0.88);
}

body:is(.animaker-theme-night, .studio-theme-night) :is(
    .vue-work-readiness-grid strong,
    .vue-work-launchpad-grid strong,
    .vue-work-task-card strong,
    .vue-export-achievement-grid strong,
    .vue-export-template-card h2,
    .vue-export-template-card strong,
    .vue-export-checklist strong,
    .vue-export-readiness-grid strong,
    .vue-ip-series-grid strong,
    .vue-ip-production-grid strong,
    .vue-ip-next-cast-grid strong,
    .vue-ip-roadmap strong,
    .vue-ip-check-grid strong,
    .vue-me-pipeline-grid strong,
    .vue-me-triage-grid strong,
    .vue-me-achievement-grid strong
) {
    color: #fff;
}

body:is(.animaker-theme-night, .studio-theme-night) :is(
    .vue-work-readiness-grid span,
    .vue-work-launchpad-grid span,
    .vue-work-task-card span,
    .vue-export-achievement-grid span,
    .vue-export-template-card span,
    .vue-export-checklist span,
    .vue-export-readiness-grid span,
    .vue-ip-series-grid span,
    .vue-ip-production-grid span,
    .vue-ip-next-cast-grid span,
    .vue-ip-roadmap span,
    .vue-ip-check-grid span,
    .vue-me-pipeline-grid span,
    .vue-me-triage-grid span,
    .vue-me-achievement-grid span
) {
    color: #9ff3ff;
}

/* Local UX pass v374: make login feel like a creator doorway, not a feature checklist. */
body[data-page="login"] .auth-shell {
    background:
            linear-gradient(90deg, rgba(6, 7, 15, 0.96), rgba(6, 7, 15, 0.78) 48%, rgba(6, 7, 15, 0.42) 82%),
            radial-gradient(circle at 20% 24%, rgba(255, 209, 102, 0.18), transparent 30%),
            radial-gradient(circle at 78% 18%, rgba(55, 213, 229, 0.16), transparent 34%),
            url("/animaker/img/generated/login-oc-studio-bg-v1.webp") center / cover;
}

body[data-page="login"] .auth-art h1 {
    color: #fff;
    text-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

body[data-page="login"] .auth-art p {
    color: rgba(255, 255, 255, 0.9);
}

body[data-page="login"] .vue-login-flow {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 620px;
    margin-top: 24px;
}

body[data-page="login"] .vue-login-flow article {
    min-height: 0;
    width: min(190px, 100%);
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.09);
}

body[data-page="login"] .vue-login-flow span {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="login"] .vue-login-flow article:is(:hover, :focus-within) span {
    max-height: 80px;
    margin-top: 6px;
    opacity: 1;
    transform: translateY(0);
}

body.animaker-theme-night[data-page="login"] .auth-shell {
    background:
            linear-gradient(90deg, rgba(6, 7, 15, 0.97), rgba(6, 7, 15, 0.8) 48%, rgba(6, 7, 15, 0.45) 82%),
            radial-gradient(circle at 20% 24%, rgba(255, 209, 102, 0.2), transparent 30%),
            radial-gradient(circle at 78% 18%, rgba(55, 213, 229, 0.18), transparent 34%),
            url("/animaker/img/generated/login-oc-studio-bg-v1.webp") center / cover;
}

body.animaker-theme-night[data-page="login"] .auth-card {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.09)),
            rgba(13, 12, 22, 0.9);
}

body.animaker-theme-night[data-page="login"] :is(
    .auth-card h2,
    .auth-card label,
    .vue-login-card-head .eyebrow,
    .vue-auth-tabs button
) {
    color: #f8f5ff;
}

body.animaker-theme-night[data-page="login"] .vue-login-flow article {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.09);
}

body.animaker-theme-night[data-page="login"] .vue-login-flow strong {
    color: #fff;
}

body.animaker-theme-night[data-page="login"] .vue-login-flow span {
    color: rgba(248, 245, 255, 0.82);
}

body.animaker-theme-night[data-page="login"] :is(.auth-card input, .auth-card textarea) {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

body.animaker-theme-night[data-page="login"] :is(.auth-card input, .auth-card textarea)::placeholder {
    color: rgba(248, 245, 255, 0.46);
}

/* Local UX pass v379: keep template and setting-card pages choice-led and quieter. */
body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more, .vue-character-more) {
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(39, 28, 62, 0.06);
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary, .vue-character-more > summary) {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    min-height: 62px;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary h2, .vue-character-more > summary h2) {
    margin-bottom: 0;
    font-size: clamp(20px, 2vw, 25px);
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary p:not(.eyebrow), .vue-character-more > summary p:not(.eyebrow)) {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary:hover, .vue-template-more > summary:focus-within, .vue-character-more > summary:hover, .vue-character-more > summary:focus-within) p:not(.eyebrow) {
    max-height: 56px;
    opacity: 1;
    transform: translateY(0);
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-pathfinder, .vue-character-pathfinder) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-pathfinder-copy p, .vue-path-card p, .vue-path-card ol, .vue-path-card small) {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-pathfinder-copy:hover, .vue-pathfinder-copy:focus-within, .vue-path-card:hover, .vue-path-card:focus-within) :is(p, ol, small) {
    max-height: 150px;
    margin-top: 4px;
    opacity: 1;
    transform: translateY(0);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-path-card {
    min-height: 152px;
    align-content: start;
    border-radius: 18px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-path-card b {
    align-self: end;
}

body:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-template-starter,
    .vue-template-social,
    .vue-template-guide,
    .vue-character-queue,
    .vue-character-dimensions,
    .vue-character-completion,
    .vue-character-guide
) {
    border-radius: 18px;
}

body:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article
) {
    border-radius: 16px;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-template-more,
    .vue-character-more,
    .vue-template-pathfinder,
    .vue-character-pathfinder,
    .vue-template-guide,
    .vue-character-guide,
    .vue-template-social,
    .vue-character-dimensions
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.15);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
            radial-gradient(circle at 0 0, rgba(55, 213, 229, 0.12), transparent 32%),
            rgba(16, 15, 27, 0.9);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-template-more > summary h2,
    .vue-character-more > summary h2,
    .vue-pathfinder-copy h2,
    .vue-path-card strong,
    .vue-template-guide-head h2,
    .vue-character-guide-head h2,
    .vue-template-social-head h2,
    .vue-character-dimensions-head h2
) {
    color: #fff;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-template-more > summary p,
    .vue-character-more > summary p,
    .vue-pathfinder-copy p,
    .vue-path-card p,
    .vue-path-card small,
    .vue-template-social-head p,
    .vue-template-guide-head p,
    .vue-character-dimensions-head p,
    .vue-character-guide-head p
) {
    color: rgba(248, 245, 255, 0.88);
}

@media (max-width: 760px) {
    body[data-page="login"] .vue-login-flow article {
        width: 100%;
    }
}

/* Local UX pass v381: polish the step-by-step studio surface after copy cleanup. */
body[data-page="studio"] :is(
    .vue-route-progress,
    .vue-route-more,
    .vue-core-mission,
    .vue-studio-refine,
    .vue-visual-next-action,
    .vue-story-next-action,
    .vue-image-readiness,
    .vue-publish-decision,
    .studio-ai-bridge,
    .studio-publish-bridge
) {
    border-radius: var(--animaker-radius-card);
}

body[data-page="studio"] :is(
    .vue-route-steps button,
    .vue-core-actions button,
    .vue-core-inspiration-grid button,
    .vue-candidate-grid button,
    .vue-visual-route-card article,
    .vue-visual-board article,
    .vue-story-board article,
    .vue-image-brief article,
    .vue-image-director-grid button,
    .vue-image-readiness-grid article,
    .vue-publish-options article,
    .vue-publish-checks button,
    .vue-publish-asset-grid article,
    .vue-publish-social-grid article
) {
    border-radius: var(--animaker-radius-card);
}

body[data-page="studio"] :is(
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field,
    .vue-core-field input,
    .vue-core-field select,
    .vue-visual-field input,
    .vue-visual-field textarea,
    .vue-story-field input,
    .vue-story-field textarea,
    .vue-image-field textarea
) {
    border-radius: var(--animaker-radius-control);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-step-head p:not(.eyebrow),
    .vue-route-steps small,
    .vue-route-more summary small,
    .vue-core-field small,
    .vue-visual-field small,
    .vue-story-field small,
    .vue-image-field small,
    .vue-image-readiness p,
    .vue-publish-decision p,
    .vue-publish-preview p,
    .vue-publish-pack p
) {
    color: rgba(248, 245, 255, 0.9);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-route-progress,
    .vue-route-more,
    .vue-core-mission,
    .vue-studio-refine
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.16);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)),
            rgba(18, 17, 28, 0.88);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-route-progress strong,
    .vue-route-more summary,
    .vue-core-mission strong,
    .vue-studio-refine > summary strong
) {
    color: #fff;
}

/* Local UX pass v382: quiet community-facing guidance until the player asks for it. */
body:is([data-page="gallery"], [data-page="feed"], [data-page="user"]) :is(
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission-grid article,
    .vue-gallery-cocreate-grid article,
    .vue-gallery-feed-card,
    .vue-gallery-ip,
    .work-card,
    .vue-feed-response-grid article,
    .vue-feed-loop-grid article,
    .vue-feed-priority-grid article,
    .feed-card,
    .vue-feed-player-card,
    .vue-user-fit-grid article,
    .vue-user-route-steps article,
    .vue-user-inspiration-grid article,
    .vue-user-cocreate-grid article,
    .vue-user-work-card
) {
    position: relative;
    overflow: visible;
}

body[data-page="gallery"] :is(
    .vue-gallery-cocreate-grid p,
    .vue-gallery-feed-card p,
    .vue-gallery-ip p,
    .work-card .card-body > p,
    .vue-gallery-sort-row small
),
body[data-page="feed"] :is(
    .vue-feed-response-grid p,
    .vue-feed-loop-grid p,
    .vue-feed-priority-grid p,
    .feed-card .feed-main > p,
    .vue-feed-player-main p,
    .vue-feed-player-main small
),
body[data-page="user"] :is(
    .vue-user-fit-grid p,
    .vue-user-route-steps p,
    .vue-user-inspiration-grid p,
    .vue-user-cocreate-grid p,
    .vue-user-work-card .card-body > p,
    .vue-user-brief pre
) {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="gallery"] :is(
    .vue-gallery-cocreate-grid article,
    .vue-gallery-feed-card,
    .vue-gallery-ip,
    .work-card,
    .vue-gallery-sort-row button
):is(:hover, :focus-within) :is(p, small),
body[data-page="feed"] :is(
    .vue-feed-response-grid article,
    .vue-feed-loop-grid article,
    .vue-feed-priority-grid article,
    .feed-card,
    .vue-feed-player-card
):is(:hover, :focus-within) :is(p, small),
body[data-page="user"] :is(
    .vue-user-fit-grid article,
    .vue-user-route-steps article,
    .vue-user-inspiration-grid article,
    .vue-user-cocreate-grid article,
    .vue-user-work-card,
    .vue-user-brief
):is(:hover, :focus-within) :is(p, pre) {
    max-height: 180px;
    margin-top: 6px;
    opacity: 1;
    transform: translateY(0);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="feed"], [data-page="user"]) :is(
    .vue-gallery-cocreate-grid article,
    .vue-gallery-feed-card,
    .vue-gallery-ip,
    .work-card,
    .vue-feed-response-grid article,
    .vue-feed-loop-grid article,
    .vue-feed-priority-grid article,
    .feed-card,
    .vue-feed-player-card,
    .vue-user-fit-grid article,
    .vue-user-route-steps article,
    .vue-user-inspiration-grid article,
    .vue-user-cocreate-grid article,
    .vue-user-work-card
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)),
            radial-gradient(circle at 100% 0, rgba(88, 224, 231, 0.1), transparent 42%),
            rgba(18, 17, 28, 0.88);
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="feed"], [data-page="user"]) :is(
    .vue-gallery-cocreate-grid strong,
    .vue-gallery-feed-card h3,
    .vue-gallery-ip h3,
    .work-card h3,
    .vue-feed-response-grid strong,
    .vue-feed-loop-grid strong,
    .vue-feed-priority-grid strong,
    .feed-card h3,
    .vue-feed-player-card strong,
    .vue-user-fit-grid strong,
    .vue-user-route-steps strong,
    .vue-user-inspiration-grid strong,
    .vue-user-cocreate-grid strong,
    .vue-user-work-card h3
) {
    color: #fff;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="feed"], [data-page="user"]) :is(
    .vue-gallery-cocreate-grid p,
    .vue-gallery-feed-card p,
    .vue-gallery-ip p,
    .work-card .card-body > p,
    .vue-feed-response-grid p,
    .vue-feed-loop-grid p,
    .vue-feed-priority-grid p,
    .feed-card .feed-main > p,
    .vue-feed-player-main p,
    .vue-feed-player-main small,
    .vue-user-fit-grid p,
    .vue-user-route-steps p,
    .vue-user-inspiration-grid p,
    .vue-user-cocreate-grid p,
    .vue-user-work-card .card-body > p
) {
    color: rgba(248, 245, 255, 0.84);
}

/* Local UX pass v384: make secondary guidance opt-in and keep the main path obvious. */
body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps {
    position: relative;
    align-items: stretch;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps::before {
    content: "";
    position: absolute;
    left: 34px;
    right: 34px;
    top: 30px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 209, 102, 0.8), rgba(88, 224, 231, 0.6));
    opacity: 0.6;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps a {
    min-height: 104px;
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps a:hover,
body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps a:focus-visible {
    border-color: rgba(185, 245, 255, 0.48);
    background: rgba(255, 255, 255, 0.12);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps span {
    border-radius: 999px;
}

body:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-character-queue-grid article,
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article,
    .vue-character-card
) {
    position: relative;
    overflow: visible;
}

body:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-template-fit-grid article p,
    .vue-template-social-grid article p,
    .vue-template-guide-grid article p,
    .vue-template-social-brief,
    .vue-character-queue-grid article p,
    .vue-character-dimension-grid article p,
    .vue-character-dimension-grid article small,
    .vue-character-completion-grid article p,
    .vue-character-remix-grid article p,
    .vue-character-guide-grid article p,
    .vue-character-card .card-body > p,
    .vue-character-card blockquote
) {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-template-social,
    .vue-character-queue-grid article,
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article,
    .vue-character-card
):is(:hover, :focus-within) :is(p, small, pre, blockquote) {
    max-height: 180px;
    margin-top: 6px;
    opacity: 1;
    transform: translateY(0);
}

body:is([data-page="work"], [data-page="export"]) :is(
    .vue-work-action-path article,
    .vue-work-readiness-grid article,
    .vue-work-launchpad-grid article,
    .vue-work-task-steps article,
    .vue-export-achievement-grid article,
    .vue-export-template-card,
    .vue-export-checklist li,
    .vue-export-flow article,
    .vue-export-caption-sections div
) {
    position: relative;
    overflow: visible;
}

body:is([data-page="work"], [data-page="export"]) :is(
    .vue-work-next,
    .vue-work-action-path article p,
    .vue-work-readiness-copy > p:not(.eyebrow),
    .vue-work-readiness-grid article p,
    .vue-work-readiness-grid article small,
    .vue-work-launchpad-copy > p:not(.eyebrow),
    .vue-work-launchpad-grid article p,
    .vue-work-task-head p,
    .vue-work-task-steps article p,
    .vue-work-task-copy small,
    .vue-work-launchpad-checklist,
    .vue-export-summary > p,
    .vue-export-flow article p,
    .vue-export-achievement-copy > p:not(.eyebrow),
    .vue-export-achievement-grid article p,
    .vue-export-template-card p,
    .vue-export-template-card small,
    .vue-export-checklist li p,
    .vue-export-preview-head p:not(.eyebrow),
    .vue-export-caption-card > p
) {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body:is([data-page="work"], [data-page="export"]) :is(
    .vue-work-side,
    .vue-work-action-path article,
    .vue-work-readiness,
    .vue-work-readiness-grid article,
    .vue-work-launchpad,
    .vue-work-launchpad-grid article,
    .vue-work-task-card,
    .vue-work-task-steps article,
    .vue-export-hero,
    .vue-export-flow article,
    .vue-export-achievement,
    .vue-export-achievement-grid article,
    .vue-export-template-card,
    .vue-export-checklist,
    .vue-export-preview-head,
    .vue-export-caption-card
):is(:hover, :focus-within) :is(p, small, ul) {
    max-height: 220px;
    margin-top: 6px;
    opacity: 1;
    transform: translateY(0);
}

body[data-page="work"] .vue-work-launchpad:is(:hover, :focus-within) .vue-work-launchpad-checklist {
    max-height: 220px;
    margin-top: 8px;
    opacity: 1;
    transform: translateY(0);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"], [data-page="work"], [data-page="export"]) :is(
    .vue-nextline-steps a,
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-character-queue-grid article,
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article,
    .vue-work-action-path article,
    .vue-work-readiness-grid article,
    .vue-work-launchpad-grid article,
    .vue-work-task-steps article,
    .vue-export-achievement-grid article,
    .vue-export-template-card,
    .vue-export-checklist li,
    .vue-export-flow article,
    .vue-export-caption-sections div
) {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)),
            rgba(18, 17, 28, 0.88);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"], [data-page="work"], [data-page="export"]) :is(
    .vue-template-fit-grid article strong,
    .vue-template-social-grid article h3,
    .vue-template-guide-grid article strong,
    .vue-character-queue-grid article strong,
    .vue-character-dimension-grid article h3,
    .vue-character-completion-grid article strong,
    .vue-character-remix-grid article strong,
    .vue-character-guide-grid article strong,
    .vue-work-action-path strong,
    .vue-work-readiness-grid article strong,
    .vue-work-launchpad-grid article strong,
    .vue-work-task-steps article strong,
    .vue-export-achievement-grid article strong,
    .vue-export-template-card h2,
    .vue-export-checklist li strong,
    .vue-export-flow article strong
) {
    color: #fff;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"], [data-page="work"], [data-page="export"]) :is(
    .vue-template-fit-grid article p,
    .vue-template-social-grid article p,
    .vue-template-guide-grid article p,
    .vue-character-queue-grid article p,
    .vue-character-dimension-grid article p,
    .vue-character-dimension-grid article small,
    .vue-character-completion-grid article p,
    .vue-character-remix-grid article p,
    .vue-character-guide-grid article p,
    .vue-work-action-path article p,
    .vue-work-readiness-grid article p,
    .vue-work-readiness-grid article small,
    .vue-work-launchpad-grid article p,
    .vue-work-task-steps article p,
    .vue-export-achievement-grid article p,
    .vue-export-template-card p,
    .vue-export-template-card small,
    .vue-export-checklist li p,
    .vue-export-flow article p
) {
    color: rgba(248, 245, 255, 0.84);
}

@media (max-width: 760px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps::before {
        display: none;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-nextline-steps a {
        min-height: 94px;
    }
}

/* Local UX pass v388: make IP detail follow one obvious path instead of reading like a project report. */
body[data-page="ip"] .vue-ip-nextline {
    margin: 22px 0;
}

body[data-page="ip"] .vue-ip-nextline .vue-nextline-copy {
    min-width: min(360px, 100%);
}

body[data-page="ip"] .vue-ip-nextline .vue-nextline-steps a {
    border-radius: 18px;
}

body[data-page="ip"] :is(
    .vue-ip-series-copy > p:not(.eyebrow),
    .vue-ip-production-copy > p:not(.eyebrow),
    .vue-ip-cocreate-copy > p:not(.eyebrow),
    .vue-ip-section-grid article p,
    .vue-ip-series-grid article p,
    .vue-ip-production-grid article p,
    .vue-ip-next-cast-grid article p,
    .vue-ip-roadmap article p,
    .vue-ip-check-grid article p,
    .vue-relation-lines article p,
    .vue-ip-character-card p,
    .vue-ip-activity-card p,
    .vue-ip-version-list article small,
    .vue-ip-cocreate-brief pre
) {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-2px);
    transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="ip"] :is(
    .vue-ip-series,
    .vue-ip-production,
    .vue-ip-cocreate,
    .vue-ip-section-grid article,
    .vue-ip-series-grid article,
    .vue-ip-production-grid article,
    .vue-ip-next-cast,
    .vue-ip-next-cast-grid article,
    .vue-ip-roadmap article,
    .vue-ip-check-grid article,
    .vue-relation-lines article,
    .vue-ip-character-card,
    .vue-ip-activity-card,
    .vue-ip-version-list article
):is(:hover, :focus-within) :is(p, small, pre) {
    max-height: 220px;
    margin-top: 8px;
    opacity: 1;
    transform: translateY(0);
}

body[data-page="ip"] .vue-ip-cocreate-brief:is(:hover, :focus-within) pre {
    max-height: 360px;
}

body[data-page="ip"] .vue-ip-production,
body[data-page="ip"] .vue-ip-cocreate {
    gap: 18px;
}

body[data-page="ip"] .vue-ip-production-grid article,
body[data-page="ip"] .vue-ip-next-cast-grid article,
body[data-page="ip"] .vue-ip-roadmap article,
body[data-page="ip"] .vue-ip-check-grid article {
    min-height: 132px;
}

body.animaker-theme-night[data-page="ip"] :is(
    .vue-ip-nextline,
    .vue-ip-nextline .vue-nextline-steps a,
    .vue-ip-series,
    .vue-ip-production,
    .vue-ip-cocreate,
    .vue-ip-cocreate-brief,
    .vue-ip-block
) {
    border-color: rgba(255, 255, 255, 0.16);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.05)),
            rgba(17, 16, 27, 0.92);
}

body.animaker-theme-night[data-page="ip"] :is(
    .vue-ip-copy h1,
    .vue-ip-nextline h2,
    .vue-ip-series-copy h2,
    .vue-ip-production-copy h2,
    .vue-ip-cocreate-copy h2,
    .vue-ip-block h2,
    .vue-ip-nextline .vue-nextline-steps strong
) {
    color: #fff;
}

body.animaker-theme-night[data-page="ip"] :is(
    .vue-ip-copy p,
    .vue-ip-copy blockquote,
    .vue-ip-nextline p,
    .vue-ip-nextline .vue-nextline-steps p,
    .vue-ip-series-copy p,
    .vue-ip-production-copy p,
    .vue-ip-cocreate-copy p
) {
    color: rgba(248, 245, 255, 0.84);
}

@media (max-width: 760px) {
    body[data-page="ip"] .vue-ip-nextline {
        margin: 16px 0;
    }

    body[data-page="ip"] .vue-ip-nextline .vue-nextline-steps::before {
        display: none;
    }

    body[data-page="ip"] .vue-ip-production-grid article,
    body[data-page="ip"] .vue-ip-next-cast-grid article,
    body[data-page="ip"] .vue-ip-roadmap article,
    body[data-page="ip"] .vue-ip-check-grid article {
        min-height: 104px;
    }
}

/* Local UX pass v389: make login quieter and action-led. */
body[data-page="login"] .auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: clamp(24px, 5vw, 72px);
}

body[data-page="login"] .auth-art h1 {
    max-width: 620px;
    margin-bottom: 16px;
}

body[data-page="login"] .auth-art p {
    max-width: 430px;
}

body[data-page="login"] .auth-card {
    padding: clamp(24px, 3vw, 32px);
    border-radius: 24px;
}

body[data-page="login"] .vue-login-shell .auth-card {
    gap: 13px;
}

body[data-page="login"] .vue-login-flow {
    gap: 8px;
    margin-top: 20px;
}

body[data-page="login"] .vue-login-flow article {
    position: relative;
    min-height: 42px;
    width: auto;
    min-width: 118px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: none;
}

body[data-page="login"] .vue-login-flow article::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 5px rgba(255, 209, 102, 0.15);
}

body[data-page="login"] .vue-login-flow strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

body[data-page="login"] .vue-login-flow span {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 2;
    width: min(260px, 72vw);
    max-height: none;
    margin-top: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(11, 12, 22, 0.86);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
}

body[data-page="login"] .vue-login-flow article:is(:hover, :focus-visible) span {
    max-height: none;
    margin-top: 0;
    opacity: 1;
    transform: translate(-50%, 0);
}

body[data-page="login"] .vue-login-card-head {
    gap: 5px;
}

body[data-page="login"] .auth-card label {
    gap: 7px;
}

body.animaker-theme-night[data-page="login"] .auth-card {
    border-color: rgba(255, 255, 255, 0.18);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07)),
            rgba(13, 12, 22, 0.9);
}

body.animaker-theme-night[data-page="login"] .auth-switch button {
    color: #9ff3ff;
}

@media (max-width: 900px) {
    body[data-page="login"] .auth-shell {
        grid-template-columns: 1fr;
        align-items: start;
    }

    body[data-page="login"] .auth-art h1 {
        max-width: 8.4em;
    }

    body[data-page="login"] .vue-login-flow span {
        left: 0;
        transform: translateY(4px);
    }

    body[data-page="login"] .vue-login-flow article:is(:hover, :focus-visible) span {
        transform: translateY(0);
    }
}

/* Local design pass v394 cascade guard: keep the archive-film signature above older page rules. */
.vue-home-feature {
    position: relative;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: stretch;
    min-height: 420px;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(247, 244, 234, 0.1), rgba(255, 255, 255, 0.04)),
            rgba(13, 11, 20, 0.74);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
}

.vue-home-feature > img {
    grid-column: 2;
    min-height: 420px;
    height: 100%;
    opacity: 0.88;
}

.vue-home-feature-rail,
.vue-home-feature-body,
.oc-dossier-spine,
.oc-archive-index,
.vue-board-dossier-rail {
    pointer-events: none;
}

.vue-home-feature-body {
    position: absolute;
    right: 26px;
    bottom: 26px;
    left: 84px;
    z-index: 2;
    max-width: 430px;
}

.oc-dossier-card,
.oc-archive-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.16) !important;
    border-radius: 22px !important;
    background:
            linear-gradient(145deg, rgba(247, 244, 234, 0.08), rgba(255, 255, 255, 0.035)),
            rgba(16, 15, 25, 0.82) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24) !important;
}

.oc-archive-card > a > img,
.oc-dossier-card > a > img {
    filter: saturate(1.08) contrast(1.02);
}

.oc-archive-card .card-body,
.oc-dossier-card > div:not(.oc-dossier-spine) {
    position: relative;
    z-index: 1;
}

.vue-board-dock {
    position: relative;
    overflow: hidden;
    padding-top: 42px !important;
    border-radius: 24px !important;
}

.vue-board-file-stamps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px;
}

body[data-page="login"] .vue-login-card-head p {
    display: block;
}

body[data-page="login"] .vue-login-pass {
    display: flex;
}

body.animaker-theme-night[data-page="login"] .auth-card {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(145deg, rgba(247, 244, 234, 0.1), rgba(255, 255, 255, 0.045)),
            rgba(13, 11, 20, 0.74);
    box-shadow: 0 30px 84px rgba(0, 0, 0, 0.36);
}

@media (max-width: 760px) {
    .vue-home-feature {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        min-height: 360px;
    }

    .vue-home-feature > img {
        min-height: 360px;
    }

    .vue-home-feature-body {
        left: 60px;
        right: 14px;
        bottom: 14px;
        padding: 14px;
    }
}

/* v394 hotfix: feature dossier uses image as the whole file backing plate. */
body[data-page="home"] .vue-home-feature {
    position: relative;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 0 !important;
    width: min(520px, 84%);
    border-radius: 24px;
    background: rgba(13, 11, 20, 0.78) !important;
}

body[data-page="home"] .vue-home-feature > img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: inherit;
    opacity: 0.58;
    object-fit: cover;
    object-position: center 28%;
    filter: saturate(1.12) contrast(1.06);
}

body[data-page="home"] .vue-home-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
            linear-gradient(90deg, rgba(13, 11, 20, 0.72), rgba(13, 11, 20, 0.2) 48%, rgba(13, 11, 20, 0.7)),
            radial-gradient(circle at 76% 18%, rgba(110, 231, 242, 0.16), transparent 34%);
    pointer-events: none;
}

body[data-page="home"] .vue-home-feature-rail {
    grid-column: 1;
    z-index: 2;
    min-height: 100%;
}

body[data-page="home"] .vue-home-feature-body {
    z-index: 3;
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-feature {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        width: 100%;
    }
}

/* Local design pass v395: make the OC dossier signature useful before it is decorative. */
body[data-page="home"] .vue-home-feature {
    min-height: 430px;
    border-radius: 28px;
    border-color: rgba(247, 244, 234, 0.2);
    background:
            radial-gradient(circle at 72% 14%, rgba(110, 231, 242, 0.18), transparent 34%),
            rgba(13, 11, 20, 0.72) !important;
    box-shadow: 0 34px 92px rgba(0, 0, 0, 0.42);
}

body[data-page="home"] .vue-home-feature > img {
    opacity: 0.82;
    object-position: center 30%;
    filter: saturate(1.18) contrast(1.04) brightness(0.96);
}

body[data-page="home"] .vue-home-feature::before {
    background:
            linear-gradient(90deg, rgba(13, 11, 20, 0.84), rgba(13, 11, 20, 0.32) 46%, rgba(13, 11, 20, 0.66)),
            linear-gradient(0deg, rgba(13, 11, 20, 0.78), transparent 48%),
            radial-gradient(circle at 76% 18%, rgba(110, 231, 242, 0.2), transparent 32%);
}

body[data-page="home"] .vue-home-feature-body {
    right: 22px;
    bottom: 22px;
    left: 84px;
    max-width: 390px;
    border-radius: 20px;
    background: rgba(13, 11, 20, 0.62);
}

body[data-page="home"] .vue-home-feature-body strong {
    font-size: clamp(26px, 3.4vw, 38px);
}

body[data-page="home"] .vue-home-dossier-tags em {
    min-height: 27px;
    color: #111827;
    background: rgba(247, 244, 234, 0.88);
}

body[data-page="characters"] .vue-character-more {
    scroll-margin-top: 92px;
    border-radius: 24px;
}

body[data-page="characters"] .vue-character-more > summary {
    min-height: 70px;
    border-radius: 20px;
}

body[data-page="characters"] .vue-character-more > summary::after {
    content: "展开档案";
    min-width: 88px;
    color: #101521;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
    box-shadow: 0 14px 28px rgba(110, 231, 242, 0.14);
}

body[data-page="characters"] .vue-character-more[open] > summary::after {
    content: "收起";
    color: #111827;
    background: var(--oc-gold);
}

body[data-page="characters"] .vue-character-more[open] {
    gap: 16px;
}

body[data-page="characters"] .vue-character-more[open] .vue-character-filter {
    margin-top: 0;
}

body[data-page="characters"] .vue-character-grid {
    scroll-margin-top: 92px;
}

body[data-page="characters"] .oc-archive-card {
    border-radius: 24px !important;
}

body[data-page="characters"] .oc-archive-card .card-foot.has-palette {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="characters"] .oc-archive-card .card-foot.has-palette .secondary-btn {
    min-height: 40px;
    padding: 0 10px;
    font-size: 13px;
}

body[data-page="studio"] .vue-board-dock {
    border-radius: 28px !important;
}

@media (max-width: 900px) {
    body[data-page="characters"] .oc-archive-card .card-foot.has-palette {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-feature {
        min-height: 380px;
        border-radius: 24px;
    }

    body[data-page="home"] .vue-home-feature-body {
        left: 58px;
        right: 12px;
        bottom: 12px;
    }

    body[data-page="characters"] .vue-character-more > summary {
        grid-template-columns: 1fr;
    }
}

/* Local design pass v396: extend the OC archive identity to detail and export pages. */
body[data-page="work"] .vue-work-dock,
body[data-page="export"] .vue-export-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 28px;
    border-color: rgba(247, 244, 234, 0.16);
    background:
            linear-gradient(145deg, rgba(247, 244, 234, 0.08), rgba(255, 255, 255, 0.035)),
            radial-gradient(circle at 92% 10%, rgba(110, 231, 242, 0.14), transparent 32%),
            rgba(13, 11, 20, 0.9);
    color: #f7f4ea;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
}

body[data-page="work"] .vue-work-dock {
    grid-template-columns: 54px minmax(190px, 0.62fr) minmax(0, 1fr) minmax(250px, 340px);
    gap: 0;
    padding: 0;
}

body[data-page="export"] .vue-export-hero {
    grid-template-columns: 54px minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 0;
    padding: 0;
}

.vue-work-file-rail,
.vue-export-package-rail {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 14px;
    min-height: 100%;
    padding: 18px 0;
    border-right: 1px dashed rgba(255, 255, 255, 0.2);
    color: rgba(247, 244, 234, 0.8);
    background:
            radial-gradient(circle, rgba(255, 255, 255, 0.24) 0 3px, transparent 4px) center top 16px / 18px 28px repeat-y,
            linear-gradient(180deg, rgba(110, 231, 242, 0.18), rgba(255, 111, 174, 0.12));
    writing-mode: vertical-rl;
    text-orientation: mixed;
    pointer-events: none;
}

.vue-work-file-rail span,
.vue-export-package-rail span,
.vue-work-file-rail strong,
.vue-export-package-rail strong {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.vue-work-file-rail strong,
.vue-export-package-rail strong {
    color: var(--oc-gold);
}

body[data-page="work"] .vue-work-cover,
body[data-page="export"] .vue-export-cover {
    position: relative;
    min-height: 430px;
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

body[data-page="work"] .vue-work-cover img,
body[data-page="export"] .vue-export-cover img {
    min-height: 430px;
    height: 100%;
    filter: saturate(1.12) contrast(1.04);
}

.vue-work-cover-stamp,
.vue-export-cover-stamps {
    position: absolute;
    z-index: 2;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.vue-work-cover-stamp,
.vue-export-cover-stamps span {
    width: fit-content;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

body[data-page="work"] .vue-work-main,
body[data-page="export"] .vue-export-summary {
    position: relative;
    z-index: 1;
    padding: clamp(22px, 3vw, 34px);
    color: rgba(247, 244, 234, 0.86);
    background:
            linear-gradient(90deg, rgba(13, 11, 20, 0.66), rgba(13, 11, 20, 0.34)),
            rgba(255, 255, 255, 0.035);
}

body[data-page="work"] .vue-work-main h1,
body[data-page="export"] .vue-export-summary h1 {
    color: #fff;
}

body[data-page="work"] .vue-work-main blockquote,
body[data-page="export"] .vue-export-summary > p {
    max-height: none;
    margin-top: 0;
    overflow: visible;
    opacity: 1;
    transform: none;
    color: rgba(247, 244, 234, 0.78);
}

.vue-work-file-stamps,
.vue-export-pass {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 2px;
}

.vue-work-file-stamps span,
.vue-export-pass span,
.vue-export-pass strong,
.vue-export-pass small {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    font-style: normal;
}

.vue-work-file-stamps span,
.vue-export-pass span,
.vue-export-pass small {
    color: rgba(247, 244, 234, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

.vue-export-pass strong {
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
}

body[data-page="work"] .vue-work-side {
    margin: 16px;
    border-radius: 22px;
    color: rgba(247, 244, 234, 0.86);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

body[data-page="work"] .vue-work-stats article,
body[data-page="work"] .vue-work-action-path,
body[data-page="work"] .vue-work-action-path article,
body[data-page="work"] .vue-work-nav a,
body[data-page="export"] .vue-export-flow article {
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
}

body[data-page="work"] .vue-work-stats strong,
body[data-page="work"] .vue-work-action-path > strong,
body[data-page="work"] .vue-work-action-path article span,
body[data-page="work"] .vue-work-nav strong,
body[data-page="export"] .vue-export-flow strong {
    color: #fff;
}

body[data-page="work"] .vue-work-next,
body[data-page="work"] .vue-work-action-path article p,
body[data-page="export"] .vue-export-flow article p {
    max-height: none;
    margin-top: 6px;
    overflow: visible;
    opacity: 1;
    transform: none;
    color: rgba(247, 244, 234, 0.72);
}

body[data-page="work"] .vue-work-tags span,
body[data-page="export"] .vue-export-cover-badge {
    color: #111827;
    border-color: transparent;
    background: rgba(247, 244, 234, 0.9);
}

body[data-page="export"] .vue-export-cover-badge {
    top: 16px;
    bottom: auto;
    z-index: 3;
}

.vue-export-pass small {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body[data-page="work"] .vue-work-readiness,
body[data-page="work"] .vue-work-launchpad,
body[data-page="work"] .vue-work-cocreate,
body[data-page="export"] .vue-export-achievement,
body[data-page="export"] .vue-export-social-preview,
body[data-page="export"] .vue-export-readiness,
body[data-page="export"] .vue-export-launch {
    border-radius: 28px;
}

/* Local design pass v397: clarify template/archive/user ownership boundaries. */
body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
    margin: 18px 0;
    padding: clamp(18px, 2.4vw, 26px);
    overflow: hidden;
    border: 1px solid rgba(22, 18, 34, 0.1);
    border-radius: 28px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 244, 234, 0.84)),
            radial-gradient(circle at 92% 18%, rgba(110, 231, 242, 0.16), transparent 34%);
    box-shadow: 0 22px 54px rgba(17, 24, 39, 0.08);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary::before {
    content: "OC ROUTE";
    position: absolute;
    top: 16px;
    right: 18px;
    color: rgba(17, 24, 39, 0.18);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.16em;
}

.vue-library-boundary-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.vue-library-boundary-copy h2 {
    max-width: 520px;
    margin: 0;
    color: #17151f;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.05;
}

.vue-library-boundary-copy p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: rgba(23, 21, 31, 0.68);
    font-size: 15px;
    line-height: 1.7;
}

.vue-library-boundary-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vue-library-boundary-card {
    min-height: 168px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    color: #17151f;
    text-decoration: none;
    border: 1px solid rgba(23, 21, 31, 0.1);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.68);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.vue-library-boundary-card:hover,
.vue-library-boundary-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.36);
    box-shadow: 0 18px 34px rgba(17, 24, 39, 0.12);
}

.vue-library-boundary-card.active {
    color: #f7f4ea;
    border-color: rgba(255, 255, 255, 0.22);
    background:
            linear-gradient(150deg, rgba(23, 21, 31, 0.96), rgba(52, 43, 70, 0.92)),
            radial-gradient(circle at 78% 18%, rgba(110, 231, 242, 0.28), transparent 36%);
}

.vue-library-boundary-card span {
    width: fit-content;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: rgba(23, 21, 31, 0.74);
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.vue-library-boundary-card.active span {
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
}

.vue-library-boundary-card strong {
    font-size: 18px;
    line-height: 1.22;
}

.vue-library-boundary-card p {
    margin: 0;
    color: rgba(23, 21, 31, 0.62);
    font-size: 13px;
    line-height: 1.65;
}

.vue-library-boundary-card.active p {
    color: rgba(247, 244, 234, 0.74);
}

.vue-library-boundary-card b {
    margin-top: auto;
    color: var(--oc-cyan);
    font-size: 13px;
    font-weight: 950;
}

.vue-library-boundary-card.active b {
    color: var(--oc-gold);
}

@media (max-width: 980px) {
    body[data-page="work"] .vue-work-dock,
    body[data-page="export"] .vue-export-hero {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    body[data-page="work"] .vue-work-main,
    body[data-page="work"] .vue-work-side,
    body[data-page="work"] .vue-work-nav,
    body[data-page="export"] .vue-export-summary {
        grid-column: 2;
    }

    body[data-page="work"] .vue-work-file-rail,
    body[data-page="export"] .vue-export-package-rail {
        grid-row: 1 / span 4;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary {
        grid-template-columns: 1fr;
    }

    .vue-library-boundary-grid {
        grid-template-columns: 1fr;
    }
}

/* Local UX pass: make the studio open like a creator console instead of a landing page. */
body[data-page="studio"] .studio-hero-title.page-title {
    min-height: clamp(300px, 42vh, 430px);
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
    grid-template-rows: auto auto auto auto;
    align-content: center;
    align-items: end;
    gap: 10px clamp(20px, 3vw, 34px);
    padding: clamp(22px, 2.8vw, 34px);
}

body[data-page="studio"] .studio-hero-title.page-title > .eyebrow,
body[data-page="studio"] .studio-hero-title.page-title > h1,
body[data-page="studio"] .studio-hero-title.page-title > p,
body[data-page="studio"] .studio-hero-title.page-title > .studio-theme-switch {
    grid-column: 1;
}

body[data-page="studio"] .studio-hero-title.page-title h1 {
    max-width: 8.6em;
    margin-bottom: 4px;
    font-size: clamp(38px, 4.1vw, 58px);
    line-height: 1.02;
}

body[data-page="studio"] .studio-hero-title.page-title p:not(.eyebrow) {
    max-width: 35em;
    font-size: 15px;
}

body[data-page="studio"] .studio-theme-switch {
    margin-top: 4px;
}

body[data-page="studio"] .vue-route-hero-shell {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: end;
    width: 100%;
    margin-top: 0;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-card {
    max-width: none;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
    background:
            linear-gradient(135deg, rgba(18, 16, 28, 0.9), rgba(24, 23, 36, 0.82)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.16), rgba(255, 209, 102, 0.12));
    backdrop-filter: blur(16px);
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-copy strong {
    max-width: 11em;
    font-size: clamp(24px, 2.5vw, 32px);
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-copy p {
    max-width: 24em;
    font-size: 14px;
    line-height: 1.58;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-actions {
    grid-template-columns: 1fr;
}

body[data-page="studio"] .studio-hero-beats {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-top: 8px;
}

body[data-page="studio"] .studio-hero-beats article {
    min-height: 46px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

body[data-page="studio"] .studio-hero-beats span,
body[data-page="studio"] .studio-hero-beats strong {
    line-height: 1;
}

/* Local UX pass v411: show the route as a compact task strip inside the hero card. */
body[data-page="studio"] .vue-route-hero-shell .vue-route-mini-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-mini-steps span {
    width: auto;
    min-height: 0;
    display: block;
    padding: 0;
    color: rgba(255, 255, 255, 0.48);
    background: transparent;
    font-size: 10px;
    line-height: 1;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-mini-steps strong {
    max-width: none;
    color: #fff;
    font-size: 12px;
    line-height: 1.15;
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-route-hero-shell .vue-route-mini-steps,
    .vue-route-mini-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vue-board-readiness-head,
    .vue-board-readiness-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vue-board-readiness-head p {
        grid-column: 1 / -1;
    }
}

body[data-page="studio"] .studio-mode-hub {
    grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr);
    align-items: center;
    margin: 10px 0 12px;
}

body[data-page="studio"] .studio-mode-copy {
    gap: 8px;
    min-width: 190px;
}

body[data-page="studio"] .studio-mode-copy h2 {
    font-size: 19px;
}

body[data-page="studio"] .studio-mode-switch {
    gap: 6px;
}

body[data-page="studio"] .studio-mode-card {
    min-height: 36px;
    padding: 0 12px;
}

body[data-page="studio"] .studio-quick-panel {
    grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr) minmax(132px, auto);
    min-height: 78px;
    padding: 12px;
}

body[data-page="studio"] .studio-quick-presets {
    grid-template-columns: repeat(4, minmax(74px, 1fr));
}

body[data-page="studio"] .studio-quick-presets button {
    min-height: 34px;
    padding: 6px 8px;
}

body[data-page="studio"] .studio-quick-actions .primary-btn {
    min-height: 44px;
}

/* Local UX pass: keep studio quick start focused on one obvious action. */
body[data-page="studio"] .studio-quick-head small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

body[data-page="studio"] .studio-quick-more {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="studio"] .studio-quick-more > summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    list-style: none;
}

body[data-page="studio"] .studio-quick-more > summary::-webkit-details-marker {
    display: none;
}

body[data-page="studio"] .studio-quick-more > summary span {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
}

body[data-page="studio"] .studio-quick-more > summary strong {
    min-width: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.35;
    text-align: right;
}

body[data-page="studio"] .studio-quick-more > summary::after {
    content: "展开";
    flex: 0 0 auto;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #17151f;
    background: var(--yellow);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .studio-quick-more[open] > summary::after {
    content: "收起";
}

body[data-page="studio"] .studio-quick-more-body {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}

body[data-page="studio"] .studio-quick-more[open] .studio-spark-strip {
    display: grid;
}

body[data-page="studio"] .studio-quick-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body[data-page="studio"] .studio-quick-secondary-actions .secondary-btn {
    flex: 1 1 160px;
    min-height: 40px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
}

/* Local UX pass: fold supporting studio tools behind a quieter drawer. */
body[data-page="studio"] .vue-studio-toolbox {
    overflow: hidden;
    border: 1px dashed rgba(33, 183, 197, 0.22);
    border-radius: var(--animaker-radius-card);
    background: rgba(255, 255, 255, 0.52);
}

body[data-page="studio"] .vue-studio-toolbox > summary {
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    cursor: pointer;
    list-style: none;
}

body[data-page="studio"] .vue-studio-toolbox > summary::-webkit-details-marker {
    display: none;
}

body[data-page="studio"] .vue-studio-toolbox > summary div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body[data-page="studio"] .vue-studio-toolbox > summary span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
}

body[data-page="studio"] .vue-studio-toolbox > summary strong {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.32;
}

body[data-page="studio"] .vue-studio-toolbox > summary em {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--ink) 76%, var(--teal));
    background: rgba(33, 183, 197, 0.12);
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

body[data-page="studio"] .vue-studio-toolbox > summary::after {
    content: "展开";
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #17151f;
    background: rgba(255, 209, 102, 0.86);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-studio-toolbox[open] > summary {
    border-bottom: 1px solid rgba(33, 183, 197, 0.16);
    background: rgba(255, 255, 255, 0.62);
}

body[data-page="studio"] .vue-studio-toolbox[open] > summary::after {
    content: "收起";
}

body[data-page="studio"] .vue-studio-toolbox > :not(summary) {
    margin: 12px;
}

body[data-page="studio"] .vue-studio-toolbox .vue-core-inspiration,
body[data-page="studio"] .vue-studio-toolbox .vue-candidate-panel,
body[data-page="studio"] .vue-studio-toolbox .vue-visual-presets,
body[data-page="studio"] .vue-studio-toolbox .vue-visual-kit,
body[data-page="studio"] .vue-studio-toolbox .vue-story-presets {
    box-shadow: none;
}

body[data-page="studio"] .vue-visual-toolbox,
body[data-page="studio"] .vue-story-toolbox {
    border-color: rgba(123, 97, 255, 0.2);
}

body[data-page="studio"] .vue-visual-toolbox > summary span,
body[data-page="studio"] .vue-story-toolbox > summary span {
    color: var(--violet);
}

body[data-page="studio"] .vue-visual-toolbox > summary em,
body[data-page="studio"] .vue-story-toolbox > summary em {
    color: color-mix(in srgb, var(--ink) 76%, var(--violet));
    background: rgba(123, 97, 255, 0.12);
}

body[data-page="studio"].studio-theme-night .vue-studio-toolbox {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

body[data-page="studio"].studio-theme-night .vue-studio-toolbox[open] > summary {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
}

body[data-page="studio"].studio-theme-night .vue-studio-toolbox > summary strong {
    color: #fff;
}

body[data-page="studio"] .studio-workbench {
    margin-top: 10px;
}

/* Local UX pass v413: make quick drafting feel like choosing an OC starter card. */
body[data-page="studio"] .studio-quick-panel {
    grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr) minmax(150px, 0.18fr);
    align-items: stretch;
}

body[data-page="studio"] .studio-quick-head {
    align-content: center;
}

body[data-page="studio"] .studio-quick-guide {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    order: 4;
}

body[data-page="studio"] .studio-quick-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-self: stretch;
}

body[data-page="studio"] .studio-quick-presets button {
    min-height: 86px;
    display: grid;
    align-content: start;
    gap: 5px;
    padding: 11px 12px;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="studio"] .studio-quick-presets button span {
    color: rgba(255, 209, 102, 0.92);
    font-size: 11px;
    font-weight: 950;
}

body[data-page="studio"] .studio-quick-presets button strong {
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
}

body[data-page="studio"] .studio-quick-presets button small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

body[data-page="studio"] .studio-quick-presets button:hover strong,
body[data-page="studio"] .studio-quick-presets button:hover small,
body[data-page="studio"] .studio-quick-presets button.active strong,
body[data-page="studio"] .studio-quick-presets button.active small {
    color: #17151f;
}

body[data-page="studio"] .studio-quick-presets button:hover span,
body[data-page="studio"] .studio-quick-presets button.active span {
    color: rgba(23, 21, 31, 0.68);
}

body[data-page="studio"] .studio-quick-actions {
    align-self: stretch;
}

body[data-page="studio"] .studio-quick-actions .primary-btn {
    min-height: 100%;
    padding-inline: 16px;
}

body[data-page="studio"] .studio-quick-status {
    grid-column: 1 / -1;
    order: 5;
}

@media (max-width: 1100px) {
    body[data-page="studio"] .studio-hero-title.page-title {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    body[data-page="studio"] .vue-route-hero-shell {
        grid-column: 1;
        grid-row: auto;
    }

    body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="studio"] .studio-mode-hub,
    body[data-page="studio"] .studio-quick-panel {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .studio-quick-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body[data-page="studio"] .studio-hero-title.page-title h1 {
        max-width: 7.4em;
    }

    body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-actions {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .studio-hero-title.page-title {
        padding: 18px;
        gap: 12px;
    }

    body[data-page="studio"] .studio-hero-title.page-title p:not(.eyebrow) {
        max-width: 19em;
        font-size: 14px;
        line-height: 1.62;
    }

    body[data-page="studio"] .studio-hero-beats {
        display: none;
    }

    body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-card {
        gap: 10px;
        padding: 14px;
    }

    body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-copy strong {
        font-size: 24px;
    }

    body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-copy p {
        font-size: 13px;
        line-height: 1.55;
    }

    body[data-page="studio"] .studio-mode-hub {
        gap: 8px;
        margin: 8px 0 10px;
    }

    body[data-page="studio"] .studio-mode-copy {
        display: none;
    }

    body[data-page="studio"] .studio-quick-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
        padding: 12px;
    }

    body[data-page="studio"] .studio-quick-head {
        grid-column: 1;
    }

    body[data-page="studio"] .studio-quick-head strong {
        font-size: 15px;
    }

    body[data-page="studio"] .studio-quick-presets {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="studio"] .studio-quick-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        align-self: stretch;
        min-width: 0;
    }

    body[data-page="studio"] .studio-quick-actions .primary-btn {
        min-height: 48px;
        padding-inline: 10px;
        font-size: 13px;
    }

    body[data-page="studio"] .studio-quick-more {
        grid-column: 1 / -1;
    }

    body[data-page="studio"] .studio-quick-more > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 38px;
    }

    body[data-page="studio"] .studio-quick-more > summary span {
        display: none;
    }

    body[data-page="studio"] .studio-quick-more > summary strong {
        text-align: left;
    }

    body[data-page="studio"] .vue-studio-toolbox > summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body[data-page="studio"] .vue-studio-toolbox > summary em {
        display: none;
    }
}

@media (max-width: 640px) {
    body[data-page="work"] .vue-work-dock,
    body[data-page="export"] .vue-export-hero {
        grid-template-columns: 1fr;
    }

    body[data-page="work"] .vue-work-file-rail,
    body[data-page="export"] .vue-export-package-rail {
        display: none;
    }

    body[data-page="work"] .vue-work-main,
    body[data-page="work"] .vue-work-side,
    body[data-page="work"] .vue-work-nav,
    body[data-page="export"] .vue-export-summary {
        grid-column: auto;
    }

    body[data-page="work"] .vue-work-side {
        margin: 0 14px 14px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary {
        grid-template-columns: 1fr;
    }

    .vue-library-boundary-grid {
        grid-template-columns: 1fr;
    }
}

/* Local UX pass v414: central studio steps behave like one guided creative task. */
body[data-page="studio"] .vue-step-mission {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
    grid-template-areas:
            "copy chips"
            "actions chips";
    gap: 14px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: var(--animaker-radius-card);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 255, 0.86)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.08), transparent 42%);
    box-shadow: 0 18px 42px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-step-mission::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, var(--cyan), var(--mint), var(--yellow));
}

body[data-page="studio"] .vue-step-mission-visual {
    border-color: rgba(33, 183, 197, 0.24);
}

body[data-page="studio"] .vue-step-mission-story {
    border-color: rgba(123, 97, 255, 0.22);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 247, 255, 0.88)),
            linear-gradient(90deg, rgba(123, 97, 255, 0.08), transparent 42%);
}

body[data-page="studio"] .vue-step-mission-story::before {
    background: linear-gradient(180deg, var(--violet), var(--mint), var(--yellow));
}

body[data-page="studio"] .vue-step-mission[data-mission-state="ready"] {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(135deg, rgba(241, 255, 248, 0.96), rgba(255, 255, 255, 0.9)),
            linear-gradient(90deg, rgba(87, 204, 153, 0.1), transparent 42%);
}

body[data-page="studio"] .vue-step-mission-copy {
    grid-area: copy;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 6px;
    padding-left: 4px;
}

body[data-page="studio"] .vue-step-mission-copy span {
    width: fit-content;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--ink) 72%, var(--teal));
    background: rgba(33, 183, 197, 0.12);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-step-mission-story .vue-step-mission-copy span {
    color: color-mix(in srgb, var(--ink) 72%, var(--violet));
    background: rgba(123, 97, 255, 0.12);
}

body[data-page="studio"] .vue-step-mission[data-mission-state="ready"] .vue-step-mission-copy span {
    color: #237b5a;
    background: rgba(87, 204, 153, 0.14);
}

body[data-page="studio"] .vue-step-mission-copy strong {
    color: var(--ink);
    font-size: clamp(22px, 2.1vw, 31px);
    font-weight: 950;
    line-height: 1.08;
}

body[data-page="studio"] .vue-step-mission-copy p,
body[data-page="studio"] .vue-core-mission.vue-step-mission p {
    display: block !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    color: var(--muted);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.65;
}

body[data-page="studio"] .vue-step-task-chips {
    grid-area: chips;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: stretch;
}

body[data-page="studio"] .vue-step-task-chips button {
    min-width: 0;
    min-height: 64px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: var(--animaker-radius-control);
    color: var(--ink);
    text-align: left;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 253, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

body[data-page="studio"] .vue-step-task-chips button:hover {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.34);
    box-shadow: 0 12px 24px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-step-task-chips button.done {
    border-color: rgba(87, 204, 153, 0.38);
    background:
            linear-gradient(145deg, rgba(241, 255, 248, 0.98), rgba(255, 255, 255, 0.9));
}

body[data-page="studio"] .vue-step-task-chips span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

body[data-page="studio"] .vue-step-task-chips strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
}

body[data-page="studio"] .vue-step-task-chips button.done strong {
    color: #237b5a;
}

body[data-page="studio"] .vue-step-mission-actions,
body[data-page="studio"] .vue-core-mission.vue-step-mission > .vue-step-mission-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

body[data-page="studio"] .vue-step-mission-actions .primary-btn,
body[data-page="studio"] .vue-step-mission-actions .secondary-btn {
    min-height: 42px;
    border-radius: var(--animaker-radius-control);
}

body[data-page="studio"] .vue-visual-route-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="studio"] .vue-visual-route-card article {
    min-height: auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--animaker-radius-panel);
}

body[data-page="studio"] .vue-visual-route-card article::before {
    width: 8px;
    height: 38px;
}

body[data-page="studio"] .vue-visual-route-card article strong {
    margin-top: 0;
    font-size: 15px;
}

body[data-page="studio"] .vue-visual-route-card article button {
    align-self: center;
    white-space: nowrap;
}

body[data-page="studio"] .vue-visual-route-card article p {
    grid-column: 2 / -1;
}

body[data-page="studio"].studio-theme-night .vue-step-mission {
    color: #f8f5ff;
    border-color: rgba(255, 255, 255, 0.15);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
            rgba(18, 17, 28, 0.9);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28);
}

body[data-page="studio"].studio-theme-night .vue-step-mission-copy strong,
body[data-page="studio"].studio-theme-night .vue-step-task-chips strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-step-mission-copy p,
body[data-page="studio"].studio-theme-night .vue-step-task-chips span {
    color: rgba(248, 245, 255, 0.72);
}

body[data-page="studio"].studio-theme-night .vue-step-task-chips button {
    border-color: rgba(255, 255, 255, 0.12);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
            rgba(18, 17, 28, 0.86);
}

body[data-page="studio"].studio-theme-night .vue-step-task-chips button.done {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(145deg, rgba(87, 204, 153, 0.12), rgba(255, 255, 255, 0.04)),
            rgba(18, 17, 28, 0.86);
}

@media (max-width: 900px) {
    body[data-page="studio"] .vue-step-mission {
        grid-template-columns: 1fr;
        grid-template-areas:
                "copy"
                "chips"
                "actions";
    }
}

@media (max-width: 640px) {
    body[data-page="studio"] .vue-step-mission {
        padding: 14px;
    }

    body[data-page="studio"] .vue-step-task-chips {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-step-mission-actions .primary-btn,
    body[data-page="studio"] .vue-step-mission-actions .secondary-btn {
        width: 100%;
    }

    body[data-page="studio"] .vue-visual-route-card article {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body[data-page="studio"] .vue-visual-route-card article button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Local UX pass v415: make template/archive ownership boundaries explicit. */
body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 2px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 999px;
    color: color-mix(in srgb, #17151f 78%, var(--teal));
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(240, 253, 255, 0.7));
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
}

body[data-page="characters"] .vue-ownership-strip span {
    border-color: rgba(123, 97, 255, 0.22);
    color: color-mix(in srgb, #17151f 78%, var(--violet));
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(249, 247, 255, 0.72));
}

body[data-page="characters"] .vue-character-completion-copy .eyebrow,
body[data-page="characters"] .vue-character-dimensions-head .eyebrow,
body[data-page="characters"] .vue-character-queue-copy .eyebrow {
    color: #6a4de0;
}

body[data-page="characters"] .vue-character-card-progress small {
    color: color-mix(in srgb, var(--muted) 78%, var(--violet));
}

body[data-page="characters"] .oc-archive-card .card-foot.has-palette .secondary-btn:nth-child(2) {
    color: #17151f;
    border-color: rgba(255, 209, 102, 0.48);
    background: rgba(255, 209, 102, 0.2);
}

@media (max-width: 640px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip span {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Local UX pass v416: make creator-center ownership visible before any action. */
body[data-page="me"] .vue-me-ownership-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 2px;
}

body[data-page="me"] .vue-me-ownership-strip span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 999px;
    color: color-mix(in srgb, #17151f 78%, var(--teal));
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 255, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
}

body[data-page="me"] .vue-me-ownership-card[href="#favoriteGrid"] {
    border-color: rgba(123, 97, 255, 0.22);
}

body[data-page="me"] .vue-me-ownership-card[href="#favoriteGrid"] span {
    color: color-mix(in srgb, #17151f 72%, var(--violet));
    background: rgba(123, 97, 255, 0.12);
}

body[data-page="me"] .vue-me-ownership-card.active b,
body[data-page="me"] .vue-me-ownership-card[href="#favoriteGrid"] b {
    white-space: nowrap;
}

@media (max-width: 640px) {
    body[data-page="me"] .vue-me-ownership-strip span {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Local UX pass v417: clarify ownership on detail/export handoff. */
body[data-page="work"] .vue-work-ownership-strip,
body[data-page="export"] .vue-export-ownership-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 2px;
}

body[data-page="work"] .vue-work-ownership-strip span,
body[data-page="export"] .vue-export-ownership-strip span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 999px;
    color: color-mix(in srgb, #17151f 78%, var(--teal));
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 255, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
}

body[data-page="work"] .vue-work-ownership-strip[data-owned="false"] span {
    border-color: rgba(123, 97, 255, 0.22);
    color: color-mix(in srgb, #17151f 78%, var(--violet));
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(249, 247, 255, 0.74));
}

body[data-page="export"] .vue-export-ownership-strip span {
    border-color: rgba(255, 209, 102, 0.36);
    color: color-mix(in srgb, #17151f 82%, #9d6f00);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 249, 226, 0.78));
}

body[data-page="export"] .vue-export-source-notice {
    display: grid;
    gap: 6px;
    margin: 2px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(110, 231, 242, 0.24);
    border-radius: 18px;
    color: rgba(247, 244, 234, 0.78);
    background:
            linear-gradient(135deg, rgba(110, 231, 242, 0.12), rgba(255, 209, 102, 0.08)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="export"] .vue-export-source-notice span {
    width: fit-content;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #111827;
    background: linear-gradient(100deg, var(--oc-cyan), var(--oc-gold));
    font-size: 12px;
    font-weight: 950;
}

body[data-page="export"] .vue-export-source-notice p {
    margin: 0;
    color: rgba(247, 244, 234, 0.78);
    font-size: 13px;
    font-weight: 820;
    line-height: 1.65;
}

body[data-page="work"] .vue-work-actions .secondary-btn[href*="/export/"],
body[data-page="work"] .vue-work-readiness-actions .secondary-btn[href*="/export/"],
body[data-page="work"] .vue-work-launchpad-actions .secondary-btn[href*="/export/"] {
    border-color: rgba(255, 209, 102, 0.42);
    background: rgba(255, 209, 102, 0.16);
}

@media (max-width: 640px) {
    body[data-page="work"] .vue-work-ownership-strip span,
    body[data-page="export"] .vue-export-ownership-strip span {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Local UX pass v419: make the studio next action read like a director cue. */
body[data-page="studio"] .vue-step-head {
    align-items: stretch;
}

body[data-page="studio"] .vue-step-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

body[data-page="studio"] .vue-step-side {
    width: min(360px, 42%);
    min-width: 300px;
    align-items: stretch;
}

body[data-page="studio"] .vue-step-side > .vue-step-state {
    align-self: flex-start;
}

body[data-page="studio"] .vue-step-next-cue {
    min-width: 0;
    flex: 1 1 250px;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: var(--animaker-radius-card);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 255, 0.68)),
            rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 34px rgba(36, 28, 52, 0.08);
}

body[data-page="studio"] .vue-step-next-cue[data-cue-state="queued"] {
    border-color: rgba(123, 97, 255, 0.18);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(249, 247, 255, 0.7)),
            rgba(255, 255, 255, 0.82);
}

body[data-page="studio"] .vue-step-next-cue[data-cue-state="done"] {
    border-color: rgba(87, 204, 153, 0.22);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(239, 255, 248, 0.72)),
            rgba(255, 255, 255, 0.84);
}

body[data-page="studio"] .vue-step-next-cue span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: #126f79;
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-step-next-cue[data-cue-state="queued"] span {
    color: #5f49d5;
    background: rgba(123, 97, 255, 0.11);
}

body[data-page="studio"] .vue-step-next-cue[data-cue-state="done"] span {
    color: #1f7a5b;
    background: rgba(87, 204, 153, 0.14);
}

body[data-page="studio"] .vue-step-next-cue strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.26;
}

body[data-page="studio"] .vue-step-next-cue small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.48;
}

body[data-page="studio"] .vue-step-next-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

body[data-page="studio"] .vue-step-next-actions .primary-btn,
body[data-page="studio"] .vue-step-next-actions .secondary-btn {
    min-height: 38px;
    padding: 0 12px;
    white-space: normal;
}

body[data-page="studio"] .vue-board-director-cue {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(255, 209, 102, 0.24);
    border-radius: var(--animaker-radius-card);
    background:
            linear-gradient(135deg, rgba(255, 209, 102, 0.16), rgba(33, 183, 197, 0.08)),
            rgba(18, 16, 28, 0.22);
}

body[data-page="studio"] .vue-board-director-cue[data-director-state="cover"] {
    border-color: rgba(33, 183, 197, 0.28);
    background:
            linear-gradient(135deg, rgba(33, 183, 197, 0.16), rgba(255, 255, 255, 0.05)),
            rgba(18, 16, 28, 0.24);
}

body[data-page="studio"] .vue-board-director-cue[data-director-state="complete"] {
    border-color: rgba(87, 204, 153, 0.28);
    background:
            linear-gradient(135deg, rgba(87, 204, 153, 0.16), rgba(255, 209, 102, 0.08)),
            rgba(18, 16, 28, 0.24);
}

body[data-page="studio"] .vue-board-director-cue[data-director-state="running"] {
    border-color: rgba(255, 255, 255, 0.18);
}

body[data-page="studio"] .vue-board-director-cue span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: #17151f;
    background: var(--yellow);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-board-director-cue strong {
    color: #fff;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.28;
}

body[data-page="studio"] .vue-board-director-cue p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

body[data-page="studio"] .vue-board-director-cue small {
    color: rgba(185, 245, 255, 0.82);
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 900px) {
    body[data-page="studio"] .vue-step-head {
        display: grid;
    }

    body[data-page="studio"] .vue-step-side {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    body[data-page="studio"] .vue-step-next-actions {
        grid-template-columns: 1fr;
    }
}

/* Local UX pass v420: make the first-screen studio action explain itself. */
body[data-page="studio"] .vue-route-next {
    grid-template-columns: minmax(0, 1fr) minmax(168px, 220px);
    align-items: center;
}

body[data-page="studio"] .vue-route-next-proof {
    display: grid;
    gap: 5px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: var(--animaker-radius-card);
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.9), rgba(255, 255, 255, 0.72));
}

body[data-page="studio"] .vue-route-next-proof[data-proof-state="missing"] {
    border-color: rgba(255, 209, 102, 0.34);
    background:
            linear-gradient(135deg, rgba(255, 249, 226, 0.88), rgba(255, 255, 255, 0.74));
}

body[data-page="studio"] .vue-route-next-proof[data-proof-state="complete"] {
    border-color: rgba(87, 204, 153, 0.28);
    background:
            linear-gradient(135deg, rgba(239, 255, 248, 0.9), rgba(255, 255, 255, 0.74));
}

body[data-page="studio"] .vue-route-next-proof span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: #126f79;
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-route-next-proof[data-proof-state="missing"] span {
    color: #8a6400;
    background: rgba(255, 209, 102, 0.22);
}

body[data-page="studio"] .vue-route-next-proof strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.22;
}

body[data-page="studio"] .vue-route-next-proof small,
body[data-page="studio"] .vue-route-primary-stack small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

body[data-page="studio"] .vue-route-primary-stack {
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 12px;
    border: 1px solid rgba(33, 183, 197, 0.16);
    border-radius: var(--animaker-radius-card);
    background: rgba(255, 255, 255, 0.64);
}

body[data-page="studio"] .vue-route-primary-stack .primary-btn {
    width: 100%;
    min-height: 44px;
    white-space: normal;
}

body[data-page="studio"] .vue-route-primary-stack small {
    display: block;
    text-align: center;
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-route-next {
        grid-template-columns: 1fr;
    }
}

/* Local UX pass v421: surface the one-next-step cue inside the visible hero route card. */
body[data-page="studio"] .vue-route-focus-proof {
    display: grid;
    gap: 5px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 209, 102, 0.28);
    border-radius: var(--animaker-radius-card);
    background:
            linear-gradient(135deg, rgba(255, 209, 102, 0.13), rgba(33, 183, 197, 0.08)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-route-focus-proof[data-proof-state="complete"] {
    border-color: rgba(87, 204, 153, 0.28);
    background:
            linear-gradient(135deg, rgba(87, 204, 153, 0.14), rgba(255, 255, 255, 0.05)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-route-focus-proof span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: #17151f;
    background: var(--yellow);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-route-focus-proof strong {
    color: #fff;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.24;
}

body[data-page="studio"] .vue-route-focus-proof small {
    display: block;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-proof small {
    display: block;
}

body[data-page="studio"] .vue-route-focus-actions .vue-route-action-hint {
    grid-column: 1 / -1;
    margin-top: -4px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

/* Local UX pass v426: make the pre-image state read as a polished OC production board. */
body[data-page="studio"] .vue-board-empty-cover {
    align-content: space-between;
    gap: 10px;
    padding: 18px 18px 50px;
}

body[data-page="studio"] .vue-board-empty-stage {
    min-height: 148px;
    grid-template-columns: minmax(100px, 0.72fr) minmax(0, 1.28fr);
    padding: 10px;
}

body[data-page="studio"] .vue-board-silhouette {
    min-height: 126px;
}

body[data-page="studio"] .vue-board-blueprint > small {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body[data-page="studio"] .vue-board-blueprint-lines span {
    max-width: 100%;
}

body[data-page="studio"] .vue-board-empty-head strong {
    font-size: clamp(25px, 2.9vw, 34px);
    line-height: 1.3;
    min-height: 1.5em;
}

body[data-page="studio"] .vue-board-blueprint > strong {
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-board-blueprint-lines {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    body[data-page="studio"] .vue-board-cover img,
    body[data-page="studio"] .vue-board-empty-cover {
        height: auto;
        min-height: 430px;
    }

    body[data-page="studio"] .vue-board-empty-stage {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body[data-page="studio"] .vue-board-silhouette {
        min-height: 118px;
    }

    body[data-page="studio"] .vue-board-blueprint-lines {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Local UX pass v430: prioritize UI preview mode and clarify template/archive routes. */
body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 760px;
    margin-top: 4px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 92px;
    padding: 12px 12px 12px 14px;
    overflow: hidden;
    color: #17151f;
    text-decoration: none;
    border: 1px solid rgba(23, 21, 31, 0.1);
    border-radius: 20px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(244, 252, 252, 0.72)),
            radial-gradient(circle at 94% 8%, rgba(33, 183, 197, 0.14), transparent 34%);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(33, 183, 197, 0.42);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step:hover,
body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.34);
    box-shadow: 0 16px 32px rgba(17, 24, 39, 0.1);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step.active {
    color: #f7f4ea;
    border-color: rgba(255, 255, 255, 0.24);
    background:
            linear-gradient(145deg, rgba(23, 21, 31, 0.96), rgba(49, 42, 63, 0.92)),
            radial-gradient(circle at 84% 0, rgba(110, 231, 242, 0.24), transparent 36%);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step span {
    color: rgba(23, 21, 31, 0.58);
    font-size: 11px;
    font-weight: 950;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step.active span {
    color: var(--oc-gold);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step strong {
    font-size: 17px;
    line-height: 1.18;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step small {
    color: rgba(23, 21, 31, 0.62);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step.active small {
    color: rgba(247, 244, 234, 0.76);
}

body[data-page="studio"] .vue-ai-capability-strip[data-image-mode="mock"],
body[data-page="studio"] .vue-ai-capability-panel[data-image-mode="mock"] {
    border-color: rgba(33, 183, 197, 0.36);
    background:
            linear-gradient(145deg, rgba(240, 253, 255, 0.96), rgba(255, 255, 255, 0.9)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.18), transparent 34%),
            linear-gradient(90deg, rgba(255, 209, 102, 0.12), rgba(123, 97, 255, 0.08));
}

body[data-page="studio"] .vue-ai-capability-strip[data-image-mode="mock"] span,
body[data-page="studio"] .vue-ai-capability-panel[data-image-mode="mock"] span {
    color: #087f8f;
}

body[data-page="studio"] .vue-ai-capability-strip[data-image-mode="mock"] .vue-ai-capability-pills b,
body[data-page="studio"] .vue-ai-capability-panel[data-image-mode="mock"] .vue-ai-capability-grid article {
    border-color: rgba(33, 183, 197, 0.18);
    background: rgba(255, 255, 255, 0.86);
}

@media (max-width: 720px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-strip {
        grid-template-columns: 1fr;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-page-route-step {
        min-height: auto;
    }
}

/* Local UX pass v431: keep archive browsing rich when API data is unavailable. */
body[data-page="characters"] .vue-archive-source-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 20px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.92), rgba(255, 255, 255, 0.82)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 34%);
}

body[data-page="characters"] .vue-archive-source-notice span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #0f6f7a;
    background: rgba(33, 183, 197, 0.14);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

body[data-page="characters"] .vue-archive-source-notice p {
    margin: 0;
    color: rgba(23, 21, 31, 0.68);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

@media (max-width: 560px) {
    body[data-page="characters"] .vue-archive-source-notice {
        grid-template-columns: 1fr;
    }
}

/* Local UX pass v432: make the studio hero route speak as one clear task. */
body[data-page="studio"] .vue-route-one-task {
    position: relative;
    display: grid;
    gap: 6px;
    margin: 10px 0 0;
    padding: 12px 14px 12px 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 209, 102, 0.34);
    border-radius: 20px;
    background:
            linear-gradient(135deg, rgba(255, 209, 102, 0.16), rgba(33, 183, 197, 0.08)),
            rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-page="studio"] .vue-route-one-task::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--yellow), var(--cyan));
}

body[data-page="studio"] .vue-route-one-task[data-task-state="complete"] {
    border-color: rgba(87, 204, 153, 0.32);
    background:
            linear-gradient(135deg, rgba(87, 204, 153, 0.16), rgba(255, 255, 255, 0.06)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-route-one-task[data-task-state="running"] {
    border-color: rgba(33, 183, 197, 0.34);
    background:
            linear-gradient(135deg, rgba(33, 183, 197, 0.16), rgba(255, 255, 255, 0.06)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-route-one-task span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #17151f;
    background: var(--yellow);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-route-one-task[data-task-state="running"] span {
    background: var(--cyan);
}

body[data-page="studio"] .vue-route-one-task[data-task-state="complete"] span {
    color: #063d2d;
    background: #87e0b7;
}

body[data-page="studio"] .vue-route-one-task strong {
    color: #fff;
    font-size: clamp(17px, 1.9vw, 22px);
    font-weight: 950;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

body[data-page="studio"] .vue-route-one-task small {
    display: block;
    max-width: 54em;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-one-task small {
    display: block;
}

@media (max-width: 560px) {
    body[data-page="studio"] .vue-route-one-task {
        border-radius: 18px;
        padding: 11px 12px 11px 14px;
    }
}

/* Local UI-first pass v437: homepage explains the next creative move while test skips OSS. */
body[data-page="home"] .vue-home-flow {
    display: grid;
    gap: 12px;
    width: min(680px, 100%);
    margin-top: 4px;
    padding: 14px;
    border: 1px solid rgba(247, 244, 234, 0.18);
    border-radius: 24px;
    background:
            linear-gradient(145deg, rgba(247, 244, 234, 0.12), rgba(255, 255, 255, 0.055)),
            rgba(13, 11, 20, 0.5);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
}

body[data-page="home"] .vue-home-flow-head {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) auto;
    gap: 10px;
    align-items: center;
}

body[data-page="home"] .vue-home-flow-head span {
    width: fit-content;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #17151f;
    background: var(--yellow);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

body[data-page="home"] .vue-home-flow-head strong {
    color: #fff;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.2;
}

body[data-page="home"] .vue-home-flow-head a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    color: #091116;
    background: linear-gradient(100deg, var(--cyan), var(--yellow));
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

body[data-page="home"] .vue-home-flow ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-page="home"] .vue-home-flow li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px 10px;
    align-items: start;
    min-height: 76px;
    padding: 12px;
    border: 1px solid rgba(247, 244, 234, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
}

body[data-page="home"] .vue-home-flow li em {
    grid-row: span 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #111827;
    background: rgba(247, 244, 234, 0.92);
    font-style: normal;
    font-weight: 950;
}

body[data-page="home"] .vue-home-flow li strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.25;
}

body[data-page="home"] .vue-home-flow li small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

body[data-page="home"] .vue-home-source-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 22px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.94), rgba(255, 255, 255, 0.86)),
            linear-gradient(90deg, rgba(255, 209, 102, 0.1), rgba(123, 97, 255, 0.08));
    box-shadow: 0 14px 34px rgba(31, 24, 44, 0.07);
}

body[data-page="home"] .vue-home-source-notice span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #0f6f7a;
    background: rgba(33, 183, 197, 0.14);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

body[data-page="home"] .vue-home-source-notice p {
    margin: 0;
    color: rgba(23, 21, 31, 0.68);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

body[data-page="home"] .vue-home-source-notice.is-hero {
    max-width: 760px;
    margin-top: 2px;
}

@media (max-width: 900px) {
    body[data-page="home"] .vue-home-flow-head,
    body[data-page="home"] .vue-home-flow ol {
        grid-template-columns: 1fr;
    }

    body[data-page="home"] .vue-home-flow-head a {
        width: fit-content;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-copy {
        width: min(100% - 28px, 520px);
    }

    body[data-page="home"] .vue-home-flow {
        border-radius: 20px;
        padding: 12px;
    }

    body[data-page="home"] .vue-home-flow li {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    body[data-page="home"] .vue-home-source-notice {
        grid-template-columns: 1fr;
    }

    body[data-page="home"] .vue-home-flow-head a {
        width: 100%;
    }
}

/* Local UI-first pass v439: studio tells the player the one current output. */
body[data-page="studio"] .vue-route-step-output {
    position: relative;
    display: grid;
    gap: 5px;
    margin-top: 2px;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid rgba(185, 245, 255, 0.2);
    border-radius: 18px;
    background:
            linear-gradient(135deg, rgba(185, 245, 255, 0.12), rgba(255, 255, 255, 0.05)),
            rgba(255, 255, 255, 0.045);
}

body[data-page="studio"] .vue-route-step-output::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--mint));
}

body[data-page="studio"] .vue-route-step-output[data-output-state="ready"] {
    border-color: rgba(87, 204, 153, 0.26);
    background:
            linear-gradient(135deg, rgba(87, 204, 153, 0.14), rgba(255, 255, 255, 0.05)),
            rgba(255, 255, 255, 0.045);
}

body[data-page="studio"] .vue-route-step-output span {
    width: fit-content;
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #061217;
    background: rgba(185, 245, 255, 0.86);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-route-step-output strong {
    color: #fff;
    font-size: clamp(16px, 1.7vw, 20px);
    font-weight: 950;
    line-height: 1.18;
}

body[data-page="studio"] .vue-route-step-output small {
    display: block;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.48;
}

body[data-page="studio"] .vue-assist-one-next {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    overflow: hidden;
    padding: 13px 14px 13px 16px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 22px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.94), rgba(255, 255, 255, 0.86)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.16), transparent 36%);
    box-shadow: 0 14px 30px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-assist-one-next::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--cyan), var(--yellow));
}

body[data-page="studio"] .vue-assist-one-next[data-next-tone="mock"] {
    border-color: rgba(255, 209, 102, 0.34);
    background:
            linear-gradient(135deg, rgba(255, 249, 226, 0.96), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.14), transparent 36%);
}

body[data-page="studio"] .vue-assist-one-next[data-next-tone="done"],
body[data-page="studio"] .vue-assist-one-next[data-next-tone="ready"] {
    border-color: rgba(87, 204, 153, 0.3);
    background:
            linear-gradient(135deg, rgba(241, 255, 248, 0.96), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.14), transparent 36%);
}

body[data-page="studio"] .vue-assist-one-next[data-next-tone="running"] {
    border-color: rgba(123, 97, 255, 0.26);
    background:
            linear-gradient(135deg, rgba(249, 247, 255, 0.96), rgba(255, 255, 255, 0.88)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.14), transparent 36%);
}

body[data-page="studio"] .vue-assist-one-next > div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

body[data-page="studio"] .vue-assist-one-next span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #0f6f7a;
    background: rgba(33, 183, 197, 0.13);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-assist-one-next[data-next-tone="mock"] span {
    color: #8a6400;
    background: rgba(255, 209, 102, 0.24);
}

body[data-page="studio"] .vue-assist-one-next[data-next-tone="done"] span,
body[data-page="studio"] .vue-assist-one-next[data-next-tone="ready"] span {
    color: #237b5a;
    background: rgba(87, 204, 153, 0.16);
}

body[data-page="studio"] .vue-assist-one-next strong {
    color: var(--ink);
    font-size: clamp(18px, 1.8vw, 23px);
    font-weight: 950;
    line-height: 1.15;
}

body[data-page="studio"] .vue-assist-one-next p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

body[data-page="studio"] .vue-assist-one-next .primary-btn {
    min-width: 116px;
    min-height: 42px;
    padding: 0 14px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-assist-one-next {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-assist-one-next .primary-btn {
        width: 100%;
    }
}

/* Local UI-first pass v452 final guard: compact login/register card after legacy login rules. */
body[data-page="login"] .auth-shell {
    background-position: center !important;
    padding-top: clamp(26px, 4vw, 58px) !important;
    padding-bottom: clamp(30px, 4.6vw, 64px) !important;
}

body[data-page="login"] .vue-login-shell .auth-card {
    gap: 8px !important;
    padding: clamp(18px, 2.2vw, 24px) !important;
}

body[data-page="login"] .vue-login-card-head {
    gap: 3px !important;
}

body[data-page="login"] .vue-login-card-head p {
    max-width: 28em;
    color: rgba(112, 107, 124, 0.8);
    font-size: 13px;
    line-height: 1.35;
}

body[data-page="login"] .vue-login-pass {
    min-height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
}

body[data-page="login"] .vue-login-pass span {
    color: rgba(112, 107, 124, 0.78);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="login"] .vue-login-pass strong {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
}

body[data-page="login"] .vue-auth-tabs {
    padding: 4px !important;
}

body[data-page="login"] .vue-auth-tabs button,
body[data-page="login"] .vue-password-field button,
body[data-page="login"] .auth-card .primary-btn {
    min-height: 38px !important;
}

body[data-page="login"] .auth-card label {
    gap: 4px !important;
    font-size: 13px;
}

body[data-page="login"] :is(.auth-card input, .auth-card textarea) {
    min-height: 38px !important;
    padding: 8px 10px !important;
}

body[data-page="login"] .auth-card textarea {
    min-height: 54px !important;
    resize: vertical;
}

body[data-page="login"] .vue-password-meter {
    gap: 7px !important;
}

body[data-page="login"] .vue-password-rules {
    gap: 5px !important;
}

body[data-page="login"] .vue-password-rules span {
    min-height: 22px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
}

body.animaker-theme-night[data-page="login"] .vue-login-card-head p,
body.animaker-theme-night[data-page="login"] .vue-login-pass span {
    color: rgba(248, 245, 255, 0.72);
}

/* Local UX pass v460: final guided OC studio layout, consolidated after legacy studio rules. */
body[data-page="studio"].studio-wizard-ready .vue-assist-shell {
    display: block;
}

body[data-page="studio"].studio-wizard-ready .studio-mode-hub {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title {
    margin-bottom: 16px;
}

body[data-page="studio"] .vue-assist-card {
    gap: 12px;
    padding: 14px;
    border-color: rgba(33, 183, 197, 0.22);
    border-radius: 24px;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 253, 0.92)),
            #fff;
    box-shadow: 0 18px 44px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-assist-head {
    gap: 10px;
    padding: 2px;
}

body[data-page="studio"] .vue-assist-head h2 {
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.22;
}

body[data-page="studio"] .vue-assist-head p:last-child {
    font-size: 12px;
    font-weight: 850;
    line-height: 1.48;
}

body[data-page="studio"] .vue-assist-head strong {
    width: 48px;
    height: 48px;
    border-radius: 18px;
}

body[data-page="studio"] .vue-assist-one-next {
    grid-template-columns: 1fr;
    gap: 10px;
    border-radius: 22px;
}

body[data-page="studio"] .vue-assist-one-next .primary-btn {
    width: 100%;
    min-height: 40px;
}

body[data-page="studio"] .vue-assist-track-title {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

body[data-page="studio"] .vue-assist-track-title span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-assist-track-title strong {
    color: var(--ink);
    font-size: 12px;
    line-height: 1.3;
}

body[data-page="studio"] .vue-assist-mainline {
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
}

body[data-page="studio"] .vue-assist-groups {
    grid-template-columns: 1fr;
    gap: 8px;
}

body[data-page="studio"] .vue-assist-groups button {
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 2px 9px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 16px;
}

body[data-page="studio"] .vue-assist-groups span {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
}

body[data-page="studio"] .vue-assist-groups strong,
body[data-page="studio"] .vue-assist-groups small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="studio"] .vue-assist-missing {
    gap: 6px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 209, 102, 0.13);
}

body[data-page="studio"] .vue-assist-missing span {
    flex: 0 0 100%;
    color: #8a6400;
}

body[data-page="studio"] .vue-assist-missing button {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
}

body[data-page="studio"] .vue-assist-prompt {
    border-radius: 18px;
}

body[data-page="studio"] .vue-assist-prompt p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 12px;
    font-weight: 850;
}

body[data-page="studio"] .vue-assist-toolbox {
    overflow: hidden;
    border: 1px solid rgba(230, 225, 236, 0.92);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
}

body[data-page="studio"] .vue-assist-toolbox > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: center;
    padding: 11px 12px;
    cursor: pointer;
    list-style: none;
}

body[data-page="studio"] .vue-assist-toolbox > summary::-webkit-details-marker {
    display: none;
}

body[data-page="studio"] .vue-assist-toolbox > summary::after {
    content: "展开";
    grid-row: 1 / span 3;
    grid-column: 2;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--teal);
    background: rgba(33, 183, 197, 0.1);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-assist-toolbox[open] > summary::after {
    content: "收起";
}

body[data-page="studio"] .vue-assist-toolbox > summary span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-assist-toolbox > summary strong {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.3;
}

body[data-page="studio"] .vue-assist-toolbox > summary small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

body[data-page="studio"] .vue-assist-toolbox-body {
    display: grid;
    gap: 10px;
    padding: 0 10px 10px;
}

body[data-page="studio"] .vue-assist-toolbox .vue-starter-grid,
body[data-page="studio"] .vue-assist-toolbox .vue-ai-capability-pills,
body[data-page="studio"] .vue-assist-toolbox .vue-assist-actions {
    grid-template-columns: 1fr;
}

body[data-page="studio"] .vue-assist-toolbox .vue-starter-grid button {
    min-height: 86px;
}

body[data-page="studio"] .vue-assist-toolbox .vue-generation-feedback-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="studio"] .vue-assist-toolbox .vue-generation-feedback-chips b {
    min-height: 44px;
}

body[data-page="studio"] .vue-assist-toolbox .vue-operation-panel {
    grid-template-columns: 1fr;
}

body[data-page="studio"] .vue-assist-toolbox .vue-operation-panel .secondary-btn,
body[data-page="studio"] .vue-assist-toolbox .vue-assist-actions .primary-btn,
body[data-page="studio"] .vue-assist-toolbox .vue-assist-actions .secondary-btn {
    width: 100%;
}

body[data-page="studio"] .studio-panel.is-active {
    border-radius: 26px;
}

body[data-page="studio"] .studio-wizard-nav {
    border-radius: 22px;
}

body[data-page="studio"].studio-theme-night .vue-assist-card {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(180deg, rgba(33, 31, 45, 0.96), rgba(24, 22, 34, 0.94)),
            #181622;
}

body[data-page="studio"].studio-theme-night .vue-assist-mainline,
body[data-page="studio"].studio-theme-night .vue-assist-toolbox,
body[data-page="studio"].studio-theme-night .vue-assist-prompt {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

body[data-page="studio"].studio-theme-night .vue-assist-track-title strong,
body[data-page="studio"].studio-theme-night .vue-assist-toolbox > summary strong {
    color: #fff;
}

@media (max-width: 1180px) {
    body[data-page="studio"] .vue-assist-card {
        position: relative;
    }
}

@media (max-width: 900px) {
    body[data-page="studio"] .vue-assist-card {
        gap: 10px;
    }

    body[data-page="studio"] .studio-rail {
        order: 0;
    }

    body[data-page="studio"] .studio-flow.designer-form {
        order: -1;
    }

    body[data-page="studio"] .studio-preview.avatar-preview {
        order: 1;
    }

    body[data-page="studio"] .vue-assist-head p:last-child,
    body[data-page="studio"] .vue-assist-mainline,
    body[data-page="studio"] .vue-assist-missing,
    body[data-page="studio"] .vue-assist-prompt {
        display: none;
    }
}

@media (max-width: 560px) {
    body[data-page="studio"] .vue-assist-groups {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-assist-toolbox > summary {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-assist-toolbox > summary::after {
        grid-row: auto;
        grid-column: 1;
        width: fit-content;
    }
}

/* Local UX pass v461: turn the lower studio into a focused next-step stage. */
body[data-page="studio"].studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
    gap: 18px;
    align-items: start;
    margin-top: 12px;
}

body[data-page="studio"].studio-wizard-ready .studio-path-banner {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .studio-rail {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
}

body[data-page="studio"].studio-wizard-ready .studio-flow.designer-form {
    grid-column: 1;
    grid-row: 2;
    gap: 14px;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    grid-column: 2;
    grid-row: 1 / span 2;
    border-radius: 28px;
}

body[data-page="studio"] .vue-assist-card {
    display: grid;
    grid-template-columns: minmax(210px, 0.82fr) minmax(320px, 1.12fr) minmax(190px, 0.5fr);
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    border-radius: 24px;
}

body[data-page="studio"] .vue-assist-head,
body[data-page="studio"] .vue-assist-one-next,
body[data-page="studio"] .vue-assist-toolbox {
    min-height: 100%;
}

body[data-page="studio"] .vue-assist-head {
    align-content: center;
    padding: 12px;
    border: 1px solid rgba(230, 225, 236, 0.82);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.62);
}

body[data-page="studio"] .vue-assist-head h2 {
    font-size: 18px;
}

body[data-page="studio"] .vue-assist-meter,
body[data-page="studio"] .vue-assist-launch {
    grid-column: 1 / -1;
}

body[data-page="studio"] .vue-assist-one-next {
    align-content: center;
    padding: 14px;
    border-radius: 22px;
}

body[data-page="studio"] .vue-assist-one-next strong {
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.12;
}

body[data-page="studio"] .vue-assist-one-next p {
    max-width: 560px;
}

body[data-page="studio"] .vue-assist-mainline,
body[data-page="studio"] .vue-assist-missing,
body[data-page="studio"] .vue-assist-prompt {
    display: none;
}

body[data-page="studio"] .vue-assist-toolbox {
    align-self: stretch;
    display: grid;
    align-content: stretch;
    border-radius: 20px;
}

body[data-page="studio"] .vue-assist-toolbox > summary {
    min-height: 100%;
    align-content: center;
}

body[data-page="studio"] .vue-assist-toolbox[open] {
    grid-column: 1 / -1;
}

body[data-page="studio"] .vue-assist-toolbox[open] > summary {
    min-height: 0;
}

body[data-page="studio"] .studio-panel.is-active {
    gap: 14px;
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: 28px;
}

body[data-page="studio"] .vue-step-head {
    align-items: stretch;
    padding: 16px;
    border: 1px solid rgba(33, 183, 197, 0.2);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 253, 255, 0.72)),
            rgba(255, 255, 255, 0.86);
}

body[data-page="studio"] .vue-step-head h2 {
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.08;
}

body[data-page="studio"] .vue-step-head > div:first-child > p:not(.eyebrow) {
    max-width: 620px;
    font-size: 14px;
}

body[data-page="studio"] .vue-step-side {
    width: min(430px, 42%);
}

body[data-page="studio"] .vue-step-next-cue {
    min-height: 132px;
    align-content: center;
    border-radius: 22px;
}

body[data-page="studio"] .vue-step-next-cue strong {
    font-size: 18px;
}

body[data-page="studio"] .vue-step-mission {
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(18, 16, 28, 0.96), rgba(37, 34, 50, 0.92)),
            linear-gradient(135deg, rgba(33, 183, 197, 0.14), rgba(255, 209, 102, 0.1));
    box-shadow: 0 24px 56px rgba(26, 22, 38, 0.16);
}

body[data-page="studio"] .vue-step-mission-copy span {
    color: #b9f5ff;
}

body[data-page="studio"] .vue-step-mission-copy strong {
    color: #fff;
    font-size: clamp(22px, 2.5vw, 34px);
    line-height: 1.1;
}

body[data-page="studio"] .vue-step-mission-copy p {
    color: rgba(255, 255, 255, 0.76);
}

body[data-page="studio"] .vue-step-task-chips button {
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

body[data-page="studio"] .vue-step-task-chips button.done {
    border-color: rgba(87, 204, 153, 0.36);
    background: rgba(87, 204, 153, 0.16);
}

body[data-page="studio"] .vue-step-task-chips button span,
body[data-page="studio"] .vue-step-task-chips button strong {
    color: inherit;
}

body[data-page="studio"] .vue-core-head,
body[data-page="studio"] .vue-visual-head,
body[data-page="studio"] .vue-core-quick-panel,
body[data-page="studio"] .vue-core-summary,
body[data-page="studio"] .vue-visual-route-card,
body[data-page="studio"] .vue-visual-summary,
body[data-page="studio"] .vue-creator-mode-coach,
body[data-page="studio"] .studio-bridge-flow,
body[data-page="studio"] .vue-board-readiness-grid,
body[data-page="studio"] .vue-board-summary,
body[data-page="studio"] .vue-board-status {
    display: none;
}

body[data-page="studio"] .vue-studio-toolbox {
    border-radius: 22px;
}

body[data-page="studio"] .vue-studio-toolbox > summary {
    min-height: 58px;
    border-radius: 22px;
}

body[data-page="studio"] .vue-core-actions-drawer .vue-core-actions {
    padding: 12px;
}

body[data-page="studio"] .vue-visual-actions,
body[data-page="studio"] .studio-bridge-actions,
body[data-page="studio"] .studio-wizard-nav {
    border-radius: 24px;
}

body[data-page="studio"] .studio-ai-bridge,
body[data-page="studio"] .studio-publish-bridge {
    border-radius: 26px;
}

body[data-page="studio"] .vue-board-dock {
    gap: 14px;
}

body[data-page="studio"] .vue-board-cover,
body[data-page="studio"] .vue-board-empty-cover {
    border-radius: 24px;
}

body[data-page="studio"] .vue-board-info,
body[data-page="studio"] .vue-board-readiness,
body[data-page="studio"] .vue-board-actions,
body[data-page="studio"] .vue-board-notice {
    border-radius: 20px;
}

body[data-page="studio"] .vue-board-readiness {
    gap: 12px;
}

body[data-page="studio"] .vue-board-director-cue {
    border-radius: 18px;
}

body[data-page="studio"] .vue-reference-shell {
    display: none;
}

body[data-page="studio"].studio-theme-night .vue-assist-head,
body[data-page="studio"].studio-theme-night .vue-step-head {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1180px) {
    body[data-page="studio"].studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        grid-column: 1;
        grid-row: 3;
        position: relative;
        top: auto;
        max-height: none;
        overflow: visible;
    }

    body[data-page="studio"] .vue-assist-card {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
    }

    body[data-page="studio"] .vue-assist-toolbox {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    body[data-page="studio"].studio-wizard-ready .studio-flow.designer-form {
        order: 0;
    }

    body[data-page="studio"].studio-wizard-ready .studio-rail {
        order: -1;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        order: 1;
    }

    body[data-page="studio"] .vue-step-head,
    body[data-page="studio"] .vue-step-mission {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-step-side {
        width: 100%;
        min-width: 0;
    }

    body[data-page="studio"] .vue-step-task-chips {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body[data-page="studio"] .vue-assist-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    body[data-page="studio"] .vue-assist-head {
        min-height: 0;
    }

    body[data-page="studio"] .vue-assist-toolbox {
        grid-column: auto;
    }

    body[data-page="studio"] .vue-step-task-chips {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .studio-panel.is-active,
    body[data-page="studio"] .studio-ai-bridge,
    body[data-page="studio"] .studio-publish-bridge {
        padding: 14px;
        border-radius: 22px;
    }

    body[data-page="studio"] .vue-step-head {
        padding: 14px;
        border-radius: 22px;
    }

    body[data-page="studio"] .vue-step-head h2 {
        font-size: 24px;
    }
}

/* Local UX pass v461 guard: keep optional studio panels out of the main path. */
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-head,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-head,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-quick-panel,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-summary,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-route-card,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-summary,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-creator-mode-coach,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .studio-bridge-flow,
body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-readiness-grid,
body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-summary,
body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-status,
body[data-page="studio"].studio-wizard-ready .vue-reference-shell {
    display: none !important;
}

/* Local UX pass v463: image and publish steps become single-action stages. */
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .studio-ai-bridge,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .studio-publish-bridge {
    display: none !important;
}

body[data-page="studio"] .vue-image-readiness,
body[data-page="studio"] .vue-publish-decision {
    position: relative;
    overflow: hidden;
    gap: 16px;
    min-height: 212px;
    padding: clamp(18px, 2.4vw, 30px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    background:
            linear-gradient(135deg, rgba(18, 16, 28, 0.98), rgba(40, 35, 52, 0.94) 58%, rgba(25, 38, 48, 0.96)),
            radial-gradient(circle at 8% 0, rgba(255, 209, 102, 0.18), transparent 34%),
            radial-gradient(circle at 100% 10%, rgba(33, 183, 197, 0.22), transparent 36%);
    box-shadow: 0 28px 64px rgba(31, 24, 45, 0.18);
}

body[data-page="studio"] .vue-image-readiness::before,
body[data-page="studio"] .vue-publish-decision::before {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;
}

body[data-page="studio"] .vue-image-readiness::after,
body[data-page="studio"] .vue-publish-decision::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 22px;
    width: 96px;
    height: 96px;
    pointer-events: none;
    border-radius: 30px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
            linear-gradient(45deg, transparent 42%, rgba(255, 209, 102, 0.5) 43%, rgba(255, 209, 102, 0.5) 49%, transparent 50%),
            linear-gradient(-45deg, transparent 42%, rgba(79, 214, 224, 0.5) 43%, rgba(79, 214, 224, 0.5) 49%, transparent 50%);
    opacity: 0.56;
    transform: rotate(6deg);
}

body[data-page="studio"] .vue-image-readiness > *,
body[data-page="studio"] .vue-publish-decision > * {
    position: relative;
    z-index: 1;
}

body[data-page="studio"] .vue-image-readiness-head,
body[data-page="studio"] .vue-publish-decision-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

body[data-page="studio"] .vue-image-readiness-head span,
body[data-page="studio"] .vue-publish-decision-head span,
body[data-page="studio"] .vue-publish-gap-row > span {
    color: #9ff3ff;
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-image-readiness-head strong,
body[data-page="studio"] .vue-publish-decision-head strong {
    margin-top: 8px;
    color: #fff;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.08;
}

body[data-page="studio"] .vue-image-readiness-head p,
body[data-page="studio"] .vue-publish-decision-head p,
body[data-page="studio"] .vue-image-readiness > small,
body[data-page="studio"] .vue-publish-decision > small {
    max-width: 720px;
    max-height: none;
    margin-top: 6px;
    overflow: visible;
    opacity: 1;
    transform: none;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
}

body[data-page="studio"] .vue-image-primary-actions,
body[data-page="studio"] .vue-publish-main-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 760px;
}

body[data-page="studio"] .vue-image-primary-actions .primary-btn,
body[data-page="studio"] .vue-image-primary-actions .secondary-btn,
body[data-page="studio"] .vue-publish-main-actions .primary-btn,
body[data-page="studio"] .vue-publish-main-actions .secondary-btn,
body[data-page="studio"] .vue-publish-decision-head > .secondary-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border-radius: 16px;
    white-space: normal;
}

body[data-page="studio"] .vue-image-primary-actions .secondary-btn,
body[data-page="studio"] .vue-publish-main-actions .secondary-btn,
body[data-page="studio"] .vue-publish-decision-head > .secondary-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.09);
}

body[data-page="studio"] .vue-image-primary-actions .secondary-btn:hover,
body[data-page="studio"] .vue-publish-main-actions .secondary-btn:hover,
body[data-page="studio"] .vue-publish-decision-head > .secondary-btn:hover {
    border-color: rgba(159, 243, 255, 0.42);
    background: rgba(159, 243, 255, 0.12);
}

body[data-page="studio"] .vue-publish-meter {
    height: 9px;
    max-width: 760px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

body[data-page="studio"] .vue-publish-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal), var(--yellow));
    box-shadow: 0 0 18px rgba(79, 214, 224, 0.38);
}

body[data-page="studio"] .vue-publish-gap-row {
    max-width: 760px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
}

body[data-page="studio"] .vue-publish-gap-row button {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

body[data-page="studio"] .vue-image-manual,
body[data-page="studio"] .vue-publish-manual {
    border-radius: 24px;
}

body[data-page="studio"] .vue-image-manual > summary,
body[data-page="studio"] .vue-publish-manual > summary {
    min-height: 72px;
    padding: 16px 18px;
    border-radius: 24px;
}

body[data-page="studio"] .vue-image-manual > summary strong,
body[data-page="studio"] .vue-publish-manual > summary strong {
    font-size: 16px;
}

body[data-page="studio"] .vue-image-manual > summary em,
body[data-page="studio"] .vue-publish-manual > summary em {
    border-radius: 999px;
    white-space: nowrap;
}

body[data-page="studio"] .vue-image-manual[open] > summary,
body[data-page="studio"] .vue-publish-manual[open] > summary {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

body[data-page="studio"] .vue-publish-refine-body {
    display: grid;
    gap: 14px;
    padding-top: 14px;
}

body[data-page="studio"] .vue-publish-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="studio"] .vue-publish-options article,
body[data-page="studio"] .vue-image-brief article,
body[data-page="studio"] .vue-image-director-grid button,
body[data-page="studio"] .vue-image-readiness-grid article,
body[data-page="studio"] .vue-publish-checks button,
body[data-page="studio"] .vue-publish-asset-grid article,
body[data-page="studio"] .vue-publish-social-grid article {
    border-radius: 18px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-footer {
    display: none;
}

body[data-page="studio"].studio-theme-night .vue-image-readiness,
body[data-page="studio"].studio-theme-night .vue-publish-decision {
    border-color: rgba(255, 255, 255, 0.15);
    background:
            linear-gradient(135deg, rgba(18, 16, 28, 0.98), rgba(38, 33, 51, 0.96) 58%, rgba(23, 35, 46, 0.98)),
            radial-gradient(circle at 8% 0, rgba(255, 209, 102, 0.16), transparent 34%),
            radial-gradient(circle at 100% 10%, rgba(33, 183, 197, 0.22), transparent 36%);
}

@media (max-width: 900px) {
    body[data-page="studio"] .vue-image-readiness,
    body[data-page="studio"] .vue-publish-decision {
        min-height: 0;
        border-radius: 24px;
    }

    body[data-page="studio"] .vue-image-readiness::after,
    body[data-page="studio"] .vue-publish-decision::after {
        display: none;
    }

    body[data-page="studio"] .vue-image-readiness-head,
    body[data-page="studio"] .vue-publish-decision-head,
    body[data-page="studio"] .vue-image-primary-actions,
    body[data-page="studio"] .vue-publish-main-actions,
    body[data-page="studio"] .vue-publish-options {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-image-readiness-head strong,
    body[data-page="studio"] .vue-publish-decision-head strong {
        font-size: 27px;
    }
}

@media (max-width: 640px) {
    body[data-page="studio"] .vue-image-readiness,
    body[data-page="studio"] .vue-publish-decision {
        padding: 16px;
    }

    body[data-page="studio"] .vue-image-readiness::before,
    body[data-page="studio"] .vue-publish-decision::before {
        inset: 8px;
        border-radius: 18px;
    }

    body[data-page="studio"] .vue-image-primary-actions .primary-btn,
    body[data-page="studio"] .vue-image-primary-actions .secondary-btn,
    body[data-page="studio"] .vue-publish-main-actions .primary-btn,
    body[data-page="studio"] .vue-publish-main-actions .secondary-btn,
    body[data-page="studio"] .vue-publish-decision-head > .secondary-btn {
        min-height: 44px;
        border-radius: 14px;
    }

    body[data-page="studio"] .vue-image-manual > summary,
    body[data-page="studio"] .vue-publish-manual > summary {
        grid-template-columns: 1fr;
        min-height: 0;
    }
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-readiness .vue-image-readiness-head p,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-decision-head p,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-readiness > small,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision > small {
    max-height: none !important;
    margin-top: 6px !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Local UX pass v465: templates start drafts, archives remix public OC references. */
body:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(176px, auto);
    gap: 12px;
    align-items: center;
    max-width: 760px;
    margin-top: 6px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 22px;
    background:
            linear-gradient(135deg, rgba(240, 253, 255, 0.92), rgba(255, 255, 255, 0.78)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 34%);
    box-shadow: 0 16px 34px rgba(39, 28, 62, 0.08);
}

body[data-page="characters"] .vue-hero-next-action {
    border-color: rgba(123, 97, 255, 0.24);
    background:
            linear-gradient(135deg, rgba(249, 247, 255, 0.94), rgba(255, 255, 255, 0.78)),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.14), transparent 34%);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action span {
    width: fit-content;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #126f79;
    background: rgba(33, 183, 197, 0.13);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="characters"] .vue-hero-next-action span {
    color: #5f49d5;
    background: rgba(123, 97, 255, 0.12);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 950;
    line-height: 1.22;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action p {
    max-width: 56em;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.58;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action .primary-link {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary {
    margin-top: 0;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.045)),
            radial-gradient(circle at 100% 0, rgba(110, 231, 242, 0.14), transparent 34%),
            rgba(18, 17, 29, 0.92);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action strong {
    color: #fff;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action p {
    color: rgba(248, 245, 255, 0.76);
}

@media (max-width: 760px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-hero-next-action {
        padding: 12px;
        border-radius: 20px;
    }
}

/* Local UX pass v466: make template/archive choices feel like one creator command bar. */
body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1fr) minmax(190px, 0.42fr);
    gap: 12px;
    align-items: stretch;
    margin: 18px 0 14px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(23, 21, 31, 0.1);
    border-radius: 30px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 249, 250, 0.84)),
            radial-gradient(circle at 2% 0, rgba(33, 183, 197, 0.18), transparent 32%),
            radial-gradient(circle at 100% 100%, rgba(255, 209, 102, 0.18), transparent 34%);
    box-shadow: 0 22px 54px rgba(39, 28, 62, 0.08);
}

body[data-page="characters"] .vue-creation-command {
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 247, 255, 0.86)),
            radial-gradient(circle at 2% 0, rgba(123, 97, 255, 0.16), transparent 32%),
            radial-gradient(circle at 100% 100%, rgba(33, 183, 197, 0.15), transparent 34%);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor,
body:is([data-page="templates"], [data-page="characters"]) .vue-command-track,
body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
    position: relative;
    z-index: 1;
    min-width: 0;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
    width: 86px;
    height: 86px;
    display: block;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(23, 21, 31, 0.14);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor h2 {
    margin: 0;
    color: #17151f;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 950;
    line-height: 1.08;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor p:not(.eyebrow) {
    margin: 0;
    color: rgba(23, 21, 31, 0.64);
    font-size: 13px;
    font-weight: 820;
    line-height: 1.55;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 7px;
    min-height: 88px;
    padding: 12px;
    color: #17151f;
    text-decoration: none;
    border: 1px solid rgba(23, 21, 31, 0.08);
    border-radius: 18px;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 250, 253, 0.74));
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a:first-child {
    border-color: rgba(33, 183, 197, 0.28);
    background:
            linear-gradient(145deg, rgba(232, 252, 255, 0.92), rgba(255, 255, 255, 0.82));
}

body[data-page="characters"] .vue-command-track a:first-child {
    border-color: rgba(123, 97, 255, 0.28);
    background:
            linear-gradient(145deg, rgba(244, 241, 255, 0.94), rgba(255, 255, 255, 0.82));
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a:hover,
body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(33, 183, 197, 0.38);
    box-shadow: 0 14px 28px rgba(23, 21, 31, 0.1);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: #126f79;
    border-radius: 999px;
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="characters"] .vue-command-track span {
    color: #5f49d5;
    background: rgba(123, 97, 255, 0.12);
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.32;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 12px;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions span {
    color: rgba(23, 21, 31, 0.66);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions .primary-link,
body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions .secondary-btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    text-align: center;
    border-radius: 16px;
    white-space: normal;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary {
    margin-top: 12px;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
    border-color: rgba(255, 255, 255, 0.13);
    background:
            linear-gradient(135deg, rgba(24, 22, 36, 0.96), rgba(18, 17, 29, 0.92)),
            radial-gradient(circle at 2% 0, rgba(110, 231, 242, 0.16), transparent 32%),
            radial-gradient(circle at 100% 100%, rgba(255, 209, 102, 0.12), transparent 34%);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(.vue-command-anchor, .vue-command-track, .vue-command-actions) {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(.vue-command-anchor h2, .vue-command-track strong) {
    color: #fff;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(.vue-command-anchor p:not(.eyebrow), .vue-command-actions span) {
    color: rgba(248, 245, 255, 0.76);
}

@media (max-width: 1180px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
        padding: 10px;
        border-radius: 24px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }
}

/* Local UX pass v467: keep the creator command visible in the first screen. */
body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) .vue-creation-command {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 6px 0 0;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 900px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) .vue-creation-command {
        grid-column: auto;
        grid-row: auto;
        order: 2;
        margin-top: 4px;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
        grid-column: auto;
        grid-row: auto;
        order: 3;
    }
}

@media (max-width: 560px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
        gap: 8px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
        min-height: 94px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor p:not(.eyebrow) {
        display: none;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
        min-height: 92px;
        padding: 9px 7px;
        align-content: start;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track span {
        min-height: 22px;
        padding: 0 7px;
        font-size: 10px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track strong {
        font-size: 12px;
        line-height: 1.28;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions span {
        display: none;
    }
}

/* Local UX pass v468: let the command bar replace duplicate hero buttons. */
body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-actions, .vue-characters-actions) {
    display: none;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-source-notice.is-hero, .vue-archive-source-notice.is-hero) {
    max-width: 680px;
    padding: 9px 12px;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-source-notice.is-hero p, .vue-archive-source-notice.is-hero p) {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 560px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-source-notice.is-hero, .vue-archive-source-notice.is-hero) {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 8px 10px;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-source-notice.is-hero p, .vue-archive-source-notice.is-hero p) {
        -webkit-line-clamp: 1;
    }
}

/* Local UX pass v469: on mobile, show the primary buttons before explanatory steps. */
@media (max-width: 560px) {
    body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
        order: 2;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
        order: 3;
    }
}

/* Local UX pass v470: studio hero becomes a one-shot creation director. */
body[data-page="studio"] .vue-route-director {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background:
            linear-gradient(145deg, rgba(18, 16, 28, 0.96), rgba(34, 31, 46, 0.92)),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.25), transparent 36%),
            radial-gradient(circle at 0 100%, rgba(255, 209, 102, 0.16), transparent 34%);
    box-shadow: 0 24px 64px rgba(17, 12, 28, 0.24);
}

body[data-page="studio"] .vue-route-director::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--cyan), var(--yellow));
}

body[data-page="studio"] .vue-route-director-copy,
body[data-page="studio"] .vue-route-director-tasks,
body[data-page="studio"] .vue-route-director-actions {
    position: relative;
    z-index: 1;
}

body[data-page="studio"] .vue-route-director-copy {
    display: grid;
    gap: 7px;
}

body[data-page="studio"] .vue-route-director-copy span {
    width: fit-content;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: #11101b;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--cyan), var(--yellow));
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-route-director-copy h2 {
    max-width: 11em;
    margin: 0;
    color: #fff;
    font-size: clamp(25px, 2.8vw, 36px);
    font-weight: 950;
    line-height: 1.06;
    overflow-wrap: anywhere;
}

body[data-page="studio"] .vue-route-director-copy p {
    max-width: 32em;
    margin: 0;
    color: rgba(248, 245, 255, 0.76);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.56;
}

body[data-page="studio"] .vue-route-director-tasks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body[data-page="studio"] .vue-route-director-tasks button {
    min-width: 0;
    min-height: 72px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 9px;
    color: #fff;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.075);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-page="studio"] .vue-route-director-tasks button:hover,
body[data-page="studio"] .vue-route-director-tasks button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(185, 245, 255, 0.36);
    background: rgba(255, 255, 255, 0.12);
}

body[data-page="studio"] .vue-route-director-tasks span {
    color: rgba(185, 245, 255, 0.78);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-route-director-tasks strong {
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.22;
    overflow-wrap: anywhere;
}

body[data-page="studio"] .vue-route-director-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
}

body[data-page="studio"] .vue-route-director-actions .primary-btn,
body[data-page="studio"] .vue-route-director-actions .secondary-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 16px;
    white-space: normal;
}

body[data-page="studio"] .vue-route-director-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

body[data-page="studio"] .vue-route-director-actions small {
    grid-column: 1 / -1;
    color: rgba(248, 245, 255, 0.62);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
    text-align: center;
}

/* Local UX pass v485: compact template/archive first screens on narrow viewports. */
@media (max-width: 760px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
        gap: 12px;
        padding-top: 16px;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
        gap: 10px;
        padding: 14px;
        align-items: start;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy, .vue-characters-copy) {
        gap: 7px;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
        max-width: 100%;
        font-size: clamp(30px, 9vw, 38px);
        line-height: 1.06;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy > p:not(.eyebrow), .vue-characters-copy > p:not(.eyebrow)) {
        display: -webkit-box;
        max-width: 100%;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 13px;
        line-height: 1.52;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip::-webkit-scrollbar {
        display: none;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip span {
        flex: 0 0 auto;
        min-height: 28px;
        padding: 0 9px;
        white-space: nowrap;
        font-size: 11px;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
        display: none;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
        gap: 8px;
        margin-top: 0;
        padding: 8px;
        border-radius: 22px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
        grid-template-columns: 58px minmax(0, 1fr);
        min-height: 0;
        padding: 8px;
        border-radius: 18px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
        width: 58px;
        height: 58px;
        border-radius: 14px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor h2 {
        font-size: 18px;
        line-height: 1.12;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
        order: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        border-radius: 18px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions span {
        display: none;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions .primary-link,
    body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions .secondary-btn {
        min-height: 40px;
        padding-inline: 8px;
        font-size: 13px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
        order: 3;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        padding: 6px;
        border-radius: 18px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
        min-height: 64px;
        gap: 5px;
        padding: 7px 6px;
        border-radius: 14px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track span {
        min-height: 20px;
        padding: 0 6px;
        font-size: 10px;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track strong {
        font-size: 11px;
        line-height: 1.22;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary {
        gap: 10px;
        padding: 12px;
    }
}

@media (max-width: 520px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-source-notice.is-hero, .vue-archive-source-notice.is-hero) {
        display: none;
    }
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-dock {
    gap: 0;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-focus-card {
    display: none;
}

@media (max-width: 900px) {
    body[data-page="studio"] .vue-route-director-copy h2 {
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    body[data-page="studio"] .vue-route-director {
        gap: 10px;
        padding: 14px;
        border-radius: 24px;
    }

    body[data-page="studio"] .vue-route-director-tasks {
        order: 3;
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-route-director-tasks button {
        min-height: 52px;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        align-content: center;
    }

    body[data-page="studio"] .vue-route-director-actions {
        order: 2;
        grid-template-columns: 1fr;
    }

body[data-page="studio"] .vue-route-director-actions small {
        display: none;
    }
}

/* Local UX pass v472: let the actual step panel start the workbench; move coaching to the side. */
body[data-page="studio"].studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(318px, 370px);
    gap: 16px;
    align-items: start;
}

body[data-page="studio"].studio-wizard-ready .studio-flow.designer-form {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    position: sticky;
    top: 86px;
}

body[data-page="studio"].studio-wizard-ready .studio-rail {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-head,
body[data-page="studio"].studio-wizard-ready .vue-assist-one-next,
body[data-page="studio"].studio-wizard-ready .vue-assist-toolbox {
    min-height: 0;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-head {
    padding: 10px;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-head h2 {
    font-size: 16px;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    padding: 12px;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next strong {
    font-size: 19px;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next p,
body[data-page="studio"].studio-wizard-ready .vue-assist-toolbox > summary small {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next .primary-btn {
    min-height: 42px;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-toolbox[open] {
    grid-column: auto;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-toolbox > summary {
    min-height: 48px;
}

@media (max-width: 1180px) {
    body[data-page="studio"].studio-wizard-ready .studio-workbench {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"].studio-wizard-ready .studio-flow.designer-form {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        grid-column: 1 !important;
        grid-row: 2 !important;
        position: relative;
        top: auto;
    }

    body[data-page="studio"].studio-wizard-ready .studio-rail {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

@media (max-width: 900px) {
    body[data-page="studio"].studio-wizard-ready .studio-rail {
        display: none;
    }
}

/* Local UX pass v474: make the first OC step writable without opening drawers. */
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
    gap: 12px;
    padding: 12px;
    border-radius: 22px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head h2 {
    font-size: clamp(21px, 2.1vw, 30px);
    line-height: 1.12;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head > div:first-child > p:not(.eyebrow) {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-cue {
    min-height: 0;
    padding: 12px;
    border-radius: 18px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-cue strong {
    font-size: 15px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-cue small {
    display: none;
}

body[data-page="studio"] .vue-core-write-now {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(33, 183, 197, 0.22);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 253, 255, 0.9)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.16), transparent 34%);
    box-shadow: 0 18px 44px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-core-write-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
    gap: 12px;
    align-items: center;
}

body[data-page="studio"] .vue-core-write-head div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

body[data-page="studio"] .vue-core-write-head span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #126f79;
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-core-write-head strong {
    color: var(--ink);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 950;
    line-height: 1.16;
}

body[data-page="studio"] .vue-core-write-head p {
    display: none;
}

body[data-page="studio"] .vue-core-write-head .primary-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 16px;
    white-space: normal;
}

body[data-page="studio"] .vue-core-flow-console {
    display: grid;
    grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 22px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(249, 253, 255, 0.72)),
            radial-gradient(circle at 0 0, rgba(255, 93, 143, 0.12), transparent 34%);
}

body[data-page="studio"] .vue-core-flow-mode,
body[data-page="studio"] .vue-core-flow-steps {
    display: grid;
    gap: 8px;
}

body[data-page="studio"] .vue-core-flow-mode {
    grid-template-columns: 1fr;
}

body[data-page="studio"] .vue-core-flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="studio"] .vue-core-flow-console button {
    position: relative;
    min-width: 0;
    min-height: 76px;
    display: grid;
    gap: 4px;
    align-content: center;
    padding: 12px 12px 12px 46px;
    border: 1px solid rgba(28, 43, 62, 0.1);
    border-radius: 18px;
    color: #1e2430;
    text-align: left;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    cursor: pointer;
}

body[data-page="studio"] .vue-core-flow-console button::before {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    opacity: 0.86;
}

body[data-page="studio"] .vue-core-flow-console button span,
body[data-page="studio"] .vue-core-flow-console button small {
    color: rgba(54, 61, 76, 0.66);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
}

body[data-page="studio"] .vue-core-flow-console button strong {
    overflow: hidden;
    color: #171923;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="studio"] .vue-core-flow-console button:is(:hover, :focus-visible),
body[data-page="studio"] .vue-core-flow-console button.active,
body[data-page="studio"] .vue-core-flow-console button[data-flow-state="active"] {
    border-color: rgba(33, 183, 197, 0.42);
    background:
            linear-gradient(135deg, rgba(229, 255, 254, 0.92), rgba(255, 247, 220, 0.76)),
            #fff;
    box-shadow: 0 14px 34px rgba(33, 183, 197, 0.14);
}

body[data-page="studio"] .vue-core-flow-console button[data-flow-state="done"] {
    border-color: rgba(87, 204, 153, 0.36);
    background:
            linear-gradient(135deg, rgba(236, 255, 246, 0.9), rgba(255, 255, 255, 0.78)),
            #fff;
}

body[data-page="studio"] .vue-core-flow-console button[data-flow-state="locked"],
body[data-page="studio"] .vue-core-flow-console button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none;
}

body[data-page="studio"].studio-theme-night .vue-core-flow-console {
    border-color: rgba(255, 255, 255, 0.12);
    background:
            linear-gradient(135deg, rgba(32, 31, 44, 0.86), rgba(19, 24, 34, 0.78)),
            rgba(255, 255, 255, 0.04);
}

body[data-page="studio"].studio-theme-night .vue-core-flow-console button {
    border-color: rgba(255, 255, 255, 0.12);
    color: #f7f8fd;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="studio"].studio-theme-night .vue-core-flow-console button span,
body[data-page="studio"].studio-theme-night .vue-core-flow-console button small {
    color: rgba(238, 243, 255, 0.64);
}

body[data-page="studio"].studio-theme-night .vue-core-flow-console button strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-core-flow-console button:is(:hover, :focus-visible),
body[data-page="studio"].studio-theme-night .vue-core-flow-console button.active,
body[data-page="studio"].studio-theme-night .vue-core-flow-console button[data-flow-state="active"] {
    border-color: rgba(142, 238, 237, 0.42);
    background:
            linear-gradient(135deg, rgba(33, 183, 197, 0.16), rgba(255, 209, 102, 0.1)),
            rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

body[data-page="studio"].studio-theme-night .vue-core-flow-console button[data-flow-state="done"] {
    border-color: rgba(87, 204, 153, 0.34);
    background:
            linear-gradient(135deg, rgba(87, 204, 153, 0.12), rgba(255, 255, 255, 0.045)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-core-write-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="studio"] .vue-core-write-grid .vue-core-field {
    min-height: 132px;
    border-color: rgba(33, 183, 197, 0.18);
    border-radius: 18px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 253, 255, 0.9)),
            rgba(255, 255, 255, 0.86);
}

body[data-page="studio"] .vue-core-write-grid .vue-core-field input {
    border-radius: 14px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-mission {
    display: none !important;
}

body[data-page="studio"].studio-theme-night .vue-core-write-now {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(135deg, rgba(33, 31, 45, 0.96), rgba(23, 31, 39, 0.92)),
            rgba(24, 22, 34, 0.94);
}

body[data-page="studio"].studio-theme-night .vue-core-write-head strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-core-write-head p {
    color: rgba(248, 245, 255, 0.72);
}

body[data-page="studio"].studio-theme-night .vue-core-write-grid .vue-core-field {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head,
    body[data-page="studio"] .vue-core-write-head,
    body[data-page="studio"] .vue-core-flow-console,
    body[data-page="studio"] .vue-core-write-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-core-flow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="studio"] .vue-core-flow-console button {
        min-height: 68px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head > div:first-child > p:not(.eyebrow),
    body[data-page="studio"] .vue-core-write-head p,
    body[data-page="studio"] .vue-core-write-grid .vue-core-field small {
        display: none;
    }

    body[data-page="studio"] .vue-core-write-now {
        padding: 12px;
        border-radius: 22px;
    }

body[data-page="studio"] .vue-core-write-grid .vue-core-field {
        min-height: 96px;
    }
}

/* Local UX pass v476: visual step exposes draw-ready OC fields before drawers. */
body[data-page="studio"] .vue-visual-write-now {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(123, 97, 255, 0.18);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 247, 255, 0.92)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.14), transparent 34%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 36%);
    box-shadow: 0 18px 44px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-visual-write-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(172px, auto);
    gap: 12px;
    align-items: center;
}

body[data-page="studio"] .vue-visual-write-head div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

body[data-page="studio"] .vue-visual-write-head span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #493bc0;
    background: rgba(123, 97, 255, 0.11);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-visual-write-head strong {
    color: var(--ink);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 950;
    line-height: 1.16;
}

body[data-page="studio"] .vue-visual-write-head p {
    display: none;
}

body[data-page="studio"] .vue-visual-write-head .primary-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 16px;
    white-space: normal;
}

body[data-page="studio"] .vue-visual-write-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"] .vue-visual-write-now .vue-visual-field {
    min-height: 104px;
    border-color: rgba(123, 97, 255, 0.14);
    border-radius: 18px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.9)),
            rgba(255, 255, 255, 0.86);
}

body[data-page="studio"] .vue-visual-write-now .vue-visual-field.wide {
    min-height: 112px;
}

body[data-page="studio"] .vue-visual-write-now .vue-visual-field input,
body[data-page="studio"] .vue-visual-write-now .vue-visual-field textarea {
    border-radius: 14px;
}

body[data-page="studio"] .vue-visual-write-now .vue-visual-field textarea {
    min-height: 82px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-mission-visual {
    display: none !important;
}

body[data-page="studio"].studio-theme-night .vue-visual-write-now {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(135deg, rgba(33, 31, 45, 0.96), rgba(28, 31, 45, 0.92)),
            rgba(24, 22, 34, 0.94);
}

body[data-page="studio"].studio-theme-night .vue-visual-write-head strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-visual-write-grid .vue-visual-field,
body[data-page="studio"].studio-theme-night .vue-visual-write-now .vue-visual-field.wide {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-visual-write-head,
    body[data-page="studio"] .vue-visual-write-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-visual-write-head p,
    body[data-page="studio"] .vue-visual-write-now .vue-visual-field small {
        display: none;
    }

    body[data-page="studio"] .vue-visual-write-now {
        padding: 12px;
        border-radius: 22px;
    }

    body[data-page="studio"] .vue-visual-write-now .vue-visual-field,
    body[data-page="studio"] .vue-visual-write-now .vue-visual-field.wide {
        min-height: 96px;
    }
}

/* Local UX pass v479: story step becomes a direct OC narrative sketch board. */
body[data-page="studio"] .vue-story-write-now {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(123, 97, 255, 0.18);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(251, 249, 255, 0.92)),
            radial-gradient(circle at 0 0, rgba(123, 97, 255, 0.12), transparent 34%),
            radial-gradient(circle at 100% 0, rgba(87, 204, 153, 0.12), transparent 36%);
    box-shadow: 0 18px 44px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-story-write-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(172px, auto);
    gap: 12px;
    align-items: center;
}

body[data-page="studio"] .vue-story-write-head div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

body[data-page="studio"] .vue-story-write-head span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #493bc0;
    background: rgba(123, 97, 255, 0.11);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-story-write-head strong {
    color: var(--ink);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 950;
    line-height: 1.16;
}

body[data-page="studio"] .vue-story-write-head p {
    display: none;
}

body[data-page="studio"] .vue-story-write-head .primary-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 16px;
    white-space: normal;
}

body[data-page="studio"] .vue-story-write-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"] .vue-story-write-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="studio"] .vue-story-write-now .vue-story-field {
    min-height: 104px;
    border-color: rgba(123, 97, 255, 0.14);
    border-radius: 18px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.9)),
            rgba(255, 255, 255, 0.86);
}

body[data-page="studio"] .vue-story-write-now .vue-story-field.wide {
    min-height: 142px;
}

body[data-page="studio"] .vue-story-write-now .vue-story-field input,
body[data-page="studio"] .vue-story-write-now .vue-story-field textarea {
    border-radius: 14px;
}

body[data-page="studio"] .vue-story-write-now .vue-story-field textarea {
    min-height: 82px;
}

body[data-page="studio"] .vue-story-write-now .vue-story-field.wide textarea {
    min-height: 104px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-mission-story {
    display: none !important;
}

body[data-page="studio"].studio-theme-night .vue-story-write-now {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(135deg, rgba(33, 31, 45, 0.96), rgba(31, 29, 46, 0.92)),
            rgba(24, 22, 34, 0.94);
}

body[data-page="studio"].studio-theme-night .vue-story-write-head strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-story-write-grid .vue-story-field,
body[data-page="studio"].studio-theme-night .vue-story-write-now .vue-story-field.wide {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 960px) {
    body[data-page="studio"] .vue-story-write-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-story-write-head,
    body[data-page="studio"] .vue-story-write-grid,
    body[data-page="studio"] .vue-story-write-grid.compact {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-story-write-head p,
    body[data-page="studio"] .vue-story-write-now .vue-story-field small {
        display: none;
    }

    body[data-page="studio"] .vue-story-write-now {
        padding: 12px;
        border-radius: 22px;
    }

    body[data-page="studio"] .vue-story-write-now .vue-story-field,
    body[data-page="studio"] .vue-story-write-now .vue-story-field.wide {
        min-height: 96px;
    }
}

/* Local UX pass v480: image and publish stages expose their real work, not only toolboxes. */
body[data-page="studio"] .vue-image-write-now,
body[data-page="studio"] .vue-publish-showcase {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 93, 143, 0.18);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 252, 0.92)),
            radial-gradient(circle at 0 0, rgba(255, 93, 143, 0.1), transparent 34%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.13), transparent 36%);
    box-shadow: 0 18px 44px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-publish-showcase {
    border-color: rgba(33, 183, 197, 0.18);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 252, 0.92)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.12), transparent 34%),
            radial-gradient(circle at 100% 0, rgba(123, 97, 255, 0.1), transparent 36%);
}

body[data-page="studio"] .vue-image-write-head,
body[data-page="studio"] .vue-publish-showcase-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(172px, auto);
    gap: 12px;
    align-items: center;
}

body[data-page="studio"] .vue-image-write-head div,
body[data-page="studio"] .vue-publish-showcase-head div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

body[data-page="studio"] .vue-image-write-head span,
body[data-page="studio"] .vue-publish-showcase-head span {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #9b2954;
    background: rgba(255, 93, 143, 0.11);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-publish-showcase-head span {
    color: #126f79;
    background: rgba(33, 183, 197, 0.12);
}

body[data-page="studio"] .vue-image-write-head strong,
body[data-page="studio"] .vue-publish-showcase-head strong {
    color: var(--ink);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 950;
    line-height: 1.16;
}

body[data-page="studio"] .vue-image-write-head p,
body[data-page="studio"] .vue-publish-showcase-head p {
    display: none;
}

body[data-page="studio"] .vue-image-write-head .primary-btn,
body[data-page="studio"] .vue-publish-showcase-head .secondary-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 16px;
    white-space: normal;
}

body[data-page="studio"] .vue-image-write-now .vue-image-field {
    min-height: 132px;
    border-color: rgba(255, 93, 143, 0.14);
    border-radius: 18px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 251, 253, 0.9)),
            rgba(255, 255, 255, 0.86);
}

body[data-page="studio"] .vue-image-write-now .vue-image-field textarea {
    min-height: 112px;
    border-radius: 14px;
}

body[data-page="studio"] .vue-image-write-now .vue-image-field.compact {
    min-height: 104px;
}

body[data-page="studio"] .vue-image-write-now .vue-image-field.compact textarea {
    min-height: 76px;
}

body[data-page="studio"] .vue-publish-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
    gap: 10px;
    align-items: stretch;
}

body[data-page="studio"] .vue-publish-showcase .vue-publish-card-preview {
    min-height: 260px;
    border-radius: 20px;
}

body[data-page="studio"] .vue-publish-mode-list {
    display: grid;
    gap: 8px;
}

body[data-page="studio"] .vue-publish-mode-list button {
    min-width: 0;
    min-height: 78px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(230, 225, 236, 0.9);
    border-radius: 18px;
    color: var(--ink);
    text-align: left;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 253, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

body[data-page="studio"] .vue-publish-mode-list button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(33, 183, 197, 0.34);
    box-shadow: 0 12px 24px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-publish-mode-list button.primary {
    color: #fff;
    border-color: rgba(33, 183, 197, 0.34);
    background:
            linear-gradient(135deg, rgba(18, 16, 28, 0.96), rgba(25, 45, 54, 0.94)),
            linear-gradient(90deg, rgba(33, 183, 197, 0.18), rgba(255, 209, 102, 0.14));
}

body[data-page="studio"] .vue-publish-mode-list span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-publish-mode-list button.primary span,
body[data-page="studio"] .vue-publish-mode-list button.primary small {
    color: rgba(255, 255, 255, 0.76);
}

body[data-page="studio"] .vue-publish-mode-list strong {
    color: inherit;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.16;
}

body[data-page="studio"] .vue-publish-mode-list small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.4;
}

body[data-page="studio"] .vue-publish-preview-gaps.is-inline {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-gap-row,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-main-actions {
    display: none !important;
}

/* Local UX pass v483: publish step becomes an action-first checkpoint. */
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision {
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 22px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-decision-head {
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto) !important;
    gap: 10px !important;
    align-items: center !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-decision-head p,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-meter,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision > small {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-decision-head strong {
    font-size: clamp(20px, 2.1vw, 28px) !important;
}

/* Local UX pass v484: image step puts prompt writing into the first screen. */
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-readiness {
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 22px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-readiness .vue-image-readiness-head p,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-readiness > small {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-readiness .vue-image-primary-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-readiness .vue-image-primary-actions .secondary-btn {
    display: none !important;
}

/* Local UX pass v487: make AI/mock/storage mode visible without opening the toolbox. */
body[data-page="studio"] .vue-image-mode-board {
    display: grid;
    grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.28fr) minmax(154px, auto);
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid rgba(33, 183, 197, 0.18);
    border-radius: 22px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 252, 252, 0.9)),
            radial-gradient(circle at 0 0, rgba(33, 183, 197, 0.1), transparent 36%),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.12), transparent 38%);
    box-shadow: 0 14px 34px rgba(39, 28, 62, 0.06);
}

body[data-page="studio"] .vue-image-mode-board[data-image-mode="mock"] {
    border-color: rgba(255, 209, 102, 0.26);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 250, 240, 0.92)),
            radial-gradient(circle at 0 0, rgba(255, 209, 102, 0.16), transparent 36%),
            radial-gradient(circle at 100% 0, rgba(33, 183, 197, 0.1), transparent 38%);
}

body[data-page="studio"] .vue-image-mode-copy,
body[data-page="studio"] .vue-image-mode-action,
body[data-page="studio"] .vue-image-mode-cards article {
    min-width: 0;
    border-radius: 16px;
}

body[data-page="studio"] .vue-image-mode-copy {
    display: grid;
    gap: 5px;
    align-content: center;
    padding: 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.64);
}

body[data-page="studio"] .vue-image-mode-copy span,
body[data-page="studio"] .vue-image-mode-cards span {
    width: fit-content;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #126f79;
    background: rgba(33, 183, 197, 0.12);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

body[data-page="studio"] .vue-image-mode-board[data-image-mode="mock"] .vue-image-mode-copy span,
body[data-page="studio"] .vue-image-mode-board[data-image-mode="mock"] .vue-image-mode-cards span {
    color: #8c5a00;
    background: rgba(255, 209, 102, 0.18);
}

body[data-page="studio"] .vue-image-mode-copy strong {
    color: var(--ink);
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 950;
    line-height: 1.12;
}

body[data-page="studio"] .vue-image-mode-copy p,
body[data-page="studio"] .vue-image-mode-action small,
body[data-page="studio"] .vue-image-mode-cards small {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

body[data-page="studio"] .vue-image-mode-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"] .vue-image-mode-cards article {
    min-height: 72px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(230, 225, 236, 0.76);
    background: rgba(255, 255, 255, 0.7);
}

body[data-page="studio"] .vue-image-mode-cards article[data-ready-state="ready"] {
    border-color: rgba(33, 183, 197, 0.22);
}

body[data-page="studio"] .vue-image-mode-cards article strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.16;
}

body[data-page="studio"] .vue-image-mode-cards small {
    display: none;
}

body[data-page="studio"] .vue-image-mode-action {
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.52);
}

body[data-page="studio"] .vue-image-mode-action .secondary-btn {
    width: 100%;
    min-height: 40px;
    justify-content: center;
    border-radius: 14px;
    white-space: normal;
}

body[data-page="studio"].studio-theme-night .vue-image-mode-board {
    border-color: rgba(255, 255, 255, 0.12);
    background:
            linear-gradient(135deg, rgba(33, 31, 45, 0.96), rgba(27, 35, 44, 0.92)),
            rgba(24, 22, 34, 0.94);
}

body[data-page="studio"].studio-theme-night .vue-image-mode-copy,
body[data-page="studio"].studio-theme-night .vue-image-mode-action,
body[data-page="studio"].studio-theme-night .vue-image-mode-cards article {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

body[data-page="studio"].studio-theme-night .vue-image-mode-copy strong,
body[data-page="studio"].studio-theme-night .vue-image-mode-cards article strong {
    color: #fff;
}

@media (max-width: 860px) {
    body[data-page="studio"] .vue-image-mode-board {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    body[data-page="studio"] .vue-image-mode-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="studio"] .vue-image-mode-cards article {
        min-height: 0;
        gap: 4px;
        padding: 9px 7px;
    }

    body[data-page="studio"] .vue-image-mode-cards span {
        min-height: 19px;
        padding: 0 6px;
        font-size: 10px;
    }

    body[data-page="studio"] .vue-image-mode-cards article strong {
        font-size: 13px;
    }

    body[data-page="studio"] .vue-image-mode-copy p,
    body[data-page="studio"] .vue-image-mode-action small,
    body[data-page="studio"] .vue-image-mode-cards small {
        display: none;
    }

    body[data-page="studio"] .vue-image-mode-copy,
    body[data-page="studio"] .vue-image-mode-action {
        padding: 9px;
    }

    body[data-page="studio"] .vue-image-mode-copy strong {
        font-size: 17px;
    }

    body[data-page="studio"] .vue-image-mode-action .secondary-btn {
        min-height: 36px;
    }
}

body[data-page="studio"].studio-theme-night .vue-image-write-now,
body[data-page="studio"].studio-theme-night .vue-publish-showcase {
    border-color: rgba(255, 255, 255, 0.14);
    background:
            linear-gradient(135deg, rgba(33, 31, 45, 0.96), rgba(31, 29, 46, 0.92)),
            rgba(24, 22, 34, 0.94);
}

body[data-page="studio"].studio-theme-night .vue-image-write-head strong,
body[data-page="studio"].studio-theme-night .vue-publish-showcase-head strong {
    color: #fff;
}

body[data-page="studio"].studio-theme-night .vue-image-write-now .vue-image-field,
body[data-page="studio"].studio-theme-night .vue-publish-mode-list button {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 900px) {
    body[data-page="studio"] .vue-publish-showcase-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-image-write-head,
    body[data-page="studio"] .vue-publish-showcase-head {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-image-write-head p,
    body[data-page="studio"] .vue-publish-showcase-head p,
    body[data-page="studio"] .vue-image-write-now .vue-image-field small {
        display: none;
    }

    body[data-page="studio"] .vue-image-write-now,
    body[data-page="studio"] .vue-publish-showcase {
        padding: 12px;
        border-radius: 22px;
    }

    body[data-page="studio"] .vue-image-write-now .vue-image-field,
    body[data-page="studio"] .vue-image-write-now .vue-image-field.compact {
        min-height: 96px;
    }

    body[data-page="studio"] .vue-publish-mode-list button {
        min-height: 70px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-decision-head {
        grid-template-columns: 1fr !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-decision .vue-publish-decision-head > .secondary-btn {
        min-height: 42px;
    }

    body[data-page="studio"] .vue-publish-showcase-head .secondary-btn {
        display: none;
    }

    body[data-page="studio"] .vue-publish-mode-list {
        order: -1;
    }

    body[data-page="studio"] .vue-publish-showcase .vue-publish-card-preview {
        min-height: 190px;
    }
}

/* Local UX pass v490: make the studio feel like a one-step-at-a-time OC wizard. */
body[data-page="studio"].studio-wizard-ready .studio-hero-beats {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title {
    gap: 14px;
    padding-bottom: clamp(22px, 3vw, 38px);
}

body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title > p:not(.eyebrow) {
    max-width: 62em;
    margin-bottom: 0;
}

body[data-page="studio"] .vue-route-director {
    gap: 13px;
    padding: clamp(14px, 1.8vw, 20px);
    border-radius: 30px;
}

body[data-page="studio"] .vue-route-director-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: 14px;
    align-items: stretch;
}

body[data-page="studio"] .vue-route-director-copy {
    align-content: center;
}

body[data-page="studio"] .vue-route-director-copy h2 {
    max-width: 13em;
    font-size: clamp(26px, 3.2vw, 44px);
}

body[data-page="studio"] .vue-route-director-stage {
    display: grid;
    grid-template-columns: minmax(132px, 0.34fr) minmax(0, 1fr);
    gap: 10px;
}

body[data-page="studio"] .vue-route-director-step,
body[data-page="studio"] .vue-route-director-focus {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-route-director-step {
    padding: 14px;
}

body[data-page="studio"] .vue-route-director-step span {
    width: fit-content;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #17151f;
    background: var(--yellow);
    font-size: 11px;
    font-weight: 950;
}

body[data-page="studio"] .vue-route-director-step strong {
    color: #fff;
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 950;
    line-height: 1.08;
}

body[data-page="studio"] .vue-route-director-step small {
    color: rgba(185, 245, 255, 0.78);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

body[data-page="studio"] .vue-route-director-focus {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-color: rgba(255, 209, 102, 0.3);
    background:
            linear-gradient(135deg, rgba(255, 209, 102, 0.15), rgba(33, 183, 197, 0.08)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-route-director-focus::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--yellow), var(--cyan));
}

body[data-page="studio"] .vue-route-director-focus[data-task-state="running"] {
    border-color: rgba(33, 183, 197, 0.34);
    background:
            linear-gradient(135deg, rgba(33, 183, 197, 0.15), rgba(255, 255, 255, 0.06)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-route-director-focus[data-task-state="complete"] {
    border-color: rgba(87, 204, 153, 0.3);
    background:
            linear-gradient(135deg, rgba(87, 204, 153, 0.15), rgba(255, 255, 255, 0.06)),
            rgba(255, 255, 255, 0.055);
}

body[data-page="studio"] .vue-route-director-focus span,
body[data-page="studio"] .vue-route-director-focus strong,
body[data-page="studio"] .vue-route-director-focus p {
    position: relative;
    z-index: 1;
}

body[data-page="studio"] .vue-route-director-focus span {
    width: fit-content;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #17151f;
    background: var(--yellow);
    font-size: 11px;
    font-weight: 950;
}

body[data-page="studio"] .vue-route-director-focus[data-task-state="running"] span {
    background: var(--cyan);
}

body[data-page="studio"] .vue-route-director-focus[data-task-state="complete"] span {
    color: #063d2d;
    background: #87e0b7;
}

body[data-page="studio"] .vue-route-director-focus strong {
    color: #fff;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 950;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

body[data-page="studio"] .vue-route-director-focus p {
    max-width: 48em;
    margin: 0;
    color: rgba(248, 245, 255, 0.76);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

body[data-page="studio"] .vue-route-director-progress {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

body[data-page="studio"].studio-mode-advanced .vue-route-director-progress {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body[data-page="studio"] .vue-route-director-progress button {
    min-width: 0;
    min-height: 50px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 8px;
    align-items: center;
    padding: 8px;
    color: rgba(255, 255, 255, 0.72);
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

body[data-page="studio"] .vue-route-director-progress button:hover,
body[data-page="studio"] .vue-route-director-progress button:focus-visible,
body[data-page="studio"] .vue-route-director-progress button.active {
    color: #fff;
    border-color: rgba(255, 209, 102, 0.42);
    background: rgba(255, 209, 102, 0.12);
}

body[data-page="studio"] .vue-route-director-progress button.complete:not(.active) {
    border-color: rgba(87, 204, 153, 0.28);
    background: rgba(87, 204, 153, 0.11);
}

body[data-page="studio"] .vue-route-director-progress span {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 11px;
    color: #17151f;
    background: rgba(247, 244, 234, 0.88);
    font-size: 10px;
    font-weight: 950;
}

body[data-page="studio"] .vue-route-director-progress strong {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.14;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="studio"] .vue-route-director-tasks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="studio"] .vue-route-director-tasks button {
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: center;
}

body[data-page="studio"] .vue-route-director-actions {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

body[data-page="studio"] .vue-route-director-actions .primary-btn {
    min-height: 50px;
    font-size: 15px;
}

body[data-page="studio"] .studio-wizard-nav {
    grid-template-columns: minmax(94px, auto) minmax(0, 1fr) minmax(112px, auto);
}

body[data-page="studio"] .studio-wizard-nav .primary-btn {
    min-width: 112px;
}

body[data-page="studio"] .studio-wizard-nav span {
    width: fit-content;
    justify-self: center;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(33, 183, 197, 0.12);
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-main {
    grid-template-columns: 1fr;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-copy {
    align-content: start;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-copy p {
    display: none;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-stage {
    grid-template-columns: minmax(128px, 0.34fr) minmax(0, 1fr);
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-step,
body[data-page="studio"] .vue-route-hero-shell .vue-route-director-focus {
    min-height: 104px;
}

@media (max-width: 980px) {
    body[data-page="studio"] .vue-route-director-main,
    body[data-page="studio"] .vue-route-director-stage {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-route-director-copy h2 {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title {
        gap: 10px;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title > p:not(.eyebrow),
    body[data-page="studio"].studio-wizard-ready .studio-theme-switch {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title h1 {
        font-size: clamp(30px, 9vw, 42px);
        line-height: 1.04;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell {
        margin-top: 4px;
    }

    body[data-page="studio"] .vue-route-director {
        gap: 9px;
        padding: 12px;
        border-radius: 24px;
    }

    body[data-page="studio"] .vue-route-director-copy {
        gap: 5px;
    }

    body[data-page="studio"] .vue-route-director-copy h2 {
        font-size: clamp(23px, 7vw, 30px);
    }

    body[data-page="studio"] .vue-route-director-copy p {
        display: none;
    }

    body[data-page="studio"] .vue-route-director-stage {
        grid-template-columns: minmax(96px, 0.43fr) minmax(0, 1fr);
    }

    body[data-page="studio"] .vue-route-director-step,
    body[data-page="studio"] .vue-route-director-focus {
        min-height: 82px;
        border-radius: 18px;
    }

    body[data-page="studio"] .vue-route-director-step {
        padding: 10px;
    }

    body[data-page="studio"] .vue-route-director-step small,
    body[data-page="studio"] .vue-route-director-focus p {
        display: none;
    }

    body[data-page="studio"] .vue-route-director-step strong {
        font-size: 17px;
    }

    body[data-page="studio"] .vue-route-director-focus {
        padding: 12px;
    }

    body[data-page="studio"] .vue-route-director-focus strong {
        font-size: clamp(18px, 5.8vw, 24px);
    }

    body[data-page="studio"] .vue-route-director-progress {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 1px;
        scrollbar-width: none;
    }

    body[data-page="studio"].studio-mode-advanced .vue-route-director-progress {
        display: flex;
        grid-template-columns: none;
    }

    body[data-page="studio"] .vue-route-director-progress::-webkit-scrollbar {
        display: none;
    }

    body[data-page="studio"] .vue-route-director-progress button {
        flex: 0 0 116px;
        min-height: 44px;
        padding: 7px;
        border-radius: 14px;
    }

    body[data-page="studio"] .vue-route-director-progress span {
        width: 24px;
        height: 24px;
        border-radius: 9px;
    }

    body[data-page="studio"] .vue-route-director-tasks {
        display: none;
    }

    body[data-page="studio"] .vue-route-director-actions,
    body[data-page="studio"] .studio-wizard-nav {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-route-director-actions {
        gap: 6px;
    }

    body[data-page="studio"] .vue-route-director-actions .primary-btn,
    body[data-page="studio"] .vue-route-director-actions .secondary-btn {
        min-height: 42px;
        border-radius: 14px;
    }

    body[data-page="studio"] .vue-route-director-actions small {
        display: none;
    }

    body[data-page="studio"] .studio-wizard-nav > div {
        order: -1;
    }
}

@media (max-width: 480px) {
    body[data-page="studio"] .vue-route-director-progress {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-route-director-focus p,
    body[data-page="studio"] .vue-route-director-actions small {
        display: none;
    }
}

/* Local UX pass v493: keep the OC wizard focused on one visible task. */
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-dock, .vue-visual-dock) {
    gap: 10px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-now, .vue-visual-write-now) {
    gap: 10px;
    padding: 12px;
    border-radius: 26px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head, .vue-visual-write-head) {
    grid-template-columns: minmax(0, 1fr) minmax(148px, auto);
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head strong, .vue-visual-write-head strong) {
    font-size: clamp(18px, 1.45vw, 22px);
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head .primary-btn, .vue-visual-write-head .primary-btn) {
    min-height: 40px;
    border-radius: 14px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-now .vue-visual-field {
    min-height: 90px;
    gap: 6px;
    padding: 8px;
    border-radius: 17px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-now .vue-visual-field.wide {
    min-height: 94px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-field > span,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-field > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field input,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field select,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-now .vue-visual-field input,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-now .vue-visual-field textarea {
    min-height: 38px;
    border-radius: 13px;
    padding: 9px 10px;
    font-size: 13px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-now .vue-visual-field textarea {
    min-height: 64px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-actions-drawer,
    .vue-core-inspiration-drawer,
    .vue-candidate-drawer,
    .vue-core-manual,
    .vue-visual-toolbox,
    .vue-visual-manual
) {
    padding: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.54);
    box-shadow: none;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-toolbox > summary, .vue-studio-refine > summary) {
    min-height: 46px;
    padding: 8px 11px;
    border-radius: 18px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-dock {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-now,
    .vue-core-head,
    .vue-core-mission,
    .vue-creator-mode-coach,
    .vue-core-quick-panel,
    .vue-core-summary,
    .vue-visual-meter,
    .vue-visual-write-now,
    .vue-visual-head,
    .vue-step-mission-visual,
    .vue-visual-route-card,
    .vue-visual-summary,
    .vue-visual-actions
) {
    grid-column: 1 / -1;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-actions-drawer[open],
    .vue-core-inspiration-drawer[open],
    .vue-candidate-drawer[open],
    .vue-core-manual[open],
    .vue-visual-toolbox[open],
    .vue-visual-manual[open]
) {
    grid-column: 1 / -1;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-toolbox > summary div, .vue-studio-refine > summary div) {
    min-width: 0;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-toolbox > summary strong, .vue-studio-refine > summary strong) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-studio-refine > summary {
    grid-template-columns: minmax(0, 1fr) auto;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-toolbox > summary span, .vue-studio-refine > summary span) {
    font-size: 11px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-toolbox > summary strong, .vue-studio-refine > summary strong) {
    margin: 1px 0 0;
    font-size: 14px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-studio-refine > summary p,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-studio-refine > summary em {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-studio-refine > summary::after {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-studio-toolbox > :not(summary),
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-studio-refine > :not(summary) {
    margin-top: 8px;
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head {
        gap: 10px;
        padding: 12px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head h2 {
        font-size: 22px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-status {
        gap: 7px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-side {
        gap: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-state {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-cue {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 0;
        padding: 10px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-cue span,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-cue small {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-cue strong {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-actions {
        margin: 0;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-next-actions .primary-btn {
        width: auto;
        min-height: 34px;
        padding: 0 10px;
        border-radius: 12px;
        white-space: nowrap;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head, .vue-visual-write-head) {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-grid,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-now .vue-visual-field,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-now .vue-visual-field.wide {
        min-height: 82px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-now > .vue-visual-field.wide {
        grid-column: 1 / -1;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-toolbox > summary em, .vue-studio-refine > summary::after) {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-dock,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-dock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-toolbox > summary, .vue-studio-refine > summary) {
        min-height: 44px;
        padding: 8px 9px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-toolbox > summary strong, .vue-studio-refine > summary strong) {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-actions .primary-btn,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-actions .secondary-btn {
        width: 100%;
        min-height: 40px;
        padding: 0 8px;
        border-radius: 14px;
        white-space: normal;
    }
}

/* Local UX pass v497: first viewport should show the first writable OC fields. */
@media (max-width: 700px) {
    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title {
        gap: 7px;
        padding-top: 10px;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title > .eyebrow {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title h1 {
        font-size: clamp(24px, 7.6vw, 32px);
        line-height: 1.02;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell {
        margin-top: 0;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director {
        gap: 7px;
        padding: 10px;
        border-radius: 20px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-copy,
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-step,
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-tasks {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-stage {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus {
        min-height: 62px;
        padding: 10px 12px 10px 14px;
        border-radius: 16px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus span {
        min-height: 20px;
        padding: 0 7px;
        font-size: 10px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus strong {
        font-size: clamp(17px, 5.2vw, 22px);
        line-height: 1.1;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress {
        gap: 6px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress button {
        flex: 0 0 88px;
        min-height: 36px;
        padding: 6px;
        border-radius: 12px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress span {
        width: 20px;
        height: 20px;
        border-radius: 8px;
        font-size: 9px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress strong {
        font-size: 11px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .primary-btn,
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .secondary-btn {
        min-height: 36px;
        padding: 0 8px;
        border-radius: 12px;
        font-size: 13px;
        white-space: normal;
    }

    body[data-page="studio"].studio-wizard-ready .studio-workbench {
        margin-top: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head > div:first-child {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head .eyebrow {
        margin: 0;
        white-space: nowrap;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head h2 {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        font-size: 18px;
        line-height: 1.08;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-side {
        display: none;
    }
}

/* Local UX pass v498: desktop should also reveal the first writable OC fields. */
@media (min-width: 701px) {
    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title {
        gap: 12px;
        padding-top: 30px;
        padding-bottom: 20px;
        margin-bottom: 10px;
    }

    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title h1 {
        font-size: clamp(38px, 4.2vw, 58px);
        line-height: 1.02;
    }

    body[data-page="studio"].studio-wizard-ready .studio-hero-title.page-title > p:not(.eyebrow) {
        max-width: 58em;
        line-height: 1.45;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director {
        gap: 10px;
        padding: 14px;
        border-radius: 24px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-main {
        grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.45fr);
        gap: 10px;
        align-items: stretch;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-copy {
        align-content: center;
        gap: 5px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-copy h2 {
        max-width: 10em;
        font-size: clamp(24px, 2.4vw, 34px);
        line-height: 1.04;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-stage {
        grid-template-columns: minmax(104px, 0.3fr) minmax(0, 1fr);
        gap: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-step,
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus {
        min-height: 82px;
        border-radius: 18px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-step {
        padding: 10px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-step span,
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus span {
        min-height: 22px;
        padding: 0 8px;
        font-size: 10px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-step strong {
        font-size: 18px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-step small {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus {
        padding: 12px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus strong {
        font-size: clamp(19px, 1.9vw, 26px);
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus p,
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-tasks,
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions small {
        display: none;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress {
        gap: 6px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress button {
        min-height: 40px;
        padding: 6px;
        border-radius: 13px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress span {
        width: 24px;
        height: 24px;
        border-radius: 9px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
        gap: 8px;
    }

    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .primary-btn,
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .secondary-btn {
        min-height: 42px;
        border-radius: 14px;
    }
}

/* Local UX pass v499: make the live OC board feel like a clean sketch sheet instead of a heavy night dossier. */
body[data-page="studio"] .vue-board-dock {
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(40, 50, 72, 0.1);
    border-radius: 26px;
    color: #1c1b24;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 253, 255, 0.91)),
            radial-gradient(circle at 8% 0, rgba(33, 183, 197, 0.12), transparent 30%),
            radial-gradient(circle at 92% 12%, rgba(255, 209, 102, 0.18), transparent 28%);
    box-shadow: 0 20px 48px rgba(39, 28, 62, 0.1);
}

body[data-page="studio"] .vue-board-dock::before {
    display: none;
}

body[data-page="studio"] .vue-board-dossier-rail {
    position: relative;
    inset: auto;
    min-height: 34px;
    padding: 0 4px 0 10px;
    border-radius: 999px;
    color: rgba(29, 31, 43, 0.58);
    background: rgba(255, 255, 255, 0.72);
    letter-spacing: 0;
}

body[data-page="studio"] .vue-board-dossier-rail span {
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-board-dossier-rail strong {
    min-height: 26px;
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #1b1a22;
    background: #ffe07d;
    font-size: 12px;
    letter-spacing: 0.04em;
}

body[data-page="studio"] .vue-board-cover {
    min-height: 0;
    border: 1px solid rgba(40, 50, 72, 0.1);
    border-radius: 24px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

body[data-page="studio"] .vue-board-cover img {
    height: clamp(260px, 34vw, 340px);
    border-radius: 22px;
}

body[data-page="studio"] .vue-board-empty-cover,
body[data-page="studio"].studio-mode-quick .vue-board-empty-cover {
    min-height: 300px;
    height: auto;
    align-content: start;
    gap: 10px;
    padding: 14px 14px 52px;
    color: #1c1b24;
    background:
            linear-gradient(90deg, rgba(84, 101, 130, 0.07) 1px, transparent 1px),
            linear-gradient(180deg, rgba(84, 101, 130, 0.07) 1px, transparent 1px),
            radial-gradient(circle at 88% 12%, rgba(255, 209, 102, 0.24), transparent 28%),
            radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--board-accent, #21b7c5) 18%, transparent), transparent 30%),
            linear-gradient(145deg, #fffdf8, #effbff 72%, #f8f7ff);
    background-size: 22px 22px, 22px 22px, auto, auto, auto;
}

body[data-page="studio"] .vue-board-empty-cover::before {
    inset: 10px;
    border-color: rgba(29, 31, 43, 0.09);
    border-radius: 18px;
    background: none;
}

body[data-page="studio"] .vue-board-empty-cover::after,
body[data-page="studio"] .vue-board-cover-marks {
    display: none;
}

body[data-page="studio"] .vue-board-cover-topline {
    align-items: flex-start;
}

body[data-page="studio"] .vue-board-cover-topline span,
body[data-page="studio"] .vue-board-cover-topline strong,
body[data-page="studio"].studio-mode-quick .vue-board-cover-topline strong {
    min-height: 26px;
    display: inline-flex;
    max-width: min(100%, 210px);
    border-color: rgba(29, 31, 43, 0.08);
    color: rgba(29, 31, 43, 0.7);
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(8px);
    font-size: 11px;
    letter-spacing: 0;
}

body[data-page="studio"] .vue-board-cover-topline span {
    color: #8a5a00;
}

body[data-page="studio"] .vue-board-cover-topline strong {
    color: color-mix(in srgb, var(--board-accent, #21b7c5) 56%, #20202b);
}

body[data-page="studio"] .vue-board-empty-head,
body[data-page="studio"].studio-mode-quick .vue-board-empty-head {
    width: 100%;
    padding: 0 2px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

body[data-page="studio"] .vue-board-empty-head span,
body[data-page="studio"] .vue-board-empty-grid span,
body[data-page="studio"] .vue-board-blueprint-lines b {
    color: #9b6a00;
}

body[data-page="studio"] .vue-board-empty-head strong {
    color: #181720;
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.08;
}

body[data-page="studio"] .vue-board-empty-head small,
body[data-page="studio"] .vue-board-blueprint > small {
    color: rgba(29, 31, 43, 0.58);
}

body[data-page="studio"] .vue-board-empty-stage,
body[data-page="studio"].studio-mode-quick .vue-board-empty-stage {
    min-height: 132px;
    grid-template-columns: minmax(92px, 0.46fr) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-color: rgba(29, 31, 43, 0.08);
    border-radius: 20px;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(244, 251, 255, 0.74)),
            rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 24px rgba(39, 28, 62, 0.06);
}

body[data-page="studio"] .vue-board-empty-stage[data-stage-ready="prompt"] {
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 34%, rgba(29, 31, 43, 0.08));
    background:
            linear-gradient(145deg, color-mix(in srgb, var(--board-accent, #21b7c5) 8%, #fff), #f8fdff),
            #fff;
}

body[data-page="studio"] .vue-board-silhouette,
body[data-page="studio"].studio-mode-quick .vue-board-silhouette {
    min-height: 112px;
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 24%, rgba(29, 31, 43, 0.1));
    border-radius: 18px;
    background:
            radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--board-accent, #21b7c5) 14%, transparent), transparent 36%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(239, 251, 255, 0.8));
}

body[data-page="studio"] .vue-board-silhouette::before,
body[data-page="studio"] .vue-board-silhouette::after {
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 38%, rgba(29, 31, 43, 0.14));
    background: rgba(255, 255, 255, 0.58);
}

body[data-page="studio"] .vue-board-silhouette i {
    border-color: rgba(29, 31, 43, 0.35);
}

body[data-page="studio"] .vue-board-blueprint {
    gap: 6px;
}

body[data-page="studio"] .vue-board-blueprint > span {
    color: #1b1a22;
    background: #dff8ff;
}

body[data-page="studio"] .vue-board-blueprint > strong {
    color: #181720;
    font-size: 15px;
}

body[data-page="studio"] .vue-board-blueprint-lines {
    gap: 5px;
}

body[data-page="studio"] .vue-board-blueprint-lines em {
    padding: 6px 7px;
    border-color: rgba(29, 31, 43, 0.08);
    background: rgba(255, 255, 255, 0.66);
}

body[data-page="studio"] .vue-board-blueprint-lines em.ready {
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 34%, rgba(29, 31, 43, 0.08));
    background: color-mix(in srgb, var(--board-accent, #21b7c5) 10%, #fff);
}

body[data-page="studio"] .vue-board-blueprint-lines span {
    color: rgba(29, 31, 43, 0.7);
}

body[data-page="studio"] .vue-board-empty-grid,
body[data-page="studio"].studio-mode-quick .vue-board-empty-grid,
body[data-page="studio"].studio-mode-quick .vue-board-empty-cover:hover .vue-board-empty-grid,
body[data-page="studio"].studio-mode-quick .vue-board-empty-cover:focus-within .vue-board-empty-grid {
    position: static;
    z-index: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

body[data-page="studio"] .vue-board-empty-grid article {
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-color: rgba(29, 31, 43, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: none;
}

body[data-page="studio"] .vue-board-empty-grid article.ready {
    border-color: color-mix(in srgb, var(--board-accent, #21b7c5) 36%, rgba(29, 31, 43, 0.08));
    background: color-mix(in srgb, var(--board-accent, #21b7c5) 12%, #fff);
}

body[data-page="studio"] .vue-board-empty-grid span {
    flex: 0 0 auto;
    font-size: 10px;
}

body[data-page="studio"] .vue-board-empty-grid strong {
    min-width: 0;
    overflow: hidden;
    color: rgba(29, 31, 43, 0.78);
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="studio"] .vue-board-empty-cover p,
body[data-page="studio"].studio-mode-quick .vue-board-empty-cover > p {
    display: block;
    max-width: 100%;
    color: rgba(29, 31, 43, 0.58);
    font-size: 12px;
    line-height: 1.45;
    text-shadow: none;
}

body[data-page="studio"] .vue-board-cover > span {
    min-height: 32px;
    color: rgba(29, 31, 43, 0.74);
    border: 1px solid rgba(29, 31, 43, 0.08);
    background: rgba(255, 255, 255, 0.76);
}

body[data-page="studio"] .vue-board-info h2,
body[data-page="studio"] .vue-board-readiness-head strong,
body[data-page="studio"] .vue-board-readiness-grid strong,
body[data-page="studio"] .vue-board-director-cue strong {
    color: #181720;
}

body[data-page="studio"] .vue-board-info > p:not(.eyebrow),
body[data-page="studio"] .vue-board-readiness-head p,
body[data-page="studio"] .vue-board-readiness-grid small,
body[data-page="studio"] .vue-board-director-cue p,
body[data-page="studio"] .vue-board-summary p,
body[data-page="studio"] .vue-board-status p,
body[data-page="studio"] .vue-board-notice p {
    color: rgba(29, 31, 43, 0.62);
}

body[data-page="studio"] .vue-board-file-stamps span,
body[data-page="studio"] .vue-board-tags span {
    color: #1b1a22;
    background: rgba(33, 183, 197, 0.12);
}

body[data-page="studio"] .vue-board-palette {
    color: rgba(29, 31, 43, 0.62);
}

body[data-page="studio"] .vue-board-readiness,
body[data-page="studio"] .vue-board-summary article,
body[data-page="studio"] .vue-board-status,
body[data-page="studio"] .vue-board-notice,
body[data-page="studio"] .vue-board-director-cue {
    border-color: rgba(29, 31, 43, 0.08);
    background: rgba(255, 255, 255, 0.66);
}

body[data-page="studio"] .vue-board-readiness[data-board-readiness="building"] {
    border-color: rgba(194, 132, 0, 0.2);
    background: rgba(255, 250, 230, 0.72);
}

body[data-page="studio"] .vue-board-readiness[data-board-readiness="complete"] {
    border-color: rgba(63, 154, 116, 0.22);
    background: rgba(237, 255, 247, 0.76);
}

body[data-page="studio"] .vue-board-readiness-head div {
    border-color: rgba(29, 31, 43, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

body[data-page="studio"] .vue-board-readiness-head span,
body[data-page="studio"] .vue-board-readiness-grid span,
body[data-page="studio"] .vue-board-summary span,
body[data-page="studio"] .vue-board-status span,
body[data-page="studio"] .vue-board-director-cue small {
    color: #8a5a00;
}

body[data-page="studio"] .vue-board-readiness-bar {
    background: rgba(29, 31, 43, 0.08);
}

body[data-page="studio"] .vue-board-readiness-grid button {
    color: #181720;
    border-color: rgba(29, 31, 43, 0.08);
    background: rgba(255, 255, 255, 0.62);
}

body[data-page="studio"] .vue-board-readiness-grid button.ready {
    border-color: rgba(63, 154, 116, 0.22);
    background: rgba(237, 255, 247, 0.78);
}

body[data-page="studio"] .vue-board-readiness-grid button:hover {
    background: #fff;
}

body[data-page="studio"] .vue-board-director-cue span {
    color: #1b1a22;
    background: #ffe07d;
}

@media (max-width: 560px) {
    body[data-page="studio"] .vue-board-dock {
        padding: 12px;
        border-radius: 22px;
    }

    body[data-page="studio"] .vue-board-empty-cover,
    body[data-page="studio"].studio-mode-quick .vue-board-empty-cover {
        min-height: 0;
        padding: 12px 12px 48px;
    }

    body[data-page="studio"] .vue-board-empty-stage,
    body[data-page="studio"].studio-mode-quick .vue-board-empty-stage {
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-board-silhouette,
    body[data-page="studio"].studio-mode-quick .vue-board-silhouette {
        min-height: 96px;
    }

    body[data-page="studio"] .vue-board-empty-grid,
    body[data-page="studio"].studio-mode-quick .vue-board-empty-grid {
        grid-template-columns: 1fr;
    }
}

/* Local UX pass v500: remove the bulky preview frame and calm down the studio night palette. */
body[data-page="studio"].studio-theme-night {
    --paper: #111722;
    --panel: #172030;
    --text: #eef4f8;
    --muted: #aab7c6;
    --line: rgba(226, 236, 246, 0.13);
    background:
            radial-gradient(circle at 12% 6%, rgba(90, 214, 224, 0.14), transparent 28rem),
            radial-gradient(circle at 90% 14%, rgba(255, 209, 102, 0.08), transparent 26rem),
            linear-gradient(180deg, #111722 0%, #172030 46%, #111722 100%);
}

body[data-page="studio"].studio-theme-night .topbar {
    background: rgba(13, 18, 28, 0.84);
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1180px) {
    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        display: grid;
        grid-template-columns: minmax(0, min(430px, 100%));
        justify-content: center;
        padding: 18px;
        border-radius: 30px;
        background:
                radial-gradient(circle at 12% 8%, rgba(33, 183, 197, 0.12), transparent 26rem),
                radial-gradient(circle at 90% 16%, rgba(255, 209, 102, 0.16), transparent 24rem),
                linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 252, 0.88));
    }
}

@media (max-width: 1180px) {
    body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-preview.avatar-preview {
        background:
                radial-gradient(circle at 12% 8%, rgba(33, 183, 197, 0.12), transparent 26rem),
                radial-gradient(circle at 90% 16%, rgba(255, 209, 102, 0.14), transparent 24rem),
                linear-gradient(145deg, #edf4f7, #f8fbfc);
    }
}

/* Local UX pass v502: lightweight night mode and generated default art instead of line placeholders. */
body[data-page="studio"] .vue-board-default-art {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    border: 1px solid rgba(29, 31, 43, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(39, 28, 62, 0.08);
}

body[data-page="studio"] .vue-board-default-art img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
    object-position: 50% 36%;
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-readiness,
body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-actions,
body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-notice {
    display: none !important;
}

body[data-page="studio"].studio-theme-night {
    --ink: #17202d;
    --text: #273241;
    --muted: #697586;
    --line: rgba(39, 50, 65, 0.12);
    color: #eef4f8;
    background:
            radial-gradient(circle at 10% 4%, rgba(80, 202, 216, 0.13), transparent 30rem),
            radial-gradient(circle at 92% 10%, rgba(255, 209, 102, 0.1), transparent 26rem),
            linear-gradient(180deg, #111722 0%, #182231 52%, #121926 100%);
}

body[data-page="studio"].studio-theme-night .studio-hero-title.page-title {
    color: #17202d;
    border-color: rgba(255, 255, 255, 0.44);
    background:
            linear-gradient(90deg, rgba(248, 252, 255, 0.94), rgba(238, 248, 250, 0.84) 58%, rgba(255, 251, 235, 0.72)),
            url("/animaker/img/generated/studio-oc-workbench-hero-v1.webp") center / cover no-repeat;
    box-shadow: 0 24px 68px rgba(9, 18, 29, 0.22);
}

body[data-page="studio"].studio-theme-night .studio-hero-title.page-title h1,
body[data-page="studio"].studio-theme-night .studio-hero-title.page-title p,
body[data-page="studio"].studio-theme-night .studio-hero-title.page-title .eyebrow {
    color: #17202d;
}

body[data-page="studio"].studio-theme-night .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: rgba(13, 18, 28, 0.78);
}

body[data-page="studio"].studio-theme-night .topbar .brand,
body[data-page="studio"].studio-theme-night .topbar a {
    color: #f7fbff;
}

body[data-page="studio"].studio-theme-night :is(
    .vue-route-director,
    .studio-panel,
    .studio-wizard-nav,
    .studio-ai-bridge,
    .studio-publish-bridge,
    .vue-step-head,
    .vue-core-mission,
    .vue-core-briefing article,
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field,
    .vue-studio-refine,
    .vue-studio-toolbox > summary,
    .vue-visual-actions,
    .studio-bridge-actions,
    .vue-image-readiness,
    .vue-publish-decision,
    .vue-image-mode-board
) {
    color: #17202d;
    border-color: rgba(39, 50, 65, 0.11);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(243, 250, 252, 0.9)),
            rgba(255, 255, 255, 0.84);
    box-shadow: 0 16px 42px rgba(9, 18, 29, 0.1);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-route-director,
    .studio-panel,
    .studio-wizard-nav,
    .studio-ai-bridge,
    .studio-publish-bridge,
    .vue-step-head,
    .vue-core-mission,
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field,
    .vue-studio-refine,
    .vue-image-readiness,
    .vue-publish-decision
) :is(h2, h3, h4, strong, label, summary) {
    color: #17202d;
}

body[data-page="studio"].studio-theme-night :is(
    .vue-route-director,
    .studio-panel,
    .studio-wizard-nav,
    .studio-ai-bridge,
    .studio-publish-bridge,
    .vue-step-head,
    .vue-core-mission,
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field,
    .vue-studio-refine,
    .vue-image-readiness,
    .vue-publish-decision
) :is(p, small) {
    color: #657183;
}

body[data-page="studio"].studio-theme-night :is(input, textarea, select) {
    color: #17202d;
    border-color: rgba(39, 50, 65, 0.13);
    background: rgba(255, 255, 255, 0.92);
}

body[data-page="studio"].studio-theme-night :is(input, textarea)::placeholder {
    color: rgba(87, 99, 116, 0.58);
}

body[data-page="studio"].studio-theme-night .vue-core-write-now {
    color: #17202d;
    border-color: rgba(39, 50, 65, 0.11);
    background:
            radial-gradient(circle at 0 0, rgba(113, 230, 239, 0.12), transparent 34%),
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 251, 252, 0.91));
    box-shadow: 0 16px 42px rgba(9, 18, 29, 0.1);
}

body[data-page="studio"].studio-theme-night .vue-core-write-head strong,
body[data-page="studio"].studio-theme-night .vue-core-write-grid .vue-core-field strong {
    color: #17202d;
}

body[data-page="studio"].studio-theme-night .vue-core-write-head p,
body[data-page="studio"].studio-theme-night .vue-core-write-grid .vue-core-field small {
    color: #657183;
}

body[data-page="studio"].studio-theme-night .vue-core-write-grid .vue-core-field {
    border-color: rgba(39, 50, 65, 0.1);
    background: rgba(255, 255, 255, 0.76);
}

body[data-page="studio"].studio-theme-night .secondary-btn,
body[data-page="studio"].studio-theme-night .ghost-link {
    color: #17202d;
    border-color: rgba(39, 50, 65, 0.12);
    background: rgba(255, 255, 255, 0.72);
}

body[data-page="studio"].studio-theme-night .primary-btn,
body[data-page="studio"].studio-theme-night .primary-link {
    color: #101823;
    background: linear-gradient(135deg, #71e6ef, #ffe07d);
}

@media (max-width: 560px) {
    body[data-page="studio"] .vue-board-default-art {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-dock {
    max-width: 430px;
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-info {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-readiness {
    gap: 8px;
    padding: 10px;
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-readiness-head {
    grid-template-columns: auto minmax(0, 1fr);
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-readiness-head div {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-readiness-head p,
body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-director-cue p,
body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-director-cue small {
    display: none;
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-actions {
    grid-template-columns: 1fr;
}

/* Local UX pass v504: whole-page light-paper night mode, not dark cards with a few light patches. */
body[data-page="studio"].studio-theme-night .topbar {
    color: #162231;
    border-bottom-color: rgba(255, 255, 255, 0.48);
    background:
            linear-gradient(180deg, rgba(251, 254, 255, 0.92), rgba(237, 247, 250, 0.82)),
            rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 38px rgba(8, 17, 28, 0.18);
}

body[data-page="studio"].studio-theme-night .topbar .brand,
body[data-page="studio"].studio-theme-night .topbar a,
body[data-page="studio"].studio-theme-night .shared-nav-links a,
body[data-page="studio"].studio-theme-night .nav a {
    color: #162231;
}

body[data-page="studio"].studio-theme-night .topbar a:hover,
body[data-page="studio"].studio-theme-night .topbar a.active,
body[data-page="studio"].studio-theme-night .shared-nav-links a:hover,
body[data-page="studio"].studio-theme-night .shared-nav-links a.active,
body[data-page="studio"].studio-theme-night .nav a:hover,
body[data-page="studio"].studio-theme-night .nav a.active {
    color: #10202b;
    border-color: rgba(39, 50, 65, 0.1);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(9, 18, 29, 0.08);
}

body[data-page="studio"].studio-theme-night .theme-toggle-button {
    color: #162231;
    border-color: rgba(39, 50, 65, 0.1);
    background: rgba(255, 255, 255, 0.72);
}

body[data-page="studio"].studio-theme-night .theme-toggle-button.active {
    color: #10202b;
    background: linear-gradient(135deg, #8cecf2, #ffe58a);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-step-task-chips button,
    .vue-core-actions button,
    .vue-core-inspiration-grid button,
    .vue-visual-preset-grid button,
    .vue-visual-kit-options button,
    .vue-image-director-grid button,
    .vue-publish-checks button
) {
    color: #162231;
    border-color: rgba(39, 50, 65, 0.11);
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 253, 0.9)),
            rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 24px rgba(9, 18, 29, 0.08);
}

body[data-page="studio"].studio-theme-night :is(
    .vue-step-task-chips button,
    .vue-core-actions button,
    .vue-core-inspiration-grid button,
    .vue-visual-preset-grid button,
    .vue-visual-kit-options button,
    .vue-image-director-grid button,
    .vue-publish-checks button
) :is(span, strong, b) {
    color: #162231;
}

body[data-page="studio"].studio-theme-night :is(
    .vue-core-actions button,
    .vue-core-inspiration-grid button,
    .vue-visual-preset-grid button,
    .vue-visual-kit-options button,
    .vue-image-director-grid button
) small {
    color: #647285;
}

body[data-page="studio"].studio-theme-night :is(
    .vue-step-task-chips button.done,
    .vue-core-inspiration-grid button.is-applied,
    .vue-visual-preset-grid button.is-applied,
    .vue-visual-kit-options button.active
) {
    border-color: rgba(33, 183, 197, 0.24);
    background:
            linear-gradient(145deg, rgba(224, 251, 255, 0.96), rgba(255, 250, 223, 0.86)),
            rgba(255, 255, 255, 0.86);
}

body[data-page="studio"] .vue-board-empty-stage {
    grid-template-columns: 1fr;
}

body[data-page="studio"] .vue-board-default-art {
    min-height: 188px;
    aspect-ratio: 3 / 4;
}

body[data-page="studio"] .vue-board-default-art img {
    object-position: 50% 42%;
}

body[data-page="studio"] .vue-board-blueprint {
    padding: 2px 2px 0;
}

body[data-page="studio"] .vue-board-blueprint > small {
    display: none;
}

body[data-page="studio"] .vue-board-blueprint-lines {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="studio"] .vue-board-empty-grid {
    grid-template-columns: 1fr;
}

body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-dock {
    max-width: 360px;
}

@media (max-width: 560px) {
    body[data-page="studio"].studio-theme-night .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 0;
        padding: 10px 12px;
        margin: 10px auto 12px;
        width: min(100% - 28px, 420px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 24px;
    }

    body[data-page="studio"].studio-theme-night .brand {
        min-width: 0;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body[data-page="studio"].studio-theme-night .shared-nav-root {
        grid-column: 1 / -1;
        min-width: 0;
    }

    body[data-page="studio"].studio-theme-night .shared-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    body[data-page="studio"].studio-theme-night .shared-nav-links,
    body[data-page="studio"].studio-theme-night .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        row-gap: 0;
    }

    body[data-page="studio"].studio-theme-night .shared-nav-links a,
    body[data-page="studio"].studio-theme-night .nav a {
        flex: 0 0 auto;
        min-height: 30px;
        padding: 0 10px;
        white-space: nowrap;
    }

    body[data-page="studio"].studio-theme-night .shared-nav-actions {
        flex-wrap: nowrap;
        overflow: visible;
    }

    body[data-page="studio"].studio-theme-night .theme-toggle-button {
        min-width: 50px;
        min-height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    body[data-page="studio"] .vue-board-empty-stage {
        padding: 9px;
    }

    body[data-page="studio"] .vue-board-default-art {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    body[data-page="studio"] .vue-board-blueprint-lines {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Local UX pass v506: mobile studio becomes a light AI sketch card, not a dossier stack. */
@media (max-width: 720px) {
    body[data-page="studio"].studio-theme-night .shared-nav-actions .primary-link {
        display: none;
    }

    body[data-page="studio"].studio-theme-night .shared-nav-links,
    body[data-page="studio"].studio-theme-night .nav {
        min-height: 30px;
        height: 30px;
        align-items: center;
    }

    body[data-page="studio"].studio-theme-night .topbar {
        box-shadow: 0 10px 28px rgba(8, 17, 28, 0.1);
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-dock,
    body[data-page="studio"] .vue-board-dock {
        gap: 10px;
        width: 100%;
        max-width: none;
        padding: 10px;
        border-radius: 22px;
        box-shadow: 0 14px 34px rgba(39, 28, 62, 0.08);
    }

    body[data-page="studio"] .vue-board-dossier-rail {
        min-height: 30px;
        padding-left: 8px;
        background: rgba(255, 255, 255, 0.62);
    }

    body[data-page="studio"] .vue-board-dossier-rail span {
        font-size: 11px;
    }

    body[data-page="studio"] .vue-board-dossier-rail strong {
        min-height: 24px;
        min-width: 44px;
        font-size: 11px;
    }

    body[data-page="studio"] .vue-board-cover {
        border-radius: 20px;
    }

    body[data-page="studio"] .vue-board-empty-cover,
    body[data-page="studio"].studio-mode-quick .vue-board-empty-cover {
        gap: 8px;
        padding: 10px 10px 42px;
        background:
                linear-gradient(90deg, rgba(84, 101, 130, 0.055) 1px, transparent 1px),
                linear-gradient(180deg, rgba(84, 101, 130, 0.055) 1px, transparent 1px),
                radial-gradient(circle at 90% 10%, rgba(255, 209, 102, 0.18), transparent 24%),
                linear-gradient(145deg, #fffdf9, #f2fbff 68%, #fbf8ff);
        background-size: 22px 22px, 22px 22px, auto, auto;
    }

    body[data-page="studio"] .vue-board-empty-cover::before {
        inset: 8px;
        border-radius: 16px;
    }

    body[data-page="studio"] .vue-board-cover-topline strong {
        display: none;
    }

    body[data-page="studio"] .vue-board-cover-topline span {
        min-height: 24px;
        max-width: 100%;
        padding: 0 8px;
        font-size: 10px;
    }

    body[data-page="studio"] .vue-board-empty-head,
    body[data-page="studio"].studio-mode-quick .vue-board-empty-head {
        gap: 4px;
        padding: 0 2px;
    }

    body[data-page="studio"] .vue-board-empty-head span {
        display: none;
    }

    body[data-page="studio"] .vue-board-empty-head strong {
        font-size: clamp(22px, 8vw, 28px);
        line-height: 1.08;
    }

    body[data-page="studio"] .vue-board-empty-head small {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body[data-page="studio"] .vue-board-empty-stage,
    body[data-page="studio"].studio-mode-quick .vue-board-empty-stage {
        grid-template-columns: minmax(112px, 0.78fr) minmax(0, 1fr);
        gap: 8px;
        min-height: 176px;
        padding: 8px;
        border-radius: 18px;
        box-shadow: 0 8px 18px rgba(39, 28, 62, 0.05);
    }

    body[data-page="studio"] .vue-board-default-art {
        height: 172px;
        min-height: 0;
        aspect-ratio: auto;
        border-radius: 16px;
    }

    body[data-page="studio"] .vue-board-default-art img {
        height: 100%;
        object-fit: cover;
        object-position: 50% 36%;
        border-radius: 16px;
    }

    body[data-page="studio"] .vue-board-blueprint {
        gap: 5px;
        align-content: center;
    }

    body[data-page="studio"] .vue-board-blueprint > span {
        min-height: 22px;
        padding: 0 7px;
        font-size: 10px;
    }

    body[data-page="studio"] .vue-board-blueprint > strong {
        overflow: hidden;
        font-size: 13px;
        line-height: 1.28;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    body[data-page="studio"] .vue-board-blueprint > small {
        display: none;
    }

    body[data-page="studio"] .vue-board-blueprint-lines {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body[data-page="studio"] .vue-board-blueprint-lines em {
        min-height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 5px 7px;
        border-radius: 12px;
    }

    body[data-page="studio"] .vue-board-blueprint-lines em:nth-child(n+3) {
        display: none;
    }

    body[data-page="studio"] .vue-board-empty-grid,
    body[data-page="studio"].studio-mode-quick .vue-board-empty-grid,
    body[data-page="studio"] .vue-board-empty-cover > p,
    body[data-page="studio"] .vue-board-summary,
    body[data-page="studio"] .vue-board-status {
        display: none !important;
    }

    body[data-page="studio"] .vue-board-cover > span {
        left: 10px;
        right: 10px;
        bottom: 8px;
        min-height: 28px;
        padding: 0 10px;
        border-radius: 14px;
        font-size: 11px;
    }

    body[data-page="studio"] .vue-board-readiness,
    body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-readiness {
        gap: 7px;
        padding: 8px;
        border-radius: 18px;
    }

    body[data-page="studio"] .vue-board-readiness-head div,
    body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-readiness-head div {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    body[data-page="studio"] .vue-board-readiness-head strong {
        font-size: 19px;
    }

    body[data-page="studio"] .vue-board-readiness-head p,
    body[data-page="studio"] .vue-board-director-cue p,
    body[data-page="studio"] .vue-board-director-cue small {
        display: none;
    }

    body[data-page="studio"] .vue-board-director-cue {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        padding: 7px;
        border-radius: 14px;
    }

    body[data-page="studio"] .vue-board-director-cue strong {
        overflow: hidden;
        font-size: 13px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body[data-page="studio"] .vue-board-readiness-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    body[data-page="studio"] .vue-board-readiness-grid button {
        min-height: 44px;
        justify-items: center;
        align-content: center;
        gap: 2px;
        padding: 6px 4px;
        text-align: center;
        border-radius: 13px;
    }

    body[data-page="studio"] .vue-board-readiness-grid button span,
    body[data-page="studio"] .vue-board-readiness-grid button small {
        display: none;
    }

    body[data-page="studio"] .vue-board-readiness-grid strong {
        font-size: 12px;
    }

    body[data-page="studio"] .vue-board-next-action {
        min-height: 36px;
        border-radius: 14px;
    }

    body[data-page="studio"] .vue-board-actions,
    body[data-page="studio"].studio-wizard-ready .studio-preview .vue-board-actions {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    body[data-page="studio"] .vue-board-actions .secondary-btn {
        display: none;
    }
}

/* Local UX pass v508: make studio night mode a whole-page light drafting desk. */
html:has(body[data-page="studio"].studio-theme-night),
body[data-page="studio"].studio-theme-night {
    color: #17202d;
    background:
            radial-gradient(circle at 10% 4%, rgba(80, 202, 216, 0.16), transparent 28rem),
            radial-gradient(circle at 92% 10%, rgba(255, 209, 102, 0.16), transparent 26rem),
            linear-gradient(180deg, #eef7fa 0%, #f8fbfc 46%, #eef5f7 100%) !important;
}

body[data-page="studio"].studio-theme-night main {
    color: #17202d;
}

body[data-page="studio"].studio-theme-night::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
            linear-gradient(90deg, rgba(84, 101, 130, 0.045) 1px, transparent 1px),
            linear-gradient(180deg, rgba(84, 101, 130, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.55;
}

@media (max-width: 720px) {
    body[data-page="studio"].studio-theme-night {
        background:
                radial-gradient(circle at 14% 2%, rgba(80, 202, 216, 0.15), transparent 20rem),
                radial-gradient(circle at 92% 8%, rgba(255, 209, 102, 0.14), transparent 18rem),
                linear-gradient(180deg, #eef7fa 0%, #f8fbfc 52%, #edf5f7 100%) !important;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director {
        gap: 10px;
        min-height: 0;
        padding: 16px;
    }

    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
        gap: 12px;
        padding: 16px;
    }

    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director-main {
        display: block;
        grid-template-columns: none;
    }

    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director-copy {
        display: grid;
        align-content: start;
        gap: 6px;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director-progress,
    body[data-page="studio"].studio-theme-night .vue-route-director-stage,
    body[data-page="studio"].studio-theme-night .vue-route-director-tasks,
    body[data-page="studio"].studio-theme-night .vue-route-director-actions small {
        display: none !important;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director-main {
        display: block;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director-copy {
        gap: 6px;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director-copy h2 {
        max-width: 15ch;
        font-size: clamp(22px, 7vw, 30px);
        line-height: 1.08;
    }

    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director-copy h2 {
        max-width: 15ch;
        font-size: clamp(22px, 7vw, 30px);
        line-height: 1.08;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director-copy p {
        overflow: hidden;
        margin: 0;
        color: #5f6d7c;
        font-size: 13px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director-copy p {
        display: -webkit-box;
        overflow: hidden;
        margin: 0;
        color: #5f6d7c;
        font-size: 13px;
        line-height: 1.45;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 2px;
    }

    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 2px;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director-actions .primary-btn {
        width: 100%;
        min-height: 44px;
        border-radius: 16px;
        font-size: 14px;
    }

    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .primary-btn {
        width: 100%;
        min-height: 44px;
        border-radius: 16px;
        font-size: 14px;
    }

    body[data-page="studio"].studio-theme-night .vue-route-director-actions .secondary-btn,
    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .secondary-btn {
        display: none;
    }
}

/* Local UX pass v511: keep advanced creation available as a quiet mode chip. */
body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 0.44fr) auto;
    align-items: center;
}

body[data-page="studio"] .vue-route-director-actions .vue-route-mode-chip {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid rgba(33, 183, 197, 0.24);
    border-radius: 14px;
    color: #17202d;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
    cursor: pointer;
}

body[data-page="studio"] .vue-route-director-actions .vue-route-mode-chip:hover,
body[data-page="studio"] .vue-route-director-actions .vue-route-mode-chip:focus-visible {
    border-color: rgba(33, 183, 197, 0.46);
    background: rgba(240, 253, 255, 0.9);
}

body[data-page="studio"] .vue-route-director-actions .vue-route-mode-chip[data-creator-mode="advanced"] {
    border-color: rgba(123, 97, 255, 0.26);
    background: rgba(247, 244, 255, 0.82);
}

@media (max-width: 720px) {
    body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions,
    body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    body[data-page="studio"] .vue-route-director-actions .vue-route-mode-chip {
        min-height: 44px;
        padding: 0 11px;
        border-radius: 16px;
        font-size: 12px;
    }
}

/* Local UX pass v522: true whole-page studio night mode, lighter hierarchy, AI-first focus. */
html:has(body[data-page="studio"].studio-theme-night),
body[data-page="studio"].studio-theme-night {
    --studio-night-bg: #0d0f14;
    --studio-night-panel: rgba(22, 25, 34, 0.86);
    --studio-night-panel-strong: rgba(27, 31, 42, 0.94);
    --studio-night-panel-soft: rgba(255, 255, 255, 0.055);
    --studio-night-text: #f3f6fb;
    --studio-night-muted: #aab4c3;
    --studio-night-faint: #747f90;
    --studio-night-line: rgba(225, 235, 245, 0.14);
    --studio-night-cyan: #72e7ee;
    --studio-night-amber: #ffe17d;
    --studio-night-rose: #ff8bb8;
    min-height: 100%;
    color: var(--studio-night-text) !important;
    background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
            linear-gradient(180deg, #0d0f14 0%, #11151d 42%, #0c0e13 100%) !important;
    background-size: 32px 32px, 32px 32px, auto !important;
}

body[data-page="studio"].studio-theme-night::before {
    display: none !important;
}

body[data-page="studio"].studio-theme-night main {
    color: var(--studio-night-text) !important;
}

body[data-page="studio"].studio-theme-night .topbar {
    color: var(--studio-night-text);
    border: 1px solid var(--studio-night-line);
    background: rgba(13, 15, 20, 0.86) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
}

body[data-page="studio"].studio-theme-night .topbar .brand,
body[data-page="studio"].studio-theme-night .topbar a,
body[data-page="studio"].studio-theme-night .shared-nav-links a,
body[data-page="studio"].studio-theme-night .nav a {
    color: var(--studio-night-text) !important;
}

body[data-page="studio"].studio-theme-night .topbar a:hover,
body[data-page="studio"].studio-theme-night .topbar a.active,
body[data-page="studio"].studio-theme-night .shared-nav-links a:hover,
body[data-page="studio"].studio-theme-night .shared-nav-links a.active,
body[data-page="studio"].studio-theme-night .nav a:hover,
body[data-page="studio"].studio-theme-night .nav a.active {
    color: #101319 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--studio-night-cyan), var(--studio-night-amber)) !important;
    box-shadow: 0 10px 26px rgba(114, 231, 238, 0.16);
}

body[data-page="studio"].studio-theme-night :is(
    .studio-hero-title.page-title,
    .studio-mode-hub,
    .studio-quick-panel,
    .studio-path-banner article,
    .studio-rail,
    .studio-panel,
    .studio-ai-bridge,
    .studio-publish-bridge,
    .studio-wizard-nav,
    .studio-preview.avatar-preview,
    .vue-route-director,
    .vue-route-next,
    .vue-route-focus-card,
    .vue-route-progress,
    .vue-route-more,
    .vue-reference-dock,
    .vue-assist-card,
    .vue-step-head,
    .vue-core-dock,
    .vue-core-write-now,
    .vue-core-mission,
    .vue-core-quick-panel,
    .vue-core-quick-next,
    .vue-visual-dock,
    .vue-story-dock,
    .vue-image-dock,
    .vue-publish-dock,
    .vue-board-dock
) {
    color: var(--studio-night-text) !important;
    border-color: var(--studio-night-line) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
            var(--studio-night-panel) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28) !important;
}

body[data-page="studio"].studio-theme-night .studio-hero-title.page-title {
    background:
            linear-gradient(90deg, rgba(13, 15, 20, 0.82), rgba(13, 15, 20, 0.68) 54%, rgba(13, 15, 20, 0.9)),
            url("/animaker/img/generated/studio-oc-workbench-hero-v1.webp") center / cover no-repeat !important;
}

body[data-page="studio"].studio-theme-night .studio-workbench {
    color: var(--studio-night-text);
}

body[data-page="studio"].studio-theme-night :is(
    .studio-hero-title.page-title,
    .studio-mode-hub,
    .studio-quick-panel,
    .studio-path-banner article,
    .studio-panel,
    .studio-ai-bridge,
    .studio-publish-bridge,
    .studio-wizard-nav,
    .vue-route-director,
    .vue-route-next,
    .vue-route-focus-card,
    .vue-route-progress,
    .vue-step-head,
    .vue-core-dock,
    .vue-core-write-now,
    .vue-core-mission,
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field,
    .vue-publish-field,
    .vue-board-dock
) :is(h1, h2, h3, h4, strong, label, summary, b) {
    color: var(--studio-night-text) !important;
}

body[data-page="studio"].studio-theme-night :is(
    .studio-hero-title.page-title,
    .studio-mode-hub,
    .studio-quick-panel,
    .studio-path-banner article,
    .studio-panel,
    .studio-ai-bridge,
    .studio-publish-bridge,
    .studio-wizard-nav,
    .vue-route-director,
    .vue-route-next,
    .vue-route-focus-card,
    .vue-route-progress,
    .vue-step-head,
    .vue-core-dock,
    .vue-core-write-now,
    .vue-core-mission,
    .vue-core-field,
    .vue-visual-field,
    .vue-story-field,
    .vue-image-field,
    .vue-publish-field,
    .vue-board-dock
) :is(p, small, em) {
    color: var(--studio-night-muted) !important;
}

body[data-page="studio"].studio-theme-night :is(
    .studio-mode-card,
    .studio-mode-roadmap,
    .studio-mode-proof article,
    .studio-quick-presets button,
    .studio-spark-actions button,
    .studio-bridge-flow article,
    .vue-route-director-step,
    .vue-route-director-focus,
    .vue-route-director-progress button,
    .vue-route-director-tasks button,
    .vue-route-one-task,
    .vue-route-step-output,
    .vue-route-steps button,
    .vue-draft-status,
    .vue-launch-status,
    .vue-step-task-chips button,
    .vue-core-field,
    .vue-core-quick-grid article,
    .vue-core-quick-grid button,
    .vue-core-inspiration-grid button,
    .vue-core-summary article,
    .vue-visual-field,
    .vue-visual-route-card,
    .vue-visual-route-card article,
    .vue-visual-board article,
    .vue-visual-checks button,
    .vue-visual-kit-card,
    .vue-visual-kit-options button,
    .vue-story-field,
    .vue-story-board article,
    .vue-story-checks button,
    .vue-image-brief article,
    .vue-image-director,
    .vue-image-director-grid button,
    .vue-image-readiness,
    .vue-image-readiness-grid article,
    .vue-image-hint,
    .vue-publish-checks button,
    .vue-publish-asset-grid article,
    .vue-publish-pack,
    .vue-publish-social-grid article,
    .vue-publish-preview,
    .vue-publish-decision,
    .vue-publish-mode-grid article,
    .vue-publish-options article,
    .vue-reference-grid article,
    .vue-board-readiness,
    .vue-board-director-cue,
    .vue-board-readiness-grid button,
    .vue-board-empty-grid em
) {
    color: var(--studio-night-text) !important;
    border-color: var(--studio-night-line) !important;
    background: var(--studio-night-panel-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body[data-page="studio"].studio-theme-night :is(
    .studio-mode-card.active,
    .studio-mode-card:hover,
    .studio-quick-presets button:hover,
    .studio-spark-actions button:hover,
    .vue-route-director-progress button.complete,
    .vue-route-steps button.complete,
    .vue-step-task-chips button.done,
    .vue-core-inspiration-grid button.is-applied,
    .vue-visual-preset-grid button.is-applied,
    .vue-visual-kit-options button.active,
    .vue-board-readiness-grid button.done
) {
    border-color: rgba(114, 231, 238, 0.34) !important;
    background: linear-gradient(135deg, rgba(114, 231, 238, 0.16), rgba(255, 225, 125, 0.1)) !important;
}

body[data-page="studio"].studio-theme-night :is(input, textarea, select) {
    color: var(--studio-night-text) !important;
    border-color: rgba(225, 235, 245, 0.16) !important;
    background: rgba(6, 8, 12, 0.68) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-page="studio"].studio-theme-night :is(input, textarea)::placeholder {
    color: rgba(205, 216, 230, 0.46) !important;
}

body[data-page="studio"].studio-theme-night :is(input, textarea, select):focus {
    border-color: rgba(114, 231, 238, 0.58) !important;
    box-shadow: 0 0 0 3px rgba(114, 231, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body[data-page="studio"].studio-theme-night .primary-btn,
body[data-page="studio"].studio-theme-night .primary-link,
body[data-page="studio"].studio-theme-night .vue-route-director-actions .primary-btn {
    color: #0d0f14 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--studio-night-cyan), var(--studio-night-amber)) !important;
    box-shadow: 0 14px 32px rgba(114, 231, 238, 0.18) !important;
}

body[data-page="studio"].studio-theme-night .secondary-btn,
body[data-page="studio"].studio-theme-night .ghost-link,
body[data-page="studio"].studio-theme-night .vue-route-director-actions .secondary-btn,
body[data-page="studio"].studio-theme-night .vue-route-director-actions .vue-route-mode-chip,
body[data-page="studio"].studio-theme-night .theme-toggle-button {
    color: var(--studio-night-text) !important;
    border-color: var(--studio-night-line) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-theme-night .vue-route-director-actions .vue-route-mode-chip[data-creator-mode="advanced"] {
    color: #ffe6f1 !important;
    border-color: rgba(255, 139, 184, 0.3) !important;
    background: rgba(255, 139, 184, 0.11) !important;
}

body[data-page="studio"].studio-theme-night .studio-theme-switch {
    border-color: var(--studio-night-line);
    background: rgba(0, 0, 0, 0.28);
}

body[data-page="studio"].studio-theme-night .studio-theme-switch button {
    color: var(--studio-night-muted);
}

body[data-page="studio"].studio-theme-night .studio-theme-switch button.active {
    color: #0d0f14;
    background: linear-gradient(135deg, var(--studio-night-cyan), var(--studio-night-amber));
}

body[data-page="studio"].studio-theme-night .vue-board-empty-cover,
body[data-page="studio"].studio-theme-night.studio-mode-quick .vue-board-empty-cover {
    color: var(--studio-night-text) !important;
    background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(145deg, #121722, #191d2a 62%, #0f1219) !important;
    background-size: 22px 22px, 22px 22px, auto !important;
}

body[data-page="studio"].studio-theme-night .vue-board-default-art {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: #0f1219 !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34) !important;
}

body[data-page="studio"].studio-theme-night .vue-board-cover > span,
body[data-page="studio"].studio-theme-night .vue-board-dossier-rail {
    color: var(--studio-night-text) !important;
    border-color: var(--studio-night-line) !important;
    background: rgba(10, 12, 17, 0.72) !important;
}

body[data-page="studio"].studio-theme-night .vue-board-dossier-rail strong {
    color: #0d0f14 !important;
    background: linear-gradient(135deg, var(--studio-night-cyan), var(--studio-night-amber)) !important;
}

@media (max-width: 720px) {
    body[data-page="studio"].studio-theme-night {
        background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
                linear-gradient(180deg, #0d0f14 0%, #11151d 52%, #0c0e13 100%) !important;
        background-size: 30px 30px, 30px 30px, auto !important;
    }

    body[data-page="studio"].studio-theme-night .studio-hero-title.page-title,
    body[data-page="studio"].studio-theme-night .vue-route-director,
    body[data-page="studio"].studio-theme-night .studio-panel,
    body[data-page="studio"].studio-theme-night .vue-core-write-now {
        border-radius: 22px !important;
        background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.038)),
                rgba(22, 25, 34, 0.9) !important;
    }

    body[data-page="studio"].studio-theme-night .topbar {
        background: rgba(13, 15, 20, 0.92) !important;
    }
}

/* Local UX pass v523: carry the OC night skin across home, gallery, login and creator-facing pages. */
body.animaker-theme-night:not([data-page="studio"]) {
    --site-night-bg: #0d0f14;
    --site-night-panel: rgba(22, 25, 34, 0.86);
    --site-night-panel-soft: rgba(255, 255, 255, 0.06);
    --site-night-text: #f3f6fb;
    --site-night-muted: #aab4c3;
    --site-night-faint: #747f90;
    --site-night-line: rgba(225, 235, 245, 0.14);
    --site-night-cyan: #72e7ee;
    --site-night-amber: #ffe17d;
    --site-night-rose: #ff8bb8;
    color: var(--site-night-text);
    background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
            linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
            linear-gradient(180deg, #0d0f14 0%, #11151d 44%, #0c0e13 100%) !important;
    background-size: 32px 32px, 32px 32px, auto !important;
}

body.animaker-theme-night:not([data-page="studio"]) main {
    color: var(--site-night-text);
}

body.animaker-theme-night:not([data-page="studio"]) .topbar {
    color: var(--site-night-text);
    border: 1px solid var(--site-night-line);
    background: rgba(13, 15, 20, 0.88) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
}

body.animaker-theme-night:not([data-page="studio"]) .topbar .brand,
body.animaker-theme-night:not([data-page="studio"]) .topbar a,
body.animaker-theme-night:not([data-page="studio"]) .shared-nav-links a,
body.animaker-theme-night:not([data-page="studio"]) .nav a {
    color: var(--site-night-text) !important;
}

body.animaker-theme-night:not([data-page="studio"]) .topbar a:hover,
body.animaker-theme-night:not([data-page="studio"]) .topbar a.active,
body.animaker-theme-night:not([data-page="studio"]) .shared-nav-links a:hover,
body.animaker-theme-night:not([data-page="studio"]) .shared-nav-links a.active,
body.animaker-theme-night:not([data-page="studio"]) .nav a:hover,
body.animaker-theme-night:not([data-page="studio"]) .nav a.active {
    color: #0d0f14 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--site-night-cyan), var(--site-night-amber)) !important;
    box-shadow: 0 10px 26px rgba(114, 231, 238, 0.16);
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-home-hero,
    .vue-home-feature,
    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-creation-card,
    .vue-home-starter-card,
    .vue-home-work-card,
    .vue-home-ip-card,
    .vue-home-feed-card,
    .vue-home-empty-band,
    .vue-home-list a,
    .vue-home-creator-list a,
    .vue-home-template-list a,
    .vue-home-post-list article,
    .vue-gallery-hero,
    .vue-gallery-feature,
    .vue-gallery-stats article,
    .vue-gallery-ip,
    .vue-gallery-feed-card,
    .vue-gallery-pulse,
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission,
    .vue-gallery-mission-grid article,
    .vue-gallery-creator-radar,
    .vue-gallery-radar-card,
    .vue-gallery-cocreate,
    .vue-gallery-cocreate-grid article,
    .vue-gallery-discovery,
    .vue-gallery-filter,
    .vue-gallery-work-card,
    .work-card,
    .filter-bar,
    .section-heading,
    .empty-state,
    .auth-card,
    .vue-login-flow article,
    .vue-login-status
) {
    color: var(--site-night-text) !important;
    border-color: var(--site-night-line) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
            var(--site-night-panel) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28) !important;
}

body.animaker-theme-night:not([data-page="studio"]) .vue-home-hero {
    background:
            linear-gradient(90deg, rgba(13, 15, 20, 0.94), rgba(13, 15, 20, 0.72) 46%, rgba(13, 15, 20, 0.55)),
            url("/animaker/img/generated/home-hero-oc-studio.webp") center / cover no-repeat !important;
}

body.animaker-theme-night[data-page="login"] .auth-shell {
    background:
            linear-gradient(90deg, rgba(13, 15, 20, 0.92), rgba(13, 15, 20, 0.72) 50%, rgba(13, 15, 20, 0.6)),
            linear-gradient(180deg, rgba(13, 15, 20, 0.1), rgba(13, 15, 20, 0.84)),
            url("/animaker/img/generated/login-oc-studio-bg-v1.webp") center / cover no-repeat !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-home-hero,
    .vue-home-feature,
    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-creation-card,
    .vue-home-starter-card,
    .vue-home-work-card,
    .vue-home-ip-card,
    .vue-home-feed-card,
    .vue-home-empty-band,
    .vue-home-list a,
    .vue-home-creator-list a,
    .vue-home-template-list a,
    .vue-home-post-list article,
    .vue-gallery-hero,
    .vue-gallery-feature,
    .vue-gallery-stats article,
    .vue-gallery-ip,
    .vue-gallery-feed-card,
    .vue-gallery-pulse,
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission,
    .vue-gallery-mission-grid article,
    .vue-gallery-creator-radar,
    .vue-gallery-radar-card,
    .vue-gallery-cocreate,
    .vue-gallery-cocreate-grid article,
    .vue-gallery-discovery,
    .vue-gallery-filter,
    .vue-gallery-work-card,
    .work-card,
    .filter-bar,
    .section-heading,
    .empty-state,
    .auth-card,
    .vue-login-flow article
) :is(h1, h2, h3, h4, strong, b, label) {
    color: var(--site-night-text) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-home-hero,
    .vue-home-feature,
    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-creation-card,
    .vue-home-starter-card,
    .vue-home-work-card,
    .vue-home-ip-card,
    .vue-home-feed-card,
    .vue-home-empty-band,
    .vue-home-list a,
    .vue-home-creator-list a,
    .vue-home-template-list a,
    .vue-home-post-list article,
    .vue-gallery-hero,
    .vue-gallery-feature,
    .vue-gallery-stats article,
    .vue-gallery-ip,
    .vue-gallery-feed-card,
    .vue-gallery-pulse,
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission,
    .vue-gallery-mission-grid article,
    .vue-gallery-creator-radar,
    .vue-gallery-radar-card,
    .vue-gallery-cocreate,
    .vue-gallery-cocreate-grid article,
    .vue-gallery-discovery,
    .vue-gallery-filter,
    .vue-gallery-work-card,
    .work-card,
    .filter-bar,
    .section-heading,
    .empty-state,
    .auth-card,
    .vue-login-flow article
) :is(p, small, span, em) {
    color: var(--site-night-muted) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-home-hero-routes a,
    .vue-gallery-chip-row > span,
    .vue-filter-chip,
    .vue-gallery-filter-meta,
    .vue-login-pass,
    .vue-password-rules span,
    .pill,
    .tag,
    .vue-home-dossier-tags em,
    .oc-archive-meta span
) {
    color: var(--site-night-text) !important;
    border-color: var(--site-night-line) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(.vue-filter-chip.is-active, .vue-filter-chip:hover, .pill) {
    color: #0d0f14 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--site-night-cyan), var(--site-night-amber)) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(input, textarea, select) {
    color: var(--site-night-text) !important;
    border-color: rgba(225, 235, 245, 0.16) !important;
    background: rgba(6, 8, 12, 0.7) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.animaker-theme-night:not([data-page="studio"]) :is(input, textarea)::placeholder {
    color: rgba(205, 216, 230, 0.46) !important;
}

body.animaker-theme-night:not([data-page="studio"]) .secondary-btn,
body.animaker-theme-night:not([data-page="studio"]) .ghost-link,
body.animaker-theme-night:not([data-page="studio"]) .theme-toggle-button {
    color: var(--site-night-text) !important;
    border-color: var(--site-night-line) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

body.animaker-theme-night:not([data-page="studio"]) .primary-link,
body.animaker-theme-night:not([data-page="studio"]) .primary-btn {
    color: #0d0f14 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--site-night-cyan), var(--site-night-amber)) !important;
    box-shadow: 0 14px 32px rgba(114, 231, 238, 0.18) !important;
}

@media (max-width: 720px) {
    body.animaker-theme-night:not([data-page="studio"]) {
        background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
                linear-gradient(180deg, #0d0f14 0%, #11151d 52%, #0c0e13 100%) !important;
        background-size: 30px 30px, 30px 30px, auto !important;
    }

    body.animaker-theme-night:not([data-page="studio"]) .topbar {
        background: rgba(13, 15, 20, 0.92) !important;
    }
}

/* Local UX pass v523: extend the same OC night skin to creator-facing secondary pages. */
body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-feed,
    .vue-me-dashboard,
    .vue-templates,
    .vue-characters,
    .vue-work-experience,
    .vue-export,
    .vue-user-profile,
    .vue-ip,
    .vue-admin
) {
    color: var(--site-night-text);
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-feed-hero,
    .vue-feed-next,
    .vue-feed-stats > *,
    .vue-feed-response,
    .vue-feed-response-grid > *,
    .vue-feed-loop,
    .vue-feed-loop-grid > *,
    .vue-feed-command,
    .vue-feed-priority-grid > *,
    .vue-feed-following-strip,
    .feed-card,
    .feed-work,
    .vue-feed-empty,
    .vue-feed-recommend,
    .vue-feed-player-card,
    .vue-feed-work-grid > *,
    .vue-me-hero,
    .vue-me-next,
    .vue-me-stats > *,
    .vue-me-ownership,
    .vue-me-ownership-card,
    .vue-me-triage,
    .vue-me-triage-grid > *,
    .vue-me-more-section,
    .vue-me-ops-desk,
    .vue-me-health-grid > *,
    .vue-me-operating-queue,
    .vue-me-pipeline,
    .vue-me-pipeline-grid > *,
    .vue-me-achievement,
    .vue-me-achievement-grid > *,
    .vue-me-sprint,
    .vue-me-workflow,
    .vue-me-inventory-panel,
    .vue-me-command-card,
    .vue-me-export-queue,
    .vue-templates-hero,
    .vue-templates-stats > *,
    .vue-template-command,
    .vue-template-feature,
    .vue-template-guide,
    .vue-template-guide-grid > *,
    .vue-template-match,
    .vue-template-fit-grid > *,
    .vue-template-rank-grid > *,
    .vue-template-social,
    .vue-template-social-grid > *,
    .vue-template-starter,
    .vue-template-starter-grid > *,
    .vue-template-filter,
    .vue-template-card,
    .vue-template-boundary,
    .vue-characters-hero,
    .vue-characters-stats > *,
    .vue-character-command,
    .vue-character-feature,
    .vue-character-completion,
    .vue-character-completion-grid > *,
    .vue-character-dimensions,
    .vue-character-dimension-grid > *,
    .vue-character-guide,
    .vue-character-guide-grid > *,
    .vue-character-queue,
    .vue-character-queue-grid > *,
    .vue-character-remix,
    .vue-character-remix-grid > *,
    .vue-character-filter,
    .vue-character-card,
    .vue-character-boundary,
    .vue-character-worlds,
    .vue-work-dock,
    .vue-work-side,
    .vue-work-stats > *,
    .vue-work-readiness,
    .vue-work-readiness-grid > *,
    .vue-work-launchpad,
    .vue-work-launchpad-grid > *,
    .vue-work-task-card,
    .vue-work-launchpad-checklist,
    .detail-shell,
    .detail-panel,
    .detail-comments,
    .vue-work-cocreate,
    .vue-work-cocreate-card,
    .vue-work-brief,
    .vue-export-empty,
    .vue-export-hero,
    .vue-export-summary,
    .vue-export-achievement,
    .vue-export-achievement-grid > *,
    .vue-export-planner,
    .vue-export-template-card,
    .vue-export-checklist,
    .vue-export-social-preview,
    .vue-export-share-card,
    .vue-export-caption-card,
    .vue-export-readiness,
    .vue-export-readiness-grid > *,
    .vue-export-launch,
    .vue-export-launch-grid > *,
    .vue-export-launch-brief,
    .vue-export-sheet,
    .vue-export-section-grid > *,
    .vue-export-copy-grid > *,
    .vue-user-hero,
    .vue-user-feature,
    .vue-user-next,
    .vue-user-stats > *,
    .vue-user-fit,
    .vue-user-fit-grid > *,
    .vue-user-about,
    .vue-user-route,
    .vue-user-route-steps > *,
    .vue-user-inspiration,
    .vue-user-inspiration-grid > *,
    .vue-user-cocreate,
    .vue-user-cocreate-grid > *,
    .vue-user-brief,
    .vue-user-work-card,
    .vue-ip-hero,
    .vue-ip-copy,
    .vue-ip-stats > *,
    .vue-ip-series,
    .vue-ip-series-grid > *,
    .vue-ip-section-grid > *,
    .vue-ip-production,
    .vue-ip-production-grid > *,
    .vue-ip-next-cast,
    .vue-ip-next-cast-grid > *,
    .vue-ip-cocreate,
    .vue-ip-roadmap,
    .vue-ip-cocreate-brief,
    .vue-ip-check-grid > *,
    .vue-ip-block,
    .vue-ip-character-card,
    .vue-ip-activity-card,
    .vue-admin-hero,
    .vue-admin-hero-card,
    .vue-admin-login,
    .vue-admin-console,
    .vue-admin-metrics > *,
    .vue-admin-migration,
    .vue-admin-migration-brief,
    .vue-admin-migration-grid > *,
    .vue-admin-migration-next,
    .vue-admin-config,
    .vue-admin-runtime > *,
    .vue-admin-config-grid > *,
    .vue-admin-config-guide,
    .vue-admin-rollout,
    .vue-admin-rollout-brief,
    .vue-admin-rollout-grid > *,
    .vue-admin-ops,
    .vue-admin-ops-brief,
    .vue-admin-ops-checks > *,
    .vue-admin-provider,
    .vue-admin-warning,
    .vue-admin-workbench,
    .vue-admin-row
) {
    color: var(--site-night-text) !important;
    border-color: var(--site-night-line) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.026)),
            rgba(18, 21, 29, 0.88) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-feed,
    .vue-me-dashboard,
    .vue-templates,
    .vue-characters,
    .vue-work-experience,
    .vue-export,
    .vue-user-profile,
    .vue-ip,
    .vue-admin
) :is(h1, h2, h3, h4, strong, b, label, summary) {
    color: var(--site-night-text) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-feed,
    .vue-me-dashboard,
    .vue-templates,
    .vue-characters,
    .vue-work-experience,
    .vue-export,
    .vue-user-profile,
    .vue-ip,
    .vue-admin
) :is(p, small, span, em, li, dd) {
    color: var(--site-night-muted) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-feed-filter-chip,
    .vue-feed-actor-line,
    .vue-feed-player-main,
    .vue-me-ownership-strip span,
    .vue-me-section-nav a,
    .vue-me-pipeline-action,
    .vue-template-chip,
    .vue-template-keywords span,
    .vue-character-filter button,
    .vue-character-palette span,
    .vue-work-nav a,
    .vue-work-tags span,
    .vue-work-file-stamps span,
    .vue-work-mode-picker,
    .vue-work-principles span,
    .vue-export-pass,
    .vue-export-flow span,
    .vue-export-cover-stamps span,
    .vue-export-share-tags span,
    .vue-user-tags span,
    .vue-ip-nextline,
    .vue-ip-roadmap span,
    .vue-admin-tabs button,
    .vue-admin-filters button
) {
    color: var(--site-night-text) !important;
    border-color: var(--site-night-line) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-feed-filter-chip.is-active,
    .vue-feed-filter-chip:hover,
    .vue-template-chip.is-active,
    .vue-template-chip:hover,
    .vue-character-filter button.is-active,
    .vue-character-filter button:hover,
    .vue-work-nav a:hover,
    .vue-work-mode-picker:hover,
    .vue-admin-tabs button.is-active,
    .vue-admin-filters button.is-active
) {
    color: #0d0f14 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--site-night-cyan), var(--site-night-amber)) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-template-source-notice,
    .vue-feed-source-notice,
    .vue-me-source-notice,
    .vue-export-source-notice,
    .vue-gallery-source-notice,
    .vue-home-source-notice,
    .vue-admin-secret-rail,
    .vue-admin-env-snippets
) {
    color: var(--site-night-text) !important;
    border-color: rgba(255, 225, 125, 0.24) !important;
    background: rgba(255, 225, 125, 0.09) !important;
}

/* Local UX pass v524: final cache-busted hero image locks. */
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-color: #10131a !important;
    background-image:
            linear-gradient(90deg, rgba(13, 15, 20, 0.95), rgba(13, 15, 20, 0.76) 44%, rgba(13, 15, 20, 0.48)),
            url("/animaker/img/generated/home-hero-oc-studio.webp") !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body.animaker-theme-night[data-page="login"] section.auth-shell.vue-login-shell {
    background-color: #10131a !important;
    background-image:
            linear-gradient(90deg, rgba(13, 15, 20, 0.94), rgba(13, 15, 20, 0.74) 50%, rgba(13, 15, 20, 0.56)),
            linear-gradient(180deg, rgba(13, 15, 20, 0.04), rgba(13, 15, 20, 0.82)),
            url("/animaker/img/generated/login-oc-studio-bg-v1.webp") !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Local UX pass v525: make quick creation feel like one clear AI-first path. */
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-head,
    .vue-core-mission,
    .vue-core-quick-panel,
    .vue-core-actions-drawer,
    .vue-core-inspiration-drawer,
    .vue-core-manual,
    .vue-creator-mode-coach
) {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-dock {
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-now {
    margin: 0 !important;
    padding: clamp(18px, 3vw, 28px) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(225, 235, 245, 0.15) !important;
    background:
            linear-gradient(135deg, rgba(143, 238, 229, 0.09), rgba(255, 225, 125, 0.06)),
            rgba(18, 21, 29, 0.78) !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.2) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head strong {
    max-width: 680px !important;
    font-size: clamp(22px, 2.4vw, 34px) !important;
    line-height: 1.08 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head p {
    max-width: 640px !important;
    margin-top: 8px !important;
    color: rgba(235, 241, 250, 0.7) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head .primary-btn {
    min-width: 190px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field {
    min-height: 132px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field input {
    min-height: 50px !important;
    border-radius: 13px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field small {
    min-height: 2.4em;
}

@media (max-width: 960px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid {
        grid-template-columns: 1fr !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head .primary-btn {
        width: 100% !important;
    }
}

/* Local UX pass v530: quick mode is a tool, not a landing page. Keep one clear AI-first command path. */
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 8px clamp(14px, 2vw, 20px) 10px !important;
    margin-bottom: 10px !important;
    border-radius: 0 0 24px 24px !important;
    border-width: 0 0 1px !important;
    background:
            linear-gradient(180deg, rgba(9, 12, 19, 0.92), rgba(11, 14, 21, 0.76)),
            url("/animaker/img/generated/studio-oc-workbench-hero-v1.webp") center / cover no-repeat !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title > :is(.eyebrow, h1, p:not(.eyebrow), .studio-theme-switch, .studio-hero-beats) {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell {
    width: min(100%, 1240px) !important;
    margin: 0 auto !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 9px 10px !important;
    border-radius: 18px !important;
    background: rgba(18, 22, 32, 0.74) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-main {
    display: block !important;
    min-width: 0 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell :is(
    .vue-route-director-copy,
    .vue-route-director-step,
    .vue-route-director-progress,
    .vue-route-director-tasks,
    .vue-route-director-actions .secondary-btn,
    .vue-route-director-actions small
) {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-stage {
    display: block !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus {
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.065) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus span {
    flex: 0 0 auto !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus strong {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: clamp(16px, 1.6vw, 20px) !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus p {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .primary-btn,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-mode-chip {
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    white-space: nowrap !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
    margin-top: 8px !important;
    align-items: start !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-step-head-shell {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-now, .vue-visual-write-now) {
    padding: clamp(14px, 2.4vw, 22px) !important;
    border-radius: 20px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head, .vue-visual-write-head) {
    margin-bottom: 12px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head strong, .vue-visual-write-head strong) {
    font-size: clamp(18px, 2vw, 26px) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head p, .vue-visual-write-head p) {
    max-width: 58em !important;
    margin-top: 5px !important;
    font-size: 13px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid {
    gap: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field {
    min-height: 104px !important;
    padding: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field input {
    min-height: 42px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field small {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head .primary-btn {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
    top: 74px !important;
}

@media (min-width: 980px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-flow.designer-form {
        max-width: none !important;
    }
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title {
        padding: 8px 10px !important;
        border-radius: 0 0 18px 18px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        padding: 8px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus {
        min-width: 0 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .primary-btn {
        width: 100% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .vue-route-mode-chip {
        display: none !important;
    }
}

/* Local UX pass v532: keep the mobile flow visual without bringing back the heavy dossier stack. */
@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title {
        width: min(100%, calc(100vw - 20px)) !important;
        margin: 10px auto 8px !important;
        padding: 8px !important;
        border: 1px solid rgba(185, 245, 255, 0.12) !important;
        border-radius: 22px !important;
        background:
                linear-gradient(145deg, rgba(22, 29, 41, 0.86), rgba(12, 16, 24, 0.76)),
                url("/animaker/img/generated/studio-oc-workbench-hero-v1.webp") center / cover no-repeat !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
        border-radius: 18px !important;
        background: rgba(12, 17, 26, 0.7) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus {
        padding: 7px 9px !important;
        background: rgba(255, 255, 255, 0.07) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-focus strong {
        font-size: 18px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .primary-btn {
        min-height: 42px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-actions .vue-route-mode-chip {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: min(100%, calc(100vw - 28px)) !important;
        margin: 0 auto 36px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
        position: relative !important;
        top: auto !important;
        display: block !important;
        order: -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-flow.designer-form {
        grid-row: 2 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center !important;
        min-height: 100px !important;
        padding: 10px !important;
        border: 1px solid rgba(185, 245, 255, 0.14) !important;
        border-radius: 22px !important;
        background:
                linear-gradient(135deg, rgba(29, 38, 52, 0.9), rgba(15, 20, 29, 0.86)),
                radial-gradient(circle at 10% 10%, rgba(143, 238, 229, 0.18), transparent 34%),
                radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.14), transparent 36%) !important;
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock::before,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dossier-rail,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-palette,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-summary,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-status,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-notice {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover {
        width: 84px !important;
        height: 84px !important;
        min-height: 0 !important;
        aspect-ratio: 1 !important;
        grid-column: 1 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 18px !important;
        object-fit: cover !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
        display: block !important;
        padding: 0 !important;
        background: #131923 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
        display: block !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: transparent !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 50% 36% !important;
        border-radius: 18px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover-topline,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-blueprint,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-grid,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover-marks,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover > p,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover > span {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info {
        display: grid !important;
        grid-column: 2 !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info .eyebrow {
        color: rgba(143, 238, 229, 0.82) !important;
        font-size: 10px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
        overflow: hidden !important;
        margin: 0 !important;
        color: #f8fbff !important;
        font-size: 20px !important;
        line-height: 1.12 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
        display: -webkit-box !important;
        overflow: hidden !important;
        margin: 0 !important;
        color: rgba(226, 235, 246, 0.68) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps {
        display: flex !important;
        gap: 5px !important;
        margin-top: 4px !important;
        overflow: hidden !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps span {
        min-height: 22px !important;
        padding: 0 7px !important;
        border-radius: 999px !important;
        color: #dffbff !important;
        background: rgba(143, 238, 229, 0.12) !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness {
        grid-column: 3 !important;
        width: 58px !important;
        min-width: 58px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness-head {
        display: block !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness-head div {
        width: 58px !important;
        height: 58px !important;
        border-radius: 18px !important;
        background:
                linear-gradient(135deg, rgba(143, 238, 229, 0.2), rgba(255, 209, 102, 0.14)),
                rgba(255, 255, 255, 0.06) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness-head span {
        color: rgba(255, 255, 255, 0.56) !important;
        font-size: 9px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness-head strong {
        color: #fff !important;
        font-size: 18px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness-bar,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-director-cue,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness-grid,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-next-action,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-actions {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-now, .vue-visual-write-now) {
        padding: 14px !important;
        border-radius: 22px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head, .vue-visual-write-head) {
        gap: 5px !important;
        margin-bottom: 12px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head strong, .vue-visual-write-head strong) {
        font-size: 20px !important;
        line-height: 1.18 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head p, .vue-visual-write-head p) {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid .vue-core-field {
        min-height: 88px !important;
        border-radius: 18px !important;
    }
}

/* Local UX pass v534: full entry moment on home, then a lighter AI-first studio. */
body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
}

.vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(24px, 5vw, 68px);
    color: #fff;
    cursor: pointer;
    background:
            linear-gradient(180deg, rgba(5, 8, 14, 0.22), rgba(5, 8, 14, 0.78)),
            radial-gradient(circle at 52% 42%, rgba(30, 52, 86, 0.16), transparent 25rem),
            var(--home-gateway-image) center / cover no-repeat;
    isolation: isolate;
    animation: homeGatewayIn 0.42s ease both;
    overflow: hidden;
}

.vue-home-gateway::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
            linear-gradient(90deg, rgba(6, 8, 13, 0.72), rgba(6, 8, 13, 0.16) 40%, rgba(6, 8, 13, 0.62)),
            radial-gradient(circle at 50% 46%, rgba(119, 238, 235, 0.12), transparent 24rem);
}

.vue-home-gateway::after {
    content: "";
    position: absolute;
    inset: clamp(14px, 2vw, 28px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: clamp(24px, 3vw, 46px);
    pointer-events: none;
}

.vue-home-gateway-copy {
    width: min(980px, calc(100vw - clamp(48px, 10vw, 136px)));
    display: grid;
    justify-items: center;
    gap: 18px;
    text-align: center;
    text-shadow: 0 18px 60px rgba(0, 0, 0, 0.58);
}

.vue-home-gateway-copy span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(143, 238, 229, 0.28);
    border-radius: 999px;
    color: #dfffff;
    background: rgba(8, 14, 23, 0.36);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.vue-home-gateway-copy h1 {
    max-width: 9em;
    margin: 0;
    color: #fff;
    font-size: clamp(48px, 9vw, 118px);
    line-height: 0.92;
    letter-spacing: 0;
}

.vue-home-gateway-copy h1 b {
    display: block;
    font: inherit;
    letter-spacing: 0;
    white-space: nowrap;
}

.vue-home-gateway-copy h1 b + b {
    font-size: 0.86em;
}

.vue-home-gateway-copy p {
    width: min(620px, 100%);
    margin: 0;
    color: rgba(238, 246, 255, 0.82);
    font-size: clamp(15px, 2vw, 20px);
    font-weight: 780;
    line-height: 1.8;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
}

.vue-home-gateway-cue {
    position: absolute;
    left: 50%;
    bottom: clamp(28px, 5vh, 58px);
    display: grid;
    justify-items: center;
    gap: 12px;
    transform: translateX(-50%);
}

.vue-home-gateway-cue span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #061019;
    background: linear-gradient(135deg, #9af2ee, #ffe47a);
    font-weight: 950;
    box-shadow: 0 18px 48px rgba(143, 238, 229, 0.18);
}

.vue-home-gateway-cue i {
    width: 1px;
    height: 44px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.vue-home-gateway-cue i::after {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    border-radius: inherit;
    background: #fff;
    animation: homeGatewayCue 1.8s ease-in-out infinite;
}

@keyframes homeGatewayIn {
    from {
        opacity: 0;
        transform: scale(1.015);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes homeGatewayCue {
    0% {
        transform: translateY(-24px);
        opacity: 0;
    }
    34% {
        opacity: 1;
    }
    100% {
        transform: translateY(48px);
        opacity: 0;
    }
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero,
body[data-page="home"] section.vue-home-hero {
    min-height: min(720px, calc(100vh - 72px)) !important;
    background-color: #0b1018 !important;
    background-image:
            linear-gradient(90deg, rgba(7, 11, 18, 0.92), rgba(7, 11, 18, 0.6) 48%, rgba(7, 11, 18, 0.18)),
            url("/animaker/img/generated/home-oc-gateway-v1.png") !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body[data-page="home"] .vue-home-copy {
    padding-top: clamp(38px, 6vh, 70px) !important;
    padding-bottom: clamp(38px, 6vh, 70px) !important;
}

body[data-page="home"] .vue-home-copy h1 {
    font-size: clamp(48px, 7.2vw, 92px) !important;
}

body[data-page="home"] .vue-home-feature {
    border-radius: 26px !important;
    background: rgba(7, 11, 18, 0.64) !important;
}

body[data-page="home"] .vue-home-flow {
    width: min(760px, 100%) !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
}

body[data-page="home"] .vue-home-flow-head {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
}

body[data-page="home"] .vue-home-flow-head strong {
    font-size: 16px !important;
}

body[data-page="home"] .vue-home-flow li {
    min-height: 48px !important;
    padding: 8px !important;
    border-radius: 14px !important;
}

body[data-page="home"] .vue-home-flow li small,
body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

body[data-page="home"] :is(.vue-home-metrics a, .vue-home-next, .vue-home-creation-card, .vue-home-starter-card, .vue-home-work-card, .vue-home-ip-card, .vue-home-feed-card, .vue-home-empty-band, .vue-home-list a, .vue-home-creator-list a, .vue-home-template-list a, .vue-home-post-list article) {
    border-radius: 20px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
            rgba(18, 22, 32, 0.82) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-rail {
    display: none !important;
}

@media (min-width: 761px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
        top: 72px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dossier-rail,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover-topline,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-blueprint,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-grid,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover > p,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover > span,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-palette,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-summary,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-status,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-notice,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-actions {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover {
        min-height: 0 !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
        width: 100% !important;
        height: clamp(230px, 28vw, 300px) !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: 22px !important;
        object-fit: cover !important;
        object-position: 50% 34% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
        display: block !important;
        background: #10151e !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
        display: block !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 22px !important;
        background: transparent !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 50% 34% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info {
        gap: 7px !important;
        padding: 2px 2px 0 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
        margin: 0 !important;
        color: #f8fbff !important;
        font-size: 26px !important;
        line-height: 1.1 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
        display: -webkit-box !important;
        overflow: hidden !important;
        color: rgba(226, 235, 246, 0.68) !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags {
        display: flex !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps span,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags span {
        min-height: 24px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        color: #dffbff !important;
        background: rgba(143, 238, 229, 0.12) !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 760px) {
    .vue-home-gateway {
        padding: 22px;
        background-position: center !important;
    }

    .vue-home-gateway::after {
        inset: 10px;
        border-radius: 28px;
    }

    .vue-home-gateway-copy {
        width: min(100%, calc(100vw - 44px));
        transform: translateY(-4vh);
    }

    .vue-home-gateway-copy h1 {
        max-width: 100%;
        font-size: clamp(42px, 14vw, 66px);
    }

    .vue-home-gateway-copy h1 b:first-child {
        font-size: 0.78em;
    }

    .vue-home-gateway-copy h1 b + b {
        font-size: 0.86em;
    }

    .vue-home-gateway-copy p {
        width: min(246px, 100%);
        max-width: calc(100vw - 64px);
        font-size: 13px;
        line-height: 1.65;
    }

    body.animaker-theme-night[data-page="home"] section.vue-home-hero,
    body[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: 1fr !important;
        padding-bottom: 24px !important;
    }

    body[data-page="home"] .vue-home-copy {
        padding: 54px 22px 24px !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(42px, 14vw, 64px) !important;
    }

    body[data-page="home"] .vue-home-copy p:not(.eyebrow) {
        max-width: 30em !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    body[data-page="home"] .vue-home-actions {
        gap: 8px !important;
    }

    body[data-page="home"] .vue-home-actions .primary-link,
    body[data-page="home"] .vue-home-actions .secondary-btn {
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: calc(100% - 32px) !important;
        margin: 0 auto !important;
        grid-template-columns: 108px minmax(0, 1fr) !important;
        border-radius: 22px !important;
    }

    body[data-page="home"] .vue-home-feature img {
        height: 140px !important;
    }

    body[data-page="home"] .vue-home-feature-body p,
    body[data-page="home"] .vue-home-dossier-tags,
    body[data-page="home"] .vue-home-flow,
    body[data-page="home"] .vue-home-hero-routes {
        display: none !important;
    }
}

/* Local UX pass v538: OC sites use profile-first browsing; keep advanced community tools folded. */
body.animaker-theme-night:is(
    [data-page="gallery"],
    [data-page="templates"],
    [data-page="characters"],
    [data-page="feed"],
    [data-page="me"],
    [data-page="work"],
    [data-page="user"],
    [data-page="export"]
) {
    color: #edf5ff;
    background:
            radial-gradient(circle at 50% -12%, rgba(142, 238, 230, 0.08), transparent 34rem),
            linear-gradient(180deg, #080c13 0%, #0b0f18 48%, #080b11 100%) !important;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) .page-shell {
    background: transparent !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery,
    .vue-templates,
    .vue-characters
) {
    display: grid;
    gap: 18px;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-hero,
    .vue-templates-hero,
    .vue-characters-hero
) {
    min-height: 0 !important;
    padding: clamp(16px, 2.6vw, 28px) !important;
    border-radius: 28px !important;
    background:
            linear-gradient(120deg, rgba(17, 22, 34, 0.9), rgba(16, 19, 30, 0.68)),
            radial-gradient(circle at 88% 20%, rgba(142, 238, 230, 0.12), transparent 22rem) !important;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-copy,
    .vue-templates-copy,
    .vue-characters-copy
) {
    gap: 12px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-copy h1,
    .vue-templates-copy h1,
    .vue-characters-copy h1
) {
    max-width: 8.5em !important;
    font-size: clamp(38px, 5.8vw, 78px) !important;
    line-height: 0.95 !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-copy > p:not(.eyebrow),
    .vue-templates-copy > p:not(.eyebrow),
    .vue-characters-copy > p:not(.eyebrow)
) {
    max-width: 42em !important;
    color: rgba(232, 242, 255, 0.7) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-actions,
    .vue-templates-actions,
    .vue-characters-actions,
    .vue-command-actions
) {
    gap: 8px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-actions .primary-link,
    .vue-gallery-actions .secondary-btn,
    .vue-templates-actions .primary-link,
    .vue-templates-actions .secondary-btn,
    .vue-characters-actions .primary-link,
    .vue-characters-actions .secondary-btn,
    .vue-command-actions .primary-link,
    .vue-command-actions .secondary-btn
) {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 14px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-feature,
    .vue-template-feature,
    .vue-character-feature
) {
    overflow: hidden !important;
    border-radius: 24px !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
            rgba(13, 18, 28, 0.78) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-feature img,
    .vue-template-feature img,
    .vue-character-feature img
) {
    min-height: 0 !important;
    height: clamp(230px, 30vw, 360px) !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-source-notice,
    .vue-template-source-notice,
    .vue-archive-source-notice
) {
    gap: 8px !important;
    padding: 9px 12px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-source-notice p,
    .vue-template-source-notice p,
    .vue-archive-source-notice p
) {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="gallery"] .vue-gallery-more,
body[data-page="templates"] .vue-template-more,
body[data-page="characters"] .vue-character-more {
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 22px !important;
    background: rgba(14, 19, 30, 0.72) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden !important;
}

body[data-page="gallery"] .vue-gallery-more > summary,
body[data-page="templates"] .vue-template-more > summary,
body[data-page="characters"] .vue-character-more > summary {
    min-height: 60px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    list-style: none !important;
}

body[data-page="gallery"] .vue-gallery-more > summary::-webkit-details-marker,
body[data-page="templates"] .vue-template-more > summary::-webkit-details-marker,
body[data-page="characters"] .vue-character-more > summary::-webkit-details-marker {
    display: none !important;
}

body[data-page="gallery"] .vue-gallery-more > summary h2,
body[data-page="templates"] .vue-template-more > summary h2,
body[data-page="characters"] .vue-character-more > summary h2 {
    margin: 0 !important;
    color: #f7fbff !important;
    font-size: clamp(18px, 2vw, 26px) !important;
}

body[data-page="gallery"] .vue-gallery-more > summary p:not(.eyebrow),
body[data-page="templates"] .vue-template-more > summary p:not(.eyebrow),
body[data-page="characters"] .vue-character-more > summary p:not(.eyebrow) {
    display: none !important;
}

body[data-page="gallery"] .vue-gallery-more > summary > strong,
body[data-page="templates"] .vue-template-more > summary > strong,
body[data-page="characters"] .vue-character-more > summary > strong {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #081017 !important;
    background: linear-gradient(100deg, #9af2ee, #ffe47a) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

body[data-page="gallery"] .vue-gallery-more[open],
body[data-page="templates"] .vue-template-more[open],
body[data-page="characters"] .vue-character-more[open] {
    padding-bottom: 16px !important;
}

body[data-page="gallery"] .vue-gallery-more[open] > :not(summary),
body[data-page="templates"] .vue-template-more[open] > :not(summary),
body[data-page="characters"] .vue-character-more[open] > :not(summary) {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

body[data-page="gallery"] :is(
    .vue-gallery-pulse,
    .vue-gallery-mission,
    .vue-gallery-creator-radar,
    .vue-gallery-cocreate,
    .vue-gallery-ip-grid,
    .vue-gallery-feed
) {
    margin-top: 14px !important;
}

body[data-page="gallery"] .vue-gallery-workspace {
    margin-top: 0 !important;
    padding: clamp(12px, 2.4vw, 20px) !important;
    border-radius: 24px !important;
    background: rgba(12, 17, 27, 0.72) !important;
}

body[data-page="gallery"] .vue-gallery-discovery {
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="gallery"] .vue-gallery-discovery-head {
    align-items: center !important;
}

body[data-page="gallery"] .vue-gallery-discovery-head h2 {
    font-size: clamp(22px, 2.6vw, 34px) !important;
}

body[data-page="gallery"] .vue-gallery-discovery-head p {
    display: none !important;
}

body[data-page="gallery"] .vue-gallery-chip-row {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
}

body[data-page="gallery"] .vue-gallery-chip-row span {
    flex: 0 0 auto !important;
}

body[data-page="gallery"] .vue-filter-chip {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

body[data-page="gallery"] .vue-gallery-chip-row.is-category .vue-filter-chip {
    display: grid !important;
    gap: 2px !important;
    min-width: 112px !important;
    min-height: 52px !important;
    padding: 8px 14px !important;
    border-radius: 18px !important;
    text-align: left !important;
}

body[data-page="gallery"] .vue-gallery-chip-row.is-category .vue-filter-chip strong,
body[data-page="gallery"] .vue-gallery-chip-row.is-category .vue-filter-chip small {
    display: block !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

body[data-page="gallery"] .vue-gallery-chip-row.is-category .vue-filter-chip small {
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

body[data-page="gallery"] .vue-gallery-chip-row.is-category .vue-filter-chip.is-active small {
    color: rgba(11, 85, 97, 0.78) !important;
}

body[data-page="gallery"] .vue-gallery-sort-row {
    display: none !important;
}

body[data-page="gallery"] .vue-sort-chip {
    min-width: 132px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
}

body[data-page="gallery"] .vue-sort-chip small {
    display: none !important;
}

body[data-page="gallery"] .vue-gallery-filter {
    display: none !important;
}

body[data-page="gallery"] .vue-gallery-work-grid {
    gap: 14px !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .work-card {
    overflow: hidden !important;
    border-radius: 22px !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
            rgba(13, 18, 28, 0.84) !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .work-card > a:first-child {
    display: block !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .work-card > a:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .card-body {
    gap: 8px !important;
    padding: 12px !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .card-body p {
    display: -webkit-box !important;
    overflow: hidden !important;
    min-height: 0 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .creator-line {
    min-height: 28px !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .creator-line img {
    width: 28px !important;
    height: 28px !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .social-row {
    gap: 6px !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(
    .vue-creation-command,
    .vue-template-command,
    .vue-character-command
) {
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(12, 17, 27, 0.72) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 12px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
    width: 76px !important;
    height: 96px !important;
    border-radius: 18px !important;
    object-fit: cover !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor h2 {
    font-size: clamp(22px, 3vw, 34px) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor p:not(.eyebrow) {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
    min-height: 58px !important;
    padding: 9px !important;
    border-radius: 16px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary {
    margin-top: 0 !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary-copy p:not(.eyebrow),
body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary-card p {
    display: none !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary-grid {
    gap: 8px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary-card {
    min-height: 74px !important;
    padding: 10px !important;
    border-radius: 16px !important;
}

body[data-page="templates"] .vue-template-boundary,
body[data-page="characters"] .vue-character-boundary {
    display: none !important;
}

body[data-page="templates"] .vue-template-grid,
body[data-page="characters"] .vue-character-grid {
    gap: 14px !important;
}

body[data-page="templates"] .vue-template-card,
body[data-page="characters"] .vue-character-card {
    overflow: hidden !important;
    border-radius: 22px !important;
}

body[data-page="templates"] .vue-template-card > img,
body[data-page="characters"] .vue-character-card .oc-archive-cover img {
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

@media (max-width: 760px) {
    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
        .vue-gallery-hero,
        .vue-templates-hero,
        .vue-characters-hero
    ) {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
        .vue-gallery-copy h1,
        .vue-templates-copy h1,
        .vue-characters-copy h1
    ) {
        font-size: clamp(36px, 13vw, 56px) !important;
    }

    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
        .vue-gallery-feature img,
        .vue-template-feature img,
        .vue-character-feature img
    ) {
        height: 220px !important;
    }

    body[data-page="gallery"] .vue-gallery-more > summary,
    body[data-page="templates"] .vue-template-more > summary,
    body[data-page="characters"] .vue-character-more > summary {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    body[data-page="gallery"] .vue-gallery-filter {
        grid-template-columns: 1fr !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
        grid-template-columns: 1fr !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-library-boundary {
        display: none !important;
    }
}

/* Local UX pass v542: mobile keeps one navigation row and exposes OC cards sooner. */
@media (max-width: 760px) {
    body.animaker-theme-night:not([data-page="studio"]) .topbar,
    body:not([data-page="studio"]) .topbar {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 58px !important;
        height: 58px !important;
        padding: 8px 12px !important;
        overflow: hidden !important;
    }

    body:not([data-page="studio"]) .brand {
        flex: 0 0 auto !important;
        max-width: 138px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        font-size: 16px !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    body:not([data-page="studio"]) .shared-nav-root {
        order: 0 !important;
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body:not([data-page="studio"]) .shared-nav {
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    body:not([data-page="studio"]) .shared-nav-links {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 !important;
        scrollbar-width: none !important;
    }

    body:not([data-page="studio"]) .shared-nav-links::-webkit-scrollbar {
        display: none !important;
    }

    body:not([data-page="studio"]) .shared-nav-links a {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    body:not([data-page="studio"]) .shared-nav-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body:not([data-page="studio"]) .shared-nav-actions :is(.theme-toggle-button, .primary-link, .shared-nav-status) {
        display: none !important;
    }

    body[data-page="gallery"] .vue-gallery-hero {
        gap: 12px !important;
    }

    body[data-page="gallery"] .vue-gallery-copy {
        gap: 10px !important;
    }

    body[data-page="gallery"] .vue-gallery-copy h1 {
        max-width: 7em !important;
        font-size: clamp(38px, 12vw, 48px) !important;
    }

    body[data-page="gallery"] .vue-gallery-copy > p:not(.eyebrow) {
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body[data-page="gallery"] .vue-gallery-source-notice.is-hero,
    body[data-page="gallery"] .vue-gallery-more {
        display: none !important;
    }

    body[data-page="gallery"] .vue-gallery-feature {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) !important;
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    body[data-page="gallery"] .vue-gallery-feature img {
        width: 112px !important;
        height: 126px !important;
        min-height: 0 !important;
    }

    body[data-page="gallery"] .vue-gallery-feature > div {
        min-width: 0 !important;
        padding: 10px !important;
    }

    body[data-page="gallery"] .vue-gallery-feature strong {
        display: -webkit-box !important;
        overflow: hidden !important;
        font-size: 18px !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body[data-page="gallery"] .vue-gallery-workspace {
        border-radius: 18px !important;
    }

    body[data-page="gallery"] .vue-gallery-discovery {
        gap: 7px !important;
    }

    body[data-page="gallery"] .vue-gallery-discovery-head h2 {
        font-size: 24px !important;
    }
}

/* Local UX pass v543: remaining pages follow the same lightweight OC profile rhythm. */
body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-feed-hero,
    .vue-me-hero,
    .vue-work-dock,
    .vue-export-hero,
    .vue-feed-command,
    .vue-feed-list article,
    .vue-me-next,
    .vue-me-stats article,
    .vue-me-inventory-panel,
    .vue-work-side,
    .vue-export-summary,
    .vue-export-cover
) {
    border-radius: 24px !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)),
            rgba(13, 18, 28, 0.78) !important;
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.18) !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .vue-feed-hero,
    .vue-me-hero,
    .vue-work-dock,
    .vue-export-hero
) {
    min-height: 0 !important;
    padding: clamp(16px, 2.8vw, 30px) !important;
}

body[data-page="feed"] :is(.vue-feed-copy h1, .vue-feed-command-head h2),
body[data-page="me"] :is(.vue-me-hero-copy h1, .vue-me-next h2),
body[data-page="work"] :is(.vue-work-main h1, .vue-work-side h2),
body[data-page="export"] :is(.vue-export-summary h1, .vue-export-preview-head h2) {
    font-size: clamp(28px, 4.8vw, 58px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

body[data-page="feed"] :is(.vue-feed-copy > p:not(.eyebrow), .vue-feed-response-copy p, .vue-feed-loop-head p),
body[data-page="me"] :is(.vue-me-hero-copy > p:not(.eyebrow), .vue-me-next p, .vue-me-triage-copy p),
body[data-page="work"] :is(.vue-work-main > p, .vue-work-next, .vue-work-readiness-copy p, .vue-work-launchpad-copy p),
body[data-page="export"] :is(.vue-export-summary > p, .vue-export-achievement-copy p, .vue-export-readiness-copy p) {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="feed"] :is(.vue-feed-stats, .vue-feed-response, .vue-feed-loop) {
    display: none !important;
}

body[data-page="feed"] .vue-feed-command {
    padding: clamp(14px, 2.2vw, 22px) !important;
}

body[data-page="feed"] .vue-feed-command-head {
    align-items: center !important;
}

body[data-page="feed"] .vue-feed-filter-row {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
}

body[data-page="feed"] .vue-feed-filter-row::-webkit-scrollbar {
    display: none !important;
}

body[data-page="feed"] .vue-feed-filter-chip {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
}

body[data-page="feed"] .vue-feed-priority-grid,
body[data-page="feed"] .vue-feed-following-strip {
    display: none !important;
}

body[data-page="feed"] .vue-feed-list {
    gap: 12px !important;
}

body[data-page="feed"] .vue-feed-list article {
    padding: 12px !important;
}

body[data-page="feed"] .vue-feed-list img {
    border-radius: 18px !important;
    object-fit: cover !important;
}

body[data-page="me"] :is(.vue-me-ownership, .vue-me-triage, .vue-me-workflow, .vue-me-section-nav) {
    display: none !important;
}

body[data-page="me"] .vue-me-hero {
    grid-template-columns: 112px minmax(0, 1fr) minmax(240px, 0.7fr) !important;
    gap: 16px !important;
}

body[data-page="me"] .vue-me-avatar {
    width: 112px !important;
    height: 138px !important;
    border-radius: 22px !important;
    object-fit: cover !important;
}

body[data-page="me"] .vue-me-source-notice {
    padding: 8px 10px !important;
    border-radius: 14px !important;
}

body[data-page="me"] .vue-me-source-notice p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="me"] .vue-me-stats {
    gap: 10px !important;
}

body[data-page="me"] .vue-me-more-section > summary {
    min-height: 58px !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

body[data-page="me"] .vue-me-more-section > summary p {
    display: none !important;
}

body[data-page="work"] .vue-work-dock {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1fr) minmax(220px, 0.62fr) !important;
    gap: 16px !important;
}

body[data-page="work"] .vue-work-cover img {
    max-height: 470px !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

body[data-page="work"] :is(.vue-work-readiness, .vue-work-launchpad, .vue-work-cocreate) {
    margin-top: 16px !important;
    border-radius: 22px !important;
}

body[data-page="work"] :is(.vue-work-readiness-grid, .vue-work-launchpad-checklist, .vue-work-brief) {
    display: none !important;
}

body[data-page="export"] .vue-export-hero {
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr) !important;
    gap: 16px !important;
}

body[data-page="export"] .vue-export-cover img {
    max-height: 520px !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

body[data-page="export"] :is(.vue-export-achievement, .vue-export-readiness, .vue-export-launch, .vue-export-sheet, .vue-export-copy-grid) {
    margin-top: 16px !important;
    border-radius: 22px !important;
}

body[data-page="export"] :is(.vue-export-achievement-grid, .vue-export-readiness-grid, .vue-export-launch-brief) {
    display: none !important;
}

@media (max-width: 760px) {
    body[data-page="feed"] .vue-feed-hero,
    body[data-page="me"] .vue-me-hero,
    body[data-page="work"] .vue-work-dock,
    body[data-page="export"] .vue-export-hero {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
        border-radius: 20px !important;
    }

    body[data-page="feed"] .vue-feed-source-notice.is-hero,
    body[data-page="me"] .vue-me-source-notice,
    body[data-page="work"] .vue-work-file-rail,
    body[data-page="export"] .vue-export-package-rail,
    body[data-page="export"] .vue-export-flow {
        display: none !important;
    }

    body[data-page="me"] .vue-me-hero {
        grid-template-columns: 82px minmax(0, 1fr) !important;
    }

    body[data-page="me"] .vue-me-next {
        grid-column: 1 / -1 !important;
    }

    body[data-page="me"] .vue-me-avatar {
        width: 82px !important;
        height: 102px !important;
        border-radius: 18px !important;
    }

    body[data-page="me"] .vue-me-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-page="work"] .vue-work-cover img,
    body[data-page="export"] .vue-export-cover img {
        max-height: 360px !important;
    }
}

/* Local UX pass v544: templates and archives show playable OC cards before deep guidance. */
body[data-page="templates"] .vue-template-more:not([open]) > :not(summary),
body[data-page="characters"] .vue-character-more:not([open]) > :not(summary) {
    display: none !important;
}

@media (max-width: 760px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
        gap: 12px !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 16px !important;
        border-radius: 20px !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy, .vue-characters-copy) {
        gap: 9px !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
        max-width: 8em !important;
        font-size: clamp(31px, 10vw, 42px) !important;
        line-height: 1.02 !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy > p:not(.eyebrow), .vue-characters-copy > p:not(.eyebrow)) {
        display: -webkit-box !important;
        overflow: hidden !important;
        max-width: none !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip::-webkit-scrollbar {
        display: none !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-ownership-strip span {
        flex: 0 0 auto !important;
        min-height: 28px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(
        .vue-template-command,
        .vue-character-command,
        .vue-template-feature,
        .vue-character-feature,
        .vue-template-source-notice.is-hero,
        .vue-archive-source-notice.is-hero
    ) {
        display: none !important;
    }

    body[data-page="templates"] .vue-template-workspace {
        gap: 12px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-page="templates"] :is(.vue-template-match, .vue-template-social, .vue-template-guide, .vue-template-filter),
    body[data-page="characters"] :is(
        .vue-character-pathfinder,
        .vue-character-queue,
        .vue-character-completion,
        .vue-character-dimensions,
        .vue-character-worlds,
        .vue-character-workspace
    ) {
        display: none !important;
    }

    body[data-page="templates"] .vue-template-more,
    body[data-page="characters"] .vue-character-more {
        border-radius: 18px !important;
    }

    body[data-page="templates"] .vue-template-more > summary,
    body[data-page="characters"] .vue-character-more > summary {
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 52px !important;
        padding: 9px 12px !important;
        border-radius: 18px !important;
    }

    body[data-page="templates"] .vue-template-more > summary .eyebrow,
    body[data-page="characters"] .vue-character-more > summary .eyebrow,
    body[data-page="templates"] .vue-template-more > summary p:not(.eyebrow),
    body[data-page="characters"] .vue-character-more > summary p:not(.eyebrow) {
        display: none !important;
    }

    body[data-page="templates"] .vue-template-more > summary h2,
    body[data-page="characters"] .vue-character-more > summary h2 {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    body[data-page="templates"] .vue-template-more > summary > strong,
    body[data-page="characters"] .vue-character-more > summary > strong {
        min-height: 30px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    body[data-page="templates"] .vue-template-grid,
    body[data-page="characters"] .vue-character-grid {
        gap: 12px !important;
        margin-top: 0 !important;
    }

    body[data-page="templates"] .vue-template-card,
    body[data-page="characters"] .vue-character-card {
        border-radius: 20px !important;
    }

    body[data-page="templates"] .vue-template-card > img,
    body[data-page="characters"] .vue-character-card .oc-archive-cover img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        object-fit: cover !important;
        object-position: 50% 34% !important;
    }

    body[data-page="templates"] .vue-template-card .card-body,
    body[data-page="characters"] .vue-character-card .card-body {
        gap: 8px !important;
        padding: 12px !important;
    }

    body[data-page="templates"] .vue-template-card .card-body p,
    body[data-page="characters"] .vue-character-card .card-body > p,
    body[data-page="characters"] .vue-character-card blockquote {
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    body[data-page="templates"] .vue-template-card {
        display: grid !important;
        grid-template-columns: 116px minmax(0, 1fr) !important;
        align-items: stretch !important;
        min-height: 176px !important;
    }

    body[data-page="templates"] .vue-template-card > img {
        height: 100% !important;
        min-height: 176px !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
    }

    body[data-page="templates"] .vue-template-card .social-row {
        gap: 6px !important;
    }

    body[data-page="templates"] .vue-template-card .social-row span:nth-child(2) {
        display: none !important;
    }

    body[data-page="templates"] .vue-template-card .secondary-btn {
        min-height: 32px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
    }

    body[data-page="characters"] .vue-character-card {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) !important;
        align-items: stretch !important;
        min-height: 196px !important;
    }

    body[data-page="characters"] .vue-character-card .oc-archive-index {
        position: absolute !important;
        z-index: 2 !important;
        top: 8px !important;
        left: 8px !important;
        width: auto !important;
        height: auto !important;
        padding: 5px 7px !important;
        border-radius: 999px !important;
        background: rgba(8, 14, 24, 0.72) !important;
        backdrop-filter: blur(10px) !important;
    }

    body[data-page="characters"] .vue-character-card .oc-archive-index span {
        display: none !important;
    }

    body[data-page="characters"] .vue-character-card .oc-archive-index strong {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    body[data-page="characters"] .vue-character-card .oc-archive-cover {
        display: block !important;
        min-height: 196px !important;
        overflow: hidden !important;
    }

    body[data-page="characters"] .vue-character-card .oc-archive-cover img {
        width: 100% !important;
        height: 100% !important;
        min-height: 196px !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
    }

    body[data-page="characters"] .vue-character-card .oc-archive-meta,
    body[data-page="characters"] .vue-character-card .vue-character-palette,
    body[data-page="characters"] .vue-character-card .vue-character-card-progress,
    body[data-page="characters"] .vue-character-card blockquote {
        display: none !important;
    }

    body[data-page="characters"] .vue-character-card .card-foot {
        gap: 6px !important;
    }

    body[data-page="characters"] .vue-character-card .card-foot .secondary-btn {
        min-height: 32px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
    }

    body[data-page="characters"] .vue-character-card .card-foot .secondary-btn:nth-child(n+3) {
        display: none !important;
    }
}

/* Production UX final guard 20260706: keep the AI-first studio light after legacy overrides. */
body.animaker-theme-night,
body[data-page="studio"].studio-theme-night {
    --ink: #fbf8ff;
    --text: #ebe5f4;
    --muted: #bdb4c9;
    --line: rgba(246, 240, 255, 0.13);
    --paper: #11131b;
    --panel: rgba(24, 25, 35, 0.82);
    background: linear-gradient(180deg, #10131c 0%, #161723 46%, #10121a 100%) !important;
}

body.animaker-theme-night .topbar,
body[data-page="studio"].studio-theme-night .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.09) !important;
    background: rgba(15, 18, 27, 0.76) !important;
    box-shadow: none !important;
}

body.animaker-theme-night:not([data-page="studio"]) :is(
    .page-title,
    [class*="-card"],
    [class*="-panel"],
    [class*="-dock"],
    [class*="-preview"],
    [class*="-empty"],
    [class*="-item"]
),
body[data-page="studio"].studio-theme-night :is(
    .studio-panel,
    .studio-mode-hub,
    .studio-path-banner article,
    .vue-route-director,
    .vue-route-next,
    .vue-route-focus-card,
    .vue-route-progress,
    .vue-assist-card,
    .vue-core-dock,
    .vue-visual-dock,
    .vue-story-dock,
    .vue-image-dock,
    .vue-publish-dock,
    .vue-board-dock
) {
    border-color: rgba(255, 255, 255, 0.115) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
            rgba(18, 20, 30, 0.82) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2) !important;
}

body[data-page="studio"].studio-theme-night .studio-hero-title.page-title {
    min-height: 220px !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 26px !important;
    background:
            linear-gradient(90deg, rgba(10, 13, 21, 0.9), rgba(10, 13, 21, 0.58) 52%, rgba(10, 13, 21, 0.2)),
            url("/animaker/img/generated/ux/studio-ai-oc-board-v900.webp") center / cover no-repeat !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title > :is(.eyebrow, h1, p:not(.eyebrow), .studio-theme-switch, .studio-hero-beats) {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell {
    margin-bottom: 12px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
    min-height: 0 !important;
    padding: clamp(14px, 2vw, 20px) !important;
    border-radius: 24px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-main {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.58fr) !important;
    gap: 14px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-copy h2 {
    margin: 0 !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    line-height: 1.04 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-copy p,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-focus p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-progress,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-tasks,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-next,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-focus-card,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-progress,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-assist-mainline,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-assist-missing,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-assist-prompt,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-core-mission,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-core-quick-panel,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-creator-mode-coach,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-visual-route-card {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    gap: 16px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-flow.designer-form {
    gap: 12px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active {
    padding: clamp(14px, 2vw, 20px) !important;
    border-radius: 24px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-step-head-shell {
    margin-bottom: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-now, .vue-visual-write-now) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    border-radius: 22px !important;
    background:
            linear-gradient(145deg, rgba(143, 238, 229, 0.1), rgba(255, 255, 255, 0.04)),
            rgba(9, 13, 21, 0.58) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-grid, .vue-visual-write-grid) {
    gap: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-field, .vue-visual-field) {
    min-height: 78px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    padding: 12px !important;
    border-radius: 26px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover {
    border-radius: 22px !important;
    background: #0f131d !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 50% 42% !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
    font-size: clamp(22px, 2.6vw, 28px) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
    color: rgba(235, 245, 255, 0.72) !important;
}

body[data-page="home"] .vue-home-brief {
    border-radius: 24px !important;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.04)),
            rgba(6, 10, 17, 0.62) !important;
}

body[data-page="home"] .vue-home-brief textarea,
body[data-page="studio"] .vue-core-ai-brief textarea {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

@media (max-width: 860px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-main,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
        order: -1 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover {
        width: 94px !important;
        height: 94px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        grid-template-columns: 94px minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness {
        display: none !important;
    }
}
/* Production UX pass v545: EOF homepage full-bleed guard. */
body[data-page="home"] main,
body.animaker-theme-night[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home-root,
body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body[data-page="home"] .vue-home {
    overflow-x: clip !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: clamp(640px, calc(100vh - 88px), 900px) !important;
    min-height: clamp(640px, calc(100svh - 88px), 900px) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: 0 clamp(28px, 5.4vw, 96px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.72fr) !important;
    align-items: stretch !important;
    gap: clamp(28px, 4.5vw, 76px) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background-color: #090d14 !important;
    background-image:
            linear-gradient(90deg, rgba(6, 10, 17, 0.93), rgba(6, 10, 17, 0.62) 48%, rgba(6, 10, 17, 0.18)),
            url("/animaker/img/generated/home-oc-gateway-v1.png") !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body[data-page="home"] .vue-home-copy {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 0 !important;
    padding: clamp(58px, 8vh, 96px) 0 clamp(48px, 7vh, 84px) !important;
    align-content: center !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: min(100%, 10.5em) !important;
    font-size: clamp(58px, 6.8vw, 112px) !important;
    line-height: 0.9 !important;
}

body[data-page="home"] .vue-home-feature {
    align-self: end !important;
    justify-self: end !important;
    width: min(560px, 100%) !important;
    min-height: clamp(360px, 42vh, 470px) !important;
    margin: 0 0 clamp(38px, 7vh, 74px) !important;
    border-radius: 28px !important;
}

@media (min-width: 1600px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        padding-left: clamp(96px, 9vw, 176px) !important;
        padding-right: clamp(96px, 9vw, 176px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(460px, 0.58fr) !important;
    }
}

@media (max-width: 1160px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: clamp(34px, 6vw, 58px) clamp(22px, 5vw, 52px) clamp(38px, 7vw, 62px) !important;
    }

    body[data-page="home"] .vue-home-copy {
        max-width: 780px !important;
        padding: clamp(36px, 6vw, 58px) 0 20px !important;
    }

    body[data-page="home"] .vue-home-feature {
        justify-self: start !important;
        width: min(560px, 100%) !important;
        min-height: 340px !important;
        margin: 8px 0 0 !important;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: 100vw !important;
        margin: 0 calc(50% - 50vw) !important;
        padding: 30px 18px 26px !important;
        background-position: center top !important;
    }

    body[data-page="home"] .vue-home-copy {
        width: 100% !important;
        max-width: none !important;
        padding: 22px 0 14px !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        max-width: 100% !important;
        font-size: clamp(42px, 14vw, 68px) !important;
        line-height: 0.94 !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        min-height: 320px !important;
        margin: 6px 0 0 !important;
        border-radius: 24px !important;
    }
}

/* Production UX pass v546: mobile home is a short creation entry, not a stacked poster wall. */
@media (max-width: 760px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding-top: 22px !important;
        padding-bottom: 34px !important;
    }

    body[data-page="home"] .vue-home-copy {
        gap: 14px !important;
        padding-top: 18px !important;
    }

    body[data-page="home"] .vue-home-copy .eyebrow {
        margin-bottom: 2px !important;
        font-size: 13px !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(40px, 13vw, 58px) !important;
    }

    body[data-page="home"] .vue-home-copy p:not(.eyebrow) {
        display: -webkit-box !important;
        overflow: hidden !important;
        max-width: 24em !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    body[data-page="home"] .vue-home-brief {
        margin-top: 10px !important;
        padding: 10px !important;
        border-radius: 22px !important;
    }

    body[data-page="home"] .vue-home-brief textarea {
        min-height: 64px !important;
    }

    body[data-page="home"] .vue-home-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    body[data-page="home"] .vue-home-source-notice.is-hero,
    body[data-page="home"] .vue-home-flow,
    body[data-page="home"] .vue-home-feature {
        display: none !important;
    }
}
/* Production UX pass v547: lightweight AI-first studio flow. */
body[data-page="studio"].studio-mode-quick.studio-wizard-ready main {
    width: min(1440px, calc(100% - 28px)) !important;
    max-width: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-mode-hub,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-path-banner {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-hero-title.page-title,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell {
    margin: 10px 0 14px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
    min-height: 0 !important;
    padding: clamp(16px, 2vw, 24px) !important;
    border-radius: 28px !important;
    background:
            linear-gradient(115deg, rgba(8, 13, 22, 0.94), rgba(13, 18, 29, 0.76) 54%, rgba(29, 38, 54, 0.58)),
            url("/animaker/img/generated/studio-oc-workbench-hero-v1.webp") right center / cover no-repeat !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-copy span {
    color: #94f2ec !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-copy h2 {
    max-width: 13em !important;
    font-size: clamp(30px, 4.6vw, 56px) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-stage {
    align-self: stretch !important;
    min-height: 128px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-actions small {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
    align-items: start !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active {
    border-radius: 28px !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.036)),
            rgba(16, 19, 28, 0.88) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: end !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head strong {
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.08 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head p {
    display: -webkit-box !important;
    overflow: hidden !important;
    max-width: 54em !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    margin-top: 14px !important;
    border-radius: 26px !important;
    background:
            linear-gradient(145deg, rgba(143, 238, 229, 0.13), rgba(255, 225, 125, 0.07)),
            rgba(7, 11, 18, 0.7) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea {
    min-height: 92px !important;
    border-radius: 20px !important;
    font-size: 16px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid {
    margin-top: 12px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-field small {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    position: sticky !important;
    top: 84px !important;
    border-radius: 30px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    min-height: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-fit: cover !important;
    object-position: 50% 45% !important;
    filter: saturate(1.08) contrast(1.04) brightness(0.96) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-blueprint,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-grid,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover-marks,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover > p {
    display: none !important;
}

@media (max-width: 980px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
        order: -1 !important;
    }
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready main {
        width: min(100% - 16px, 1440px) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
        padding: 14px !important;
        border-radius: 22px !important;
        background-position: center !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-stage {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-director-actions .secondary-btn {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head .primary-btn {
        width: 100% !important;
    }
}

/* Production UX pass v548: balanced day/night visual system and full-viewport entry. */
:root {
    --animaker-day-ink: #161923;
    --animaker-day-text: #27313f;
    --animaker-day-muted: #687384;
    --animaker-day-line: rgba(33, 45, 62, 0.12);
    --animaker-day-paper: #fbfcfb;
    --animaker-day-panel: rgba(255, 255, 255, 0.82);
    --animaker-day-cyan: #32c6c8;
    --animaker-day-mint: #dff8f1;
    --animaker-day-amber: #ffd76a;
    --animaker-day-pink: #f58aa6;
    --animaker-night-ink: #fbf8ff;
    --animaker-night-text: #e8edf5;
    --animaker-night-muted: #aeb8c8;
    --animaker-night-line: rgba(244, 249, 255, 0.13);
    --animaker-night-panel: rgba(17, 20, 30, 0.86);
    --animaker-night-cyan: #89eee7;
    --animaker-night-amber: #ffe176;
}

body.animaker-theme-day,
body[data-page="studio"].studio-theme-day {
    --ink: var(--animaker-day-ink);
    --text: var(--animaker-day-text);
    --muted: var(--animaker-day-muted);
    --line: var(--animaker-day-line);
    --paper: var(--animaker-day-paper);
    --panel: var(--animaker-day-panel);
    color: var(--animaker-day-text) !important;
    background:
            radial-gradient(circle at 14% 10%, rgba(93, 217, 210, 0.14), transparent 30%),
            radial-gradient(circle at 86% 12%, rgba(255, 215, 106, 0.17), transparent 26%),
            linear-gradient(180deg, #f8fbfc 0%, #eef6f6 46%, #f8faf8 100%) !important;
}

body.animaker-theme-day .topbar,
body[data-page="studio"].studio-theme-day .topbar {
    color: var(--animaker-day-ink) !important;
    border-color: rgba(23, 31, 44, 0.08) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 14px 42px rgba(37, 58, 80, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.08);
}

body.animaker-theme-day .topbar .brand,
body.animaker-theme-day .topbar a,
body.animaker-theme-day .shared-nav-links a,
body.animaker-theme-day .nav a,
body[data-page="studio"].studio-theme-day .topbar .brand,
body[data-page="studio"].studio-theme-day .topbar a,
body[data-page="studio"].studio-theme-day .shared-nav-links a,
body[data-page="studio"].studio-theme-day .nav a {
    color: var(--animaker-day-text) !important;
}

body.animaker-theme-day .topbar a:hover,
body.animaker-theme-day .topbar a.active,
body.animaker-theme-day .shared-nav-links a:hover,
body.animaker-theme-day .shared-nav-links a.active,
body.animaker-theme-day .nav a:hover,
body.animaker-theme-day .nav a.active,
body[data-page="studio"].studio-theme-day .topbar a:hover,
body[data-page="studio"].studio-theme-day .topbar a.active,
body[data-page="studio"].studio-theme-day .shared-nav-links a:hover,
body[data-page="studio"].studio-theme-day .shared-nav-links a.active,
body[data-page="studio"].studio-theme-day .nav a:hover,
body[data-page="studio"].studio-theme-day .nav a.active {
    color: #102027 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #d8fbf2, #ffe89a) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 26px rgba(48, 142, 150, 0.12) !important;
}

body.animaker-theme-day .primary-link,
body.animaker-theme-day .primary-btn,
body[data-page="studio"].studio-theme-day .primary-link,
body[data-page="studio"].studio-theme-day .primary-btn {
    color: #112027 !important;
    border-color: rgba(17, 32, 39, 0.08) !important;
    background: linear-gradient(135deg, #baf7ed, #ffe57f) !important;
    box-shadow: 0 12px 30px rgba(42, 164, 166, 0.16) !important;
}

body.animaker-theme-day .secondary-btn,
body.animaker-theme-day .ghost-link,
body.animaker-theme-day .theme-toggle-button,
body[data-page="studio"].studio-theme-day .secondary-btn,
body[data-page="studio"].studio-theme-day .ghost-link,
body[data-page="studio"].studio-theme-day .theme-toggle-button {
    color: var(--animaker-day-text) !important;
    border-color: rgba(30, 45, 62, 0.14) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: none !important;
}

body.animaker-theme-day :is(input, textarea, select),
body[data-page="studio"].studio-theme-day :is(input, textarea, select) {
    color: var(--animaker-day-ink) !important;
    border-color: rgba(32, 47, 65, 0.14) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(42, 58, 78, 0.04) !important;
}

body.animaker-theme-day :is(input, textarea)::placeholder,
body[data-page="studio"].studio-theme-day :is(input, textarea)::placeholder {
    color: rgba(92, 105, 121, 0.58) !important;
}

body[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home-root,
body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

body[data-page="home"] main {
    padding-top: 0 !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100% !important;
    max-width: none !important;
    min-height: clamp(650px, calc(100svh - 74px), 920px) !important;
    margin: 0 !important;
    padding: 0 max(28px, calc((100vw - 1360px) / 2 + 44px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 520px) !important;
    align-items: stretch !important;
    gap: clamp(28px, 5vw, 80px) !important;
    overflow: hidden !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero {
    color: var(--animaker-day-ink) !important;
    background-color: #f5fbfb !important;
    background-image:
            linear-gradient(90deg, rgba(248, 252, 252, 0.96), rgba(248, 252, 252, 0.76) 42%, rgba(248, 252, 252, 0.18)),
            url("/animaker/img/generated/home-oc-gateway-v1.png") !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    color: var(--animaker-night-text) !important;
    background-color: #070b12 !important;
    background-image:
            linear-gradient(90deg, rgba(5, 8, 14, 0.94), rgba(5, 8, 14, 0.66) 46%, rgba(5, 8, 14, 0.24)),
            url("/animaker/img/generated/home-oc-gateway-v1.png") !important;
}

body[data-page="home"] .vue-home-copy {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 0 !important;
    padding: clamp(70px, 9vh, 112px) 0 clamp(54px, 7vh, 92px) !important;
    align-content: center !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 10.8em !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

body.animaker-theme-day[data-page="home"] .vue-home-copy :is(.eyebrow, h1, p:not(.eyebrow)),
body.animaker-theme-day[data-page="home"] .vue-home-copy h1 span {
    color: var(--animaker-day-ink) !important;
    text-shadow: none !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-copy p:not(.eyebrow) {
    color: #445164 !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-brief {
    border: 1px solid rgba(37, 54, 72, 0.12) !important;
    background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(241, 252, 250, 0.76)),
            rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 20px 52px rgba(53, 92, 112, 0.12) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature {
    color: var(--animaker-day-ink) !important;
    border: 1px solid rgba(30, 45, 62, 0.14) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 24px 70px rgba(42, 58, 82, 0.16) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature-body {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(246, 250, 248, 0.94)) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature :is(strong, h3) {
    color: var(--animaker-day-ink) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature :is(span, p, small) {
    color: #516071 !important;
}

body.animaker-theme-day[data-page="home"] :is(
    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-creation-card,
    .vue-home-starter-card,
    .vue-home-work-card,
    .vue-home-ip-card,
    .vue-home-feed-card,
    .vue-home-empty-band,
    .vue-home-list a,
    .vue-home-creator-list a,
    .vue-home-template-list a,
    .vue-home-post-list article
) {
    color: var(--animaker-day-text) !important;
    border-color: rgba(31, 45, 63, 0.11) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 248, 0.78)),
            rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 16px 42px rgba(41, 62, 84, 0.08) !important;
}

body[data-page="studio"].studio-theme-day main {
    width: min(1440px, calc(100% - 28px)) !important;
}

body[data-page="studio"].studio-theme-day .studio-workbench {
    color: var(--animaker-day-text) !important;
}

body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-panel.is-active,
body[data-page="studio"].studio-theme-day :is(
    .studio-panel,
    .vue-assist-card,
    .vue-core-dock,
    .vue-visual-dock,
    .vue-story-dock,
    .vue-image-dock,
    .vue-publish-dock,
    .vue-board-dock,
    .vue-step-mission,
    .vue-core-write-now,
    .vue-visual-write-now,
    .vue-story-write-now,
    .vue-image-write-now,
    .vue-publish-showcase
) {
    color: var(--animaker-day-text) !important;
    border-color: rgba(29, 43, 60, 0.12) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 253, 250, 0.78)),
            rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 18px 46px rgba(42, 61, 82, 0.08) !important;
}

body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief,
body[data-page="studio"].studio-theme-day :is(.vue-image-mode-board, .vue-image-readiness, .vue-publish-decision) {
    border: 1px solid rgba(28, 47, 64, 0.11) !important;
    background:
            linear-gradient(135deg, rgba(223, 248, 241, 0.92), rgba(255, 247, 209, 0.78)),
            rgba(255, 255, 255, 0.78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

body[data-page="studio"].studio-theme-day :is(
    .vue-core-write-head strong,
    .vue-visual-write-head strong,
    .vue-story-write-head strong,
    .vue-image-write-head strong,
    .vue-publish-showcase-head strong,
    .vue-board-info h2,
    .vue-step-head h2,
    .vue-step-head strong
) {
    color: var(--animaker-day-ink) !important;
}

body[data-page="studio"].studio-theme-day :is(
    .vue-core-write-head p,
    .vue-visual-write-head p,
    .vue-story-write-head p,
    .vue-board-info > p:not(.eyebrow),
    .vue-step-head p,
    .vue-board-summary p,
    .vue-board-status,
    .vue-board-notice
) {
    color: var(--animaker-day-muted) !important;
}

body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    border: 1px solid rgba(29, 43, 60, 0.1) !important;
    background: #f3f8f8 !important;
}

body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    filter: saturate(1.05) contrast(1.02) brightness(1.03) !important;
}

body[data-page="studio"].studio-theme-day :is(.vue-core-field, .vue-visual-field, .vue-story-field, .vue-image-field) {
    border-color: rgba(28, 43, 60, 0.12) !important;
    background: rgba(255, 255, 255, 0.82) !important;
}

body[data-page="studio"].studio-theme-day :is(.vue-core-field small, .vue-visual-field small, .vue-story-field small, .vue-image-field small) {
    color: var(--animaker-day-muted) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) main {
    color: var(--animaker-day-text) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-hero, .vue-templates-hero, .vue-characters-hero) {
    color: var(--animaker-day-text) !important;
    border-color: rgba(30, 45, 62, 0.1) !important;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(232, 249, 247, 0.76)),
            radial-gradient(circle at 82% 10%, rgba(255, 215, 106, 0.28), transparent 28%) !important;
    box-shadow: 0 18px 52px rgba(43, 64, 88, 0.09) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-copy, .vue-templates-copy, .vue-characters-copy) :is(h1, h2, h3, strong) {
    color: var(--animaker-day-ink) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-copy, .vue-templates-copy, .vue-characters-copy) p:not(.eyebrow) {
    color: #536173 !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-feature,
    .vue-template-feature,
    .vue-character-feature,
    .vue-creation-command,
    .vue-gallery-workspace,
    .vue-template-workspace,
    .vue-character-pathfinder,
    .vue-gallery-pulse,
    .vue-gallery-mission,
    .vue-gallery-creator-radar,
    .vue-gallery-cocreate,
    .vue-template-match,
    .vue-template-social,
    .vue-template-guide,
    .vue-character-queue,
    .vue-character-completion,
    .vue-character-dimensions,
    .vue-character-workspace,
    .vue-character-guide,
    .section-heading,
    .empty-state
) {
    color: var(--animaker-day-text) !important;
    border-color: rgba(31, 45, 63, 0.1) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 250, 0.78)),
            rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 16px 42px rgba(42, 62, 86, 0.08) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.work-card, .vue-template-card, .oc-archive-card, .vue-gallery-radar-card, .vue-gallery-feed-card, .vue-gallery-ip, .vue-path-card, .vue-library-boundary-card) {
    color: var(--animaker-day-text) !important;
    border-color: rgba(29, 43, 60, 0.1) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 250, 0.86)),
            #ffffff !important;
    box-shadow: 0 14px 34px rgba(42, 62, 86, 0.08) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.work-card, .vue-template-card, .oc-archive-card, .vue-gallery-radar-card, .vue-gallery-feed-card, .vue-gallery-ip, .vue-path-card, .vue-library-boundary-card) :is(h2, h3, strong, a) {
    color: var(--animaker-day-ink) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.work-card, .vue-template-card, .oc-archive-card, .vue-gallery-radar-card, .vue-gallery-feed-card, .vue-gallery-ip, .vue-path-card, .vue-library-boundary-card) :is(p, small, span, em) {
    color: var(--animaker-day-muted) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.pill, .tag, .vue-filter-chip, .vue-template-chip, .vue-gallery-chip-row > span, .vue-character-palette + span, .oc-archive-meta span, .vue-ownership-strip span) {
    color: #263441 !important;
    border-color: rgba(43, 64, 84, 0.1) !important;
    background: rgba(235, 249, 247, 0.86) !important;
    box-shadow: none !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-filter-chip.is-active, .vue-filter-chip:hover, .vue-template-chip.is-active, .vue-template-chip:hover) {
    color: #112027 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #bdf7ee, #ffe47d) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-feature img, .vue-template-feature img, .vue-character-feature img) {
    min-height: clamp(300px, 34vw, 460px) !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .work-card > a:first-child,
body[data-page="templates"] .vue-template-card > img,
body[data-page="characters"] .oc-archive-cover {
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    background: #edf6f6 !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .work-card > a:first-child img,
body[data-page="templates"] .vue-template-card > img,
body[data-page="characters"] .oc-archive-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-hero, .vue-templates-hero, .vue-characters-hero) {
    border-color: rgba(255, 255, 255, 0.11) !important;
    background:
            linear-gradient(135deg, rgba(16, 19, 30, 0.92), rgba(19, 24, 36, 0.76)),
            radial-gradient(circle at 82% 10%, rgba(137, 238, 231, 0.18), transparent 30%) !important;
}

@media (max-width: 1160px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: clamp(34px, 6vw, 58px) clamp(22px, 5vw, 52px) clamp(38px, 7vw, 62px) !important;
    }

    body[data-page="home"] .vue-home-copy {
        max-width: 780px !important;
        padding: clamp(36px, 6vw, 58px) 0 20px !important;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        padding: 24px 18px 34px !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(40px, 13vw, 58px) !important;
    }

    body[data-page="studio"].studio-theme-day main {
        width: min(100% - 16px, 1440px) !important;
    }

    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-feature img, .vue-template-feature img, .vue-character-feature img) {
        min-height: 220px !important;
    }
}

/* Production UX pass v548.1: clear remaining dark fragments from the day theme. */
body.animaker-theme-day .vue-home-gateway {
    color: var(--animaker-day-ink) !important;
    background:
            linear-gradient(90deg, rgba(247, 253, 253, 0.92), rgba(247, 253, 253, 0.72) 45%, rgba(247, 253, 253, 0.18)),
            var(--home-gateway-image) center / cover no-repeat !important;
}

body.animaker-theme-day .vue-home-gateway::before {
    background:
            radial-gradient(circle at 30% 35%, rgba(77, 216, 212, 0.22), transparent 34%),
            radial-gradient(circle at 78% 24%, rgba(255, 216, 106, 0.26), transparent 30%) !important;
    mix-blend-mode: normal !important;
}

body.animaker-theme-day .vue-home-gateway::after {
    border-color: rgba(25, 41, 58, 0.12) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.28)) !important;
}

body.animaker-theme-day .vue-home-gateway-copy :is(span, h1, b, p) {
    color: var(--animaker-day-ink) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.animaker-theme-day .vue-home-gateway-copy p {
    color: #4a5b6e !important;
}

body.animaker-theme-day .vue-home-gateway-cue span {
    color: #102027 !important;
    background: linear-gradient(135deg, #baf7ed, #ffe57f) !important;
    box-shadow: 0 14px 36px rgba(45, 132, 142, 0.16) !important;
}

body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea {
    color: var(--animaker-day-ink) !important;
    border: 1px solid rgba(25, 42, 58, 0.14) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 12px 26px rgba(42, 62, 86, 0.06) !important;
}

body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea::placeholder {
    color: rgba(83, 96, 112, 0.66) !important;
}

body[data-page="studio"].studio-theme-day .vue-core-ai-brief :is(label span, .vue-core-ai-brief-chips button, .vue-field-suggestions button, .vue-core-inspiration-grid button) {
    color: var(--animaker-day-text) !important;
    border-color: rgba(31, 48, 66, 0.12) !important;
    background: rgba(255, 255, 255, 0.76) !important;
}

body[data-page="studio"].studio-theme-day .vue-core-ai-brief-chips button:hover,
body[data-page="studio"].studio-theme-day .vue-field-suggestions button:hover,
body[data-page="studio"].studio-theme-day .vue-core-inspiration-grid button:hover {
    color: #102027 !important;
    background: linear-gradient(135deg, #d6fbf3, #ffe88f) !important;
}

body[data-page="studio"].studio-theme-day :is(.vue-core-head, .vue-core-write-head, .vue-core-ai-brief) :is(p, small, span:not(.pill)) {
    color: var(--animaker-day-muted) !important;
}

body[data-page="studio"].studio-theme-day :is(.vue-core-head, .vue-core-write-head, .vue-core-ai-brief) :is(h3, strong, label span) {
    color: var(--animaker-day-ink) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-more, .vue-template-more, .vue-character-more) {
    color: var(--animaker-day-text) !important;
    border-color: rgba(31, 45, 63, 0.1) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 14px 34px rgba(42, 62, 86, 0.06) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-more > summary, .vue-template-more > summary, .vue-character-more > summary) {
    color: var(--animaker-day-text) !important;
    border-color: rgba(31, 45, 63, 0.1) !important;
    background:
            linear-gradient(135deg, rgba(238, 251, 248, 0.94), rgba(255, 248, 218, 0.72)),
            rgba(255, 255, 255, 0.82) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-more > summary h2, .vue-template-more > summary h2, .vue-character-more > summary h2) {
    color: var(--animaker-day-ink) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-more > summary p:not(.eyebrow), .vue-template-more > summary p:not(.eyebrow), .vue-character-more > summary p:not(.eyebrow)) {
    color: var(--animaker-day-muted) !important;
}

body.animaker-theme-day:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-more > summary > strong, .vue-template-more > summary > strong, .vue-character-more > summary > strong) {
    color: #102027 !important;
    background: linear-gradient(135deg, #bdf7ee, #ffe47d) !important;
}

/* Production UX pass v549.1: keep day-mode studio guidance readable. */
body[data-page="studio"].studio-theme-day :is(.vue-core-write-head p, .vue-core-ai-brief label > span, .vue-core-ai-brief-chips button) {
    opacity: 1 !important;
}

body[data-page="studio"].studio-theme-day .vue-core-write-head p {
    color: #526173 !important;
}

body[data-page="studio"].studio-theme-day .vue-core-ai-brief label > span {
    color: #1f7280 !important;
    background: rgba(220, 249, 243, 0.82) !important;
}

body[data-page="studio"].studio-theme-day .vue-core-ai-brief-chips button {
    color: #334253 !important;
    border-color: rgba(34, 55, 74, 0.1) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    text-shadow: none !important;
}

body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head p {
    color: #526173 !important;
    opacity: 1 !important;
}

body[data-page="studio"].studio-theme-day.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button {
    color: #334253 !important;
    border-color: rgba(34, 55, 74, 0.12) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Production UX pass 20260707: AI-first creator pathline. */
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-now {
    display: grid !important;
    gap: 14px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-brief-source {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(35, 56, 74, 0.1) !important;
    background: rgba(255, 255, 255, 0.64) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-brief-source span {
    min-height: 24px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #167481 !important;
    background: rgba(212, 249, 242, 0.9) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-brief-source strong {
    overflow: hidden !important;
    color: #2a3546 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline article {
    min-height: 142px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(35, 56, 74, 0.1) !important;
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 251, 0.76)),
            rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 10px 26px rgba(42, 62, 86, 0.06) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline article[data-path-state="active"] {
    border-color: rgba(44, 191, 193, 0.28) !important;
    background:
            linear-gradient(145deg, rgba(220, 250, 243, 0.95), rgba(255, 245, 198, 0.76)),
            rgba(255, 255, 255, 0.9) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline article[data-path-state="locked"] {
    opacity: 0.72 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline span {
    width: fit-content !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #167481 !important;
    background: rgba(214, 249, 242, 0.9) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline strong {
    color: #151a24 !important;
    font-size: 15px !important;
    line-height: 1.24 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline p {
    min-height: 34px !important;
    margin: 0 !important;
    color: #5c6878 !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline button {
    min-height: 34px !important;
    margin-top: auto !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
}

body[data-page="studio"].studio-theme-night.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-brief-source,
body[data-page="studio"].studio-theme-night.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline article {
    border-color: rgba(244, 249, 255, 0.12) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
            rgba(12, 16, 25, 0.72) !important;
}

body[data-page="studio"].studio-theme-night.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline article[data-path-state="active"] {
    border-color: rgba(137, 238, 231, 0.28) !important;
    background:
            linear-gradient(145deg, rgba(137, 238, 231, 0.14), rgba(255, 225, 118, 0.08)),
            rgba(10, 14, 23, 0.82) !important;
}

body[data-page="studio"].studio-theme-night.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-brief-source strong,
body[data-page="studio"].studio-theme-night.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline strong {
    color: #f6fbff !important;
}

body[data-page="studio"].studio-theme-night.studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline p {
    color: rgba(224, 235, 247, 0.68) !important;
}

@media (max-width: 980px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-brief-source {
        grid-template-columns: minmax(0, 1fr) !important;
        border-radius: 18px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-brief-source strong {
        white-space: normal !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline article {
        min-height: 0 !important;
    }
}

/* Production UX pass 20260707: home hero is a real full-bleed entry, not a centered poster. */
body[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home-root,
body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: clip !important;
}

body[data-page="home"] main {
    padding: 0 !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: max(660px, calc(100svh - 68px)) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: 0 clamp(28px, 6vw, 118px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 520px) !important;
    align-items: stretch !important;
    gap: clamp(28px, 5vw, 92px) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(247, 252, 252, 0.92), rgba(247, 252, 252, 0.68) 44%, rgba(247, 252, 252, 0.1)),
            url("/animaker/img/generated/home-oc-gateway-v1.png") !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero,
body[data-page="home"]:not(.animaker-theme-day) section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(5, 8, 14, 0.94), rgba(5, 8, 14, 0.62) 46%, rgba(5, 8, 14, 0.16)),
            url("/animaker/img/generated/home-oc-gateway-v1.png") !important;
}

body[data-page="home"] .vue-home-copy {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    padding: clamp(58px, 8vh, 102px) 0 clamp(52px, 7vh, 92px) !important;
    align-content: center !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: min(100%, 10em) !important;
    font-size: clamp(58px, 7vw, 112px) !important;
    line-height: 0.9 !important;
    text-wrap: balance !important;
}

body[data-page="home"] .vue-home-brief {
    width: min(620px, 100%) !important;
}

body[data-page="home"] .vue-home-feature {
    align-self: end !important;
    justify-self: end !important;
    width: min(540px, 100%) !important;
    min-height: clamp(350px, 42vh, 480px) !important;
    margin: 0 0 clamp(36px, 7vh, 78px) !important;
    border-radius: 28px !important;
}

body[data-page="home"] .vue-home > section:not(.vue-home-hero),
body[data-page="home"] .vue-home > .section-heading,
body[data-page="home"] .vue-home > .vue-home-lower {
    width: min(1180px, calc(100vw - 40px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 1600px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        padding-left: clamp(118px, 9vw, 188px) !important;
        padding-right: clamp(118px, 9vw, 188px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(420px, 560px) !important;
    }
}

@media (max-width: 1160px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding: clamp(34px, 5vw, 58px) clamp(22px, 5vw, 54px) clamp(38px, 6vw, 64px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="home"] .vue-home-copy {
        max-width: 820px !important;
        padding: clamp(34px, 5vw, 56px) 0 18px !important;
    }

    body[data-page="home"] .vue-home-feature {
        justify-self: start !important;
        width: min(560px, 100%) !important;
        min-height: 320px !important;
        margin: 6px 0 0 !important;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: 100vw !important;
        min-height: auto !important;
        margin: 0 calc(50% - 50vw) !important;
        padding: 24px 18px 34px !important;
        background-position: center top !important;
    }

    body[data-page="home"] .vue-home-copy {
        width: 100% !important;
        max-width: none !important;
        padding: 18px 0 12px !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(40px, 13vw, 58px) !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        min-height: 300px !important;
        margin: 6px 0 0 !important;
        border-radius: 24px !important;
    }
}

/* Production UX pass 20260707 v562: lighter AI-first OC creator, consistent day/night. */
body.animaker-theme-day {
    --ink: #171923;
    --text: #303645;
    --muted: #667085;
    --line: rgba(25, 31, 46, 0.1);
    --paper: #f7f9fb;
    --panel: rgba(255, 255, 255, 0.9);
    --shadow: 0 18px 54px rgba(31, 43, 68, 0.1);
    color: var(--text);
    background:
            radial-gradient(circle at 8% 6%, rgba(119, 232, 222, 0.16), transparent 28rem),
            radial-gradient(circle at 92% 12%, rgba(255, 225, 118, 0.16), transparent 28rem),
            linear-gradient(180deg, #f9fbfb 0%, #f3f7f8 50%, #fbfaf7 100%);
}

body.animaker-theme-night {
    --ink: #f7f8fd;
    --text: #e6e8f0;
    --muted: #aeb6c7;
    --line: rgba(238, 243, 255, 0.13);
    --paper: #0e1118;
    --panel: rgba(21, 25, 35, 0.88);
    --shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
    color: var(--text);
    background:
            radial-gradient(circle at 10% 6%, rgba(76, 210, 214, 0.15), transparent 30rem),
            radial-gradient(circle at 90% 10%, rgba(255, 216, 111, 0.1), transparent 28rem),
            linear-gradient(180deg, #0b0e15 0%, #10141d 48%, #0c1018 100%) !important;
}

body.animaker-theme-day :is(.topbar, .shared-nav, .page-title, .empty-state, .modal, .auth-card, .studio-panel, .studio-preview, .vue-board-dock),
body.animaker-theme-day :is(.vue-home-metrics a, .vue-home-next, .vue-home-creation-card, .vue-home-starter-card, .vue-home-work-card, .vue-home-ip-card, .vue-home-feed-card, .vue-home-empty-band, .vue-home-list a, .vue-home-creator-list a, .vue-home-template-list a, .vue-home-post-list article) {
    border-color: var(--line) !important;
    background: var(--panel) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night :is(.topbar, .shared-nav, .page-title, .empty-state, .modal, .auth-card, .studio-panel, .studio-preview, .vue-board-dock),
body.animaker-theme-night :is(.vue-home-metrics a, .vue-home-next, .vue-home-creation-card, .vue-home-starter-card, .vue-home-work-card, .vue-home-ip-card, .vue-home-feed-card, .vue-home-empty-band, .vue-home-list a, .vue-home-creator-list a, .vue-home-template-list a, .vue-home-post-list article) {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
            var(--panel) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night :is(input, textarea, select) {
    color: #f7f8fd !important;
    border-color: rgba(238, 243, 255, 0.16) !important;
    background: rgba(8, 11, 18, 0.72) !important;
}

body.animaker-theme-night :is(.muted, small, p) {
    color: var(--muted);
}

body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
}

.vue-home-gateway {
    color: #f7f8fd;
    background-image:
            linear-gradient(90deg, rgba(8, 12, 19, 0.84), rgba(8, 12, 19, 0.42) 52%, rgba(8, 12, 19, 0.08)),
            var(--home-gateway-image) !important;
    background-position: center !important;
    background-size: cover !important;
}

.vue-home-gateway::before {
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 32%),
            radial-gradient(circle at 20% 18%, rgba(137, 238, 231, 0.22), transparent 24rem) !important;
}

.vue-home-gateway::after {
    opacity: 0.42 !important;
}

.vue-home-gateway-copy {
    max-width: min(760px, calc(100vw - 48px)) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vue-home-gateway-copy span {
    min-height: 32px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(14px) !important;
}

.vue-home-gateway-copy h1 {
    margin-top: 18px !important;
    font-size: clamp(58px, 11vw, 148px) !important;
    line-height: 0.86 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 18px 54px rgba(0, 0, 0, 0.24) !important;
}

.vue-home-gateway-copy p {
    width: min(620px, 100%) !important;
    margin-top: 22px !important;
    color: rgba(247, 248, 253, 0.82) !important;
    font-size: clamp(17px, 2vw, 24px) !important;
    line-height: 1.6 !important;
}

.vue-home-gateway-cue {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) !important;
}

body.animaker-theme-day .vue-home-gateway {
    color: #171923;
    background-image:
            linear-gradient(90deg, rgba(248, 252, 252, 0.86), rgba(248, 252, 252, 0.54) 48%, rgba(248, 252, 252, 0.08)),
            var(--home-gateway-image) !important;
}

body.animaker-theme-day .vue-home-gateway-copy p {
    color: rgba(23, 25, 35, 0.72) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

body.animaker-theme-day .vue-home-gateway-copy span,
body.animaker-theme-day .vue-home-gateway-cue {
    color: #171923 !important;
    border-color: rgba(23, 25, 35, 0.12) !important;
    background: rgba(255, 255, 255, 0.56) !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    min-height: max(640px, calc(100svh - 68px)) !important;
    grid-template-columns: minmax(0, 0.94fr) minmax(320px, 470px) !important;
}

body[data-page="home"] .vue-home-flow,
body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

body[data-page="home"] .vue-home-copy {
    max-width: 700px !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 9em !important;
    font-size: clamp(54px, 6.5vw, 104px) !important;
    line-height: 0.92 !important;
}

body[data-page="home"] .vue-home-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-brief {
    border-color: rgba(28, 43, 62, 0.1) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 18px 48px rgba(31, 43, 68, 0.12) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-brief label span,
body.animaker-theme-day[data-page="studio"] .vue-core-ai-brief label > span {
    color: #118492 !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-brief textarea,
body.animaker-theme-day[data-page="studio"] .vue-core-ai-brief textarea {
    color: #171923 !important;
    border-color: rgba(28, 43, 62, 0.12) !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-brief textarea::placeholder,
body.animaker-theme-day[data-page="studio"] .vue-core-ai-brief textarea::placeholder {
    color: rgba(48, 54, 69, 0.42) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-brief-chips button,
body.animaker-theme-day[data-page="studio"] .vue-core-ai-brief-chips button {
    color: #475467 !important;
    border-color: rgba(28, 43, 62, 0.1) !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature {
    color: #171923 !important;
    border-color: rgba(28, 43, 62, 0.12) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 24px 68px rgba(31, 43, 68, 0.14) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature-body {
    background: rgba(255, 255, 255, 0.74) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature :is(strong, h3) {
    color: #171923 !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature :is(span, p, small) {
    color: rgba(48, 54, 69, 0.72) !important;
}

body[data-page="home"] .vue-home-metrics {
    gap: 14px !important;
}

body[data-page="home"] .vue-home-metrics a {
    border-radius: 22px !important;
}

body[data-page="home"] .vue-home-metrics img {
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
}

body[data-page="studio"],
body.animaker-theme-day[data-page="studio"] {
    background:
            radial-gradient(circle at 12% 8%, rgba(137, 238, 231, 0.16), transparent 30rem),
            radial-gradient(circle at 88% 8%, rgba(255, 225, 118, 0.14), transparent 28rem),
            linear-gradient(180deg, #f8fbfb 0%, #f1f7f8 48%, #fbfaf7 100%) !important;
}

body.animaker-theme-night[data-page="studio"],
body[data-page="studio"].studio-theme-night {
    background:
            radial-gradient(circle at 12% 8%, rgba(83, 219, 220, 0.16), transparent 30rem),
            radial-gradient(circle at 86% 12%, rgba(255, 216, 111, 0.1), transparent 28rem),
            linear-gradient(180deg, #0b0f17 0%, #111720 52%, #0d1119 100%) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(292px, 340px) !important;
    gap: 18px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active {
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.82) !important;
}

body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active {
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
            rgba(16, 21, 31, 0.9) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
    margin-bottom: 14px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head p {
    max-width: 44em !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    border-color: rgba(28, 43, 62, 0.1) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: 0 16px 46px rgba(31, 43, 68, 0.1) !important;
}

body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    border-color: rgba(238, 243, 255, 0.13) !important;
    background: rgba(8, 12, 20, 0.72) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline {
    gap: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline article {
    min-height: 128px !important;
    border-radius: 20px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    padding: 12px !important;
    border-radius: 30px !important;
    gap: 12px !important;
}

body[data-page="studio"] .vue-board-dossier-rail,
body[data-page="studio"] .vue-board-cover-topline,
body[data-page="studio"] .vue-board-blueprint,
body[data-page="studio"] .vue-board-empty-grid,
body[data-page="studio"] .vue-board-cover-marks,
body[data-page="studio"] .vue-board-summary,
body[data-page="studio"] .vue-board-status,
body[data-page="studio"] .vue-board-readiness-grid,
body[data-page="studio"] .vue-board-readiness-bar,
body[data-page="studio"] .vue-board-director-cue {
    display: none !important;
}

body[data-page="studio"] .vue-board-cover {
    min-height: 390px !important;
    border-radius: 26px !important;
    border-color: rgba(28, 43, 62, 0.1) !important;
    background: #f9fbfb !important;
}

body.animaker-theme-night[data-page="studio"] .vue-board-cover {
    border-color: rgba(238, 243, 255, 0.14) !important;
    background: #0c111a !important;
}

body[data-page="studio"] .vue-board-cover img,
body[data-page="studio"] .vue-board-empty-cover {
    height: 390px !important;
    min-height: 390px !important;
}

body[data-page="studio"] .vue-board-empty-cover {
    display: block !important;
    padding: 0 !important;
    background: #f9fbfb !important;
}

body[data-page="studio"] .vue-board-empty-cover::before,
body[data-page="studio"] .vue-board-empty-cover::after {
    display: none !important;
}

body[data-page="studio"] .vue-board-empty-head {
    position: absolute !important;
    z-index: 4 !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(18px) !important;
}

body.animaker-theme-night[data-page="studio"] .vue-board-empty-head {
    border-color: rgba(238, 243, 255, 0.16) !important;
    background: rgba(10, 14, 22, 0.72) !important;
}

body[data-page="studio"] .vue-board-empty-head :is(span, small) {
    color: rgba(48, 54, 69, 0.68) !important;
}

body[data-page="studio"] .vue-board-empty-head strong {
    color: #171923 !important;
}

body.animaker-theme-night[data-page="studio"] .vue-board-empty-head :is(span, small) {
    color: rgba(230, 232, 240, 0.7) !important;
}

body.animaker-theme-night[data-page="studio"] .vue-board-empty-head strong {
    color: #f7f8fd !important;
}

body[data-page="studio"] .vue-board-empty-stage,
body[data-page="studio"].studio-mode-quick .vue-board-empty-stage,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
    display: block !important;
    min-height: 390px !important;
    height: 390px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body[data-page="studio"] .vue-board-default-art,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    min-height: 100% !important;
    border: 0 !important;
    background: transparent !important;
}

body[data-page="studio"] .vue-board-default-art img,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 50% 42% !important;
    filter: none !important;
}

body[data-page="studio"] .vue-board-empty-cover > span,
body[data-page="studio"] .vue-board-cover > span {
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    top: 14px !important;
    min-height: 30px !important;
    color: #171923 !important;
    background: rgba(255, 255, 255, 0.74) !important;
    backdrop-filter: blur(14px) !important;
}

body.animaker-theme-night[data-page="studio"] .vue-board-empty-cover > span,
body.animaker-theme-night[data-page="studio"] .vue-board-cover > span {
    color: #f7f8fd !important;
    background: rgba(8, 12, 20, 0.62) !important;
}

body[data-page="studio"] .vue-board-readiness {
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

body.animaker-theme-night[data-page="studio"] .vue-board-readiness {
    background: rgba(8, 12, 20, 0.58) !important;
}

body[data-page="studio"] .vue-board-readiness-head {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

body[data-page="studio"] .vue-board-readiness-head div {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
}

body[data-page="studio"] .vue-board-actions {
    grid-template-columns: 1fr !important;
}

body[data-page="studio"] .vue-board-actions .secondary-btn {
    display: none !important;
}

@media (max-width: 1160px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
        order: -1 !important;
    }

    body[data-page="studio"] .vue-board-cover,
    body[data-page="studio"] .vue-board-cover img,
    body[data-page="studio"] .vue-board-empty-cover,
    body[data-page="studio"] .vue-board-empty-stage {
        min-height: 300px !important;
        height: 300px !important;
    }
}

@media (max-width: 760px) {
    .vue-home-gateway-copy h1 {
        font-size: clamp(46px, 16vw, 72px) !important;
    }

    .vue-home-gateway-copy p {
        font-size: 15px !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        padding-top: 20px !important;
    }

    body[data-page="home"] .vue-home-actions a:nth-child(n+3) {
        display: none !important;
    }

    body[data-page="studio"] .vue-board-cover,
    body[data-page="studio"] .vue-board-cover img,
    body[data-page="studio"] .vue-board-empty-cover,
    body[data-page="studio"] .vue-board-empty-stage {
        min-height: 260px !important;
        height: 260px !important;
    }
}

/* Production UX pass 20260707 v562 polish: remove old cue ornament and keep the default OC art poster-sized. */
.vue-home-gateway-cue i {
    display: none !important;
}

.vue-home-gateway-cue {
    padding-inline: 20px !important;
}

@media (min-width: 1161px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
        min-height: 430px !important;
        height: 430px !important;
    }
}

/* Production UX pass 20260707 v564: one obvious next action, advanced controls folded away. */
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(28, 43, 62, 0.1) !important;
    border-radius: 22px !important;
    background:
            linear-gradient(115deg, rgba(137, 238, 231, 0.18), rgba(255, 225, 118, 0.2)),
            rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 16px 40px rgba(31, 43, 68, 0.1) !important;
}

body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command {
    border-color: rgba(238, 243, 255, 0.13) !important;
    background:
            linear-gradient(115deg, rgba(83, 219, 220, 0.14), rgba(255, 216, 111, 0.1)),
            rgba(8, 12, 20, 0.76) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command span {
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 6px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    color: #118492 !important;
    background: rgba(255, 255, 255, 0.62) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command span {
    color: #8eeeed !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command strong {
    display: block !important;
    color: #171923 !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    line-height: 1.15 !important;
}

body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command strong {
    color: #f7f8fd !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command p {
    max-width: 48em !important;
    margin: 5px 0 0 !important;
    color: rgba(48, 54, 69, 0.7) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command p {
    color: rgba(230, 232, 240, 0.72) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command button {
    min-width: 148px !important;
    min-height: 48px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline-drawer,
body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-visual-field-drawer {
    display: block !important;
    margin-top: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-pathline-drawer, .vue-visual-field-drawer) > summary {
    min-height: 48px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(28, 43, 62, 0.09) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.66) !important;
}

body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-pathline-drawer, .vue-visual-field-drawer) > summary {
    border-color: rgba(238, 243, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active :is(.vue-core-pathline-drawer, .vue-visual-field-drawer) > summary p {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline-drawer:not([open]) .vue-core-pathline {
    display: none !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline-drawer[open] .vue-core-pathline {
    margin-top: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-visual-field-drawer[open] {
    padding: 10px !important;
    border: 1px solid rgba(28, 43, 62, 0.08) !important;
    background: rgba(255, 255, 255, 0.52) !important;
}

body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-visual-field-drawer[open] {
    border-color: rgba(238, 243, 255, 0.12) !important;
    background: rgba(8, 12, 20, 0.54) !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-visual-field-drawer .vue-visual-write-grid {
    margin-top: 10px !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-visual-field-drawer .vue-visual-field.wide {
    margin-top: 10px !important;
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command button {
        width: 100% !important;
    }
}

/* Production UX pass 20260707 v567: lock the home gateway and studio first action against resolution/timing issues. */
body[data-page="home"],
body[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home-root,
body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: clip !important;
}

body[data-page="home"] main {
    padding: 0 !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: max(680px, calc(100dvh - 68px)) !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    padding: clamp(44px, 7vh, 96px) clamp(32px, 7vw, 136px) clamp(48px, 8vh, 106px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 520px) !important;
    align-items: center !important;
    gap: clamp(30px, 6vw, 92px) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    isolation: isolate !important;
}

body[data-page="home"] section.vue-home-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
            linear-gradient(90deg, rgba(3, 6, 12, 0.72), rgba(3, 6, 12, 0.26) 48%, rgba(3, 6, 12, 0.42)),
            radial-gradient(circle at 34% 34%, rgba(113, 232, 224, 0.14), transparent 28rem) !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero::before {
    background:
            linear-gradient(90deg, rgba(249, 252, 252, 0.86), rgba(249, 252, 252, 0.34) 48%, rgba(249, 252, 252, 0.2)),
            radial-gradient(circle at 34% 34%, rgba(33, 183, 197, 0.12), transparent 28rem) !important;
}

body[data-page="home"] .vue-home-copy {
    max-width: 760px !important;
    align-self: center !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 9.5em !important;
    font-size: clamp(56px, 7.2vw, 118px) !important;
}

body[data-page="home"] .vue-home-feature {
    align-self: end !important;
    justify-self: end !important;
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    min-height: clamp(360px, 44vh, 500px) !important;
    margin: 0 !important;
}

body[data-page="studio"].studio-mode-quick .vue-core-command button:disabled,
body[data-page="studio"].studio-mode-quick .vue-core-ai-brief-actions button:disabled,
body[data-page="studio"].studio-mode-quick .vue-core-write-head button:disabled {
    cursor: wait !important;
    opacity: 0.72 !important;
}

body[data-page="home"] .vue-home-brief-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    max-height: none !important;
}

body[data-page="home"] .vue-home-brief-chips button {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 6px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 1180px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding: clamp(34px, 6vw, 70px) clamp(22px, 5vw, 58px) clamp(42px, 7vw, 78px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="home"] .vue-home-feature {
        justify-self: start !important;
        width: min(620px, 100%) !important;
        max-width: 620px !important;
        min-height: 330px !important;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: 100vw !important;
        min-height: auto !important;
        padding: 22px 16px 34px !important;
        background-position: 50% 0 !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(42px, 14vw, 64px) !important;
    }

    body[data-page="home"] .vue-home-copy p:not(.eyebrow) {
        max-width: 100% !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        min-height: 300px !important;
        border-radius: 22px !important;
    }

    body[data-page="home"] .vue-home-brief-chips button {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* Production UX pass 20260707 v567: compact OC inspiration cards instead of long prompt pills. */
body[data-page="home"] .vue-home-brief-chips,
body[data-page="studio"].studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

body[data-page="studio"].studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
}

body[data-page="home"] .vue-home-brief-chips button,
body[data-page="studio"].studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips button {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(28, 43, 62, 0.1) !important;
    border-radius: 16px !important;
    color: #202633 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 10px 26px rgba(31, 43, 68, 0.08) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: hidden !important;
}

body[data-page="home"] .vue-home-brief-chips button span,
body[data-page="studio"].studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips button span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    color: #087989 !important;
    background: rgba(137, 238, 231, 0.3) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body[data-page="home"] .vue-home-brief-chips button strong,
body[data-page="studio"].studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips button strong {
    min-width: 0 !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body[data-page="home"] .vue-home-brief-chips button:is(:hover, :focus-visible, .is-active),
body[data-page="studio"].studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips button:is(:hover, :focus-visible, .is-active) {
    border-color: rgba(33, 183, 197, 0.42) !important;
    background:
            linear-gradient(115deg, rgba(194, 255, 233, 0.75), rgba(255, 238, 119, 0.6)),
            rgba(255, 255, 255, 0.92) !important;
    transform: translateY(-1px) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-chips button,
body[data-page="studio"].studio-theme-night.studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips button {
    color: #eef7fb !important;
    border-color: rgba(238, 243, 255, 0.13) !important;
    background: rgba(10, 14, 22, 0.62) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-chips button span,
body[data-page="studio"].studio-theme-night.studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips button span {
    color: #8eeeed !important;
    background: rgba(137, 238, 231, 0.12) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-chips button:is(:hover, :focus-visible, .is-active),
body[data-page="studio"].studio-theme-night.studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips button:is(:hover, :focus-visible, .is-active) {
    border-color: rgba(137, 238, 231, 0.38) !important;
    background:
            linear-gradient(115deg, rgba(33, 183, 197, 0.2), rgba(255, 209, 102, 0.14)),
            rgba(12, 17, 27, 0.78) !important;
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-brief-chips,
    body[data-page="studio"].studio-mode-quick .studio-panel.is-active .vue-core-ai-brief-chips {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Production UX pass 20260707 v568: full-bleed home and lighter OC library surfaces. */
body[data-page="home"] {
    overflow-x: clip !important;
    background: #f7fafb !important;
}

body[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home-root,
body[data-page="home"] .vue-home {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    left: auto !important;
    right: auto !important;
    width: 100vw !important;
    min-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: clamp(46px, 7vh, 92px) clamp(28px, 6vw, 112px) clamp(44px, 7vh, 88px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    grid-template-columns: minmax(420px, 0.92fr) minmax(340px, 500px) !important;
    align-items: center !important;
    background-position: center !important;
    background-size: cover !important;
}

body[data-page="home"] section.vue-home-hero::before {
    background:
            linear-gradient(90deg, rgba(5, 8, 14, 0.78), rgba(5, 8, 14, 0.38) 46%, rgba(5, 8, 14, 0.5)),
            radial-gradient(circle at 28% 34%, rgba(118, 235, 226, 0.12), transparent 25rem),
            linear-gradient(180deg, rgba(5, 8, 14, 0.08), rgba(5, 8, 14, 0.56)) !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero::before {
    background:
            linear-gradient(90deg, rgba(250, 253, 253, 0.9), rgba(250, 253, 253, 0.5) 44%, rgba(250, 253, 253, 0.18)),
            radial-gradient(circle at 28% 34%, rgba(42, 199, 202, 0.13), transparent 25rem) !important;
}

body[data-page="home"] .vue-home-copy {
    max-width: 760px !important;
    padding: 0 !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 8em !important;
    font-size: clamp(60px, 7.8vw, 124px) !important;
    line-height: 0.88 !important;
}

body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 620px !important;
    font-size: clamp(16px, 1.45vw, 20px) !important;
    line-height: 1.85 !important;
}

body[data-page="home"] .vue-home-brief {
    width: min(720px, 100%) !important;
    margin-top: clamp(18px, 3vh, 34px) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(18px) !important;
}

body[data-page="home"] .vue-home-feature {
    width: min(500px, 100%) !important;
    max-width: 500px !important;
    min-height: clamp(430px, 58vh, 620px) !important;
    align-self: center !important;
    justify-self: end !important;
    border-radius: 30px !important;
}

body[data-page="home"] .vue-home-feature img {
    height: 100% !important;
    object-position: 50% 32% !important;
}

body[data-page="home"] .vue-home > section:not(.vue-home-hero) {
    width: min(1360px, calc(100vw - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) main {
    width: min(1360px, calc(100vw - 40px)) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery, .vue-templates, .vue-characters) {
    gap: 20px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-hero, .vue-templates-hero, .vue-characters-hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr) !important;
    gap: clamp(18px, 3vw, 42px) !important;
    align-items: stretch !important;
    min-height: 420px !important;
    padding: clamp(22px, 3vw, 38px) !important;
    border-radius: 30px !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
    display: none !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
    min-height: 100% !important;
    align-self: stretch !important;
    justify-content: space-between !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
    grid-template-columns: minmax(120px, 0.44fr) minmax(0, 1fr) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
    width: 100% !important;
    height: clamp(190px, 24vw, 300px) !important;
    border-radius: 22px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-more, .vue-template-more, .vue-character-more) {
    border-radius: 22px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-more > summary, .vue-template-more > summary, .vue-character-more > summary) {
    min-height: 64px !important;
}

body[data-page="gallery"] .vue-gallery-workspace {
    padding: clamp(16px, 2.4vw, 26px) !important;
    border-radius: 28px !important;
}

body[data-page="gallery"] .vue-gallery-work-grid,
body[data-page="templates"] .vue-template-grid,
body[data-page="characters"] .vue-character-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: clamp(14px, 1.7vw, 22px) !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .work-card,
body[data-page="templates"] .vue-template-card,
body[data-page="characters"] .vue-character-card {
    border-radius: 24px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .work-card:hover,
body[data-page="templates"] .vue-template-card:hover,
body[data-page="characters"] .vue-character-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(33, 183, 197, 0.28) !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .work-card > a:first-child,
body[data-page="templates"] .vue-template-card > img,
body[data-page="characters"] .vue-character-card .oc-archive-cover {
    aspect-ratio: 4 / 5 !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .card-body p,
body[data-page="templates"] .vue-template-card .card-body p,
body[data-page="characters"] .vue-character-card .card-body > p,
body[data-page="characters"] .vue-character-card blockquote {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="studio"] .vue-board-empty-stage {
    overflow: hidden !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52)),
            rgba(246, 244, 236, 0.86) !important;
}

body[data-page="studio"].studio-theme-night .vue-board-empty-stage {
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
            rgba(15, 17, 25, 0.9) !important;
}

body[data-page="studio"] .vue-board-default-art {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.96 !important;
}

body[data-page="studio"].studio-theme-night .vue-board-default-art {
    opacity: 0.72 !important;
}

body[data-page="studio"] .vue-board-default-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
    filter: saturate(0.96) contrast(1.02) !important;
}

body[data-page="studio"] .vue-board-blueprint {
    position: relative !important;
    z-index: 2 !important;
    align-self: end !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76)) !important;
    backdrop-filter: blur(18px) !important;
}

body[data-page="studio"].studio-theme-night .vue-board-blueprint {
    background:
            linear-gradient(180deg, rgba(13, 17, 25, 0.82), rgba(13, 17, 25, 0.64)) !important;
}

body[data-page="studio"] .vue-board-empty-stage .vue-board-blueprint-lines {
    max-height: 134px !important;
    overflow: hidden !important;
}

@media (max-width: 1120px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero,
    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-hero, .vue-templates-hero, .vue-characters-hero) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="home"] .vue-home-feature {
        justify-self: start !important;
        width: min(680px, 100%) !important;
        max-width: 680px !important;
        min-height: 380px !important;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding: 22px 16px 30px !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(42px, 14vw, 64px) !important;
    }

    body[data-page="home"] .vue-home-feature {
        min-height: 300px !important;
        border-radius: 22px !important;
    }

    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) main,
    body[data-page="home"] .vue-home > section:not(.vue-home-hero) {
        width: min(100vw - 20px, 100%) !important;
    }

    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery-hero, .vue-templates-hero, .vue-characters-hero) {
        min-height: 0 !important;
        border-radius: 22px !important;
        padding: 16px !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
        grid-template-columns: 86px minmax(0, 1fr) !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
        height: 112px !important;
        border-radius: 18px !important;
    }

    body[data-page="gallery"] .vue-gallery-work-grid,
    body[data-page="templates"] .vue-template-grid,
    body[data-page="characters"] .vue-character-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"] .vue-board-default-art {
        opacity: 0.84 !important;
    }
}

/* Production UX pass 20260707 v568.1: make template/archive heroes read like compact action panels. */
body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
    max-width: 12.4em !important;
    font-size: clamp(46px, 5.5vw, 74px) !important;
    line-height: 0.98 !important;
    text-wrap: balance !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
    min-height: 520px !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) .vue-creation-command {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
    align-self: center !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 16px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    align-items: center !important;
    padding: 10px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
    width: 112px !important;
    height: 148px !important;
    border-radius: 18px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor h2 {
    font-size: clamp(22px, 2.4vw, 32px) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
    min-height: 52px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track span {
    min-width: 34px !important;
    min-height: 28px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track strong {
    -webkit-line-clamp: 1 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
}

@media (max-width: 1120px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
        min-height: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) .vue-creation-command {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 760px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
        font-size: clamp(34px, 11vw, 48px) !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Production UX pass 20260707 v569.1: keep mobile navigation compact so creation starts above the fold. */
@media (max-width: 640px) {
    .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 9px !important;
        padding: 10px 14px 12px !important;
    }

    .brand {
        min-height: 34px !important;
        font-size: 19px !important;
    }

    .shared-nav-root {
        order: 2 !important;
        width: 100% !important;
        flex-basis: auto !important;
    }

    .shared-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    .shared-nav-links {
        display: flex !important;
        width: 100% !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 2px 2px !important;
        scrollbar-width: none !important;
    }

    .shared-nav-links a {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 32px !important;
        justify-content: center !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
        font-size: 12.5px !important;
    }

    .shared-nav-actions {
        display: flex !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 2px 2px !important;
        scrollbar-width: none !important;
    }

    .shared-nav-actions .primary-link,
    .shared-nav-actions .nav-button {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        padding: 0 13px !important;
        border-radius: 17px !important;
        font-size: 12.5px !important;
    }

    .shared-nav-status {
        flex: 0 0 auto !important;
        max-width: 210px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* Production UX pass 20260707 v600 final guard: newer AI cover wins over legacy hero overrides. */
body[data-page="home"] .vue-home-gateway {
    background-position: 58% 42% !important;
    background-size: cover !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-gateway,
body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    background-image:
            linear-gradient(90deg, rgba(251, 254, 254, 0.92) 0%, rgba(251, 254, 254, 0.68) 38%, rgba(251, 254, 254, 0.12) 74%),
            var(--home-gateway-image) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
            linear-gradient(90deg, rgba(7, 10, 16, 0.88) 0%, rgba(7, 10, 16, 0.58) 44%, rgba(7, 10, 16, 0.18) 78%),
            var(--home-gateway-image) !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    min-height: max(660px, calc(100dvh - 66px)) !important;
    grid-template-columns: minmax(390px, 0.9fr) minmax(320px, 480px) !important;
    background-position: 58% 42% !important;
    background-size: cover !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(251, 254, 254, 0.92) 0%, rgba(251, 254, 254, 0.64) 42%, rgba(251, 254, 254, 0.24) 72%),
            url("/animaker/img/generated/ux/default-oc-ai-cover-v5.webp") !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(7, 10, 16, 0.9) 0%, rgba(7, 10, 16, 0.64) 46%, rgba(7, 10, 16, 0.3) 76%),
            url("/animaker/img/generated/ux/default-oc-ai-cover-v5.webp") !important;
}

body[data-page="home"] section.vue-home-hero::before {
    background:
            radial-gradient(circle at 22% 26%, rgba(76, 214, 213, 0.16), transparent 24rem),
            radial-gradient(circle at 74% 18%, rgba(255, 220, 128, 0.14), transparent 24rem) !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 7.8em !important;
    font-size: clamp(54px, 6.6vw, 100px) !important;
    line-height: 0.94 !important;
    color: var(--ink) !important;
}

body[data-page="home"] .vue-home-feature img {
    object-position: 58% 38% !important;
}

body[data-page="studio"] .vue-board-default-art img {
    object-position: 57% 36% !important;
    filter: saturate(1.02) contrast(1.02) !important;
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-gateway {
        background-position: 61% 38% !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: 0 !important;
        padding: 26px 16px 34px !important;
        background-position: 64% 20% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Production UX pass 20260707 v600 final mobile nav guard: visible after all legacy nav rules. */
@media (max-width: 640px) {
    .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 7px !important;
        height: auto !important;
        min-height: 122px !important;
        padding: 8px 12px 10px !important;
        overflow: visible !important;
    }

    .brand {
        width: 100% !important;
        min-height: 32px !important;
        font-size: 19px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .shared-nav-root {
        width: 100% !important;
        flex: none !important;
        order: 2 !important;
        flex-basis: auto !important;
    }

    .shared-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
    }

    .shared-nav-links,
    .shared-nav-actions {
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 !important;
        scrollbar-width: none !important;
    }

    .shared-nav-links a,
    .shared-nav-actions .primary-link,
    .shared-nav-actions .nav-button {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
        font-size: 12.5px !important;
        line-height: 1 !important;
    }

    body[data-page="home"] .topbar {
        height: auto !important;
        min-height: 122px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body[data-page="home"] .brand {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        font-size: 18px !important;
    }

    body[data-page="home"] .shared-nav-root,
    body[data-page="home"] .shared-nav,
    body[data-page="home"] .shared-nav-links,
    body[data-page="home"] .shared-nav-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-page="home"] .shared-nav {
        display: grid !important;
    }

    body[data-page="home"] .shared-nav-links,
    body[data-page="home"] .shared-nav-actions {
        height: 32px !important;
        min-height: 32px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    body[data-page="home"] .shared-nav-actions > .nav-button,
    body[data-page="home"] .shared-nav-actions > .primary-link {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: 32px !important;
    }
}

/* Production UX pass 20260707 v610 final guard: must stay after legacy v600 overrides. */
body[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background-position: 54% 36% !important;
    background-size: cover !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: max(680px, calc(100dvh - 72px)) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(42px, 6.2vw, 92px) clamp(42px, 7.2vw, 142px) !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 0.96fr) minmax(360px, 500px) !important;
    gap: clamp(30px, 5vw, 86px) !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background-position: 56% 38% !important;
    background-size: cover !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(251, 254, 254, 0.94) 0%, rgba(251, 254, 254, 0.7) 35%, rgba(251, 254, 254, 0.24) 67%, rgba(251, 254, 254, 0.08) 100%),
            url("/animaker/img/generated/ux/default-oc-ai-cover-v5.webp") !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(7, 10, 16, 0.92) 0%, rgba(7, 10, 16, 0.67) 42%, rgba(7, 10, 16, 0.28) 74%, rgba(7, 10, 16, 0.18) 100%),
            url("/animaker/img/generated/ux/default-oc-ai-cover-v5.webp") !important;
}

body[data-page="home"] .vue-home-copy {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 8.2em !important;
    font-size: clamp(56px, 6.8vw, 108px) !important;
    line-height: 0.92 !important;
}

body[data-page="home"] .vue-home-feature {
    align-self: center !important;
    justify-self: end !important;
    width: min(500px, 100%) !important;
    min-height: clamp(430px, 56vh, 610px) !important;
    margin: 0 !important;
    border-radius: 30px !important;
}

body[data-page="home"] .vue-home > section:not(.vue-home-hero) {
    width: min(1360px, calc(100vw - 40px)) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body[data-page="studio"].studio-wizard-ready main {
    width: min(1480px, calc(100vw - 32px)) !important;
    max-width: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
    gap: 18px !important;
    align-items: start !important;
}

body[data-page="studio"].studio-wizard-ready .studio-rail {
    grid-column: 1 / -1 !important;
    position: sticky !important;
    top: 72px !important;
    z-index: 4 !important;
}

body[data-page="studio"].studio-wizard-ready :is(.vue-assist-head, .vue-assist-meter, .vue-assist-launch, .vue-assist-mainline, .vue-assist-missing, .vue-assist-prompt, .vue-assist-toolbox) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-card {
    gap: 0 !important;
    padding: 10px !important;
    border-radius: 26px !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 78px !important;
    padding: 13px 14px 13px 18px !important;
    border-radius: 22px !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next .primary-btn {
    width: auto !important;
    min-width: 132px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel:not(.is-active) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
    padding: clamp(16px, 2.2vw, 28px) !important;
    border-radius: 30px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    position: sticky !important;
    top: 160px !important;
    align-self: start !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-readiness-grid, .vue-board-readiness-bar, .vue-board-director-cue, .vue-board-summary, .vue-board-status, .vue-board-dossier-rail, .vue-board-cover-topline, .vue-board-cover-marks) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    padding: 12px !important;
    border-radius: 30px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
    width: 100% !important;
    height: clamp(340px, 44vh, 520px) !important;
    min-height: clamp(340px, 44vh, 520px) !important;
    border-radius: 24px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 50% 30% !important;
}

body[data-page="studio"].studio-wizard-ready :is(
    .studio-workbench,
    .studio-flow,
    .studio-panel,
    .vue-core-dock,
    .vue-visual-dock,
    .vue-image-dock,
    .vue-publish-dock,
    .vue-core-write-now,
    .vue-core-ai-brief,
    .vue-core-ai-brief label,
    .vue-assist-one-next,
    .vue-board-dock,
    .vue-board-info
) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1120px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero,
    body[data-page="studio"].studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding: clamp(30px, 6vw, 58px) clamp(22px, 5vw, 54px) clamp(38px, 7vw, 68px) !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        position: relative !important;
        top: auto !important;
        order: -1 !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        display: grid !important;
        grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-gateway {
        background-position: 58% 28% !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding: 24px 16px 34px !important;
        background-position: 58% 22% !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        max-width: 100% !important;
        font-size: clamp(40px, 13vw, 62px) !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-rail {
        position: relative !important;
        top: auto !important;
    }

    body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    body[data-page="studio"].studio-wizard-ready .vue-assist-one-next .primary-btn {
        width: 100% !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        grid-template-columns: 118px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover,
    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
        width: 118px !important;
        height: 152px !important;
        min-height: 152px !important;
        border-radius: 20px !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
        object-position: 50% 42% !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-empty-head, .vue-board-blueprint, .vue-board-readiness) {
        display: none !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
    }

    body[data-page="studio"].studio-wizard-ready .vue-core-ai-brief-actions,
    body[data-page="studio"].studio-wizard-ready .vue-home-brief-actions {
        grid-template-columns: 1fr !important;
    }

    body[data-page="studio"].studio-wizard-ready .vue-core-ai-brief-chips {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    body[data-page="studio"].studio-wizard-ready .vue-core-ai-brief-chips button {
        min-width: 0 !important;
    }
}

/* Production UX pass 20260707 v611: beat early quick-mode overrides on small screens. */
@media (max-width: 760px) {
    html,
    body,
    body[data-page="home"],
    body[data-page="studio"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body[data-page="home"] .vue-home-gateway {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background-size: cover !important;
        background-position: 50% 38% !important;
    }

    body[data-page="home"] .vue-home-gateway-copy {
        width: min(100%, 340px) !important;
        padding: 0 18px !important;
    }

    body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(42px, 14vw, 64px) !important;
        line-height: 0.94 !important;
        overflow-wrap: anywhere !important;
    }

    body[data-page="home"] main,
    body[data-page="home"] .vue-home,
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: calc(100dvh - 122px) !important;
        padding: 28px 16px 36px !important;
        background-size: cover !important;
        background-position: 50% 34% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready main,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-flow.designer-form,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-core-dock,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-core-write-now,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-core-ai-brief,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-wizard-nav {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready main {
        width: calc(100vw - 16px) !important;
        margin: 0 auto !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-flow.designer-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active {
        padding: 14px !important;
        border-radius: 24px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        display: grid !important;
        grid-template-columns: 124px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
        align-items: stretch !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
        width: 124px !important;
        height: 156px !important;
        min-height: 156px !important;
        border-radius: 20px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 50% 58% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview :is(
        .vue-board-empty-head,
        .vue-board-blueprint,
        .vue-board-readiness,
        .vue-board-summary,
        .vue-board-status,
        .vue-board-actions,
        .vue-board-notice
    ) {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info {
        min-width: 0 !important;
        align-content: center !important;
        gap: 8px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info .eyebrow {
        font-size: 10px !important;
        letter-spacing: 0.08em !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
        font-size: clamp(22px, 8vw, 34px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
        max-width: 100% !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-height: 1.45 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-palette {
        max-width: 100% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-head,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-command,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-grid,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-candidates,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-pathline-drawer {
        display: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-dock {
        display: block !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-now {
        display: grid !important;
        gap: 14px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head p {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-write-head .primary-btn {
        width: 100% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
        padding: 13px !important;
        border-radius: 20px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief label,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: initial !important;
        justify-content: flex-start !important;
        border-radius: 14px !important;
        padding: 9px 10px !important;
        white-space: normal !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button span,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button strong {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Production UX pass 20260707 v620: mobile board reads as a light OC file, not a heavy dark panel. */
@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 252, 248, 0.9) 48%, rgba(255, 248, 214, 0.86) 100%) !important;
        border: 1px solid rgba(33, 183, 197, 0.18) !important;
        box-shadow: 0 18px 46px rgba(31, 52, 64, 0.12) !important;
    }

    body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        background:
                linear-gradient(135deg, rgba(20, 24, 34, 0.94) 0%, rgba(18, 38, 48, 0.92) 52%, rgba(52, 42, 64, 0.88) 100%) !important;
        border-color: rgba(154, 237, 229, 0.2) !important;
        box-shadow: 0 18px 50px rgba(5, 10, 16, 0.36) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info {
        color: #17202c !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info strong {
        color: #17202c !important;
        text-shadow: none !important;
    }

    body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info {
        color: rgba(255, 255, 255, 0.92) !important;
    }

    body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2,
    body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info strong {
        color: rgba(255, 255, 255, 0.94) !important;
        text-shadow: none !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info .eyebrow,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
        color: rgba(23, 32, 44, 0.68) !important;
    }

    body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info .eyebrow,
    body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
        color: rgba(255, 255, 255, 0.68) !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps span,
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags span {
        background: rgba(255, 255, 255, 0.7) !important;
        border-color: rgba(33, 183, 197, 0.16) !important;
        color: #254151 !important;
    }

    body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps span,
    body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags span {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        color: rgba(255, 255, 255, 0.78) !important;
    }

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags span:nth-child(n+4),
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps span:nth-child(n+4) {
        display: none !important;
    }
}

/* Production UX pass 20260707 v670: visual OC seed cards on home, not text-only prompt chips. */
body[data-page="home"] .vue-home-brief {
    display: grid !important;
    gap: 12px !important;
    padding: 14px !important;
}

body[data-page="home"] .vue-home-brief-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
}

body[data-page="home"] .vue-home-brief-chips button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 2px 9px !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 74px !important;
    padding: 8px !important;
    border: 1px solid rgba(28, 43, 62, 0.1) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    color: #18212d !important;
    box-shadow: 0 12px 28px rgba(26, 42, 58, 0.08) !important;
    text-align: left !important;
    cursor: pointer !important;
    transform: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body[data-page="home"] .vue-home-brief-chips button:is(:hover, :focus-visible, .is-active) {
    border-color: rgba(33, 183, 197, 0.45) !important;
    background:
            linear-gradient(135deg, rgba(243, 255, 253, 0.92), rgba(255, 250, 224, 0.82)),
            rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 16px 36px rgba(33, 183, 197, 0.14) !important;
    transform: translateY(-2px) !important;
}

body[data-page="home"] .vue-home-brief-chips button img {
    grid-row: 1 / span 3 !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
    background: #edf8f7 !important;
}

body[data-page="home"] .vue-home-brief-chips button span {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: rgba(137, 238, 231, 0.32) !important;
    color: #087989 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body[data-page="home"] .vue-home-brief-chips button strong,
body[data-page="home"] .vue-home-brief-chips button small {
    min-width: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="home"] .vue-home-brief-chips button strong {
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

body[data-page="home"] .vue-home-brief-chips button small {
    color: rgba(24, 33, 45, 0.6) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body[data-page="home"] .vue-home-feature[href*="home-brief"] {
    border-color: rgba(33, 183, 197, 0.28) !important;
    box-shadow: 0 26px 70px rgba(22, 53, 69, 0.2) !important;
}

body[data-page="home"] .vue-home-feature[href*="home-brief"] .vue-home-feature-body span {
    color: #8ef0ea !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-feature[href*="home-brief"] .vue-home-feature-body span {
    color: #08818d !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-chips button {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(11, 15, 23, 0.72) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-chips button:is(:hover, :focus-visible, .is-active) {
    border-color: rgba(137, 238, 231, 0.38) !important;
    background:
            linear-gradient(135deg, rgba(23, 56, 65, 0.68), rgba(61, 50, 74, 0.58)),
            rgba(11, 15, 23, 0.86) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-chips button small {
    color: rgba(255, 255, 255, 0.62) !important;
}

@media (max-width: 1120px) {
    body[data-page="home"] .vue-home-brief-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    body[data-page="home"] .vue-home-brief {
        padding: 11px !important;
        border-radius: 20px !important;
    }

    body[data-page="home"] .vue-home-brief-chips {
        display: flex !important;
        gap: 8px !important;
        margin: 0 -2px !important;
        padding: 2px 2px 8px !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
    }

    body[data-page="home"] .vue-home-brief-chips button {
        flex: 0 0 220px !important;
        scroll-snap-align: start !important;
    }
}

/* Major UX pass 20260708 v700: cinematic entry, lighter surfaces, balanced day/night. */
body.animaker-theme-day,
body:not(.animaker-theme-night) {
    --ink: #161b25;
    --text: #2f3747;
    --muted: #647084;
    --line: rgba(26, 38, 56, 0.11);
    --paper: #f7fafb;
    --panel: rgba(255, 255, 255, 0.86);
    --shadow: 0 20px 58px rgba(31, 47, 68, 0.11);
    color: var(--text);
    background:
            radial-gradient(circle at 10% 5%, rgba(103, 221, 220, 0.14), transparent 34rem),
            radial-gradient(circle at 92% 8%, rgba(255, 218, 113, 0.16), transparent 30rem),
            linear-gradient(180deg, #fbfdfd 0%, #f4f8fa 48%, #f9f7f2 100%) !important;
}

body.animaker-theme-night {
    --ink: #f7f9ff;
    --text: #e8ecf6;
    --muted: #b8c0d0;
    --line: rgba(236, 243, 255, 0.14);
    --paper: #121824;
    --panel: rgba(25, 32, 45, 0.82);
    --shadow: 0 20px 58px rgba(0, 0, 0, 0.3);
    color: var(--text);
    background:
            radial-gradient(circle at 8% 4%, rgba(74, 210, 218, 0.16), transparent 34rem),
            radial-gradient(circle at 86% 10%, rgba(255, 205, 113, 0.11), transparent 30rem),
            linear-gradient(180deg, #111722 0%, #151c29 50%, #111824 100%) !important;
}

body.animaker-theme-night :is(
    .topbar,
    .shared-nav,
    .page-title,
    .empty-state,
    .modal,
    .auth-card,
    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-creation-card,
    .vue-home-starter-card,
    .vue-home-work-card,
    .vue-home-ip-card,
    .vue-home-feed-card,
    .vue-home-empty-band,
    .vue-home-list a,
    .vue-home-creator-list a,
    .vue-home-template-list a,
    .vue-home-post-list article
) {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
            var(--panel) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-day :is(
    .topbar,
    .shared-nav,
    .page-title,
    .empty-state,
    .modal,
    .auth-card,
    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-creation-card,
    .vue-home-starter-card,
    .vue-home-work-card,
    .vue-home-ip-card,
    .vue-home-feed-card,
    .vue-home-empty-band,
    .vue-home-list a,
    .vue-home-creator-list a,
    .vue-home-template-list a,
    .vue-home-post-list article
),
body:not(.animaker-theme-night) :is(
    .topbar,
    .shared-nav,
    .page-title,
    .empty-state,
    .modal,
    .auth-card,
    .vue-home-metrics a,
    .vue-home-next,
    .vue-home-creation-card,
    .vue-home-starter-card,
    .vue-home-work-card,
    .vue-home-ip-card,
    .vue-home-feed-card,
    .vue-home-empty-band,
    .vue-home-list a,
    .vue-home-creator-list a,
    .vue-home-template-list a,
    .vue-home-post-list article
) {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 253, 0.84)),
            var(--panel) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
}

body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) !important;
    align-items: end !important;
    gap: clamp(22px, 5vw, 74px) !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    padding: clamp(28px, 5vw, 78px) !important;
    overflow: hidden !important;
    color: #f9fbff !important;
    border-radius: 0 !important;
    background-image:
            linear-gradient(90deg, rgba(9, 14, 24, 0.82) 0%, rgba(9, 14, 24, 0.56) 40%, rgba(9, 14, 24, 0.12) 82%),
            var(--home-gateway-image) !important;
    background-position: center !important;
    background-size: cover !important;
    cursor: pointer !important;
}

body[data-page="home"] .vue-home-gateway::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 28%),
            radial-gradient(circle at 17% 22%, rgba(113, 235, 230, 0.22), transparent 24rem),
            radial-gradient(circle at 82% 16%, rgba(255, 207, 116, 0.14), transparent 28rem) !important;
}

body[data-page="home"] .vue-home-gateway::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 0.2 !important;
    background-image:
            linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
    background-size: 52px 52px !important;
    mask-image: linear-gradient(90deg, #000 0%, transparent 70%) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-gateway,
body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    color: #121824 !important;
    background-image:
            linear-gradient(90deg, rgba(251, 254, 254, 0.94) 0%, rgba(251, 254, 254, 0.68) 39%, rgba(251, 254, 254, 0.1) 82%),
            var(--home-gateway-image) !important;
}

body[data-page="home"] .vue-home-gateway-copy {
    position: relative !important;
    z-index: 2 !important;
    width: min(780px, 100%) !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-gateway-copy > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(16px) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-gateway-copy > span,
body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway-copy > span {
    color: rgba(18, 24, 36, 0.72) !important;
    border-color: rgba(18, 24, 36, 0.13) !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

body[data-page="home"] .vue-home-gateway-copy h1 {
    display: grid !important;
    gap: 0.02em !important;
    margin: 18px 0 0 !important;
    color: inherit !important;
    font-size: clamp(62px, 12vw, 150px) !important;
    line-height: 0.86 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 18px 54px rgba(0, 0, 0, 0.24) !important;
}

body[data-page="home"] .vue-home-gateway-copy p {
    width: min(620px, 100%) !important;
    margin: 22px 0 0 !important;
    color: rgba(249, 251, 255, 0.82) !important;
    font-size: clamp(17px, 1.8vw, 23px) !important;
    font-weight: 850 !important;
    line-height: 1.62 !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-gateway-copy p,
body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway-copy p {
    color: rgba(18, 24, 36, 0.72) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

body[data-page="home"] .vue-home-gateway-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: min(680px, 100%) !important;
    margin-top: 24px !important;
}

body[data-page="home"] .vue-home-gateway-steps em {
    display: grid !important;
    gap: 2px !important;
    min-width: 104px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px) !important;
    font-style: normal !important;
}

body[data-page="home"] .vue-home-gateway-steps strong {
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

body[data-page="home"] .vue-home-gateway-steps small {
    color: rgba(249, 251, 255, 0.64) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-gateway-steps em,
body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway-steps em {
    border-color: rgba(18, 24, 36, 0.12) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-gateway-steps small,
body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway-steps small {
    color: rgba(18, 24, 36, 0.58) !important;
}

body[data-page="home"] .vue-home-gateway-cue {
    position: relative !important;
    z-index: 2 !important;
    justify-self: end !important;
    align-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.86) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(16px) !important;
}

body[data-page="home"] .vue-home-gateway-cue i {
    width: 32px !important;
    height: 1px !important;
    background: currentColor !important;
}

body.animaker-theme-day[data-page="home"] .vue-home-gateway-cue,
body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway-cue {
    color: rgba(18, 24, 36, 0.72) !important;
    border-color: rgba(18, 24, 36, 0.12) !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    min-height: clamp(620px, 82dvh, 760px) !important;
    padding: clamp(38px, 5vw, 78px) clamp(28px, 6.4vw, 122px) !important;
    grid-template-columns: minmax(380px, 0.98fr) minmax(340px, 480px) !important;
    gap: clamp(26px, 4.6vw, 76px) !important;
    background-position: 58% 42% !important;
    background-size: cover !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(251, 254, 254, 0.92) 0%, rgba(251, 254, 254, 0.66) 40%, rgba(251, 254, 254, 0.18) 78%),
            var(--home-hero-image) !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(13, 18, 30, 0.88) 0%, rgba(13, 18, 30, 0.58) 44%, rgba(13, 18, 30, 0.2) 82%),
            var(--home-hero-image) !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 7.6em !important;
    font-size: clamp(50px, 6.1vw, 98px) !important;
}

body[data-page="home"] .vue-home-feature {
    border-radius: 28px !important;
    backdrop-filter: blur(18px) !important;
}

@media (max-width: 860px) {
    body[data-page="home"] .vue-home-gateway {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: end !important;
        padding: 28px 18px !important;
        background-position: 64% 42% !important;
    }

    body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(52px, 17vw, 82px) !important;
    }

    body[data-page="home"] .vue-home-gateway-cue {
        justify-self: start !important;
        margin-top: 18px !important;
    }

    body[data-page="home"] .vue-home-gateway-steps {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-page="home"] .vue-home-gateway-steps em {
        min-width: 0 !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: 0 !important;
        padding: 28px 16px 36px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        background-position: 62% 28% !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(42px, 13vw, 62px) !important;
    }
}

/* v701 guard: keep the entered home hero full-bleed across desktop resolutions. */
body[data-page="home"] {
    overflow-x: hidden !important;
}

body[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: max(680px, calc(100dvh - 72px)) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 860px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: 100vw !important;
        min-height: auto !important;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
        border-radius: 0 !important;
    }
}

/* v720 studio lite: one clear start, calmer day/night, advanced controls folded away. */
body.animaker-theme-day,
body:not(.animaker-theme-night) {
    --paper: #f7faf9;
    --panel: rgba(255, 255, 255, 0.88);
    --panel-soft: rgba(255, 255, 255, 0.68);
    --ink: #151a23;
    --text: #2f3746;
    --muted: #697386;
    --line: rgba(26, 35, 50, 0.11);
    --accent: #26bbc5;
    --accent-2: #ffe176;
    --accent-warm: #ff8f70;
    --shadow: 0 18px 50px rgba(28, 45, 65, 0.1);
}

body.animaker-theme-night {
    --paper: #151d29;
    --panel: rgba(29, 38, 53, 0.78);
    --panel-soft: rgba(255, 255, 255, 0.07);
    --ink: #f7faff;
    --text: #e7edf8;
    --muted: #b7c1cf;
    --line: rgba(235, 244, 255, 0.13);
    --accent: #5bdde2;
    --accent-2: #ffe38a;
    --accent-warm: #ff9b83;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

body[data-page="studio"] {
    overflow-x: hidden;
    background:
            radial-gradient(circle at 12% 4%, rgba(91, 221, 226, 0.15), transparent 30rem),
            radial-gradient(circle at 90% 7%, rgba(255, 225, 118, 0.14), transparent 28rem),
            linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 92%, #ffffff 8%) 100%) !important;
}

body.animaker-theme-night[data-page="studio"] {
    background:
            radial-gradient(circle at 12% 4%, rgba(91, 221, 226, 0.13), transparent 30rem),
            radial-gradient(circle at 90% 7%, rgba(255, 225, 118, 0.08), transparent 28rem),
            linear-gradient(180deg, #151d29 0%, #182132 100%) !important;
}

body[data-page="studio"] main {
    width: min(1280px, calc(100vw - 44px)) !important;
    margin: 0 auto !important;
    padding: 26px 0 72px !important;
}

body[data-page="studio"] .studio-hero-title {
    display: grid !important;
    gap: 18px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"] .studio-hero-title > h1 {
    max-width: 920px !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: clamp(38px, 5.4vw, 74px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}

body[data-page="studio"] .studio-hero-title > p:not(.eyebrow) {
    max-width: 760px !important;
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
}

body[data-page="studio"] .studio-theme-switch {
    position: absolute !important;
    top: 92px !important;
    right: max(22px, calc((100vw - 1280px) / 2)) !important;
    z-index: 4 !important;
    width: auto !important;
    padding: 4px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--panel) !important;
    box-shadow: none !important;
}

body[data-page="studio"] .studio-theme-switch button {
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body[data-page="studio"] .studio-theme-switch button.active {
    color: var(--ink) !important;
    background: linear-gradient(135deg, rgba(91, 221, 226, 0.28), rgba(255, 225, 118, 0.46)) !important;
}

body[data-page="studio"] .vue-route-hero-shell {
    display: block !important;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-dock {
    margin: 0 !important;
}

body[data-page="studio"] .vue-route-hero-shell :is(
    .vue-route-next,
    .vue-route-focus-card,
    .vue-route-progress,
    .vue-route-cover-strip,
    .vue-route-director-tasks
) {
    display: none !important;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director {
    padding: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    color: var(--text) !important;
    background: var(--panel-soft) !important;
    box-shadow: none !important;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-main {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 360px) !important;
    gap: 14px !important;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-copy h2 {
    font-size: clamp(22px, 2.6vw, 34px) !important;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-copy p,
body[data-page="studio"] .vue-route-hero-shell .vue-route-director-step small,
body[data-page="studio"] .vue-route-hero-shell .vue-route-director-focus p {
    color: var(--muted) !important;
}

body[data-page="studio"] .vue-route-hero-shell .vue-route-director-actions {
    margin-top: 12px !important;
}

body[data-page="studio"] .studio-launchpad-lite {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr) !important;
    gap: clamp(18px, 3vw, 32px) !important;
    align-items: stretch !important;
    margin-top: 6px !important;
    padding: clamp(18px, 3vw, 34px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 30px !important;
    background:
            linear-gradient(135deg, rgba(91, 221, 226, 0.12), transparent 48%),
            linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night[data-page="studio"] .studio-launchpad-lite {
    background:
            linear-gradient(135deg, rgba(91, 221, 226, 0.12), transparent 48%),
            rgba(24, 32, 45, 0.78) !important;
}

body[data-page="studio"] .studio-launchpad-copy {
    display: grid !important;
    align-content: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}

body[data-page="studio"] .studio-launchpad-copy > span,
body[data-page="studio"] .studio-launchpad-preview span,
body[data-page="studio"] .studio-advanced-start > summary span {
    color: var(--accent) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body[data-page="studio"] .studio-launchpad-copy h2 {
    margin: 0 !important;
    color: var(--ink) !important;
    font-size: clamp(28px, 4vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

body[data-page="studio"] .studio-launchpad-copy p {
    max-width: 640px !important;
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
}

body[data-page="studio"] .studio-launchpad-copy label {
    display: grid !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

body[data-page="studio"] .studio-launchpad-copy label > span {
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

body[data-page="studio"] .studio-launchpad-copy textarea {
    width: 100% !important;
    min-height: 112px !important;
    resize: vertical !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    padding: 16px 18px !important;
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

body.animaker-theme-night[data-page="studio"] .studio-launchpad-copy textarea {
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page="studio"] .studio-launchpad-actions,
body[data-page="studio"] .studio-launchpad-examples {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body[data-page="studio"] .studio-launchpad-examples button {
    min-height: 36px !important;
    padding: 0 13px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.54) !important;
    font-weight: 900 !important;
}

body.animaker-theme-night[data-page="studio"] .studio-launchpad-examples button {
    background: rgba(255, 255, 255, 0.07) !important;
}

body[data-page="studio"] .studio-launchpad-preview {
    position: relative !important;
    display: grid !important;
    min-height: 420px !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    background: #f2faf9 !important;
}

body[data-page="studio"] .studio-launchpad-preview img {
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    object-fit: cover !important;
}

body[data-page="studio"] .studio-launchpad-preview div {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    left: 14px !important;
    display: grid !important;
    gap: 4px !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    background: rgba(18, 25, 36, 0.56) !important;
    backdrop-filter: blur(16px) !important;
}

body[data-page="studio"] .studio-launchpad-preview strong {
    color: #ffffff !important;
    font-size: 18px !important;
}

body[data-page="studio"] .studio-launchpad-preview small {
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
}

body[data-page="studio"] .studio-hero-beats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body[data-page="studio"] .studio-hero-beats article {
    padding: 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    color: var(--text) !important;
    background: var(--panel-soft) !important;
    box-shadow: none !important;
}

body[data-page="studio"] .studio-hero-beats article small {
    color: var(--muted) !important;
}

body[data-page="studio"] .studio-advanced-start {
    margin: 18px 0 28px !important;
}

body[data-page="studio"] .studio-advanced-start > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    color: var(--text) !important;
    background: var(--panel-soft) !important;
    cursor: pointer !important;
    list-style: none !important;
}

body[data-page="studio"] .studio-advanced-start > summary::-webkit-details-marker {
    display: none !important;
}

body[data-page="studio"] .studio-advanced-start > summary strong {
    color: var(--ink) !important;
    font-size: 15px !important;
}

body[data-page="studio"] .studio-advanced-start > summary::after {
    content: "展开" !important;
    flex: 0 0 auto !important;
    min-width: 58px !important;
    text-align: center !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

body[data-page="studio"] .studio-advanced-start[open] > summary::after {
    content: "收起" !important;
}

body[data-page="studio"] .studio-mode-hub {
    margin-top: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"] :is(.studio-mode-copy, .studio-quick-panel) {
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    color: var(--text) !important;
    background: var(--panel) !important;
    box-shadow: none !important;
}

body[data-page="studio"] .studio-mode-proof {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(172px, 0.18fr) minmax(0, 1fr) minmax(300px, 0.28fr) !important;
    gap: 18px !important;
    align-items: start !important;
    margin-top: 22px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-rail {
    position: sticky !important;
    top: 86px !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-card {
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: var(--panel-soft) !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-head {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    display: grid !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(91, 221, 226, 0.12) !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next strong,
body[data-page="studio"].studio-wizard-ready .vue-assist-mainline strong,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(h2, h3, strong) {
    color: var(--ink) !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next p,
body[data-page="studio"].studio-wizard-ready .vue-assist-mainline small,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active p,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active small {
    color: var(--muted) !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-groups {
    display: grid !important;
    gap: 8px !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-groups button {
    min-height: 52px !important;
    padding: 9px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.48) !important;
}

body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-assist-groups button {
    background: rgba(255, 255, 255, 0.06) !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-groups button.active {
    border-color: rgba(38, 187, 197, 0.48) !important;
    background: rgba(91, 221, 226, 0.16) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
    padding: clamp(16px, 2.4vw, 28px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 28px !important;
    background: var(--panel) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel:not(.is-active) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    position: sticky !important;
    top: 86px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 28px !important;
    background: var(--panel) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
    border-radius: 24px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    filter: saturate(1.02) contrast(1.02) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-wizard-nav {
    position: sticky !important;
    bottom: 18px !important;
    z-index: 8 !important;
    margin-top: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(18px) !important;
}

body[data-page="studio"] :is(.primary-btn, .primary-link) {
    border-radius: 999px !important;
}

body[data-page="studio"] :is(.secondary-btn, .nav-button) {
    border-radius: 999px !important;
}

@media (max-width: 980px) {
    body[data-page="studio"] main {
        width: min(100% - 28px, 760px) !important;
        padding-top: 18px !important;
    }

    body[data-page="studio"] .studio-theme-switch {
        position: static !important;
        width: max-content !important;
    }

    body[data-page="studio"] .studio-launchpad-lite,
    body[data-page="studio"].studio-wizard-ready .studio-workbench,
    body[data-page="studio"] .vue-route-hero-shell .vue-route-director-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"] .studio-launchpad-preview,
    body[data-page="studio"] .studio-launchpad-preview img {
        min-height: 320px !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-rail,
    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        position: static !important;
    }

    body[data-page="studio"] .studio-hero-beats {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* v740 global community lite: lighter gallery/templates/archives, coherent day and night. */
body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"], [data-page="feed"], [data-page="me"], [data-page="work"], [data-page="user"]) {
    overflow-x: hidden;
    background:
            radial-gradient(circle at 10% 0%, rgba(91, 221, 226, 0.14), transparent 32rem),
            radial-gradient(circle at 88% 4%, rgba(255, 225, 118, 0.13), transparent 28rem),
            linear-gradient(180deg, #f8fbfb 0%, #f3f7f8 52%, #f9f7f1 100%) !important;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"], [data-page="feed"], [data-page="me"], [data-page="work"], [data-page="user"]) {
    background:
            radial-gradient(circle at 10% 0%, rgba(91, 221, 226, 0.12), transparent 32rem),
            radial-gradient(circle at 88% 4%, rgba(255, 225, 118, 0.08), transparent 28rem),
            linear-gradient(180deg, #151d29 0%, #182130 54%, #151c28 100%) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) main {
    width: min(1280px, calc(100vw - 44px)) !important;
    margin: 0 auto !important;
    padding: 0 0 78px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(.vue-gallery, .vue-templates, .vue-characters) {
    gap: 22px !important;
    padding: 28px 0 74px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-hero,
    .vue-templates-hero,
    .vue-characters-hero
) {
    overflow: hidden !important;
    align-items: stretch !important;
    border: 1px solid var(--line) !important;
    border-radius: 30px !important;
    padding: clamp(18px, 3vw, 34px) !important;
    color: var(--text) !important;
    background:
            linear-gradient(135deg, rgba(91, 221, 226, 0.13), transparent 48%),
            linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-hero,
    .vue-templates-hero,
    .vue-characters-hero
) {
    background:
            linear-gradient(135deg, rgba(91, 221, 226, 0.11), transparent 48%),
            rgba(24, 32, 45, 0.78) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-copy,
    .vue-templates-copy,
    .vue-characters-copy
) {
    align-content: center !important;
    gap: 14px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-copy h1,
    .vue-templates-copy h1,
    .vue-characters-copy h1
) {
    max-width: 880px !important;
    color: var(--ink) !important;
    font-size: clamp(38px, 5.2vw, 72px) !important;
    line-height: 1.03 !important;
    letter-spacing: 0 !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-copy p,
    .vue-templates-copy p,
    .vue-characters-copy p
) {
    max-width: 720px !important;
    color: var(--muted) !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-feature,
    .vue-template-feature,
    .vue-character-feature
) {
    min-height: 360px !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    background: #101827 !important;
    box-shadow: none !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-feature img,
    .vue-template-feature img,
    .vue-character-feature img
) {
    min-height: 360px !important;
    filter: saturate(1.03) contrast(1.02) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-stats,
    .vue-templates-stats,
    .vue-characters-stats
) {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 10px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-stats article,
    .vue-templates-stats article,
    .vue-characters-stats article
) {
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    background: var(--panel-soft) !important;
    box-shadow: none !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-pulse,
    .vue-gallery-mission,
    .vue-gallery-creator-radar,
    .vue-gallery-cocreate,
    .vue-gallery-workspace,
    .vue-template-starter,
    .vue-template-match,
    .vue-template-social,
    .vue-template-guide,
    .vue-template-rank,
    .vue-template-workspace,
    .vue-character-queue,
    .vue-character-dimensions,
    .vue-character-nextline,
    .vue-character-pathfinder,
    .vue-character-world-lab,
    .vue-character-more,
    .vue-template-more
) {
    border: 1px solid var(--line) !important;
    border-radius: 28px !important;
    color: var(--text) !important;
    background:
            linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-pulse,
    .vue-gallery-mission,
    .vue-gallery-creator-radar,
    .vue-gallery-cocreate,
    .vue-gallery-workspace,
    .vue-template-starter,
    .vue-template-match,
    .vue-template-social,
    .vue-template-guide,
    .vue-template-rank,
    .vue-template-workspace,
    .vue-character-queue,
    .vue-character-dimensions,
    .vue-character-nextline,
    .vue-character-pathfinder,
    .vue-character-world-lab,
    .vue-character-more,
    .vue-template-more
) {
    background: rgba(24, 32, 45, 0.76) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-pulse-copy h2,
    .vue-gallery-mission-copy h2,
    .vue-gallery-radar-copy h2,
    .vue-gallery-cocreate-copy h2,
    .vue-gallery-discovery-head h2,
    .vue-template-starter-copy h2,
    .vue-template-match-copy h2,
    .vue-template-social-head h2,
    .vue-template-guide-head h2,
    .vue-character-queue-copy h2,
    .vue-character-dimensions-copy h2,
    .vue-character-nextline h2,
    .vue-character-pathfinder h2,
    .section-heading h2
) {
    color: var(--ink) !important;
    letter-spacing: 0 !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-pulse-copy p,
    .vue-gallery-pulse-copy small,
    .vue-gallery-mission-copy p,
    .vue-gallery-mission-copy small,
    .vue-gallery-radar-copy p,
    .vue-gallery-radar-copy small,
    .vue-gallery-cocreate-copy p,
    .vue-gallery-cocreate-copy small,
    .vue-gallery-discovery-head p,
    .vue-template-starter-copy p,
    .vue-template-starter-copy small,
    .vue-template-match-copy p,
    .vue-template-match-copy small,
    .vue-template-social-head p,
    .vue-template-guide-head p,
    .vue-character-queue-copy p,
    .vue-character-dimensions-copy p,
    .section-heading p
) {
    color: var(--muted) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission-grid article,
    .vue-gallery-radar-card,
    .vue-gallery-cocreate-grid article,
    .vue-gallery-ip,
    .vue-gallery-feed-card,
    .vue-work-card,
    .vue-template-starter-grid article,
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-template-mini,
    .vue-template-card,
    .vue-character-queue-grid article,
    .vue-character-card,
    .vue-character-dimension-card,
    .vue-hero-boundary-card
) {
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    color: var(--text) !important;
    background: var(--panel-soft) !important;
    box-shadow: none !important;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission-grid article,
    .vue-gallery-radar-card,
    .vue-gallery-cocreate-grid article,
    .vue-gallery-ip,
    .vue-gallery-feed-card,
    .vue-work-card,
    .vue-template-starter-grid article,
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-template-mini,
    .vue-template-card,
    .vue-character-queue-grid article,
    .vue-character-card,
    .vue-character-dimension-card,
    .vue-hero-boundary-card
) {
    background: rgba(255, 255, 255, 0.065) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-work-grid,
    .vue-template-grid,
    .vue-character-grid,
    .vue-gallery-ip-grid,
    .vue-gallery-feed,
    .vue-template-rank-grid,
    .vue-character-queue-grid
) {
    gap: 14px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-filter,
    .vue-template-filter,
    .vue-character-filter
) {
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    background: var(--panel) !important;
    box-shadow: none !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(input, select, textarea) {
    border-color: var(--line) !important;
    border-radius: 18px !important;
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(input, select, textarea) {
    background: rgba(255, 255, 255, 0.08) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-chip-row,
    .vue-template-chip-row,
    .vue-character-chip-row
) :is(button, a, span),
body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .vue-gallery-sort-row button,
    .vue-template-chip,
    .vue-character-chip,
    .pill
) {
    border-radius: 999px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
    .primary-btn,
    .primary-link,
    .secondary-btn
) {
    border-radius: 999px !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) img {
    background: color-mix(in srgb, var(--panel-soft) 72%, var(--paper) 28%) !important;
}

@media (max-width: 920px) {
    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) main {
        width: min(100% - 28px, 760px) !important;
    }

    body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
        .vue-gallery-hero,
        .vue-templates-hero,
        .vue-characters-hero,
        .vue-gallery-pulse,
        .vue-gallery-mission,
        .vue-gallery-creator-radar,
        .vue-gallery-cocreate,
        .vue-template-starter,
        .vue-template-match,
        .vue-template-social,
        .vue-character-queue,
        .vue-character-dimensions
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Flow CTA pass 20260708: every inspiration card can hand a clear task to Studio. */
body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) .vue-card-quickstart {
    border-color: rgba(58, 187, 196, 0.34) !important;
    background:
            linear-gradient(135deg, rgba(58, 187, 196, 0.16), rgba(255, 209, 102, 0.18)),
            rgba(255, 255, 255, 0.9) !important;
    color: #18222f !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08) !important;
}

body.animaker-theme-night:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) .vue-card-quickstart {
    background:
            linear-gradient(135deg, rgba(74, 215, 222, 0.22), rgba(255, 209, 102, 0.16)),
            rgba(22, 26, 38, 0.92) !important;
    color: #f8fbff !important;
}

body[data-page="gallery"] .vue-gallery-work-grid .social-row,
body[data-page="templates"] .vue-template-card .social-row,
body[data-page="characters"] .vue-character-card .card-foot {
    align-items: center !important;
    flex-wrap: wrap !important;
}

body[data-page="studio"] .studio-arrival-note[hidden] {
    display: none !important;
}

body[data-page="studio"] .studio-arrival-note {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    margin: 14px auto 18px !important;
    padding: 13px 14px !important;
    max-width: 1040px !important;
    border: 1px solid rgba(58, 187, 196, 0.26) !important;
    border-radius: 22px !important;
    background:
            linear-gradient(135deg, rgba(58, 187, 196, 0.14), transparent 42%),
            rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08) !important;
    text-align: left !important;
}

body[data-page="studio"] .studio-arrival-note > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #101827 !important;
    color: #ffe06a !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

body[data-page="studio"] .studio-arrival-note div {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

body[data-page="studio"] .studio-arrival-note strong {
    color: var(--ink) !important;
    font-size: clamp(16px, 1.7vw, 20px) !important;
    line-height: 1.25 !important;
}

body[data-page="studio"] .studio-arrival-note small {
    color: var(--muted) !important;
    line-height: 1.55 !important;
}

body[data-page="studio"].studio-theme-night .studio-arrival-note,
body.animaker-theme-night[data-page="studio"] .studio-arrival-note {
    border-color: rgba(99, 221, 226, 0.28) !important;
    background:
            linear-gradient(135deg, rgba(91, 221, 226, 0.14), transparent 46%),
            rgba(21, 25, 36, 0.86) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24) !important;
}

body[data-page="studio"].studio-theme-night .studio-arrival-note > span,
body.animaker-theme-night[data-page="studio"] .studio-arrival-note > span {
    background: rgba(255, 224, 106, 0.13) !important;
    color: #ffe06a !important;
}

@media (max-width: 760px) {
    body[data-page="studio"] .studio-arrival-note {
        grid-template-columns: 1fr !important;
        justify-items: start !important;
    }

    body[data-page="studio"] .studio-arrival-note .secondary-btn {
        width: 100% !important;
    }
}

/* v800 home light mode: keep first-run creation focused, community content on demand. */
body[data-page="home"] .vue-home-community-more {
    width: min(1180px, 90vw) !important;
    margin: 0 auto !important;
    padding: clamp(16px, 2vw, 24px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 30px !important;
    color: var(--text) !important;
    background:
            linear-gradient(135deg, rgba(91, 221, 226, 0.1), transparent 46%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 253, 0.76)) !important;
    box-shadow: 0 20px 58px rgba(28, 39, 56, 0.08) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-community-more {
    background:
            linear-gradient(135deg, rgba(91, 221, 226, 0.1), transparent 46%),
            rgba(24, 32, 45, 0.74) !important;
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.26) !important;
}

body[data-page="home"] .vue-home-community-more summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
    list-style: none !important;
    cursor: pointer !important;
}

body[data-page="home"] .vue-home-community-more summary::-webkit-details-marker {
    display: none !important;
}

body[data-page="home"] .vue-home-community-more summary h2 {
    margin: 4px 0 6px !important;
    color: var(--ink) !important;
    font-size: clamp(26px, 3.2vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
}

body[data-page="home"] .vue-home-community-more summary p:not(.eyebrow) {
    max-width: 720px !important;
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
}

body[data-page="home"] .vue-home-community-more summary > strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #101827 !important;
    background: linear-gradient(135deg, #9ef2e9, #ffe47a) !important;
    box-shadow: 0 12px 28px rgba(20, 35, 56, 0.12) !important;
    white-space: nowrap !important;
}

body[data-page="home"] .vue-home-community-more[open] summary {
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--line) !important;
}

body[data-page="home"] .vue-home-community-more > section,
body[data-page="home"] .vue-home-community-more > .section-heading {
    width: 100% !important;
    margin: 18px 0 0 !important;
}

body[data-page="home"] .vue-home-community-more .vue-home-metrics {
    margin-top: 20px !important;
}

body[data-page="home"] .vue-home-community-more .vue-home-metrics a {
    min-height: 230px !important;
    border-radius: 24px !important;
}

body[data-page="home"] .vue-home-community-more .vue-home-metrics img {
    height: 98px !important;
    object-position: center 24% !important;
}

body[data-page="home"] .vue-home-community-more .section-heading {
    padding-top: 8px !important;
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-community-more {
        width: min(100% - 28px, 760px) !important;
        padding: 14px !important;
        border-radius: 24px !important;
    }

    body[data-page="home"] .vue-home-community-more summary {
        grid-template-columns: 1fr !important;
    }

    body[data-page="home"] .vue-home-community-more summary > strong {
        width: 100% !important;
    }
}

/* Production UX pass 20260708 v900: studio AI-first start with a real OC board preview. */
body[data-page="studio"] .vue-route-hero-shell {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .vue-route-hero-shell {
    display: block !important;
}

body[data-page="studio"] .studio-hero-title.page-title {
    gap: clamp(14px, 2vw, 22px) !important;
}

body[data-page="studio"] .studio-hero-title.page-title > h1 {
    max-width: 820px !important;
    font-size: clamp(38px, 5vw, 68px) !important;
    text-wrap: balance !important;
}

body[data-page="studio"] .studio-hero-title.page-title > p:not(.eyebrow) {
    max-width: 740px !important;
    font-size: 16px !important;
}

body[data-page="studio"] .studio-launchpad-lite {
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.74fr) !important;
    align-items: stretch !important;
    gap: clamp(18px, 2.8vw, 34px) !important;
    padding: clamp(18px, 3.2vw, 38px) !important;
    border-radius: 34px !important;
    background:
            radial-gradient(circle at 8% 10%, rgba(91, 221, 226, 0.18), transparent 28rem),
            linear-gradient(135deg, rgba(255, 244, 199, 0.72), rgba(255, 255, 255, 0.84) 48%, rgba(221, 248, 248, 0.72)) !important;
}

body.animaker-theme-night[data-page="studio"] .studio-launchpad-lite,
body[data-page="studio"].studio-theme-night .studio-launchpad-lite {
    background:
            radial-gradient(circle at 8% 10%, rgba(91, 221, 226, 0.18), transparent 28rem),
            linear-gradient(135deg, rgba(25, 31, 43, 0.92), rgba(19, 23, 34, 0.88) 54%, rgba(18, 34, 42, 0.86)) !important;
}

body[data-page="studio"] .studio-launchpad-copy {
    align-content: start !important;
    padding-block: clamp(2px, 1vw, 14px) !important;
}

body[data-page="studio"] .studio-launchpad-copy > span {
    width: max-content !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #0d6f76 !important;
    background: rgba(91, 221, 226, 0.18) !important;
}

body.animaker-theme-night[data-page="studio"] .studio-launchpad-copy > span,
body[data-page="studio"].studio-theme-night .studio-launchpad-copy > span {
    color: #9cf4ef !important;
    background: rgba(91, 221, 226, 0.16) !important;
}

body[data-page="studio"] .studio-launchpad-copy h2 {
    max-width: 12.5em !important;
    font-size: clamp(34px, 4.8vw, 62px) !important;
    text-wrap: balance !important;
}

body[data-page="studio"] .studio-launchpad-copy textarea {
    min-height: 126px !important;
    border-radius: 24px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

body[data-page="studio"] .studio-launch-mini-path {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body[data-page="studio"] .studio-launch-mini-path span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(24, 40, 56, 0.08) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.animaker-theme-night[data-page="studio"] .studio-launch-mini-path span,
body[data-page="studio"].studio-theme-night .studio-launch-mini-path span {
    border-color: rgba(238, 243, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

body[data-page="studio"] .studio-launch-mini-path b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    color: #101827 !important;
    background: linear-gradient(135deg, #9ef2e9, #ffe47a) !important;
    font-size: 12px !important;
}

body[data-page="studio"] .studio-launchpad-actions {
    align-items: center !important;
}

body[data-page="studio"] .studio-launchpad-actions .primary-btn {
    min-height: 48px !important;
    padding-inline: 22px !important;
    box-shadow: 0 14px 28px rgba(33, 183, 197, 0.18) !important;
}

body[data-page="studio"] .studio-launchpad-examples {
    align-items: center !important;
    padding-top: 2px !important;
}

body[data-page="studio"] .studio-launchpad-examples > span {
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body[data-page="studio"] .studio-launchpad-examples button {
    min-height: 34px !important;
    border-radius: 999px !important;
}

body[data-page="studio"] .studio-launchpad-preview {
    min-height: 470px !important;
    border-radius: 30px !important;
    background: #eef8fb !important;
}

body[data-page="studio"] .studio-launchpad-preview img {
    min-height: 470px !important;
    object-position: 50% 44% !important;
}

body[data-page="studio"] .studio-launchpad-preview div {
    right: 16px !important;
    bottom: 16px !important;
    left: 16px !important;
    border-radius: 22px !important;
    background: rgba(13, 18, 27, 0.64) !important;
}

body[data-page="studio"] .studio-hero-beats {
    display: none !important;
}

body[data-page="studio"] .studio-advanced-start {
    margin: 14px 0 24px !important;
}

body[data-page="studio"] .studio-advanced-start > summary {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

body.animaker-theme-night[data-page="studio"] .studio-advanced-start > summary,
body[data-page="studio"].studio-theme-night .studio-advanced-start > summary {
    background: rgba(255, 255, 255, 0.07) !important;
}

body[data-page="studio"] .studio-advanced-start > summary strong {
    color: var(--muted) !important;
    font-size: 13px !important;
}

body[data-page="studio"] .studio-advanced-start > summary::after {
    min-width: 48px !important;
    color: #0d6f76 !important;
}

body[data-page="studio"].studio-theme-night .studio-hero-title.page-title,
body.animaker-theme-night[data-page="studio"] .studio-hero-title.page-title {
    background:
            linear-gradient(90deg, rgba(8, 11, 18, 0.88), rgba(8, 11, 18, 0.44) 56%, rgba(8, 11, 18, 0.12)),
            url("/animaker/img/generated/ux/studio-ai-oc-board-v900.webp") center / cover no-repeat !important;
}

body[data-page="studio"] .vue-board-default-art img,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 50% 36% !important;
}

body[data-page="studio"] .vue-board-empty-head {
    border-radius: 22px !important;
}

@media (max-width: 980px) {
    body[data-page="studio"] .studio-launchpad-lite {
        grid-template-columns: minmax(0, 1fr) !important;
        border-radius: 28px !important;
    }

    body[data-page="studio"] .studio-launchpad-preview,
    body[data-page="studio"] .studio-launchpad-preview img {
        min-height: 340px !important;
    }

    body[data-page="studio"] .studio-advanced-start > summary {
        width: 100% !important;
    }
}

@media (max-width: 680px) {
    body[data-page="studio"] .studio-launch-mini-path {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"] .studio-launchpad-actions .primary-btn,
    body[data-page="studio"] .studio-launchpad-actions .secondary-btn {
        width: 100% !important;
    }

    body[data-page="studio"] .studio-launchpad-preview,
    body[data-page="studio"] .studio-launchpad-preview img {
        min-height: 280px !important;
    }

    body[data-page="studio"] .studio-launchpad-preview div {
        position: static !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: rgba(13, 18, 27, 0.78) !important;
    }
}

/* Production UX pass 20260708 v900.1: keep returning drafts on the same AI-first path. */
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-now {
    display: grid !important;
    gap: 14px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-head span {
    display: inline-flex !important;
    width: max-content !important;
    min-height: 28px !important;
    align-items: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #0d6f76 !important;
    background: rgba(91, 221, 226, 0.16) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-head strong {
    max-width: 12.5em !important;
    color: var(--ink) !important;
    font-size: clamp(28px, 4vw, 48px) !important;
    line-height: 1.08 !important;
    text-wrap: balance !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-head p {
    max-width: 660px !important;
    color: var(--muted) !important;
    line-height: 1.7 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-head > .primary-btn {
    min-height: 48px !important;
    padding-inline: 20px !important;
    white-space: nowrap !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 210px) !important;
    gap: 12px !important;
    align-items: end !important;
    padding: 16px !important;
    border: 1px solid rgba(24, 40, 56, 0.08) !important;
    border-radius: 24px !important;
    background:
            radial-gradient(circle at 0 0, rgba(91, 221, 226, 0.14), transparent 20rem),
            linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 219, 0.72)) !important;
}

body.animaker-theme-night[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief,
body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    border-color: rgba(238, 243, 255, 0.12) !important;
    background:
            radial-gradient(circle at 0 0, rgba(91, 221, 226, 0.16), transparent 20rem),
            linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief label > span {
    color: #0d6f76 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea {
    min-height: 104px !important;
    border: 1px solid rgba(24, 40, 56, 0.1) !important;
    border-radius: 20px !important;
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

body.animaker-theme-night[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea,
body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea {
    color: #f7fbff !important;
    border-color: rgba(238, 243, 255, 0.14) !important;
    background: rgba(5, 8, 14, 0.54) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 74%, transparent) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions .primary-btn,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions .secondary-btn {
    border-radius: 18px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button {
    border-color: rgba(24, 40, 56, 0.1) !important;
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.68) !important;
}

body.animaker-theme-night[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button,
body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button {
    border-color: rgba(238, 243, 255, 0.12) !important;
    color: rgba(238, 246, 255, 0.86) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-head,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-write-head > .primary-btn {
        width: 100% !important;
    }
}

/* Production UX pass 20260708 v910: home becomes a single clear AI-first OC gateway. */
body[data-page="home"] {
    --home-accent: #26bbc5;
    --home-accent-soft: rgba(38, 187, 197, 0.13);
    --home-warm: #ffe176;
    --home-ink: #111722;
    --home-paper: #f7fbfb;
    overflow-x: hidden !important;
}

body[data-page="home"].home-gateway-open {
    width: 100vw !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

body[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body[data-page="home"] .vue-home-gateway {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 100dvh !important;
    padding: clamp(28px, 6vw, 88px) !important;
    background-image:
            linear-gradient(90deg, rgba(248, 253, 254, 0.96) 0%, rgba(248, 253, 254, 0.78) 36%, rgba(248, 253, 254, 0.28) 70%, rgba(248, 253, 254, 0.1) 100%),
            var(--home-gateway-image) !important;
    background-position: center center !important;
    background-size: cover !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
            linear-gradient(90deg, rgba(10, 15, 25, 0.9) 0%, rgba(10, 15, 25, 0.68) 38%, rgba(10, 15, 25, 0.26) 74%, rgba(10, 15, 25, 0.16) 100%),
            var(--home-gateway-image) !important;
}

body[data-page="home"] .vue-home-gateway::before {
    background:
            radial-gradient(circle at 14% 18%, rgba(38, 187, 197, 0.18), transparent 26rem),
            linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 28%) !important;
}

body[data-page="home"] .vue-home-gateway::after {
    opacity: 0.12 !important;
    background-size: 64px 64px !important;
    mask-image: linear-gradient(90deg, #000 0%, transparent 64%) !important;
}

body[data-page="home"] .vue-home-gateway-copy {
    width: min(860px, 100%) !important;
    color: var(--home-ink) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy {
    color: #f8fbff !important;
}

body[data-page="home"] .vue-home-gateway-copy > span {
    color: #087989 !important;
    border-color: rgba(38, 187, 197, 0.22) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span {
    color: #9ef2e9 !important;
    border-color: rgba(158, 242, 233, 0.22) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.8em !important;
    margin-top: 18px !important;
    font-size: clamp(58px, 9.6vw, 132px) !important;
    line-height: 0.9 !important;
    text-shadow: none !important;
}

body[data-page="home"] .vue-home-gateway-copy p {
    width: min(680px, 100%) !important;
    color: rgba(17, 23, 34, 0.72) !important;
    font-size: clamp(17px, 1.7vw, 22px) !important;
    font-weight: 800 !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy p {
    color: rgba(248, 251, 255, 0.72) !important;
}

body[data-page="home"] .vue-home-gateway-steps {
    width: min(720px, 100%) !important;
    gap: 10px !important;
}

body[data-page="home"] .vue-home-gateway-steps em {
    min-width: 128px !important;
    border-color: rgba(18, 24, 36, 0.11) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 16px 38px rgba(30, 48, 66, 0.08) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-steps em {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(13, 18, 27, 0.58) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24) !important;
}

body[data-page="home"] .vue-home-gateway-steps small {
    color: rgba(17, 23, 34, 0.58) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-steps small {
    color: rgba(248, 251, 255, 0.62) !important;
}

body[data-page="home"] .vue-home-gateway-cue {
    position: absolute !important;
    right: clamp(18px, 4vw, 64px) !important;
    bottom: clamp(18px, 4vw, 58px) !important;
    color: #101827 !important;
    border-color: rgba(16, 24, 39, 0.1) !important;
    background: linear-gradient(135deg, #d9fff8, #fff08c) !important;
    box-shadow: 0 18px 42px rgba(35, 58, 76, 0.14) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    color: #101827 !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: max(720px, calc(100dvh - 72px)) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(34px, 5vw, 76px) clamp(20px, 6vw, 116px) !important;
    grid-template-columns: minmax(430px, 0.9fr) minmax(320px, 440px) !important;
    align-items: center !important;
    gap: clamp(22px, 5vw, 82px) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-position: center center !important;
    background-size: cover !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(248, 253, 254, 0.97) 0%, rgba(248, 253, 254, 0.82) 36%, rgba(248, 253, 254, 0.36) 70%, rgba(248, 253, 254, 0.16) 100%),
            var(--home-hero-image) !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(10, 15, 25, 0.92) 0%, rgba(10, 15, 25, 0.72) 38%, rgba(10, 15, 25, 0.3) 74%, rgba(10, 15, 25, 0.18) 100%),
            var(--home-hero-image) !important;
}

body[data-page="home"] .vue-home-copy {
    align-self: center !important;
    width: min(760px, 100%) !important;
}

body[data-page="home"] .vue-home-copy .eyebrow {
    width: fit-content !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(38, 187, 197, 0.22) !important;
    border-radius: 999px !important;
    color: #087989 !important;
    background: rgba(255, 255, 255, 0.68) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-copy .eyebrow {
    color: #9ef2e9 !important;
    border-color: rgba(158, 242, 233, 0.22) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 8.2em !important;
    font-size: clamp(48px, 6.4vw, 94px) !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
}

body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 620px !important;
    color: rgba(17, 23, 34, 0.68) !important;
    font-size: 17px !important;
    line-height: 1.78 !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    color: rgba(248, 251, 255, 0.72) !important;
}

body[data-page="home"] .vue-home-brief {
    width: min(660px, 100%) !important;
    padding: 16px !important;
    border: 1px solid rgba(26, 38, 56, 0.1) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 24px 64px rgba(30, 48, 66, 0.12) !important;
    backdrop-filter: blur(18px) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(12, 18, 29, 0.68) !important;
    box-shadow: 0 26px 72px rgba(0, 0, 0, 0.3) !important;
}

body[data-page="home"] .vue-home-brief label > span {
    color: #087989 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

body[data-page="home"] .vue-home-brief textarea {
    min-height: 96px !important;
    border-radius: 22px !important;
    color: #111722 !important;
    background: rgba(255, 255, 255, 0.86) !important;
    resize: vertical !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief textarea {
    color: #f8fbff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page="home"] .vue-home-brief-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body[data-page="home"] .vue-home-brief-actions .primary-link,
body[data-page="home"] .vue-home-actions .primary-link {
    background: linear-gradient(135deg, #d7fff8, #ffe977) !important;
    color: #101827 !important;
    box-shadow: 0 16px 32px rgba(38, 187, 197, 0.18) !important;
}

body[data-page="home"] .vue-home-brief-actions .secondary-btn,
body[data-page="home"] .vue-home-actions .secondary-btn {
    color: #253243 !important;
    border-color: rgba(26, 38, 56, 0.12) !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-actions .secondary-btn,
body.animaker-theme-night[data-page="home"] .vue-home-actions .secondary-btn {
    color: rgba(248, 251, 255, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page="home"] .vue-home-brief-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-page="home"] .vue-home-brief-chips button {
    min-height: 70px !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-actions {
    margin-top: 16px !important;
}

body[data-page="home"] .vue-home-actions a:nth-child(3) {
    opacity: 0.72 !important;
}

body[data-page="home"] .vue-home-flow,
body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

body[data-page="home"] .vue-home-feature {
    align-self: center !important;
    width: min(440px, 100%) !important;
    min-height: 500px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    background: rgba(15, 21, 31, 0.66) !important;
    box-shadow: 0 30px 86px rgba(20, 35, 56, 0.22) !important;
    transform: none !important;
}

body[data-page="home"] .vue-home-feature img {
    height: 300px !important;
    object-fit: cover !important;
    object-position: 55% 34% !important;
}

body[data-page="home"] .vue-home-feature-body {
    padding: 22px !important;
}

body[data-page="home"] .vue-home-feature-body strong {
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.08 !important;
}

body[data-page="home"] .vue-home-feature-body p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

body[data-page="home"] .vue-home-creation,
body[data-page="home"] .vue-home-next,
body[data-page="home"] .vue-home-community-more {
    border-radius: 32px !important;
}

body[data-page="home"] .vue-home-creation {
    margin-top: clamp(32px, 5vw, 70px) !important;
}

body[data-page="home"] .vue-home-creation-head h2,
body[data-page="home"] .vue-home-next h2,
body[data-page="home"] .vue-home-community-more summary h2 {
    font-size: clamp(26px, 3vw, 40px) !important;
    letter-spacing: 0 !important;
}

@media (min-width: 1320px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        grid-template-columns: minmax(520px, 0.86fr) minmax(360px, 460px) !important;
    }
}

@media (max-width: 980px) {
    body[data-page="home"] .vue-home-gateway {
        align-items: end !important;
        background-position: 60% center !important;
    }

    body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(48px, 14vw, 84px) !important;
    }

    body[data-page="home"] .vue-home-gateway-cue {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        justify-self: start !important;
        margin-top: 18px !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 28px 16px 38px !important;
        background-position: 58% top !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        min-height: auto !important;
    }

    body[data-page="home"] .vue-home-feature img {
        height: clamp(220px, 48vw, 360px) !important;
    }
}

@media (max-width: 680px) {
    body[data-page="home"] .vue-home-gateway {
        padding: 24px 16px !important;
        background-position: 58% center !important;
    }

    body[data-page="home"] .vue-home-gateway-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-page="home"] .vue-home-gateway-steps em {
        min-width: 0 !important;
        border-radius: 16px !important;
    }

    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(42px, 13vw, 62px) !important;
    }

    body[data-page="home"] .vue-home-brief {
        padding: 12px !important;
        border-radius: 24px !important;
    }

    body[data-page="home"] .vue-home-brief-actions .primary-link,
    body[data-page="home"] .vue-home-brief-actions .secondary-btn,
    body[data-page="home"] .vue-home-actions a {
        width: 100% !important;
    }

    body[data-page="home"] .vue-home-brief-chips {
        display: flex !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
    }

    body[data-page="home"] .vue-home-brief-chips button {
        flex: 0 0 226px !important;
    }

body[data-page="home"] .vue-home-feature-body {
        padding: 18px !important;
    }
}

/* Production UX pass 20260708 v930: global low-barrier OC flow and softer day/night themes. */
body.animaker-theme-day,
body:not(.animaker-theme-night) {
    --paper: #f8fcfc;
    --paper-tint: #edf7f8;
    --panel: rgba(255, 255, 255, 0.86);
    --panel-soft: rgba(255, 255, 255, 0.62);
    --ink: #121925;
    --text: #2d3848;
    --muted: #667387;
    --line: rgba(24, 38, 56, 0.1);
    --accent: #23b8c3;
    --accent-2: #ffe476;
    --accent-warm: #ff9b7d;
    --shadow: 0 18px 48px rgba(28, 44, 62, 0.09);
    background:
            radial-gradient(circle at 12% 0%, rgba(35, 184, 195, 0.11), transparent 30rem),
            radial-gradient(circle at 88% 2%, rgba(255, 228, 118, 0.12), transparent 28rem),
            linear-gradient(180deg, #fbfefe 0%, var(--paper-tint) 54%, #fbfaf5 100%) !important;
}

body.animaker-theme-night {
    --paper: #202b3a;
    --paper-tint: #243246;
    --panel: rgba(45, 58, 78, 0.78);
    --panel-soft: rgba(255, 255, 255, 0.08);
    --ink: #f6f9ff;
    --text: #e4ebf6;
    --muted: #bac6d6;
    --line: rgba(235, 244, 255, 0.14);
    --accent: #76e3e8;
    --accent-2: #ffea93;
    --accent-warm: #ffad96;
    --shadow: 0 18px 44px rgba(7, 13, 22, 0.24);
    background:
            radial-gradient(circle at 10% 0%, rgba(118, 227, 232, 0.11), transparent 30rem),
            radial-gradient(circle at 88% 2%, rgba(255, 234, 147, 0.08), transparent 28rem),
            linear-gradient(180deg, #202b3a 0%, #243246 52%, #202b3a 100%) !important;
}

body[data-page] {
    color: var(--text) !important;
}

body[data-page] :is(.shared-nav, .topbar) {
    border: 1px solid var(--line) !important;
    border-radius: 0 0 24px 24px !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel) 90%, transparent) !important;
    box-shadow: 0 12px 32px rgba(20, 33, 48, 0.08) !important;
    backdrop-filter: blur(18px) !important;
}

body.animaker-theme-night[data-page] :is(.shared-nav, .topbar) {
    box-shadow: 0 12px 32px rgba(5, 10, 18, 0.18) !important;
}

body[data-page] .shared-nav-links a,
body[data-page] .shared-nav-actions .nav-button {
    min-height: 38px !important;
    border-radius: 999px !important;
    color: var(--muted) !important;
    font-weight: 900 !important;
}

body[data-page] .shared-nav-links a.active {
    color: var(--ink) !important;
    background: linear-gradient(135deg, rgba(118, 227, 232, 0.24), rgba(255, 234, 147, 0.36)) !important;
}

body.animaker-theme-night[data-page] .shared-nav-links a.active {
    background: rgba(255, 255, 255, 0.12) !important;
}

body[data-page] .shared-nav-actions .primary-link,
body[data-page] :is(.primary-link, .primary-btn) {
    border-radius: 999px !important;
    color: #101827 !important;
    background: linear-gradient(135deg, #d7fff8, #ffe978) !important;
    box-shadow: 0 12px 28px rgba(35, 184, 195, 0.16) !important;
}

body[data-page] :is(.secondary-btn, .nav-button, button.secondary-btn) {
    border-color: var(--line) !important;
    border-radius: 999px !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel) 76%, transparent) !important;
}

body[data-page] :is(input, textarea, select) {
    border-color: var(--line) !important;
    border-radius: 18px !important;
    color: var(--ink) !important;
    background: color-mix(in srgb, #ffffff 78%, var(--paper) 22%) !important;
}

body.animaker-theme-night[data-page] :is(input, textarea, select) {
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"], [data-page="studio"], [data-page="feed"], [data-page="me"], [data-page="work"], [data-page="user"], [data-page="login"]) {
    background:
            radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 30rem),
            radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 28rem),
            linear-gradient(180deg, var(--paper) 0%, var(--paper-tint) 100%) !important;
}

body:is([data-page="templates"], [data-page="characters"]) main {
    width: min(1180px, calc(100vw - 44px)) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
    gap: 18px !important;
    padding-top: 22px !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.62fr) !important;
    gap: clamp(16px, 3vw, 32px) !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: clamp(18px, 3vw, 34px) !important;
    border-radius: 32px !important;
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 48%),
            linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy, .vue-characters-copy) {
    align-content: center !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
    max-width: 9em !important;
    font-size: clamp(36px, 5vw, 64px) !important;
    line-height: 1.05 !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy > p:not(.eyebrow), .vue-characters-copy > p:not(.eyebrow)) {
    max-width: 640px !important;
    font-size: 16px !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
    display: none !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command {
    display: grid !important;
    align-content: start !important;
    gap: 14px !important;
    padding: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel) 86%, transparent) !important;
    box-shadow: none !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
    width: 88px !important;
    height: 88px !important;
    border-radius: 22px !important;
    object-fit: cover !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor h2 {
    margin: 2px 0 4px !important;
    color: var(--ink) !important;
    font-size: clamp(22px, 2.6vw, 32px) !important;
    line-height: 1.08 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor p {
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1.55 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
    min-height: 58px !important;
    padding: 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    color: var(--text) !important;
    background: var(--panel-soft) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track span {
    color: var(--accent) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-track strong {
    display: block !important;
    margin-top: 4px !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions > span {
    flex: 1 1 180px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-library-boundary, .vue-template-more, .vue-character-more) {
    border: 1px solid var(--line) !important;
    border-radius: 28px !important;
    color: var(--text) !important;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
    box-shadow: var(--shadow) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-library-boundary) {
    padding: clamp(16px, 2.4vw, 28px) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more, .vue-character-more) {
    overflow: hidden !important;
    padding: 0 !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary, .vue-character-more > summary) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: clamp(16px, 2.4vw, 24px) !important;
    list-style: none !important;
    cursor: pointer !important;
}

body[data-page="templates"] .vue-template-more > summary::-webkit-details-marker,
body[data-page="characters"] .vue-character-more > summary::-webkit-details-marker {
    display: none !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary h2, .vue-character-more > summary h2) {
    margin: 4px 0 6px !important;
    color: var(--ink) !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.14 !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary p:not(.eyebrow), .vue-character-more > summary p:not(.eyebrow)) {
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--muted) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary > strong, .vue-character-more > summary > strong) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: #101827 !important;
    background: linear-gradient(135deg, #d7fff8, #ffe978) !important;
    white-space: nowrap !important;
}

body[data-page="templates"] .vue-template-more > summary::after,
body[data-page="characters"] .vue-character-more > summary::after {
    content: "展开" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 74px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--panel) 82%, transparent) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

body[data-page="templates"] .vue-template-more[open] > summary::after,
body[data-page="characters"] .vue-character-more[open] > summary::after {
    content: "收起" !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more[open] > summary, .vue-character-more[open] > summary) {
    border-bottom: 1px solid var(--line) !important;
}

body[data-page="templates"] .vue-template-more[open] > :not(summary),
body[data-page="characters"] .vue-character-more[open] > :not(summary) {
    margin: 18px !important;
}

body[data-page="templates"] .vue-template-more[open] > .vue-template-workspace,
body[data-page="characters"] .vue-character-more[open] > .vue-character-workspace {
    display: grid !important;
    gap: 18px !important;
}

body[data-page="templates"] .vue-template-more:not([open]) + *,
body[data-page="characters"] .vue-character-more:not([open]) + * {
    margin-top: 0 !important;
}

body[data-page="gallery"] :is(.vue-gallery-feature, .vue-gallery-stats) {
    border-radius: 26px !important;
}

body[data-page="gallery"] .vue-gallery-hero {
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.62fr) !important;
    min-height: 0 !important;
}

body[data-page="gallery"] .vue-gallery-copy h1 {
    max-width: 9.2em !important;
    font-size: clamp(38px, 5vw, 68px) !important;
}

body[data-page="studio"] .studio-launchpad-lite {
    border-radius: 32px !important;
}

body[data-page="studio"] .studio-launchpad-preview,
body[data-page="studio"] .studio-launchpad-preview img {
    min-height: 390px !important;
}

@media (max-width: 980px) {
    body:is([data-page="templates"], [data-page="characters"]) main,
    body[data-page="gallery"] main {
        width: min(100% - 28px, 760px) !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero),
    body[data-page="gallery"] .vue-gallery-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        border-radius: 26px !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary, .vue-character-more > summary) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="templates"] .vue-template-more > summary::after,
    body[data-page="characters"] .vue-character-more > summary::after,
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary > strong, .vue-character-more > summary > strong) {
        width: 100% !important;
    }
}

@media (max-width: 680px) {
    body[data-page] :is(.shared-nav, .topbar) {
        border-radius: 0 0 20px 20px !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) main,
    body[data-page="gallery"] main {
        width: min(100% - 22px, 620px) !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
        width: 72px !important;
        height: 72px !important;
        border-radius: 18px !important;
    }

body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions :is(.primary-link, .secondary-btn),
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-actions, .vue-characters-actions) :is(.primary-link, .secondary-btn) {
        width: 100% !important;
    }
}

/* 20260708-site-lite-v940: keep the creation command readable on every viewport. */
body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-command-step {
    min-height: 58px !important;
}

/* 20260708-oc-lite-v1000: one big lightweight pass for AI-first OC creation. */
body.animaker-theme-day,
body:not(.animaker-theme-night) {
    --paper: #f7fbfa;
    --paper-tint: #eef7f5;
    --panel: rgba(255, 255, 255, 0.88);
    --panel-solid: #ffffff;
    --panel-soft: rgba(255, 255, 255, 0.64);
    --ink: #111827;
    --text: #2f3b4a;
    --muted: #667586;
    --line: rgba(31, 45, 61, 0.11);
    --accent: #16aab7;
    --accent-2: #f5d85e;
    --accent-warm: #f48b72;
    --shadow: 0 18px 46px rgba(31, 45, 61, 0.1);
    color: var(--text) !important;
    background:
            radial-gradient(circle at 14% 0%, rgba(22, 170, 183, 0.1), transparent 34rem),
            radial-gradient(circle at 92% 4%, rgba(245, 216, 94, 0.13), transparent 32rem),
            linear-gradient(180deg, #fcfefd 0%, var(--paper-tint) 58%, #fffdf6 100%) !important;
}

body.animaker-theme-night {
    --paper: #263240;
    --paper-tint: #2b3949;
    --panel: rgba(48, 62, 80, 0.84);
    --panel-solid: #303e50;
    --panel-soft: rgba(255, 255, 255, 0.09);
    --ink: #f7fbff;
    --text: #e6eef8;
    --muted: #bdcad8;
    --line: rgba(235, 245, 255, 0.15);
    --accent: #79dce2;
    --accent-2: #ffe88a;
    --accent-warm: #ffad99;
    --shadow: 0 18px 46px rgba(4, 9, 16, 0.22);
    color: var(--text) !important;
    background:
            radial-gradient(circle at 14% 0%, rgba(121, 220, 226, 0.11), transparent 34rem),
            radial-gradient(circle at 92% 4%, rgba(255, 232, 138, 0.08), transparent 32rem),
            linear-gradient(180deg, #263240 0%, #2b3949 56%, #263240 100%) !important;
}

body[data-page] :is(.shared-nav, .topbar) {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
}

body[data-page] :is(.shared-nav a, .topbar a, .nav a) {
    color: var(--muted) !important;
}

body[data-page] :is(.shared-nav a.active, .topbar a.active, .nav a.active) {
    color: var(--ink) !important;
}

body.animaker-theme-night[data-page] :is(
    .empty-state,
    .auth-card,
    .modal,
    .vue-admin-console,
    .vue-gallery-hero,
    .vue-templates-hero,
    .vue-characters-hero,
    .vue-feed-hero,
    .vue-me-shell,
    .vue-work-detail,
    .vue-export-shell,
    .vue-home-creation,
    .vue-home-next,
    .vue-home-community-more,
    .vue-template-more,
    .vue-character-more,
    .vue-library-boundary,
    .studio-launchpad-lite
) {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 68%, transparent)) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night[data-page] :is(
    h1,
    h2,
    h3,
    .page-title,
    .section-heading h2,
    .vue-home-copy h1,
    .vue-templates-copy h1,
    .vue-characters-copy h1,
    .vue-gallery-copy h1
) {
    color: var(--ink) !important;
}

body.animaker-theme-night[data-page] :is(p, small, span, label, .muted) {
    border-color: var(--line);
}

body[data-page] :is(.primary-link, .primary-btn) {
    border-radius: 999px !important;
    color: #111827 !important;
    background: linear-gradient(135deg, #d8fff7, #ffec7b) !important;
}

body[data-page] :is(.secondary-btn, .nav-button, button.secondary-btn) {
    border-radius: 999px !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 76%, transparent) !important;
}

body[data-page] :is(input, textarea, select) {
    border-color: var(--line) !important;
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--panel-solid) 86%, transparent) !important;
}

body[data-page="home"] {
    --home-hero-v1000: url("/animaker/img/generated/home-ai-oc-studio-v2.webp");
}

body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
}

body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    display: grid !important;
    place-items: center start !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    padding: clamp(26px, 6vw, 88px) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    color: #101827 !important;
    background-image:
            linear-gradient(90deg, rgba(250, 254, 253, 0.96) 0%, rgba(250, 254, 253, 0.8) 38%, rgba(250, 254, 253, 0.32) 70%, rgba(250, 254, 253, 0.12) 100%),
            var(--home-gateway-image),
            var(--home-hero-v1000) !important;
    background-position: center !important;
    background-size: cover !important;
    cursor: pointer !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    color: #f8fbff !important;
    background-image:
            linear-gradient(90deg, rgba(31, 42, 55, 0.86) 0%, rgba(31, 42, 55, 0.62) 42%, rgba(31, 42, 55, 0.28) 72%, rgba(31, 42, 55, 0.16) 100%),
            var(--home-gateway-image),
            var(--home-hero-v1000) !important;
}

body[data-page="home"] .vue-home-gateway::before {
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 32%),
            radial-gradient(circle at 20% 18%, rgba(22, 170, 183, 0.16), transparent 24rem),
            radial-gradient(circle at 72% 12%, rgba(245, 216, 94, 0.1), transparent 26rem) !important;
}

body[data-page="home"] .vue-home-gateway::after {
    opacity: 0 !important;
}

body[data-page="home"] .vue-home-gateway-copy {
    width: min(760px, 100%) !important;
    max-width: none !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-gateway-copy > span {
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(16, 24, 39, 0.12) !important;
    border-radius: 999px !important;
    color: #0e7f8b !important;
    background: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    backdrop-filter: blur(16px) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span {
    color: #a5f4ed !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

body[data-page="home"] .vue-home-gateway-copy h1 {
    display: grid !important;
    gap: 0 !important;
    max-width: 7.8em !important;
    margin: 18px 0 0 !important;
    color: inherit !important;
    font-size: clamp(58px, 10.6vw, 142px) !important;
    line-height: 0.88 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body[data-page="home"] .vue-home-gateway-copy p {
    width: min(600px, 100%) !important;
    margin: 20px 0 0 !important;
    color: rgba(16, 24, 39, 0.7) !important;
    font-size: clamp(16px, 1.7vw, 21px) !important;
    font-weight: 820 !important;
    line-height: 1.7 !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy p {
    color: rgba(248, 251, 255, 0.74) !important;
}

body[data-page="home"] .vue-home-gateway-steps {
    display: none !important;
}

body[data-page="home"] .vue-home-gateway-cue {
    position: fixed !important;
    right: clamp(18px, 4vw, 64px) !important;
    bottom: clamp(18px, 4vw, 58px) !important;
    z-index: 2 !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(16, 24, 39, 0.11) !important;
    border-radius: 999px !important;
    color: #111827 !important;
    background: linear-gradient(135deg, #d8fff7, #ffec7b) !important;
    box-shadow: 0 18px 42px rgba(31, 45, 61, 0.16) !important;
    backdrop-filter: blur(14px) !important;
}

body[data-page="home"] .vue-home-gateway-cue i {
    width: 26px !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: max(680px, calc(100dvh - 72px)) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(30px, 5vw, 72px) clamp(18px, 6vw, 110px) !important;
    grid-template-columns: minmax(420px, 0.95fr) minmax(330px, 430px) !important;
    gap: clamp(22px, 4vw, 70px) !important;
    align-items: center !important;
    border-radius: 0 !important;
    background-image:
            linear-gradient(90deg, rgba(250, 254, 253, 0.96) 0%, rgba(250, 254, 253, 0.83) 42%, rgba(250, 254, 253, 0.42) 72%, rgba(250, 254, 253, 0.18) 100%),
            var(--home-hero-image),
            var(--home-hero-v1000) !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: none !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(31, 42, 55, 0.9) 0%, rgba(31, 42, 55, 0.7) 43%, rgba(31, 42, 55, 0.36) 72%, rgba(31, 42, 55, 0.2) 100%),
            var(--home-hero-image),
            var(--home-hero-v1000) !important;
}

body[data-page="home"] .vue-home-copy {
    width: min(700px, 100%) !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 9em !important;
    font-size: clamp(42px, 5.4vw, 82px) !important;
    line-height: 1.02 !important;
    text-wrap: balance !important;
}

body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 590px !important;
    color: color-mix(in srgb, var(--text) 78%, transparent) !important;
}

body[data-page="home"] .vue-home-brief {
    width: min(640px, 100%) !important;
    padding: 14px !important;
    border-color: var(--line) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--panel-solid) 78%, transparent) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="home"] .vue-home-brief textarea {
    min-height: 86px !important;
}

body[data-page="home"] .vue-home-brief-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body[data-page="home"] .vue-home-brief-chips button {
    min-height: 64px !important;
    padding: 8px !important;
    border-color: var(--line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
}

body[data-page="home"] .vue-home-brief-chips button img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
}

body[data-page="home"] .vue-home-actions {
    gap: 10px !important;
}

body[data-page="home"] .vue-home-feature {
    width: min(430px, 100%) !important;
    min-height: 478px !important;
    border-color: var(--line) !important;
    border-radius: 30px !important;
    background: color-mix(in srgb, var(--panel-solid) 80%, transparent) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-feature {
    background: rgba(33, 43, 57, 0.78) !important;
}

body[data-page="home"] .vue-home-feature img {
    height: 292px !important;
    object-position: 54% 38% !important;
}

body[data-page="home"] .vue-home-feature-body {
    color: var(--text) !important;
    background: transparent !important;
}

body[data-page="home"] .vue-home-feature-body strong {
    color: var(--ink) !important;
}

body[data-page="home"] .vue-home-creation,
body[data-page="home"] .vue-home-next,
body[data-page="home"] .vue-home-community-more {
    width: min(1180px, calc(100vw - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 1px solid var(--line) !important;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="home"] .vue-home-creation {
    margin-top: clamp(28px, 4vw, 58px) !important;
}

body[data-page="home"] .vue-home-creation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body[data-page="home"] .vue-home-creation-card {
    border-color: var(--line) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-starter-strip {
    gap: 12px !important;
}

body[data-page="home"] .vue-home-starter-card {
    border-color: var(--line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-community-more summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

@media (max-width: 980px) {
    body[data-page="home"] .vue-home-gateway {
        place-items: end start !important;
        padding: 24px 18px !important;
        background-position: 60% center !important;
    }

    body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(46px, 14vw, 82px) !important;
    }

    body[data-page="home"] .vue-home-gateway-cue {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 20px !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 28px 16px 36px !important;
        background-position: 58% top !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        min-height: 0 !important;
    }

    body[data-page="home"] .vue-home-creation-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 680px) {
    body[data-page="home"] .vue-home-gateway-copy h1,
    body[data-page="home"] .vue-home-copy h1 {
        word-break: keep-all !important;
    }

    body[data-page="home"] .vue-home-brief-chips {
        display: flex !important;
        overflow-x: auto !important;
    }

    body[data-page="home"] .vue-home-brief-chips button {
        flex: 0 0 224px !important;
    }

    body[data-page="home"] .vue-home-actions a,
    body[data-page="home"] .vue-home-brief-actions :is(.primary-link, .secondary-btn) {
        width: 100% !important;
    }

    body[data-page="home"] .vue-home-community-more summary {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708-oc-flow-v1300 hard final: keep the generated OC entry above older home overrides. */
html body[data-page="home"] .vue-home-gateway {
    z-index: 5000 !important;
    place-items: center start !important;
    background-image:
            linear-gradient(90deg, rgba(249, 253, 253, 0.84) 0%, rgba(249, 253, 253, 0.62) 34%, rgba(249, 253, 253, 0.22) 68%, rgba(249, 253, 253, 0.04) 100%),
            var(--home-gateway-image),
            url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp") !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
            linear-gradient(90deg, rgba(30, 41, 55, 0.88) 0%, rgba(30, 41, 55, 0.62) 38%, rgba(30, 41, 55, 0.24) 72%, rgba(30, 41, 55, 0.08) 100%),
            var(--home-gateway-image),
            url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp") !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    justify-self: start !important;
    align-items: start !important;
    max-width: min(720px, 100%) !important;
    margin-left: clamp(0px, 6vw, 84px) !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    justify-self: start !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.6em !important;
    font-size: clamp(58px, 8.6vw, 118px) !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 520px !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    max-width: 590px !important;
}

html body[data-page="home"] .vue-home-gateway-steps em {
    min-width: 124px !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(249, 253, 253, 0.9) 0%, rgba(249, 253, 253, 0.74) 39%, rgba(249, 253, 253, 0.28) 72%, rgba(249, 253, 253, 0.08) 100%),
            var(--home-hero-image),
            url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp") !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(30, 41, 55, 0.9) 0%, rgba(30, 41, 55, 0.68) 42%, rgba(30, 41, 55, 0.3) 74%, rgba(30, 41, 55, 0.14) 100%),
            var(--home-hero-image),
            url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp") !important;
}

html body[data-page="home"] .vue-home-feature {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 84%, transparent) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-feature {
    background: rgba(31, 42, 56, 0.76) !important;
}

html body[data-page="studio"] .studio-launchpad-preview img,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 48% 34% !important;
}

@media (max-width: 980px) {
    html body[data-page="home"] .vue-home-gateway {
        place-items: end start !important;
        background-position: 56% center !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        margin-left: 0 !important;
    }
}

@media (max-width: 680px) {
    html body[data-page="home"] .vue-home-gateway-steps {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-gateway-steps em {
        min-width: 0 !important;
        padding: 8px !important;
    }
}

/* 20260708-oc-flow-v1320.2 hard final: override older library-page rails that appear later in the file. */
html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 12px !important;
    overflow: hidden !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-anchor {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-anchor img {
    width: 100% !important;
    height: clamp(188px, 24vw, 260px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 20px !important;
    object-fit: cover !important;
    object-position: 50% 22% !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-track {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-track a {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 58px !important;
    align-items: center !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
}

@media (max-width: 980px) {
    html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708-oc-flow-v1320: make template/archive starts feel like one clear AI action, not a dense library. */
html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
    width: min(1160px, calc(100vw - 36px)) !important;
}

html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
    grid-template-columns: minmax(0, 0.98fr) minmax(300px, 400px) !important;
    align-items: stretch !important;
    min-height: min(720px, calc(100vh - 118px)) !important;
    padding: clamp(18px, 3.4vw, 42px) !important;
}

html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy, .vue-characters-copy) {
    display: grid !important;
    align-content: center !important;
    gap: 12px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
    max-width: 10.6em !important;
    margin: 0 !important;
    font-size: clamp(38px, 5.6vw, 78px) !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-light-start {
    margin: 10px 0 6px !important;
    padding: clamp(12px, 1.8vw, 18px) !important;
    border-radius: 24px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-light-start textarea {
    min-height: 82px !important;
    border-radius: 18px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 16px !important;
    color: var(--oc-air-text) !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 78%, transparent) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button:hover,
html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button:focus-visible {
    transform: translateY(-1px) !important;
    border-color: color-mix(in srgb, var(--oc-air-cyan) 45%, var(--oc-air-line)) !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 92%, var(--oc-air-cyan) 8%) !important;
}

html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-actions, .vue-characters-actions) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 2px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-command, .vue-character-command) {
    display: grid !important;
    align-content: space-between !important;
    min-height: 100% !important;
    padding: clamp(14px, 2vw, 20px) !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
    grid-template-columns: minmax(112px, 0.44fr) minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 14px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
    width: 100% !important;
    min-height: 250px !important;
    max-height: 360px !important;
    border-radius: 20px !important;
    object-fit: cover !important;
    object-position: 50% 28% !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-track {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 78%, transparent) !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
    display: none !important;
}

html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-library-boundary, .vue-template-more, .vue-character-more) {
    margin-top: 14px !important;
}

@media (max-width: 980px) {
    html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
        width: min(100% - 22px, 760px) !important;
    }

    html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: auto !important;
    }

    html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
        grid-template-columns: 100px minmax(0, 1fr) !important;
        align-items: center !important;
    }

    html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
        min-height: 128px !important;
        max-height: 160px !important;
    }

    html body:is([data-page="templates"], [data-page="characters"]) .vue-command-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 620px) {
    html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row {
        display: flex !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
    }

    html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button {
        flex: 0 0 214px !important;
    }

    html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
        font-size: clamp(34px, 11vw, 52px) !important;
    }
}

/* 20260708-oc-flow-v1320.1: turn the right rail into a readable OC anchor card. */
html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-command, .vue-character-command) {
    overflow: hidden !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
    width: 100% !important;
    height: clamp(190px, 26vw, 260px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 20px !important;
    object-fit: cover !important;
    object-position: 50% 22% !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor h2 {
    max-width: 10em !important;
    margin: 0 !important;
    color: var(--oc-air-ink) !important;
    font-size: clamp(26px, 3vw, 38px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor p:not(.eyebrow) {
    margin: 6px 0 0 !important;
    color: var(--oc-air-muted) !important;
    line-height: 1.55 !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-command-track a span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--oc-air-cyan) 34%, white), color-mix(in srgb, var(--oc-air-gold) 40%, white)) !important;
    color: #14212b !important;
    font-weight: 950 !important;
}

@media (max-width: 980px) {
    html body:is([data-page="templates"], [data-page="characters"]) .vue-command-anchor img {
        height: clamp(150px, 42vw, 240px) !important;
    }
}

/* 20260708-oc-flow-v1300: lightweight AI-first OC entry, balanced day/night pages, generated default art. */
body.animaker-theme-day,
body:not(.animaker-theme-night) {
    --ink: #101827;
    --text: #263446;
    --muted: #64748b;
    --paper: #f8fbfb;
    --panel: rgba(255, 255, 255, 0.86);
    --panel-solid: #ffffff;
    --panel-soft: rgba(246, 250, 250, 0.9);
    --line: rgba(24, 34, 48, 0.11);
    --accent: #11a8b8;
    --accent-2: #f7d85d;
    --accent-3: #f28aa1;
    --shadow: 0 20px 54px rgba(31, 45, 61, 0.1);
    color: var(--text) !important;
    background: linear-gradient(180deg, #fbfefd 0%, #f1f8f8 56%, #fffaf2 100%) !important;
}

body.animaker-theme-night {
    --ink: #f7fbff;
    --text: #e6eef8;
    --muted: #b7c4d4;
    --paper: #1f2a38;
    --panel: rgba(42, 55, 73, 0.84);
    --panel-solid: #2a3749;
    --panel-soft: rgba(255, 255, 255, 0.08);
    --line: rgba(235, 245, 255, 0.14);
    --accent: #80dce2;
    --accent-2: #ffe889;
    --accent-3: #ff9eb6;
    --shadow: 0 22px 58px rgba(4, 9, 16, 0.24);
    color: var(--text) !important;
    background: linear-gradient(180deg, #1e2937 0%, #243244 56%, #202b39 100%) !important;
}

body[data-page] :is(.topbar, .shared-nav) {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background: color-mix(in srgb, var(--panel-solid) 78%, transparent) !important;
    box-shadow: 0 12px 34px rgba(18, 28, 40, 0.06) !important;
    backdrop-filter: blur(18px) !important;
}

body.animaker-theme-night[data-page] :is(.topbar, .shared-nav) {
    background: rgba(31, 42, 56, 0.82) !important;
    box-shadow: 0 12px 34px rgba(4, 9, 16, 0.18) !important;
}

body[data-page] :is(.brand, .shared-nav-links a, .nav a, .nav-button) {
    color: var(--muted) !important;
}

body[data-page] :is(.shared-nav-links a.active, .nav a.active, .shared-nav-links a:hover, .nav a:hover, .brand:hover) {
    color: var(--ink) !important;
}

body.animaker-theme-night[data-page] :is(input, textarea, select) {
    color: var(--ink) !important;
    border-color: var(--line) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body[data-page] :is(.primary-link, .primary-btn) {
    color: #101827 !important;
    border: 0 !important;
    background: linear-gradient(135deg, #c9fff7, #ffec7a) !important;
    box-shadow: 0 16px 34px rgba(17, 168, 184, 0.18) !important;
}

body[data-page] :is(.secondary-btn, .nav-button, .theme-toggle-button) {
    border-color: var(--line) !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
}

body[data-page="home"] {
    --home-default-art-v1400: url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp");
    overflow-x: hidden !important;
}

body[data-page="home"].home-gateway-open {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

body[data-page="home"].home-gateway-open .topbar {
    opacity: 0 !important;
    pointer-events: none !important;
}

body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: grid !important;
    place-items: center start !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: clamp(24px, 6vw, 86px) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    color: #101827 !important;
    background-image:
            linear-gradient(90deg, rgba(249, 253, 253, 0.96) 0%, rgba(249, 253, 253, 0.8) 38%, rgba(249, 253, 253, 0.34) 70%, rgba(249, 253, 253, 0.08) 100%),
            var(--home-gateway-image),
            var(--home-default-art-v1400) !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    color: #f7fbff !important;
    background-image:
            linear-gradient(90deg, rgba(30, 41, 55, 0.92) 0%, rgba(30, 41, 55, 0.7) 40%, rgba(30, 41, 55, 0.34) 72%, rgba(30, 41, 55, 0.1) 100%),
            var(--home-gateway-image),
            var(--home-default-art-v1400) !important;
}

body[data-page="home"] .vue-home-gateway::before,
body[data-page="home"] .vue-home-gateway::after {
    display: none !important;
}

body[data-page="home"] .vue-home-gateway-copy {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 16px !important;
    width: min(760px, 100%) !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-gateway-copy > span,
body[data-page="home"] .vue-home-copy .eyebrow {
    width: max-content !important;
    max-width: 100% !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(17, 168, 184, 0.22) !important;
    border-radius: 999px !important;
    color: #087c89 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    backdrop-filter: blur(14px) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span,
body.animaker-theme-night[data-page="home"] .vue-home-copy .eyebrow {
    color: #a4f3ec !important;
    border-color: rgba(164, 243, 236, 0.22) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

body[data-page="home"] .vue-home-gateway-copy h1 {
    display: grid !important;
    gap: 0 !important;
    max-width: 8em !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: clamp(58px, 9.2vw, 124px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body[data-page="home"] .vue-home-gateway-copy p {
    width: min(560px, 100%) !important;
    margin: 0 !important;
    color: color-mix(in srgb, currentColor 72%, transparent) !important;
    font-size: clamp(16px, 1.6vw, 21px) !important;
    font-weight: 820 !important;
    line-height: 1.65 !important;
}

body[data-page="home"] .vue-home-gateway-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: min(620px, 100%) !important;
    margin-top: 4px !important;
}

body[data-page="home"] .vue-home-gateway-steps em {
    display: grid !important;
    gap: 2px !important;
    min-width: 128px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(16, 24, 39, 0.1) !important;
    border-radius: 18px !important;
    color: #101827 !important;
    background: rgba(255, 255, 255, 0.66) !important;
    box-shadow: 0 14px 34px rgba(30, 48, 66, 0.08) !important;
    font-style: normal !important;
    backdrop-filter: blur(14px) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-steps em {
    color: #f7fbff !important;
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: rgba(31, 42, 56, 0.62) !important;
}

body[data-page="home"] .vue-home-gateway-steps b {
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

body[data-page="home"] .vue-home-gateway-steps small {
    color: color-mix(in srgb, currentColor 66%, transparent) !important;
    font-size: 12px !important;
}

body[data-page="home"] .vue-home-gateway-cue {
    position: fixed !important;
    right: clamp(16px, 4vw, 58px) !important;
    bottom: clamp(16px, 4vw, 54px) !important;
    z-index: 3 !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(16, 24, 39, 0.1) !important;
    border-radius: 999px !important;
    color: #101827 !important;
    background: linear-gradient(135deg, #c9fff7, #ffec7a) !important;
    box-shadow: 0 18px 42px rgba(31, 45, 61, 0.16) !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: max(680px, calc(100dvh - 72px)) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(30px, 5vw, 68px) clamp(18px, 6vw, 104px) !important;
    grid-template-columns: minmax(420px, 0.94fr) minmax(320px, 430px) !important;
    gap: clamp(22px, 4vw, 64px) !important;
    align-items: center !important;
    border-radius: 0 !important;
    background-image:
            linear-gradient(90deg, rgba(249, 253, 253, 0.96) 0%, rgba(249, 253, 253, 0.82) 42%, rgba(249, 253, 253, 0.4) 72%, rgba(249, 253, 253, 0.14) 100%),
            var(--home-hero-image),
            var(--home-default-art-v1400) !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: none !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(30, 41, 55, 0.92) 0%, rgba(30, 41, 55, 0.72) 42%, rgba(30, 41, 55, 0.36) 72%, rgba(30, 41, 55, 0.18) 100%),
            var(--home-hero-image),
            var(--home-default-art-v1400) !important;
}

body[data-page="home"] section.vue-home-hero::before {
    display: none !important;
}

body[data-page="home"] .vue-home-copy {
    width: min(690px, 100%) !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 8em !important;
    color: var(--ink) !important;
    font-size: clamp(42px, 5.2vw, 78px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
}

body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 560px !important;
    color: color-mix(in srgb, var(--text) 78%, transparent) !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
}

body[data-page="home"] .vue-home-brief {
    width: min(620px, 100%) !important;
    padding: 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--panel-solid) 80%, transparent) !important;
    box-shadow: var(--shadow) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief {
    background: rgba(31, 42, 56, 0.72) !important;
}

body[data-page="home"] .vue-home-brief textarea {
    min-height: 88px !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--panel-solid) 84%, transparent) !important;
}

body[data-page="home"] .vue-home-brief-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body[data-page="home"] .vue-home-brief-chips button {
    min-height: 66px !important;
    padding: 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 70%, transparent) !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-brief-chips button img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

body[data-page="home"] .vue-home-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

body[data-page="home"] .vue-home-flow,
body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

body[data-page="home"] .vue-home-feature {
    width: min(430px, 100%) !important;
    min-height: 478px !important;
    border: 1px solid var(--line) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 84%, transparent) !important;
    box-shadow: var(--shadow) !important;
    transform: none !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-feature {
    background: rgba(31, 42, 56, 0.76) !important;
}

body[data-page="home"] .vue-home-feature img {
    height: 288px !important;
    object-fit: cover !important;
    object-position: 48% 34% !important;
}

body[data-page="home"] .vue-home-feature-rail {
    color: color-mix(in srgb, var(--text) 74%, transparent) !important;
    border-right-color: var(--line) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-3) 12%, transparent)) !important;
}

body[data-page="home"] .vue-home-feature-body {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-feature-body {
    background: rgba(31, 42, 56, 0.78) !important;
}

body[data-page="home"] .vue-home-feature-body strong {
    color: var(--ink) !important;
    font-size: clamp(26px, 2.8vw, 36px) !important;
}

body[data-page="home"] .vue-home-feature-body p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

body[data-page="home"] .vue-home-creation,
body[data-page="home"] .vue-home-next,
body[data-page="home"] .vue-home-community-more,
body[data-page="studio"] .studio-launchpad-lite,
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    border: 1px solid var(--line) !important;
    border-radius: 30px !important;
    color: var(--text) !important;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="home"] .vue-home-creation {
    margin-top: clamp(28px, 4vw, 56px) !important;
}

body[data-page="home"] .vue-home-creation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body[data-page="home"] .vue-home-creation-card,
body[data-page="home"] .vue-home-starter-card,
body[data-page="home"] .vue-home-community-more .vue-home-metrics a {
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-starter-strip {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}

body[data-page="home"] .vue-home-starter-card {
    flex: 0 0 min(280px, 78vw) !important;
}

body[data-page="home"] .vue-home-community-more summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

body[data-page="studio"] .studio-launchpad-lite {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) !important;
}

body[data-page="studio"] .studio-launchpad-preview img,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-fit: cover !important;
    object-position: 48% 34% !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    background: color-mix(in srgb, var(--panel-solid) 72%, #eef8f8) !important;
}

body.animaker-theme-night[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover,
body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    background: #1f2a38 !important;
}

@media (max-width: 980px) {
    body[data-page="home"] .vue-home-gateway {
        place-items: end start !important;
        padding: 24px 18px !important;
        background-position: 58% center !important;
    }

    body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(46px, 14vw, 82px) !important;
    }

    body[data-page="home"] .vue-home-gateway-cue {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        justify-self: start !important;
        margin-top: 18px !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero,
    body[data-page="studio"] .studio-launchpad-lite {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        min-height: 0 !important;
    }
}

@media (max-width: 680px) {
    body[data-page="home"] .vue-home-gateway-copy h1,
    body[data-page="home"] .vue-home-copy h1 {
        word-break: keep-all !important;
    }

    body[data-page="home"] .vue-home-gateway-steps em {
        min-width: 0 !important;
        flex: 1 1 138px !important;
    }

    body[data-page="home"] .vue-home-brief-chips {
        display: flex !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
    }

    body[data-page="home"] .vue-home-brief-chips button {
        flex: 0 0 224px !important;
    }

    body[data-page="home"] .vue-home-actions a,
    body[data-page="home"] .vue-home-brief-actions :is(.primary-link, .secondary-btn) {
        width: 100% !important;
    }

    body[data-page="home"] .vue-home-creation-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="home"] .vue-home-community-more summary {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708 OC experience v1230: community inspiration handoff inside studio. */
body[data-page="studio"] .vue-core-launch-pack,
body[data-page="studio"] .vue-image-prompt-map,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-source-card {
    border: 1px solid var(--studio-line) !important;
    border-radius: 22px !important;
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--studio-panel-solid) 82%, transparent), color-mix(in srgb, var(--studio-panel-solid) 62%, transparent)),
            radial-gradient(circle at 100% 0, rgba(255, 209, 102, 0.18), transparent 44%) !important;
    box-shadow: 0 16px 36px rgba(22, 32, 44, 0.08) !important;
}

body.animaker-theme-night[data-page="studio"] .vue-core-launch-pack,
body[data-page="studio"].studio-theme-night .vue-core-launch-pack,
body.animaker-theme-night[data-page="studio"] .vue-image-prompt-map,
body[data-page="studio"].studio-theme-night .vue-image-prompt-map,
body.animaker-theme-night[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-source-card,
body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-preview.avatar-preview .vue-board-source-card {
    background:
            linear-gradient(135deg, rgba(34, 43, 58, 0.92), rgba(28, 38, 49, 0.82)),
            radial-gradient(circle at 100% 0, rgba(117, 216, 210, 0.14), transparent 42%) !important;
}

body[data-page="studio"] .vue-core-launch-pack {
    display: grid !important;
    gap: 12px !important;
    margin: 12px 0 14px !important;
    padding: 12px !important;
}

body[data-page="studio"] .vue-core-launch-pack-head {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body[data-page="studio"] .vue-core-launch-pack-head span,
body[data-page="studio"] .vue-image-prompt-map article span,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-source-card span {
    display: inline-flex !important;
    width: max-content !important;
    align-items: center !important;
    min-height: 27px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #102034 !important;
    background: linear-gradient(135deg, #c9fff6, #ffe879) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body[data-page="studio"] .vue-core-launch-pack-head strong,
body[data-page="studio"] .vue-image-prompt-map article strong,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-source-card strong {
    color: var(--studio-ink) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

body[data-page="studio"] .vue-core-launch-pack-grid,
body[data-page="studio"] .vue-image-prompt-map {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body[data-page="studio"] .vue-core-launch-pack-grid article,
body[data-page="studio"] .vue-image-prompt-map article {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 11px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 70%, transparent) !important;
}

body[data-page="studio"] .vue-core-launch-pack-grid article p,
body[data-page="studio"] .vue-image-prompt-map article p,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-source-card p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    color: var(--studio-muted) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 1.58 !important;
}

body[data-page="studio"] .vue-image-prompt-map {
    margin: 12px 0 14px !important;
    padding: 12px !important;
}

body[data-page="studio"] .vue-image-prompt-map article.ready {
    border-color: color-mix(in srgb, #21b7c5 34%, var(--studio-line)) !important;
    background:
            linear-gradient(180deg, color-mix(in srgb, var(--studio-panel-solid) 78%, transparent), color-mix(in srgb, #e6fff9 28%, transparent)) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-source-card {
    display: grid !important;
    gap: 8px !important;
    margin: 12px 0 !important;
    padding: 12px !important;
}

@media (max-width: 1120px) {
    body[data-page="studio"] .vue-core-launch-pack-grid,
    body[data-page="studio"] .vue-image-prompt-map {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    body[data-page="studio"] .vue-core-launch-pack-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body[data-page="studio"] .vue-core-launch-pack-grid,
    body[data-page="studio"] .vue-image-prompt-map {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708 OC experience v1210 final theme lock for lightweight library pages. */
html body.animaker-theme-day:is([data-page="templates"], [data-page="characters"]),
html body:not(.animaker-theme-night):is([data-page="templates"], [data-page="characters"]) {
    background:
            radial-gradient(circle at 9% 4%, rgba(32, 183, 200, 0.13), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 116, 146, 0.1), transparent 32%),
            linear-gradient(180deg, #fbfefd 0%, #f4f9f7 52%, #fbf6f0 100%) !important;
}

html body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) {
    background:
            radial-gradient(circle at 9% 4%, rgba(117, 216, 210, 0.12), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 154, 176, 0.1), transparent 32%),
            linear-gradient(180deg, #25303a 0%, #202a34 52%, #26303a 100%) !important;
}

/* 20260708 OC experience v1210: lightweight AI-first entries for templates and public archives. */
body:is([data-page="templates"], [data-page="characters"]) {
    --oc-air-bg: #f7fbfa;
    --oc-air-panel: rgba(255, 255, 255, 0.78);
    --oc-air-panel-strong: rgba(255, 255, 255, 0.9);
    --oc-air-line: rgba(27, 38, 54, 0.1);
    --oc-air-ink: #111827;
    --oc-air-text: #354154;
    --oc-air-muted: #6a7587;
    --oc-air-cyan: #20b7c8;
    --oc-air-rose: #f47492;
    --oc-air-gold: #f4ca5f;
    color: var(--oc-air-text);
    background:
            radial-gradient(circle at 9% 4%, rgba(32, 183, 200, 0.13), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 116, 146, 0.1), transparent 32%),
            linear-gradient(180deg, #fbfefd 0%, #f4f9f7 52%, #fbf6f0 100%) !important;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) {
    --oc-air-bg: #202932;
    --oc-air-panel: rgba(45, 55, 68, 0.76);
    --oc-air-panel-strong: rgba(47, 58, 72, 0.9);
    --oc-air-line: rgba(255, 255, 255, 0.12);
    --oc-air-ink: #fbf7ef;
    --oc-air-text: #eee8dc;
    --oc-air-muted: #b8c0c4;
    --oc-air-cyan: #75d8d2;
    --oc-air-rose: #f49ab0;
    --oc-air-gold: #f4d57a;
    background:
            radial-gradient(circle at 9% 4%, rgba(117, 216, 210, 0.12), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 154, 176, 0.1), transparent 32%),
            linear-gradient(180deg, #25303a 0%, #202a34 52%, #26303a 100%) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
    position: relative !important;
    isolation: isolate !important;
    width: min(1180px, calc(100vw - 40px)) !important;
    margin-inline: auto !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters)::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
            radial-gradient(circle at 9% 4%, rgba(32, 183, 200, 0.13), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 116, 146, 0.1), transparent 32%),
            linear-gradient(180deg, #fbfefd 0%, #f4f9f7 52%, #fbf6f0 100%) !important;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters)::before {
    background:
            radial-gradient(circle at 9% 4%, rgba(117, 216, 210, 0.12), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 154, 176, 0.1), transparent 32%),
            linear-gradient(180deg, #25303a 0%, #202a34 52%, #26303a 100%) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) > * {
    position: relative !important;
    z-index: 1 !important;
}

body:is([data-page="templates"], [data-page="characters"]) main {
    position: relative !important;
    isolation: isolate !important;
}

body:is([data-page="templates"], [data-page="characters"]) main::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
            radial-gradient(circle at 9% 4%, rgba(32, 183, 200, 0.13), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 116, 146, 0.1), transparent 32%),
            linear-gradient(180deg, #fbfefd 0%, #f4f9f7 52%, #fbf6f0 100%) !important;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) main::before {
    background:
            radial-gradient(circle at 9% 4%, rgba(117, 216, 210, 0.12), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 154, 176, 0.1), transparent 32%),
            linear-gradient(180deg, #25303a 0%, #202a34 52%, #26303a 100%) !important;
}

body:is([data-page="templates"], [data-page="characters"]) main > * {
    position: relative !important;
    z-index: 1 !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
    min-height: auto !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 420px) !important;
    gap: clamp(16px, 3vw, 34px) !important;
    padding: clamp(22px, 4vw, 48px) !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 34px !important;
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--oc-air-panel-strong) 90%, transparent), color-mix(in srgb, var(--oc-air-panel) 78%, transparent)),
            radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--oc-air-cyan) 14%, transparent), transparent 34%),
            radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--oc-air-rose) 12%, transparent), transparent 30%) !important;
    box-shadow: 0 24px 70px rgba(31, 45, 61, 0.1) !important;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy, .vue-characters-copy) {
    align-self: center !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy h1, .vue-characters-copy h1) {
    max-width: 8.8em !important;
    margin-bottom: 12px !important;
    color: var(--oc-air-ink) !important;
    font-size: clamp(38px, 5.2vw, 74px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-copy > p:not(.eyebrow), .vue-characters-copy > p:not(.eyebrow)) {
    max-width: 620px !important;
    color: var(--oc-air-muted) !important;
    font-size: clamp(15px, 1.6vw, 19px) !important;
    line-height: 1.8 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start {
    display: grid !important;
    gap: 12px !important;
    max-width: 650px !important;
    margin: 18px 0 !important;
    padding: 14px !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 26px !important;
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--oc-air-panel-strong) 88%, transparent), color-mix(in srgb, var(--oc-air-panel) 72%, transparent)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--oc-air-gold) 20%, transparent), transparent 36%) !important;
    box-shadow: 0 18px 44px rgba(31, 45, 61, 0.1) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    align-items: center !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start > div:first-child span {
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: var(--oc-air-ink) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--oc-air-cyan) 28%, white), color-mix(in srgb, var(--oc-air-gold) 34%, white)) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-light-start > div:first-child span {
    color: #14212b !important;
    background: linear-gradient(135deg, #c9fff6, #ffe879) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start > div:first-child strong {
    color: var(--oc-air-ink) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start label {
    display: grid !important;
    gap: 8px !important;
    color: var(--oc-air-text) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start textarea {
    width: 100% !important;
    min-height: 92px !important;
    resize: vertical !important;
    padding: 14px 15px !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 20px !important;
    color: var(--oc-air-text) !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 90%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    line-height: 1.65 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start textarea::placeholder {
    color: color-mix(in srgb, var(--oc-air-muted) 72%, transparent) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start-actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start-actions .primary-link {
    min-height: 46px !important;
    color: #111827 !important;
    background: linear-gradient(135deg, #d8fff7, #ffec7b) !important;
    box-shadow: 0 14px 32px rgba(32, 183, 200, 0.18) !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-start-actions small {
    max-width: 260px !important;
    color: var(--oc-air-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
}

body:is([data-page="templates"], [data-page="characters"]) .vue-light-page-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
            radial-gradient(circle at 9% 4%, rgba(32, 183, 200, 0.13), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 116, 146, 0.1), transparent 32%),
            linear-gradient(180deg, #fbfefd 0%, #f4f9f7 52%, #fbf6f0 100%) !important;
}

body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-light-page-bg {
    background:
            radial-gradient(circle at 9% 4%, rgba(117, 216, 210, 0.12), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 154, 176, 0.1), transparent 32%),
            linear-gradient(180deg, #25303a 0%, #202a34 52%, #26303a 100%) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) > :not(.vue-light-page-bg) {
    position: relative !important;
    z-index: 1 !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-command, .vue-character-command, .vue-template-feature, .vue-character-feature) {
    align-self: stretch !important;
    border-color: var(--oc-air-line) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 80%, transparent) !important;
    box-shadow: 0 18px 44px rgba(31, 45, 61, 0.08) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 220px !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature img, .vue-character-feature img) {
    height: 190px !important;
    object-fit: cover !important;
    object-position: 50% 25% !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-library-boundary, .vue-template-more, .vue-character-more) {
    border-radius: 28px !important;
    border-color: var(--oc-air-line) !important;
    background: color-mix(in srgb, var(--oc-air-panel) 78%, transparent) !important;
    box-shadow: none !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-library-boundary) {
    margin-top: 20px !important;
    padding: clamp(18px, 3vw, 28px) !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more, .vue-character-more) {
    margin-top: 18px !important;
}

body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-more > summary, .vue-character-more > summary) {
    border-radius: 28px !important;
    background: transparent !important;
}

@media (max-width: 980px) {
    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates, .vue-characters) {
        width: min(100% - 24px, 760px) !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-templates-hero, .vue-characters-hero) {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 18px !important;
        border-radius: 28px !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-feature, .vue-character-feature) {
        grid-column: auto !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-light-start-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body:is([data-page="templates"], [data-page="characters"]) .vue-light-start-actions small {
        max-width: none !important;
    }
}

/* 20260708 OC experience v1220: community gallery quick-start creation flow. */
html body.animaker-theme-day[data-page="gallery"],
html body:not(.animaker-theme-night)[data-page="gallery"] {
    background:
            radial-gradient(circle at 9% 4%, rgba(32, 183, 200, 0.13), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 116, 146, 0.1), transparent 32%),
            linear-gradient(180deg, #fbfefd 0%, #f4f9f7 52%, #fbf6f0 100%) !important;
}

html body.animaker-theme-night[data-page="gallery"] {
    background:
            radial-gradient(circle at 9% 4%, rgba(117, 216, 210, 0.12), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 154, 176, 0.1), transparent 32%),
            linear-gradient(180deg, #25303a 0%, #202a34 52%, #26303a 100%) !important;
}

body[data-page="gallery"] {
    --oc-air-bg: #f7fbfa;
    --oc-air-panel: rgba(255, 255, 255, 0.78);
    --oc-air-panel-strong: rgba(255, 255, 255, 0.9);
    --oc-air-line: rgba(27, 38, 54, 0.1);
    --oc-air-ink: #111827;
    --oc-air-text: #354154;
    --oc-air-muted: #6a7587;
    --oc-air-cyan: #20b7c8;
    --oc-air-rose: #f47492;
    --oc-air-gold: #f4ca5f;
    color: var(--oc-air-text);
}

body.animaker-theme-night[data-page="gallery"] {
    --oc-air-bg: #202932;
    --oc-air-panel: rgba(45, 55, 68, 0.76);
    --oc-air-panel-strong: rgba(47, 58, 72, 0.9);
    --oc-air-line: rgba(255, 255, 255, 0.12);
    --oc-air-ink: #fbf7ef;
    --oc-air-text: #eee8dc;
    --oc-air-muted: #b8c0c4;
    --oc-air-cyan: #75d8d2;
    --oc-air-rose: #f49ab0;
    --oc-air-gold: #f4d57a;
}

body[data-page="gallery"] .vue-gallery {
    position: relative !important;
    isolation: isolate !important;
    width: min(1180px, calc(100vw - 40px)) !important;
    margin-inline: auto !important;
}

body[data-page="gallery"] .vue-gallery > :not(.vue-light-page-bg) {
    position: relative !important;
    z-index: 1 !important;
}

body[data-page="gallery"] .vue-light-page-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
            radial-gradient(circle at 9% 4%, rgba(32, 183, 200, 0.13), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 116, 146, 0.1), transparent 32%),
            linear-gradient(180deg, #fbfefd 0%, #f4f9f7 52%, #fbf6f0 100%) !important;
}

body.animaker-theme-night[data-page="gallery"] .vue-light-page-bg {
    background:
            radial-gradient(circle at 9% 4%, rgba(117, 216, 210, 0.12), transparent 28%),
            radial-gradient(circle at 92% 9%, rgba(244, 154, 176, 0.1), transparent 32%),
            linear-gradient(180deg, #25303a 0%, #202a34 52%, #26303a 100%) !important;
}

body[data-page="gallery"] .vue-gallery-hero {
    min-height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) !important;
    gap: clamp(16px, 3vw, 34px) !important;
    padding: clamp(22px, 4vw, 46px) !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 34px !important;
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--oc-air-panel-strong) 90%, transparent), color-mix(in srgb, var(--oc-air-panel) 78%, transparent)),
            radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--oc-air-cyan) 14%, transparent), transparent 34%),
            radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--oc-air-rose) 12%, transparent), transparent 30%) !important;
    box-shadow: 0 24px 70px rgba(31, 45, 61, 0.1) !important;
}

body.animaker-theme-night[data-page="gallery"] .vue-gallery-hero {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important;
}

body[data-page="gallery"] .vue-gallery-copy {
    align-self: center !important;
}

body[data-page="gallery"] .vue-gallery-copy h1 {
    max-width: 8.8em !important;
    margin-bottom: 12px !important;
    color: var(--oc-air-ink) !important;
    font-size: clamp(40px, 5.4vw, 74px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}

body[data-page="gallery"] .vue-gallery-copy > p:not(.eyebrow) {
    max-width: 650px !important;
    color: var(--oc-air-muted) !important;
    font-size: clamp(15px, 1.6vw, 19px) !important;
    line-height: 1.8 !important;
}

body[data-page="gallery"] .vue-light-start {
    display: grid !important;
    gap: 12px !important;
    max-width: 680px !important;
    margin: 18px 0 !important;
    padding: 14px !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 26px !important;
    background:
            linear-gradient(135deg, color-mix(in srgb, var(--oc-air-panel-strong) 88%, transparent), color-mix(in srgb, var(--oc-air-panel) 72%, transparent)),
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--oc-air-gold) 20%, transparent), transparent 36%) !important;
    box-shadow: 0 18px 44px rgba(31, 45, 61, 0.1) !important;
}

body[data-page="gallery"] .vue-light-start > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    align-items: center !important;
}

body[data-page="gallery"] .vue-light-start > div:first-child span {
    display: inline-flex !important;
    min-height: 28px !important;
    align-items: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: var(--oc-air-ink) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--oc-air-cyan) 28%, white), color-mix(in srgb, var(--oc-air-gold) 34%, white)) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body.animaker-theme-night[data-page="gallery"] .vue-light-start > div:first-child span {
    color: #14212b !important;
    background: linear-gradient(135deg, #c9fff6, #ffe879) !important;
}

body[data-page="gallery"] .vue-light-start > div:first-child strong {
    color: var(--oc-air-ink) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

body[data-page="gallery"] .vue-light-start label {
    display: grid !important;
    gap: 8px !important;
    color: var(--oc-air-text) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body[data-page="gallery"] .vue-light-start textarea {
    width: 100% !important;
    min-height: 96px !important;
    resize: vertical !important;
    padding: 14px 15px !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 20px !important;
    color: var(--oc-air-text) !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 90%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    line-height: 1.65 !important;
}

body[data-page="gallery"] .vue-light-start textarea::placeholder {
    color: color-mix(in srgb, var(--oc-air-muted) 72%, transparent) !important;
}

body[data-page="gallery"] .vue-light-start-actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body[data-page="gallery"] .vue-light-start-actions .primary-link {
    min-height: 46px !important;
    color: #111827 !important;
    background: linear-gradient(135deg, #d8fff7, #ffec7b) !important;
    box-shadow: 0 14px 32px rgba(32, 183, 200, 0.18) !important;
}

body[data-page="gallery"] .vue-light-start-actions small {
    max-width: 260px !important;
    color: var(--oc-air-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
}

body[data-page="gallery"] .vue-gallery-feature {
    align-self: stretch !important;
    border-color: var(--oc-air-line) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 80%, transparent) !important;
    box-shadow: 0 18px 44px rgba(31, 45, 61, 0.08) !important;
}

body[data-page="gallery"] .vue-gallery-feature img {
    object-position: 50% 24% !important;
}

@media (max-width: 980px) {
    body[data-page="gallery"] .vue-gallery {
        width: min(100% - 24px, 760px) !important;
    }

    body[data-page="gallery"] .vue-gallery-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 18px !important;
        border-radius: 28px !important;
    }

    body[data-page="gallery"] .vue-gallery-feature {
        min-height: 260px !important;
    }

    body[data-page="gallery"] .vue-light-start-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body[data-page="gallery"] .vue-light-start-actions small {
        max-width: none !important;
    }
}

/* 20260708-studio-guide-v1100 final override: guided OC studio, appended after older passes. */
body[data-page="studio"] {
    --studio-panel-solid: #ffffff;
    --studio-ink: #111827;
    --studio-text: #334155;
    --studio-muted: #64748b;
    --studio-line: rgba(20, 36, 54, 0.12);
    --studio-shadow: 0 22px 60px rgba(30, 48, 66, 0.1);
    color: var(--studio-text) !important;
    background: linear-gradient(135deg, rgba(224, 250, 247, 0.92), rgba(249, 252, 250, 0.98) 38%, rgba(255, 249, 226, 0.86)) !important;
    overflow-x: hidden !important;
}

body.animaker-theme-night[data-page="studio"],
body[data-page="studio"].studio-theme-night {
    --studio-panel-solid: #202734;
    --studio-ink: #f8fbff;
    --studio-text: #dbe6ef;
    --studio-muted: #a7b6c7;
    --studio-line: rgba(236, 246, 255, 0.14);
    --studio-shadow: 0 24px 68px rgba(0, 0, 0, 0.34);
    color: var(--studio-text) !important;
    background: linear-gradient(135deg, #161b25, #202839 52%, #243141) !important;
}

body[data-page="studio"] main,
body[data-page="studio"].studio-wizard-ready main {
    width: min(1500px, calc(100vw - 32px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: clamp(22px, 3vw, 44px) 0 88px !important;
}

body[data-page="studio"] .studio-theme-switch,
body[data-page="studio"] .vue-route-hero-shell,
body[data-page="studio"] .studio-hero-beats,
body[data-page="studio"] .studio-path-banner {
    display: none !important;
}

body[data-page="studio"] .studio-hero-title.page-title {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.78fr) !important;
    gap: clamp(18px, 3vw, 34px) !important;
    align-items: end !important;
    margin: 0 0 clamp(18px, 2.8vw, 34px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--studio-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"] .studio-hero-title.page-title > .eyebrow,
body[data-page="studio"] .studio-hero-title.page-title > h1,
body[data-page="studio"] .studio-hero-title.page-title > p:not(.eyebrow) {
    grid-column: 1 !important;
}

body[data-page="studio"] .studio-hero-title.page-title > .eyebrow,
body[data-page="studio"] .studio-launchpad-copy > span {
    width: max-content !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(53, 201, 194, 0.24) !important;
    border-radius: 999px !important;
    color: #0e7f79 !important;
    background: rgba(231, 255, 250, 0.78) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

body[data-page="studio"] .studio-hero-title.page-title > h1 {
    max-width: 760px !important;
    margin: 0 !important;
    color: var(--studio-ink) !important;
    font-size: clamp(42px, 6vw, 82px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
}

body[data-page="studio"] .studio-hero-title.page-title > p:not(.eyebrow) {
    max-width: 660px !important;
    margin: 0 !important;
    color: var(--studio-muted) !important;
    font-size: clamp(15px, 1.4vw, 18px) !important;
    line-height: 1.8 !important;
}

body[data-page="studio"] .studio-launchpad-lite {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.72fr) !important;
    gap: clamp(16px, 2.6vw, 30px) !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: clamp(16px, 2.4vw, 28px) !important;
    overflow: hidden !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 30px !important;
    background: linear-gradient(132deg, rgba(255, 255, 255, 0.94), rgba(232, 252, 248, 0.92) 56%, rgba(255, 247, 214, 0.9)) !important;
    box-shadow: var(--studio-shadow) !important;
}

body.animaker-theme-night[data-page="studio"] .studio-launchpad-lite,
body[data-page="studio"].studio-theme-night .studio-launchpad-lite {
    background: linear-gradient(132deg, rgba(25, 31, 43, 0.94), rgba(20, 39, 48, 0.9) 56%, rgba(48, 43, 53, 0.86)) !important;
}

body[data-page="studio"] .studio-launchpad-copy {
    display: grid !important;
    align-content: center !important;
    gap: 13px !important;
    min-width: 0 !important;
    padding: clamp(4px, 1vw, 10px) !important;
}

body[data-page="studio"] .studio-launchpad-copy h2 {
    max-width: 12em !important;
    margin: 0 !important;
    color: var(--studio-ink) !important;
    font-size: clamp(30px, 4.4vw, 58px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
}

body[data-page="studio"] .studio-launchpad-copy p {
    max-width: 640px !important;
    margin: 0 !important;
    color: var(--studio-muted) !important;
    line-height: 1.72 !important;
}

body[data-page="studio"] .studio-launchpad-copy textarea {
    min-height: 116px !important;
    padding: 15px 16px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 22px !important;
    color: var(--studio-ink) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 88%, transparent) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    resize: vertical !important;
}

body[data-page="studio"] .studio-launch-mini-path {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body[data-page="studio"] .studio-launch-mini-path span,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-tags span, .vue-board-file-stamps span) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 999px !important;
    color: var(--studio-text) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 68%, transparent) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

body[data-page="studio"] .studio-launch-mini-path b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    color: #101827 !important;
    background: linear-gradient(135deg, #bff7ee, #ffe579) !important;
    font-size: 12px !important;
}

body[data-page="studio"] .studio-launchpad-actions,
body[data-page="studio"] .studio-launchpad-examples {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

body[data-page="studio"] .studio-launchpad-examples > span {
    color: var(--studio-muted) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body[data-page="studio"] .studio-launchpad-examples button,
body[data-page="studio"] :is(.secondary-btn, button.secondary-btn, .nav-button) {
    min-height: 38px !important;
    padding: 0 13px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 999px !important;
    color: var(--studio-text) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 70%, transparent) !important;
    box-shadow: none !important;
    font-weight: 900 !important;
}

body[data-page="studio"] :is(.primary-btn, .primary-link) {
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #101827 !important;
    background: linear-gradient(135deg, #bff7ee, #ffe579) !important;
    box-shadow: 0 14px 30px rgba(38, 187, 197, 0.16) !important;
}

body[data-page="studio"] .studio-launchpad-preview {
    position: relative !important;
    display: grid !important;
    min-height: 392px !important;
    max-height: 520px !important;
    overflow: hidden !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 26px !important;
    background: #111827 !important;
}

body[data-page="studio"] .studio-launchpad-preview img {
    width: 100% !important;
    height: 100% !important;
    min-height: 392px !important;
    object-fit: cover !important;
    object-position: 56% 48% !important;
}

body[data-page="studio"] .studio-launchpad-preview div {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    left: 14px !important;
    display: grid !important;
    gap: 4px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    background: rgba(15, 23, 42, 0.62) !important;
    backdrop-filter: blur(18px) !important;
}

body[data-page="studio"] .studio-launchpad-preview :is(strong, span) {
    color: #ffffff !important;
}

body[data-page="studio"] .studio-launchpad-preview small {
    color: rgba(255, 255, 255, 0.78) !important;
}

body[data-page="studio"] .studio-advanced-start {
    margin: -12px 0 20px !important;
}

body[data-page="studio"] .studio-advanced-start > summary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 999px !important;
    color: var(--studio-muted) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 64%, transparent) !important;
    box-shadow: none !important;
}

body[data-page="studio"] .studio-advanced-start > summary strong {
    color: var(--studio-muted) !important;
    font-size: 13px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px) !important;
    gap: 20px !important;
    align-items: start !important;
    margin-top: 18px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-rail {
    grid-column: 1 / -1 !important;
    position: sticky !important;
    top: 72px !important;
    z-index: 6 !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-card {
    display: block !important;
    padding: 8px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 28px !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 84%, transparent) !important;
    box-shadow: 0 16px 42px rgba(30, 48, 66, 0.08) !important;
    backdrop-filter: blur(18px) !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-card > :not(.vue-assist-one-next) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 13px 14px 13px 18px !important;
    border: 1px solid rgba(53, 201, 194, 0.18) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(224, 250, 247, 0.9), rgba(255, 248, 216, 0.72)) !important;
}

body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-assist-one-next,
body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-assist-one-next {
    background: linear-gradient(135deg, rgba(56, 88, 98, 0.38), rgba(76, 66, 84, 0.28)) !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next span {
    display: inline-flex !important;
    width: max-content !important;
    min-height: 25px !important;
    align-items: center !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    color: #0e7f79 !important;
    background: rgba(53, 201, 194, 0.16) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next strong {
    color: var(--studio-ink) !important;
    font-size: clamp(17px, 1.5vw, 22px) !important;
    line-height: 1.25 !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next p {
    max-width: 820px !important;
    margin: 4px 0 0 !important;
    color: var(--studio-muted) !important;
    line-height: 1.55 !important;
}

body[data-page="studio"].studio-wizard-ready .vue-assist-one-next .primary-btn {
    min-width: 132px !important;
    white-space: nowrap !important;
}

body[data-page="studio"].studio-wizard-ready .studio-flow.designer-form {
    display: grid !important;
    gap: 14px !important;
    min-width: 0 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel:not(.is-active) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
    display: grid !important;
    gap: 16px !important;
    min-width: 0 !important;
    padding: clamp(16px, 2.1vw, 26px) !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 30px !important;
    color: var(--studio-text) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 88%, transparent) !important;
    box-shadow: var(--studio-shadow) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-head,
    .vue-visual-head,
    .vue-story-head,
    .vue-core-mission,
    .vue-step-mission,
    .vue-core-quick-panel,
    .vue-creator-mode-coach,
    .vue-visual-route-card,
    .vue-visual-meter,
    .vue-story-meter,
    .vue-image-mode-board,
    .vue-cover-candidates,
    .studio-bridge-flow,
    .vue-image-readiness > small,
    .vue-ai-capability-panel
) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--studio-line) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head h2 {
    margin: 2px 0 0 !important;
    color: var(--studio-ink) !important;
    font-size: clamp(25px, 3.1vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head p:not(.eyebrow),
body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head small {
    color: var(--studio-muted) !important;
    line-height: 1.62 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-now,
    .vue-visual-write-now,
    .vue-story-write-now,
    .vue-image-write-now,
    .studio-ai-bridge,
    .studio-publish-bridge,
    .vue-image-readiness,
    .vue-publish-decision
) {
    display: grid !important;
    gap: 14px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-head,
    .vue-visual-write-head,
    .vue-story-write-head,
    .vue-image-write-head,
    .studio-bridge-head,
    .vue-image-readiness-head,
    .vue-publish-decision-head
) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-head span,
    .vue-visual-write-head span,
    .vue-story-write-head span,
    .vue-image-write-head span,
    .studio-bridge-head span,
    .vue-image-readiness-head span,
    .vue-publish-decision-head span
) {
    display: inline-flex !important;
    width: max-content !important;
    min-height: 27px !important;
    align-items: center !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    color: #0e7f79 !important;
    background: rgba(53, 201, 194, 0.14) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-head strong,
    .vue-visual-write-head strong,
    .vue-story-write-head strong,
    .vue-image-write-head strong,
    .studio-bridge-head strong,
    .vue-image-readiness-head strong,
    .vue-publish-decision-head strong
) {
    max-width: 13.5em !important;
    color: var(--studio-ink) !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.12 !important;
    text-wrap: balance !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-head p,
    .vue-visual-write-head p,
    .vue-story-write-head p,
    .vue-image-write-head p,
    .studio-bridge-head p,
    .vue-image-readiness-head p,
    .vue-publish-decision-head p
) {
    max-width: 680px !important;
    color: var(--studio-muted) !important;
    line-height: 1.68 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) !important;
    gap: 12px !important;
    align-items: end !important;
    padding: 14px !important;
    border: 1px solid rgba(53, 201, 194, 0.18) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(234, 255, 250, 0.92), rgba(255, 249, 225, 0.74)) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief textarea {
    min-height: 108px !important;
    border-radius: 20px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions {
    display: grid !important;
    gap: 8px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-actions :is(.primary-btn, .secondary-btn) {
    width: 100% !important;
    border-radius: 18px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    grid-column: 1 / -1 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips button {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 10px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 16px !important;
    color: var(--studio-text) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 72%, transparent) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-grid,
    .vue-visual-write-grid,
    .vue-story-write-grid,
    .vue-story-grid,
    .vue-image-primary-actions,
    .studio-bridge-actions
) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-field, .vue-visual-field, .vue-story-field, .vue-image-field) {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-field span, .vue-visual-field span, .vue-story-field span, .vue-image-field span) {
    color: var(--studio-ink) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-field small, .vue-visual-field small, .vue-story-field small, .vue-image-field small) {
    color: var(--studio-muted) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-visual-field.wide, .vue-story-field.wide, .vue-image-field) {
    grid-column: 1 / -1 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-refine, .vue-studio-toolbox) {
    border: 1px solid var(--studio-line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 58%, transparent) !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-refine > summary, .vue-studio-toolbox > summary) {
    min-height: 50px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-studio-refine > summary p, .vue-studio-toolbox > summary p) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-readiness {
    padding: 16px !important;
    border: 1px solid rgba(53, 201, 194, 0.18) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(234, 255, 250, 0.9), rgba(255, 249, 225, 0.72)) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-wizard-nav {
    position: sticky !important;
    bottom: 16px !important;
    z-index: 7 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-width: 0 !important;
    margin-top: 6px !important;
    padding: 10px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 86%, transparent) !important;
    box-shadow: 0 18px 46px rgba(30, 48, 66, 0.1) !important;
    backdrop-filter: blur(18px) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-wizard-nav strong,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
    color: var(--studio-ink) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-wizard-nav small,
body[data-page="studio"].studio-wizard-ready .studio-wizard-nav span,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-info > p:not(.eyebrow) {
    color: var(--studio-muted) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    position: sticky !important;
    top: 158px !important;
    align-self: start !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    display: grid !important;
    gap: 12px !important;
    overflow: hidden !important;
    padding: 12px !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 30px !important;
    color: var(--studio-text) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 88%, transparent) !important;
    box-shadow: var(--studio-shadow) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(
    .vue-board-dossier-rail,
    .vue-board-empty-grid,
    .vue-board-cover-marks,
    .vue-board-readiness,
    .vue-board-summary,
    .vue-board-status,
    .vue-board-cover-candidates,
    .vue-board-notice,
    .vue-board-actions
) {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
    min-height: clamp(360px, 46vh, 560px) !important;
    height: clamp(360px, 46vh, 560px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    position: relative !important;
    padding: 0 !important;
    background: #f7f4e8 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-stage {
    position: absolute !important;
    inset: 0 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    width: 100% !important;
    height: 100% !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-fit: cover !important;
    object-position: 50% 42% !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 4px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    color: #ffffff !important;
    background: rgba(17, 24, 39, 0.58) !important;
    backdrop-filter: blur(16px) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head :is(strong, span) {
    color: #ffffff !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head small {
    color: rgba(255, 255, 255, 0.78) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover > p,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-blueprint,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover-topline,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover > span {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-info {
    display: grid !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 2px 2px 4px !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
    margin: 0 !important;
    font-size: clamp(26px, 2.6vw, 38px) !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags,
body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

@media (max-width: 1160px) {
    body[data-page="studio"] main {
        width: min(100% - 28px, 920px) !important;
    }

    body[data-page="studio"] .studio-hero-title.page-title,
    body[data-page="studio"] .studio-launchpad-lite,
    body[data-page="studio"].studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        position: relative !important;
        top: auto !important;
        order: -1 !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1fr) !important;
        align-items: stretch !important;
    }
}

@media (max-width: 760px) {
    body[data-page="studio"] main {
        width: calc(100vw - 16px) !important;
        padding-top: 14px !important;
    }

    body[data-page="studio"] .studio-hero-title.page-title > h1 {
        font-size: clamp(36px, 12vw, 58px) !important;
    }

    body[data-page="studio"] .studio-launchpad-lite {
        padding: 13px !important;
        border-radius: 24px !important;
    }

    body[data-page="studio"] .studio-launch-mini-path,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-ai-brief, .vue-core-write-grid, .vue-visual-write-grid, .vue-story-write-grid, .vue-story-grid, .vue-image-primary-actions, .studio-bridge-actions),
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head, .vue-visual-write-head, .vue-story-write-head, .vue-image-write-head, .studio-bridge-head, .vue-image-readiness-head, .vue-publish-decision-head),
    body[data-page="studio"].studio-wizard-ready .studio-wizard-nav,
    body[data-page="studio"].studio-wizard-ready .vue-assist-one-next,
    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="studio"] .studio-launchpad-actions :is(.primary-btn, .secondary-btn),
    body[data-page="studio"].studio-wizard-ready .vue-assist-one-next .primary-btn,
    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.primary-btn, .secondary-btn),
    body[data-page="studio"].studio-wizard-ready .studio-wizard-nav :is(.primary-btn, .secondary-btn) {
        width: 100% !important;
    }

    body[data-page="studio"] .studio-launchpad-preview,
    body[data-page="studio"] .studio-launchpad-preview img {
        min-height: 260px !important;
    }

    body[data-page="studio"] .studio-launchpad-preview div {
        position: static !important;
        border-radius: 0 !important;
        background: rgba(17, 24, 39, 0.78) !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-rail {
        position: relative !important;
        top: auto !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
        padding: 14px !important;
        border-radius: 24px !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-core-ai-brief-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
        min-height: 260px !important;
        height: 260px !important;
    }
}

/* 20260708-studio-guide-v1100.1: keep the real next-step bar visible when a draft is restored. */
body[data-page="studio"].studio-wizard-ready .studio-advanced-start {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-rail {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-rail {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-flow.designer-form {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active > .vue-step-head-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active > .vue-step-head-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel:not(.is-active) > .vue-step-head-shell {
    display: none !important;
}

body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active .vue-step-head {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

@media (max-width: 760px) {
    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-rail {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: -3 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: -2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-flow.designer-form {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-panel.is-active {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* 20260708 OC experience v1200 final: keep the large UI pass after all legacy overrides. */
html body[data-page="home"]:not(.home-gateway-open) .vue-home.vue-home > section.vue-home-hero > .vue-home-feature {
    display: grid !important;
}

body.animaker-theme-day,
body:not(.animaker-theme-night) {
    --ink: #111827;
    --text: #263244;
    --muted: #687386;
    --paper: #f7faf9;
    --panel: rgba(255, 255, 255, 0.82);
    --panel-solid: #ffffff;
    --panel-soft: rgba(247, 251, 250, 0.9);
    --line: rgba(24, 34, 48, 0.1);
    --accent: #16a6b6;
    --accent-2: #f26d8b;
    --accent-3: #f3c85f;
    --shadow: 0 22px 64px rgba(31, 45, 61, 0.12);
    color: var(--text);
    background: linear-gradient(180deg, #fbfefd 0%, #f3f8f7 46%, #f8f3ee 100%) !important;
}

body.animaker-theme-night {
    --ink: #fbf7ef;
    --text: #eee8dc;
    --muted: #b8c0c4;
    --paper: #202932;
    --panel: rgba(45, 55, 68, 0.78);
    --panel-solid: #2b3542;
    --panel-soft: rgba(38, 48, 60, 0.78);
    --line: rgba(255, 255, 255, 0.12);
    --accent: #75d8d2;
    --accent-2: #f49ab0;
    --accent-3: #f4d57a;
    --shadow: 0 22px 64px rgba(0, 0, 0, 0.22);
    color: var(--text);
    background: linear-gradient(180deg, #25303a 0%, #202a34 48%, #26303a 100%) !important;
}

body.animaker-theme-night:not([data-page="studio"]) {
    background: linear-gradient(180deg, #25303a 0%, #202a34 48%, #26303a 100%) !important;
}

body.animaker-theme-night .topbar,
body.animaker-theme-night[data-page] :is(.topbar, .shared-nav),
body[data-page].animaker-theme-night :is(.topbar, .shared-nav),
body[data-page="home"].animaker-theme-night :is(.topbar, .shared-nav),
body[data-page="studio"].studio-theme-night .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(36, 45, 56, 0.78) !important;
    box-shadow: none !important;
}

body.animaker-theme-day .topbar,
body.animaker-theme-day[data-page] :is(.topbar, .shared-nav),
body:not(.animaker-theme-night)[data-page] :is(.topbar, .shared-nav),
body[data-page="home"]:not(.animaker-theme-night) :is(.topbar, .shared-nav),
body:not(.animaker-theme-night) .topbar {
    background: rgba(255, 255, 255, 0.78) !important;
}

body.animaker-theme-night :is(.brand, .shared-nav-links a, .nav a, .nav-button) {
    color: rgba(250, 247, 239, 0.76) !important;
}

body.animaker-theme-night :is(.shared-nav-links a:hover, .shared-nav-links a.active, .nav a:hover, .nav a.active, .nav-button:hover) {
    color: var(--ink) !important;
    background: rgba(255, 255, 255, 0.11) !important;
    box-shadow: none !important;
}

body.animaker-theme-night .theme-toggle-button,
body.animaker-theme-day .theme-toggle-button,
body:not(.animaker-theme-night) .theme-toggle-button {
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
}

body[data-page="home"] {
    --home-hero-v1200: url("/animaker/img/generated/ux/home-oc-gateway-day-v2.webp");
    overflow-x: hidden !important;
}

body[data-page="home"].home-gateway-open {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

body[data-page="home"] main,
body[data-page="home"] #homeVueApp,
body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    display: grid !important;
    place-items: center start !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    padding: clamp(24px, 6vw, 86px) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    color: #101827 !important;
    background-image:
            linear-gradient(90deg, rgba(250, 254, 253, 0.95) 0%, rgba(250, 254, 253, 0.74) 38%, rgba(250, 254, 253, 0.26) 72%, rgba(250, 254, 253, 0.08) 100%),
            var(--home-gateway-image),
            var(--home-hero-v1200) !important;
    background-position: center !important;
    background-size: cover !important;
    cursor: pointer !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    color: #fbf7ef !important;
    background-image:
            linear-gradient(90deg, rgba(37, 48, 58, 0.88) 0%, rgba(37, 48, 58, 0.62) 41%, rgba(37, 48, 58, 0.25) 72%, rgba(37, 48, 58, 0.12) 100%),
            var(--home-gateway-image),
            var(--home-hero-v1200) !important;
}

body[data-page="home"] .vue-home-gateway::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 34%) !important;
}

body[data-page="home"] .vue-home-gateway::after,
body[data-page="home"] .vue-home-gateway-steps {
    display: none !important;
}

body[data-page="home"] .vue-home-gateway-copy {
    position: relative !important;
    z-index: 2 !important;
    width: min(760px, 100%) !important;
    max-width: none !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-gateway-copy > span {
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(16, 24, 39, 0.12) !important;
    border-radius: 999px !important;
    color: #0f7f8b !important;
    background: rgba(255, 255, 255, 0.76) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    backdrop-filter: blur(16px) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span {
    color: #b8f4ea !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

body[data-page="home"] .vue-home-gateway-copy h1 {
    display: grid !important;
    gap: 0 !important;
    max-width: 8em !important;
    margin: 18px 0 0 !important;
    color: inherit !important;
    font-size: clamp(56px, 10vw, 134px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body[data-page="home"] .vue-home-gateway-copy p {
    width: min(580px, 100%) !important;
    margin: 20px 0 0 !important;
    color: rgba(16, 24, 39, 0.7) !important;
    font-size: clamp(16px, 1.7vw, 21px) !important;
    font-weight: 820 !important;
    line-height: 1.68 !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy p {
    color: rgba(251, 247, 239, 0.74) !important;
}

body[data-page="home"] .vue-home-gateway-cue {
    position: fixed !important;
    right: clamp(18px, 4vw, 64px) !important;
    bottom: clamp(18px, 4vw, 58px) !important;
    z-index: 2 !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(16, 24, 39, 0.1) !important;
    border-radius: 999px !important;
    color: #111827 !important;
    background: linear-gradient(135deg, #d8fff7, #ffec7b) !important;
    box-shadow: 0 18px 42px rgba(31, 45, 61, 0.16) !important;
    backdrop-filter: blur(14px) !important;
}

body[data-page="home"] .vue-home-gateway-cue i {
    width: 26px !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: max(680px, calc(100dvh - 72px)) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(30px, 5vw, 72px) clamp(18px, 6vw, 110px) !important;
    grid-template-columns: minmax(420px, 0.95fr) minmax(330px, 430px) !important;
    gap: clamp(22px, 4vw, 70px) !important;
    align-items: center !important;
    border-radius: 0 !important;
    background-image:
            linear-gradient(90deg, rgba(250, 254, 253, 0.96) 0%, rgba(250, 254, 253, 0.82) 42%, rgba(250, 254, 253, 0.38) 72%, rgba(250, 254, 253, 0.14) 100%),
            var(--home-hero-image),
            var(--home-hero-v1200) !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: none !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(37, 48, 58, 0.9) 0%, rgba(37, 48, 58, 0.68) 43%, rgba(37, 48, 58, 0.32) 72%, rgba(37, 48, 58, 0.18) 100%),
            var(--home-hero-image),
            var(--home-hero-v1200) !important;
}

body[data-page="home"] section.vue-home-hero::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%) !important;
}

body[data-page="home"] .vue-home-copy {
    width: min(700px, 100%) !important;
}

body[data-page="home"] .vue-home-copy h1 {
    max-width: 9em !important;
    font-size: clamp(42px, 5.4vw, 82px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
}

body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 590px !important;
    color: color-mix(in srgb, var(--text) 78%, transparent) !important;
}

body[data-page="home"] .vue-home-brief {
    width: min(640px, 100%) !important;
    padding: 14px !important;
    border-color: var(--line) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--panel-solid) 78%, transparent) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="home"] .vue-home-brief label > span {
    color: var(--accent) !important;
}

body[data-page="home"] .vue-home-brief textarea {
    min-height: 86px !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--panel-solid) 86%, transparent) !important;
}

body[data-page="home"] .vue-home-brief-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body[data-page="home"] .vue-home-brief-chips button {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 10px !important;
    min-height: 66px !important;
    padding: 8px !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
    box-shadow: none !important;
    text-align: left !important;
}

body[data-page="home"] .vue-home-brief-chips button img {
    grid-row: 1 / 4 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

body[data-page="home"] .vue-home-brief-chips :is(span, strong, small) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="home"] .vue-home-brief-actions,
body[data-page="home"] .vue-home-actions {
    gap: 10px !important;
}

body[data-page="home"] .vue-home-brief-actions .primary-link,
body[data-page="home"] .vue-home-actions .primary-link {
    color: #111827 !important;
    background: linear-gradient(135deg, #d8fff7, #ffec7b) !important;
    box-shadow: 0 16px 32px rgba(22, 166, 182, 0.18) !important;
}

body[data-page="home"] .vue-home-brief-actions .secondary-btn,
body[data-page="home"] .vue-home-actions .secondary-btn {
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--panel-solid) 70%, transparent) !important;
}

body[data-page="home"] .vue-home-flow,
body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

body[data-page="home"] .vue-home-feature {
    width: min(430px, 100%) !important;
    min-height: 478px !important;
    border: 1px solid var(--line) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 80%, transparent) !important;
    box-shadow: var(--shadow) !important;
    transform: none !important;
}

body[data-page="home"] .vue-home-feature img {
    height: 292px !important;
    object-fit: cover !important;
    object-position: 52% 30% !important;
}

body[data-page="home"] .vue-home-feature-rail {
    color: color-mix(in srgb, var(--text) 70%, transparent) !important;
    border-right-color: var(--line) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent)) !important;
}

body[data-page="home"] .vue-home-feature-body {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 70%, transparent) !important;
}

body[data-page="home"] .vue-home-feature-body strong {
    color: var(--ink) !important;
}

body[data-page="home"] .vue-home-feature-body p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}

body[data-page="home"] .vue-home-creation,
body[data-page="home"] .vue-home-next,
body[data-page="home"] .vue-home-community-more {
    width: min(1180px, calc(100vw - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: 1px solid var(--line) !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, var(--panel), var(--panel-soft)) !important;
    box-shadow: var(--shadow) !important;
}

body[data-page="home"] .vue-home-creation {
    margin-top: clamp(28px, 4vw, 58px) !important;
}

body[data-page="home"] .vue-home-creation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body[data-page="home"] .vue-home-creation-card,
body[data-page="home"] .vue-home-starter-card,
body[data-page="home"] .vue-home-community-more .vue-home-metrics a {
    border-color: var(--line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--panel-solid) 72%, transparent) !important;
    box-shadow: none !important;
}

body[data-page="home"] .vue-home-community-more summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

body[data-page="studio"] .studio-launchpad-preview img {
    object-position: 55% 40% !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    background: color-mix(in srgb, var(--panel-solid) 70%, #f7faf9) !important;
}

body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 50% 20% !important;
}

@media (max-width: 980px) {
    body[data-page="home"] .vue-home-gateway {
        place-items: end start !important;
        padding: 24px 18px !important;
        background-position: 61% center !important;
    }

    body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(46px, 14vw, 82px) !important;
    }

    body[data-page="home"] .vue-home-gateway-cue {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 20px !important;
    }

    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 28px 16px 36px !important;
        background-position: 58% top !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        min-height: 0 !important;
    }

    body[data-page="home"] .vue-home-feature img {
        height: clamp(230px, 48vw, 360px) !important;
    }

    body[data-page="home"] .vue-home-creation-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 680px) {
    body[data-page="home"] .vue-home-gateway-copy h1,
    body[data-page="home"] .vue-home-copy h1 {
        word-break: keep-all !important;
    }

    body[data-page="home"] .vue-home-brief-chips {
        display: flex !important;
        overflow-x: auto !important;
    }

    body[data-page="home"] .vue-home-brief-chips button {
        flex: 0 0 226px !important;
    }

    body[data-page="home"] .vue-home-actions a,
    body[data-page="home"] .vue-home-brief-actions :is(.primary-link, .secondary-btn) {
        width: 100% !important;
    }

    body[data-page="home"] .vue-home-community-more summary {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708-oc-flow-v1300 hard final: keep the generated OC entry above older home overrides. */
html body[data-page="home"] .vue-home-gateway {
    z-index: 5000 !important;
    place-items: center start !important;
    background-image:
            linear-gradient(90deg, rgba(249, 253, 253, 0.84) 0%, rgba(249, 253, 253, 0.62) 34%, rgba(249, 253, 253, 0.22) 68%, rgba(249, 253, 253, 0.04) 100%),
            var(--home-gateway-image),
            url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp") !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
            linear-gradient(90deg, rgba(30, 41, 55, 0.88) 0%, rgba(30, 41, 55, 0.62) 38%, rgba(30, 41, 55, 0.24) 72%, rgba(30, 41, 55, 0.08) 100%),
            var(--home-gateway-image),
            url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp") !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    justify-self: start !important;
    align-items: start !important;
    max-width: min(720px, 100%) !important;
    margin-left: clamp(0px, 6vw, 84px) !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    justify-self: start !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.6em !important;
    font-size: clamp(58px, 8.6vw, 118px) !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 520px !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    max-width: 590px !important;
}

html body[data-page="home"] .vue-home-gateway-steps em {
    min-width: 124px !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(249, 253, 253, 0.9) 0%, rgba(249, 253, 253, 0.74) 39%, rgba(249, 253, 253, 0.28) 72%, rgba(249, 253, 253, 0.08) 100%),
            var(--home-hero-image),
            url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp") !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(30, 41, 55, 0.9) 0%, rgba(30, 41, 55, 0.68) 42%, rgba(30, 41, 55, 0.3) 74%, rgba(30, 41, 55, 0.14) 100%),
            var(--home-hero-image),
            url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp") !important;
}

html body[data-page="home"] .vue-home-feature {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-solid) 84%, transparent) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-feature {
    background: rgba(31, 42, 56, 0.76) !important;
}

html body[data-page="studio"] .studio-launchpad-preview img,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 48% 34% !important;
}

@media (max-width: 980px) {
    html body[data-page="home"] .vue-home-gateway {
        place-items: end start !important;
        background-position: 56% center !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        margin-left: 0 !important;
    }
}

@media (max-width: 680px) {
    html body[data-page="home"] .vue-home-gateway-steps {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-gateway-steps em {
        min-width: 0 !important;
        padding: 8px !important;
    }
}
/* 20260708-oc-flow-v1320.3 hard final EOF: template/archive right rail must be one readable column. */
html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: 12px !important;
    overflow: hidden !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-anchor {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-anchor img {
    width: 100% !important;
    height: clamp(188px, 24vw, 260px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 20px !important;
    object-fit: cover !important;
    object-position: 50% 22% !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-track {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-track a {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 58px !important;
    align-items: center !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
}

@media (max-width: 980px) {
    html body:is([data-page="templates"], [data-page="characters"]) .vue-creation-command:is(.vue-template-command, .vue-character-command) .vue-command-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708-oc-flow-v1330 hard final: community gallery starts from safe AI co-creation. */
html body[data-page="gallery"] .vue-gallery-hero {
    grid-template-columns: minmax(0, 0.98fr) minmax(300px, 400px) !important;
    align-items: stretch !important;
    min-height: min(720px, calc(100vh - 118px)) !important;
    border-radius: 34px !important;
}

html body[data-page="gallery"] .vue-gallery-copy {
    display: grid !important;
    align-content: center !important;
    gap: 12px !important;
}

html body[data-page="gallery"] .vue-gallery-copy h1 {
    max-width: 10.6em !important;
    margin: 0 !important;
    font-size: clamp(38px, 5.6vw, 78px) !important;
    line-height: 1.02 !important;
}

html body[data-page="gallery"] .vue-gallery-copy > p:not(.eyebrow) {
    max-width: 620px !important;
}

html body[data-page="gallery"] .vue-gallery-light-start {
    margin: 10px 0 6px !important;
    padding: clamp(12px, 1.8vw, 18px) !important;
    border-radius: 24px !important;
}

html body[data-page="gallery"] .vue-gallery-light-start textarea {
    min-height: 82px !important;
    border-radius: 18px !important;
}

html body[data-page="gallery"] .vue-gallery-idea-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="gallery"] .vue-gallery-idea-row button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 16px !important;
    color: var(--oc-air-text) !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 78%, transparent) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

html body[data-page="gallery"] .vue-gallery-idea-row button:hover,
html body[data-page="gallery"] .vue-gallery-idea-row button:focus-visible {
    transform: translateY(-1px) !important;
    border-color: color-mix(in srgb, var(--oc-air-cyan) 45%, var(--oc-air-line)) !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 92%, var(--oc-air-cyan) 8%) !important;
}

html body[data-page="gallery"] .vue-gallery-boundary-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html body[data-page="gallery"] .vue-gallery-boundary-strip span {
    display: inline-flex !important;
    min-height: 30px !important;
    align-items: center !important;
    padding: 0 11px !important;
    border: 1px solid var(--oc-air-line) !important;
    border-radius: 999px !important;
    color: var(--oc-air-text) !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 72%, transparent) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

html body[data-page="gallery"] .vue-gallery-actions {
    margin-top: 2px !important;
}

html body[data-page="gallery"] .vue-gallery-feature {
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--oc-air-panel-strong) 80%, transparent) !important;
}

html body[data-page="gallery"] .vue-gallery-feature img {
    min-height: 0 !important;
    height: 100% !important;
    object-position: 50% 28% !important;
}

html body[data-page="work"] .vue-work-launchpad-copy h2 {
    letter-spacing: 0 !important;
}

html body[data-page="work"] .vue-work-launchpad-actions {
    gap: 10px !important;
}

@media (max-width: 980px) {
    html body[data-page="gallery"] .vue-gallery-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: auto !important;
        border-radius: 28px !important;
    }

    html body[data-page="gallery"] .vue-gallery-feature {
        min-height: 260px !important;
    }
}

@media (max-width: 620px) {
    html body[data-page="gallery"] .vue-gallery-copy h1 {
        font-size: clamp(34px, 11vw, 52px) !important;
    }

    html body[data-page="gallery"] .vue-gallery-idea-row,
    html body[data-page="gallery"] .vue-gallery-boundary-strip {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    html body[data-page="gallery"] .vue-gallery-idea-row::-webkit-scrollbar,
    html body[data-page="gallery"] .vue-gallery-boundary-strip::-webkit-scrollbar {
        display: none !important;
    }

    html body[data-page="gallery"] .vue-gallery-idea-row button {
        flex: 0 0 214px !important;
    }

html body[data-page="gallery"] .vue-gallery-boundary-strip span {
        flex: 0 0 auto !important;
    }
}

/* 20260708-oc-flow-v1400: lighter AI-first entry, generated polished default, balanced day/night. */
html body[data-page="home"] {
    --home-default-art-v1400: url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp");
}

html body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
}

html body[data-page="home"] main {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

html body[data-page="home"] .vue-home {
    width: 100% !important;
    overflow-x: clip !important;
}

html body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    padding: clamp(28px, 5vw, 72px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    place-items: center start !important;
    background-image:
            linear-gradient(90deg, rgba(252, 254, 252, 0.9) 0%, rgba(252, 254, 252, 0.7) 34%, rgba(252, 254, 252, 0.2) 68%, rgba(252, 254, 252, 0.02) 100%),
            var(--home-gateway-image),
            var(--home-default-art-v1400) !important;
    background-position: center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
            linear-gradient(90deg, rgba(22, 28, 38, 0.92) 0%, rgba(22, 28, 38, 0.68) 38%, rgba(22, 28, 38, 0.24) 72%, rgba(22, 28, 38, 0.06) 100%),
            var(--home-gateway-image),
            var(--home-default-art-v1400) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    max-width: min(690px, 100%) !important;
    margin-left: clamp(0px, 6vw, 92px) !important;
    gap: 16px !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.2em !important;
    margin: 0 !important;
    font-size: clamp(54px, 8.4vw, 116px) !important;
    line-height: 0.98 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 480px !important;
    font-size: clamp(15px, 1.6vw, 20px) !important;
}

html body[data-page="home"] .vue-home-gateway-steps em {
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--panel-solid, #ffffff) 68%, transparent) !important;
    backdrop-filter: blur(16px) !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    right: clamp(22px, 4vw, 64px) !important;
    bottom: clamp(22px, 4vw, 56px) !important;
    border-radius: 999px !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100svh - 72px) !important;
    margin: 0 !important;
    padding: clamp(30px, 5vw, 70px) max(18px, calc((100vw - 1180px) / 2)) clamp(34px, 5vw, 74px) !important;
    border-radius: 0 !important;
    grid-template-columns: minmax(0, 0.98fr) minmax(320px, 420px) !important;
    gap: clamp(20px, 4vw, 58px) !important;
    background-image:
            linear-gradient(90deg, rgba(252, 254, 252, 0.92) 0%, rgba(252, 254, 252, 0.78) 40%, rgba(252, 254, 252, 0.28) 72%, rgba(252, 254, 252, 0.08) 100%),
            var(--home-hero-image),
            var(--home-default-art-v1400) !important;
    background-position: center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(22, 28, 38, 0.92) 0%, rgba(22, 28, 38, 0.72) 42%, rgba(22, 28, 38, 0.34) 74%, rgba(22, 28, 38, 0.12) 100%),
            var(--home-hero-image),
            var(--home-default-art-v1400) !important;
}

html body[data-page="home"] .vue-home-copy {
    align-self: center !important;
    max-width: 720px !important;
}

html body[data-page="home"] .vue-home-copy h1 {
    max-width: 10em !important;
    font-size: clamp(42px, 5.3vw, 78px) !important;
}

html body[data-page="home"] .vue-home-brief {
    width: min(660px, 100%) !important;
    grid-template-columns: minmax(0, 1fr) 154px !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--panel-solid, #ffffff) 80%, transparent) !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 78px !important;
}

html body[data-page="home"] .vue-home-brief-chips {
    display: flex !important;
    overflow-x: auto !important;
    grid-column: 1 / -1 !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    flex: 0 0 min(248px, 76vw) !important;
    min-height: 56px !important;
    border-radius: 16px !important;
}

html body[data-page="home"] .vue-home-brief-chips button img {
    width: 40px !important;
    height: 40px !important;
    object-position: 50% 34% !important;
}

html body[data-page="home"] .vue-home-feature {
    align-self: center !important;
    width: min(420px, 100%) !important;
    min-height: 0 !important;
    border-radius: 28px !important;
}

html body[data-page="home"] .vue-home-feature img {
    height: clamp(250px, 34vw, 315px) !important;
    object-position: 56% 34% !important;
}

html body[data-page="home"] .vue-home-feature-body {
    padding: 16px !important;
}

html body[data-page="home"] .vue-home-flow,
html body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

html body[data-page="home"] .vue-home-creation,
html body[data-page="home"] .vue-home-next,
html body[data-page="home"] .vue-home-community-more {
    width: min(1120px, calc(100vw - 32px)) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 46px rgba(28, 38, 52, 0.08) !important;
}

html body[data-page="home"] .vue-home-creation {
    margin-top: clamp(22px, 3.4vw, 44px) !important;
    padding: clamp(18px, 2.6vw, 28px) !important;
}

html body[data-page="home"] .vue-home-creation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html body[data-page="home"] .vue-home-creation-card {
    min-height: 168px !important;
    border-radius: 18px !important;
}

html body[data-page="home"] .vue-home-creation-card img {
    height: 118px !important;
    object-position: 50% 28% !important;
}

html body[data-page="home"] .vue-home-next {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding: 14px !important;
}

html body[data-page="home"] .vue-home-next > div {
    flex: 1 1 240px !important;
}

html body[data-page="home"] .vue-home-next a {
    flex: 1 1 190px !important;
    border-radius: 16px !important;
}

html body[data-page="home"] .vue-home-community-more {
    margin-top: 14px !important;
}

html body.animaker-theme-night:not([data-page="studio"]) {
    --paper: #121823;
    --panel: rgba(25, 32, 44, 0.86);
    --panel-solid: #1a2230;
    --panel-soft: rgba(31, 41, 55, 0.72);
    --text: rgba(248, 250, 252, 0.9);
    --ink: #ffffff;
    --muted: rgba(226, 232, 240, 0.66);
    --line: rgba(255, 255, 255, 0.13);
    background:
            radial-gradient(circle at 12% 6%, rgba(99, 221, 213, 0.12), transparent 34rem),
            radial-gradient(circle at 88% 4%, rgba(255, 209, 102, 0.09), transparent 28rem),
            linear-gradient(180deg, #111827 0%, #151c29 50%, #101722 100%) !important;
    color: var(--text) !important;
}

html body.animaker-theme-night:not([data-page="studio"]) :is(.topbar, .auth-card, .vue-home-creation, .vue-home-next, .vue-home-community-more, .vue-home-feature, .work-card, .vue-template-card, .vue-character-card, .vue-creation-command) {
    border-color: var(--line) !important;
    background: color-mix(in srgb, var(--panel-solid) 82%, transparent) !important;
    color: var(--text) !important;
}

html body.animaker-theme-night:not([data-page="studio"]) :is(h1, h2, h3, strong, .brand) {
    color: var(--ink) !important;
}

html body.animaker-theme-night:not([data-page="studio"]) :is(p, small, span, .muted) {
    color: color-mix(in srgb, var(--text) 78%, transparent);
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief,
html body.animaker-theme-night[data-page="home"] .vue-home-brief textarea,
html body.animaker-theme-night[data-page="home"] .vue-home-brief-chips button {
    border-color: var(--line) !important;
    background: color-mix(in srgb, var(--panel-solid) 76%, transparent) !important;
    color: var(--text) !important;
}

@media (max-width: 980px) {
    html body[data-page="home"] .vue-home-gateway {
        place-items: end start !important;
        padding: 24px 18px !important;
        background-position: 58% center !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        margin-left: 0 !important;
    }

    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 28px 16px 38px !important;
        background-position: 58% top !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: 100% !important;
    }

    html body[data-page="home"] .vue-home-creation-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 680px) {
    html body[data-page="home"] .vue-home-gateway-copy h1,
    html body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(40px, 12vw, 58px) !important;
    }

    html body[data-page="home"] .vue-home-gateway-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-brief {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-creation,
    html body[data-page="home"] .vue-home-next,
    html body[data-page="home"] .vue-home-community-more {
        width: calc(100vw - 16px) !important;
    }
}

/* 20260708-oc-flow-v1500: full-width home and one lightweight day/night shell across community pages. */
html body[data-page]:not([data-page="studio"]) {
    --ui-page: #f5f8f7;
    --ui-page-low: #eef4f3;
    --ui-panel: rgba(255, 255, 255, 0.88);
    --ui-panel-solid: #ffffff;
    --ui-panel-soft: rgba(240, 247, 247, 0.86);
    --ui-ink: #151923;
    --ui-text: #2d3440;
    --ui-muted: rgba(45, 52, 64, 0.68);
    --ui-line: rgba(21, 25, 35, 0.12);
    --ui-line-strong: rgba(21, 25, 35, 0.18);
    --ui-accent: #21b7c5;
    --ui-accent-ink: #0d6872;
    --ui-warm: #ffd166;
    --ui-pink: #ff6fae;
    --ui-shadow: 0 18px 46px rgba(39, 28, 62, 0.08);
    --ui-shadow-soft: 0 10px 26px rgba(39, 28, 62, 0.055);
    --ui-radius: 24px;
    --ui-radius-sm: 16px;
    --paper: var(--ui-page);
    --panel: var(--ui-panel);
    --panel-solid: var(--ui-panel-solid);
    --panel-soft: var(--ui-panel-soft);
    --text: var(--ui-text);
    --ink: var(--ui-ink);
    --muted: var(--ui-muted);
    --line: var(--ui-line);
    --cyan: var(--ui-accent);
    --teal: var(--ui-accent-ink);
    --yellow: var(--ui-warm);
    --pink: var(--ui-pink);
    overflow-x: clip;
    color: var(--ui-text) !important;
    background: linear-gradient(180deg, var(--ui-page) 0%, var(--ui-page-low) 100%) !important;
}

html body.animaker-theme-night[data-page]:not([data-page="studio"]) {
    --ui-page: #151b22;
    --ui-page-low: #10161d;
    --ui-panel: rgba(30, 38, 48, 0.9);
    --ui-panel-solid: #202833;
    --ui-panel-soft: rgba(24, 33, 43, 0.9);
    --ui-ink: #f7fafc;
    --ui-text: rgba(233, 241, 245, 0.88);
    --ui-muted: rgba(207, 219, 226, 0.66);
    --ui-line: rgba(255, 255, 255, 0.14);
    --ui-line-strong: rgba(255, 255, 255, 0.2);
    --ui-accent: #6ee7f2;
    --ui-accent-ink: #b7f7fb;
    --ui-warm: #ffe08a;
    --ui-pink: #ff8abc;
    --ui-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    --ui-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.18);
    color: var(--ui-text) !important;
    background: linear-gradient(180deg, var(--ui-page) 0%, var(--ui-page-low) 100%) !important;
}

html body[data-page]:not([data-page="studio"]) *,
html body[data-page]:not([data-page="studio"]) *::before,
html body[data-page]:not([data-page="studio"]) *::after {
    box-sizing: border-box;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) main {
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: none !important;
}

html body[data-page]:not([data-page="studio"]) :is(h1, h2, h3, h4, strong, b, .brand) {
    color: var(--ui-ink) !important;
    letter-spacing: 0 !important;
}

html body[data-page]:not([data-page="studio"]) :is(p, small, .muted, blockquote, label) {
    color: var(--ui-muted) !important;
}

html body[data-page]:not([data-page="studio"]) :is(input, select, textarea) {
    border-color: var(--ui-line) !important;
    color: var(--ui-ink) !important;
    background: var(--ui-panel-solid) !important;
    box-shadow: none !important;
}

html body.animaker-theme-night[data-page]:not([data-page="studio"]) :is(input, select, textarea) {
    background: rgba(16, 22, 29, 0.82) !important;
}

html body[data-page]:not([data-page="studio"]) .topbar {
    min-height: 70px !important;
    padding: 0 clamp(16px, 4vw, 72px) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    background: color-mix(in srgb, var(--ui-panel-solid) 86%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
}

html body.animaker-theme-night[data-page]:not([data-page="studio"]) .topbar {
    background: color-mix(in srgb, #151b22 88%, transparent) !important;
}

html body[data-page]:not([data-page="studio"]) :is(.shared-nav-links a, .nav a, .nav-button) {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    color: var(--ui-muted) !important;
    box-shadow: none !important;
}

html body[data-page]:not([data-page="studio"]) :is(.shared-nav-links a:hover, .shared-nav-links a.active, .nav a:hover, .nav a.active, .nav-button:hover) {
    color: var(--ui-ink) !important;
    background: var(--ui-panel-solid) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html body.animaker-theme-night[data-page]:not([data-page="studio"]) :is(.shared-nav-links a:hover, .shared-nav-links a.active, .nav a:hover, .nav a.active, .nav-button:hover) {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page]:not([data-page="studio"]) :is(.primary-btn, .primary-link) {
    min-height: 42px !important;
    border-radius: 999px !important;
    color: #10141c !important;
    background: linear-gradient(135deg, #b9f5ff, #ffe38c) !important;
    box-shadow: 0 12px 24px rgba(33, 183, 197, 0.14) !important;
}

html body[data-page]:not([data-page="studio"]) :is(.secondary-btn, .ghost-link) {
    min-height: 42px !important;
    border-radius: 999px !important;
    border-color: var(--ui-line) !important;
    color: var(--ui-ink) !important;
    background: color-mix(in srgb, var(--ui-panel-solid) 82%, transparent) !important;
    box-shadow: none !important;
}

html body[data-page]:not([data-page="studio"]) :is(.primary-btn:hover, .primary-link:hover, .secondary-btn:hover, .ghost-link:hover) {
    transform: translateY(-1px) !important;
}

html body[data-page="home"] main,
html body[data-page="home"] .vue-home,
html body[data-page="home"] .vue-home-root {
    width: 100% !important;
    max-width: none !important;
}

html body[data-page="home"] .vue-home {
    gap: clamp(22px, 3vw, 42px) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
}

html body[data-page="home"] .vue-home-gateway {
    width: 100vw !important;
    max-width: none !important;
    border-radius: 0 !important;
}

html body[data-page="home"] :is(.vue-home-creation, .vue-home-next, .vue-home-community-more, .vue-home-work-card, .vue-home-ip-card, .vue-home-feed-card, .vue-home-starter-card) {
    border: 1px solid var(--ui-line) !important;
    background: var(--ui-panel) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html body[data-page="home"] :is(.vue-home-creation, .vue-home-next, .vue-home-community-more) {
    width: min(1120px, calc(100vw - 32px)) !important;
    border-radius: var(--ui-radius) !important;
}

html body[data-page="home"] :is(.vue-home-work-card, .vue-home-ip-card, .vue-home-feed-card, .vue-home-starter-card, .vue-home-creation-card) {
    border-radius: 20px !important;
    overflow: hidden !important;
}

html body[data-page]:not([data-page="studio"]) :is(
    .auth-card,
    .comment-modal,
    .empty-state,
    .section-heading,
    .work-card,
    .feed-card,
    .player-card,
    .version-card,
    .cocreate-card,
    .vue-gallery-hero,
    .vue-gallery-stats article,
    .vue-gallery-source-notice,
    .vue-gallery-pulse,
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission,
    .vue-gallery-mission-grid article,
    .vue-gallery-creator-radar,
    .vue-gallery-radar-card,
    .vue-gallery-cocreate,
    .vue-gallery-cocreate-grid article,
    .vue-gallery-ip,
    .vue-gallery-feed-card,
    .vue-gallery-discovery,
    .vue-gallery-filter,
    .vue-gallery-skeleton,
    .vue-feed-hero,
    .vue-feed-next,
    .vue-feed-stats article,
    .vue-feed-source-notice,
    .vue-feed-response,
    .vue-feed-response-grid article,
    .vue-feed-loop,
    .vue-feed-loop-grid article,
    .vue-feed-command,
    .vue-feed-priority-grid article,
    .vue-feed-following-strip,
    .vue-feed-empty,
    .vue-feed-recommend,
    .vue-feed-player-card,
    .vue-me-hero,
    .vue-me-next,
    .vue-me-stats article,
    .vue-me-workflow article,
    .vue-me-section-nav a,
    .vue-me-ownership,
    .vue-me-ownership-card,
    .vue-me-source-notice,
    .vue-me-inventory,
    .vue-me-inventory-panel,
    .vue-me-triage,
    .vue-me-triage-grid article,
    .vue-me-more-section,
    .vue-templates-hero,
    .vue-templates-stats article,
    .vue-template-source-notice,
    .vue-template-pathfinder,
    .vue-character-pathfinder,
    .vue-creator-nextline,
    .vue-character-nextline,
    .vue-path-card,
    .vue-template-mini,
    .vue-template-starter,
    .vue-template-starter-grid article,
    .vue-template-more,
    .vue-character-more,
    .vue-template-match,
    .vue-template-fit-grid article,
    .vue-template-social,
    .vue-template-social-grid article,
    .vue-template-guide,
    .vue-template-guide-grid article,
    .vue-template-filter,
    .vue-template-card,
    .vue-characters-hero,
    .vue-characters-stats article,
    .vue-character-queue,
    .vue-character-queue-grid article,
    .vue-character-dimensions,
    .vue-character-dimension-grid article,
    .vue-character-completion,
    .vue-character-completion-grid article,
    .vue-character-remix,
    .vue-character-remix-grid article,
    .vue-character-guide,
    .vue-character-guide-grid article,
    .vue-character-filter,
    .vue-character-card,
    .vue-work-dock,
    .vue-work-readiness,
    .vue-work-readiness-grid article,
    .vue-work-launchpad,
    .vue-work-launchpad-grid article,
    .vue-work-task-card,
    .detail-panel,
    .vue-ip,
    .vue-ip-section-grid article,
    .vue-ip-series,
    .vue-ip-series-grid article,
    .vue-ip-production,
    .vue-ip-production-grid article,
    .vue-ip-cocreate,
    .vue-ip-cocreate-brief,
    .vue-ip-character-card,
    .vue-ip-activity-card,
    .vue-ip-version-list article
) {
    border-color: var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    color: var(--ui-text) !important;
    background: var(--ui-panel) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html body[data-page]:not([data-page="studio"]) :is(
    .vue-gallery-mission,
    .vue-template-starter,
    .vue-creator-nextline,
    .vue-character-nextline,
    .vue-me-next,
    .vue-me-triage,
    .vue-feed-response,
    .vue-character-completion,
    .vue-ip-production
) {
    background: linear-gradient(135deg, var(--ui-panel-solid), var(--ui-panel-soft)) !important;
}

html body.animaker-theme-night[data-page]:not([data-page="studio"]) :is(
    .vue-gallery-mission,
    .vue-template-starter,
    .vue-creator-nextline,
    .vue-character-nextline,
    .vue-me-next,
    .vue-me-triage,
    .vue-feed-response,
    .vue-character-completion,
    .vue-ip-production
) {
    background: linear-gradient(135deg, rgba(31, 39, 50, 0.94), rgba(22, 30, 39, 0.92)) !important;
}

html body[data-page]:not([data-page="studio"]) :is(
    .vue-gallery-pulse-grid article,
    .vue-gallery-mission-grid article,
    .vue-gallery-cocreate-grid article,
    .vue-feed-response-grid article,
    .vue-feed-loop-grid article,
    .vue-feed-priority-grid article,
    .vue-me-triage-grid article,
    .vue-template-starter-grid article,
    .vue-template-fit-grid article,
    .vue-template-social-grid article,
    .vue-template-guide-grid article,
    .vue-character-queue-grid article,
    .vue-character-dimension-grid article,
    .vue-character-completion-grid article,
    .vue-character-remix-grid article,
    .vue-character-guide-grid article,
    .vue-ip-series-grid article,
    .vue-ip-production-grid article
) {
    border-radius: 18px !important;
    background: var(--ui-panel-soft) !important;
    box-shadow: none !important;
}

html body[data-page]:not([data-page="studio"]) :is(
    .vue-gallery-feature,
    .vue-template-feature,
    .vue-character-feature,
    .vue-work-cover,
    .detail-cover,
    .oc-poster,
    .vue-home-feature,
    .vue-me-shot-list a
) {
    border-radius: var(--ui-radius) !important;
    overflow: hidden !important;
    background: #111827 !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

html body[data-page]:not([data-page="studio"]) :is(.vue-gallery-feature::after, .vue-template-feature::after, .vue-character-feature::after, .vue-me-shot-list a::after) {
    background: linear-gradient(180deg, transparent 36%, rgba(12, 18, 28, 0.78)) !important;
}

html body[data-page]:not([data-page="studio"]) :is(.pill, .eyebrow, .vue-filter-chip, .vue-sort-chip, .vue-template-chip, .vue-feed-filter-chip, .vue-gallery-action-status) {
    border-radius: 999px !important;
    border-color: var(--ui-line) !important;
    color: var(--ui-accent-ink) !important;
    background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-panel-solid)) !important;
    box-shadow: none !important;
}

html body.animaker-theme-night[data-page]:not([data-page="studio"]) :is(.pill, .eyebrow, .vue-filter-chip, .vue-sort-chip, .vue-template-chip, .vue-feed-filter-chip, .vue-gallery-action-status) {
    color: var(--ui-accent) !important;
    background: rgba(110, 231, 242, 0.11) !important;
}

html body[data-page]:not([data-page="studio"]) :is(
    .vue-gallery-filter,
    .vue-template-filter,
    .vue-character-filter
) {
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(136px, 0.72fr)) auto !important;
    gap: 12px !important;
}

html body[data-page]:not([data-page="studio"]) :is(
    .vue-gallery-sort-row,
    .vue-gallery-pulse-grid,
    .vue-gallery-mission-grid,
    .vue-template-starter-grid,
    .vue-template-fit-grid,
    .vue-template-social-grid,
    .vue-template-guide-grid,
    .vue-character-dimension-grid,
    .vue-character-completion-grid,
    .vue-character-remix-grid,
    .vue-character-guide-grid,
    .vue-feed-response-grid,
    .vue-feed-loop-grid,
    .vue-feed-priority-grid,
    .vue-me-triage-grid
) {
    gap: 12px !important;
}

html body[data-page]:not([data-page="studio"]) :is(
    .vue-gallery-ip img,
    .vue-gallery-feed-card > img,
    .work-card > img,
    .work-card > a > img,
    .vue-template-mini img,
    .vue-template-card > img,
    .vue-character-card > a > img,
    .feed-work img,
    .vue-me-mini-list img,
    .vue-character-queue-grid img,
    .vue-ip-character-card img
) {
    border-radius: 16px !important;
}

html body[data-page]:not([data-page="studio"]) :is(.section-heading, .vue-gallery-discovery-head, .vue-template-guide-head, .vue-character-guide-head, .vue-feed-command-head, .vue-feed-loop-head, .vue-me-inventory-head) {
    align-items: end !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page]:not([data-page="studio"]) :is(.section-heading h2, .vue-gallery-discovery-head h2, .vue-template-guide-head h2, .vue-character-guide-head h2, .vue-feed-command-head h2, .vue-feed-loop-head h2, .vue-me-inventory-head h2) {
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.08 !important;
}

html body[data-page]:not([data-page="studio"]) :is(.vue-gallery-copy h1, .vue-feed-hero h1, .vue-templates-copy h1, .vue-characters-copy h1, .vue-me-hero-copy h1) {
    font-size: clamp(38px, 5.8vw, 72px) !important;
    line-height: 0.98 !important;
}

html body[data-page]:not([data-page="studio"]) :is(.vue-gallery-copy p, .vue-feed-hero p, .vue-templates-copy p, .vue-characters-copy p, .vue-me-hero-copy p) {
    max-width: 720px !important;
    font-size: clamp(15px, 1.35vw, 17px) !important;
    line-height: 1.78 !important;
}

html body[data-page]:not([data-page="studio"]) :is(.vue-gallery-hero, .vue-feed-hero, .vue-templates-hero, .vue-characters-hero, .vue-me-hero) {
    padding: clamp(18px, 2.4vw, 30px) !important;
}

@media (max-width: 980px) {
    html body[data-page]:not([data-page="studio"]) .topbar {
        gap: 10px !important;
        padding: 0 14px !important;
    }

    html body[data-page]:not([data-page="studio"]) .shared-nav {
        gap: 10px !important;
    }

    html body[data-page]:not([data-page="home"]):not([data-page="studio"]) main {
        width: min(100%, calc(100vw - 20px)) !important;
    }

    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: 100vw !important;
        min-height: calc(100svh - 70px) !important;
        padding: 26px 16px 38px !important;
    }

    html body[data-page]:not([data-page="studio"]) :is(
        .vue-gallery-hero.has-feature,
        .vue-gallery-pulse,
        .vue-gallery-mission,
        .vue-gallery-creator-radar,
        .vue-gallery-cocreate,
        .vue-feed-response,
        .vue-template-pathfinder,
        .vue-character-pathfinder,
        .vue-creator-nextline,
        .vue-character-nextline,
        .vue-template-starter,
        .vue-template-match,
        .vue-character-queue,
        .vue-character-dimensions,
        .vue-character-completion,
        .vue-character-remix,
        .vue-me-hero,
        .vue-me-ownership,
        .vue-me-triage,
        .vue-work-dock,
        .vue-ip-series,
        .vue-ip-production,
        .vue-ip-cocreate
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page]:not([data-page="studio"]) :is(
        .vue-gallery-stats,
        .vue-templates-stats,
        .vue-me-stats,
        .vue-gallery-pulse-grid,
        .vue-gallery-mission-grid,
        .vue-gallery-cocreate-grid,
        .vue-gallery-ip-grid,
        .vue-gallery-feed,
        .vue-gallery-work-grid,
        .vue-gallery-creator-strip,
        .vue-feed-stats,
        .vue-feed-response-grid,
        .vue-feed-loop-grid,
        .vue-feed-priority-grid,
        .vue-feed-player-grid,
        .vue-feed-work-grid,
        .vue-template-starter-grid,
        .vue-template-fit-grid,
        .vue-template-social-grid,
        .vue-template-guide-grid,
        .vue-template-rank-grid,
        .vue-template-grid,
        .vue-character-queue-grid,
        .vue-character-dimension-grid,
        .vue-character-completion-grid,
        .vue-character-remix-grid,
        .vue-character-guide-grid,
        .vue-character-grid,
        .vue-me-ownership-grid,
        .vue-me-triage-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page]:not([data-page="studio"]) :is(
        .vue-gallery-filter,
        .vue-template-filter,
        .vue-character-filter
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    html body[data-page]:not([data-page="studio"]) {
        --ui-radius: 20px;
    }

    html body[data-page]:not([data-page="studio"]) .brand {
        max-width: 42vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body[data-page]:not([data-page="studio"]) .shared-nav-actions {
        gap: 6px !important;
    }

    html body[data-page]:not([data-page="studio"]) :is(.shared-nav-actions .primary-link, .shared-nav-actions .nav-button) {
        min-height: 36px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
    }

    html body[data-page]:not([data-page="studio"]) :is(
        .vue-gallery-stats,
        .vue-templates-stats,
        .vue-me-stats,
        .vue-gallery-pulse-grid,
        .vue-gallery-mission-grid,
        .vue-gallery-cocreate-grid,
        .vue-gallery-ip-grid,
        .vue-gallery-feed,
        .vue-gallery-work-grid,
        .vue-gallery-creator-strip,
        .vue-feed-stats,
        .vue-feed-response-grid,
        .vue-feed-loop-grid,
        .vue-feed-priority-grid,
        .vue-feed-player-grid,
        .vue-feed-work-grid,
        .vue-template-starter-grid,
        .vue-template-fit-grid,
        .vue-template-social-grid,
        .vue-template-guide-grid,
        .vue-template-rank-grid,
        .vue-template-grid,
        .vue-character-queue-grid,
        .vue-character-dimension-grid,
        .vue-character-completion-grid,
        .vue-character-remix-grid,
        .vue-character-guide-grid,
        .vue-character-grid,
        .vue-me-ownership-grid,
        .vue-me-triage-grid,
        .vue-me-shot-list
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] :is(.vue-home-creation, .vue-home-next, .vue-home-community-more) {
        width: calc(100vw - 18px) !important;
    }
}

/* 20260708-oc-flow-v1600: AI-first studio is full-color, lighter, and themed end to end. */
html body[data-page="studio"] {
    --studio-page: #f4f8f7;
    --studio-page-low: #eef4f3;
    --studio-panel-solid: #ffffff;
    --studio-panel: rgba(255, 255, 255, 0.88);
    --studio-panel-soft: rgba(240, 247, 247, 0.84);
    --studio-ink: #151923;
    --studio-text: #2d3440;
    --studio-muted: rgba(45, 52, 64, 0.68);
    --studio-line: rgba(21, 25, 35, 0.12);
    --studio-line-strong: rgba(21, 25, 35, 0.18);
    --studio-accent: #21b7c5;
    --studio-accent-ink: #0d6872;
    --studio-warm: #ffd166;
    --studio-pink: #ff6fae;
    --studio-shadow: 0 18px 46px rgba(39, 28, 62, 0.08);
    --studio-shadow-soft: 0 10px 26px rgba(39, 28, 62, 0.055);
    --studio-default-art-v1600: url("/animaker/img/generated/ux/ai-oc-studio-polished-v1600.webp");
    overflow-x: clip !important;
    color: var(--studio-text) !important;
    background: linear-gradient(180deg, var(--studio-page) 0%, var(--studio-page-low) 100%) !important;
}

html body[data-page="studio"].studio-theme-night,
html body.animaker-theme-night[data-page="studio"] {
    --studio-page: #151b22;
    --studio-page-low: #10161d;
    --studio-panel-solid: #202833;
    --studio-panel: rgba(30, 38, 48, 0.9);
    --studio-panel-soft: rgba(24, 33, 43, 0.9);
    --studio-ink: #f7fafc;
    --studio-text: rgba(233, 241, 245, 0.88);
    --studio-muted: rgba(207, 219, 226, 0.66);
    --studio-line: rgba(255, 255, 255, 0.14);
    --studio-line-strong: rgba(255, 255, 255, 0.2);
    --studio-accent: #6ee7f2;
    --studio-accent-ink: #b7f7fb;
    --studio-warm: #ffe08a;
    --studio-pink: #ff8abc;
    --studio-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    --studio-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.18);
    color: var(--studio-text) !important;
    background: linear-gradient(180deg, var(--studio-page) 0%, var(--studio-page-low) 100%) !important;
}

html body[data-page="studio"] *,
html body[data-page="studio"] *::before,
html body[data-page="studio"] *::after {
    box-sizing: border-box;
}

html body[data-page="studio"] :is(h1, h2, h3, h4, strong, b, .brand) {
    color: var(--studio-ink) !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"] :is(p, small, label, .muted) {
    color: var(--studio-muted) !important;
}

html body[data-page="studio"] .topbar {
    min-height: 70px !important;
    padding: 0 clamp(16px, 4vw, 72px) !important;
    border-bottom: 1px solid var(--studio-line) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 86%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
}

html body[data-page="studio"].studio-theme-night .topbar,
html body.animaker-theme-night[data-page="studio"] .topbar {
    background: color-mix(in srgb, #151b22 88%, transparent) !important;
}

html body[data-page="studio"] :is(.shared-nav-links a, .nav a, .nav-button) {
    border-radius: 999px !important;
    color: var(--studio-muted) !important;
    box-shadow: none !important;
}

html body[data-page="studio"] :is(.shared-nav-links a:hover, .shared-nav-links a.active, .nav a:hover, .nav a.active, .nav-button:hover) {
    color: var(--studio-ink) !important;
    background: var(--studio-panel-solid) !important;
    box-shadow: var(--studio-shadow-soft) !important;
}

html body[data-page="studio"].studio-theme-night :is(.shared-nav-links a:hover, .shared-nav-links a.active, .nav a:hover, .nav a.active, .nav-button:hover),
html body.animaker-theme-night[data-page="studio"] :is(.shared-nav-links a:hover, .shared-nav-links a.active, .nav a:hover, .nav a.active, .nav-button:hover) {
    color: var(--studio-ink) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="studio"] main {
    width: min(1440px, calc(100vw - 32px)) !important;
    padding-top: clamp(18px, 2.6vw, 34px) !important;
}

html body[data-page="studio"] .studio-hero-title.page-title {
    display: block !important;
    margin: 0 0 18px !important;
}

html body[data-page="studio"] .studio-hero-title.page-title > :is(.eyebrow, h1, p:not(.eyebrow), .studio-theme-switch, .vue-route-hero-shell, .studio-arrival-note, .studio-hero-beats) {
    display: none !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(390px, 0.74fr) !important;
    gap: clamp(14px, 2vw, 24px) !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: clamp(14px, 2vw, 24px) !important;
    border: 1px solid var(--studio-line) !important;
    border-radius: 28px !important;
    color: var(--studio-text) !important;
    background: var(--studio-panel) !important;
    box-shadow: var(--studio-shadow) !important;
}

html body[data-page="studio"] .studio-launchpad-copy {
    gap: 12px !important;
    padding: clamp(4px, 1vw, 10px) !important;
}

html body[data-page="studio"] .studio-launchpad-copy > span,
html body[data-page="studio"] :is(.eyebrow, .vue-assist-one-next span, .studio-bridge-head span, .vue-step-head .eyebrow) {
    border: 1px solid color-mix(in srgb, var(--studio-accent) 30%, transparent) !important;
    border-radius: 999px !important;
    color: var(--studio-accent-ink) !important;
    background: color-mix(in srgb, var(--studio-accent) 12%, var(--studio-panel-solid)) !important;
}

html body[data-page="studio"].studio-theme-night .studio-launchpad-copy > span,
html body.animaker-theme-night[data-page="studio"] .studio-launchpad-copy > span,
html body[data-page="studio"].studio-theme-night :is(.eyebrow, .vue-assist-one-next span, .studio-bridge-head span, .vue-step-head .eyebrow),
html body.animaker-theme-night[data-page="studio"] :is(.eyebrow, .vue-assist-one-next span, .studio-bridge-head span, .vue-step-head .eyebrow) {
    color: var(--studio-accent) !important;
    background: rgba(110, 231, 242, 0.11) !important;
}

html body[data-page="studio"] .studio-launchpad-copy h2 {
    max-width: 12.4em !important;
    font-size: clamp(30px, 4.1vw, 54px) !important;
}

html body[data-page="studio"] .studio-launchpad-copy label {
    display: grid !important;
    gap: 8px !important;
}

html body[data-page="studio"] :is(input, select, textarea) {
    border-color: var(--studio-line) !important;
    color: var(--studio-ink) !important;
    background: var(--studio-panel-solid) !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-theme-night :is(input, select, textarea),
html body.animaker-theme-night[data-page="studio"] :is(input, select, textarea) {
    background: rgba(16, 22, 29, 0.82) !important;
}

html body[data-page="studio"] .studio-launchpad-copy textarea {
    min-height: 104px !important;
    border-radius: 20px !important;
}

html body[data-page="studio"] .studio-launch-mini-path span {
    border-color: var(--studio-line) !important;
    color: var(--studio-text) !important;
    background: var(--studio-panel-soft) !important;
}

html body[data-page="studio"] :is(.primary-btn, .primary-link) {
    color: #10141c !important;
    background: linear-gradient(135deg, #b9f5ff, #ffe38c) !important;
    box-shadow: 0 12px 24px rgba(33, 183, 197, 0.14) !important;
}

html body[data-page="studio"] :is(.secondary-btn, .ghost-link, button.secondary-btn, .studio-launchpad-examples button) {
    border-color: var(--studio-line) !important;
    color: var(--studio-ink) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 82%, transparent) !important;
    box-shadow: none !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    min-height: 384px !important;
    border-color: var(--studio-line) !important;
    border-radius: 24px !important;
    background-image: var(--studio-default-art-v1600) !important;
    background-size: cover !important;
    background-position: 56% 48% !important;
    box-shadow: var(--studio-shadow-soft) !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    min-height: 384px !important;
    object-position: 56% 48% !important;
}

html body[data-page="studio"] .studio-launchpad-preview div {
    right: 14px !important;
    bottom: 14px !important;
    left: 14px !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.6) !important;
}

html body[data-page="studio"] .studio-advanced-start {
    margin: -4px 0 18px !important;
}

html body[data-page="studio"] .studio-advanced-start > summary {
    color: var(--studio-muted) !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 64%, transparent) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 388px) !important;
    gap: 18px !important;
    margin-top: 18px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-rail {
    top: 70px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-card,
html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active,
html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    border-color: var(--studio-line) !important;
    color: var(--studio-text) !important;
    background: var(--studio-panel) !important;
    box-shadow: var(--studio-shadow-soft) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-card {
    padding: 7px !important;
    border-radius: 26px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    min-height: 66px !important;
    border-color: color-mix(in srgb, var(--studio-accent) 22%, transparent) !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--studio-accent) 13%, var(--studio-panel-solid)), color-mix(in srgb, var(--studio-warm) 16%, var(--studio-panel-solid))) !important;
}

html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-assist-one-next,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    background: linear-gradient(135deg, rgba(35, 55, 65, 0.88), rgba(47, 44, 55, 0.82)) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
    border-radius: 28px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-step-head, .vue-core-write-head, .vue-visual-write-head, .vue-story-write-head, .vue-image-write-head, .studio-bridge-head, .vue-image-readiness-head, .vue-publish-decision-head) {
    border-color: var(--studio-line) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-ai-brief, .vue-image-readiness) {
    border-color: color-mix(in srgb, var(--studio-accent) 22%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--studio-accent) 10%, var(--studio-panel-solid)), color-mix(in srgb, var(--studio-warm) 12%, var(--studio-panel-solid))) !important;
}

html body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-panel.is-active :is(.vue-core-ai-brief, .vue-image-readiness),
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-ai-brief, .vue-image-readiness) {
    background: linear-gradient(135deg, rgba(35, 55, 65, 0.76), rgba(47, 44, 55, 0.66)) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-field, .vue-visual-field, .vue-story-field, .vue-image-field) :is(input, select, textarea) {
    border-radius: 16px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    top: 150px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    border-radius: 28px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
    min-height: clamp(360px, 44vh, 540px) !important;
    height: clamp(360px, 44vh, 540px) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    background: #111827 !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
    background-image: var(--studio-default-art-v1600) !important;
    background-size: cover !important;
    background-position: 58% 48% !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 58% 48% !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head {
    background: rgba(15, 23, 42, 0.58) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-info {
    padding: 0 !important;
}

@media (max-width: 1160px) {
    html body[data-page="studio"] main {
        width: min(100% - 28px, 940px) !important;
    }

    html body[data-page="studio"] .studio-launchpad-lite,
    html body[data-page="studio"].studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        position: relative !important;
        top: auto !important;
        order: -1 !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="studio"] main {
        width: calc(100vw - 16px) !important;
        padding-top: 12px !important;
    }

    html body[data-page="studio"] .studio-launchpad-lite {
        padding: 12px !important;
        border-radius: 22px !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview,
    html body[data-page="studio"] .studio-launchpad-preview img {
        min-height: 250px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active,
    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        border-radius: 22px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
        min-height: 250px !important;
        height: 250px !important;
    }
}

html body.animaker-theme-night[data-page="studio"].studio-theme-night .shared-nav .shared-nav-links a,
html body.animaker-theme-night[data-page="studio"].studio-theme-night .topbar .shared-nav-links a {
    color: rgba(233, 241, 245, 0.72) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-theme-night .shared-nav .shared-nav-links a:is(:hover, .active),
html body.animaker-theme-night[data-page="studio"].studio-theme-night .topbar .shared-nav-links a:is(:hover, .active) {
    color: #f7fafc !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html body:not(.animaker-theme-night)[data-page="studio"] .shared-nav .shared-nav-links a:is(:hover, .active),
html body:not(.animaker-theme-night)[data-page="studio"] .topbar .shared-nav-links a:is(:hover, .active) {
    color: #151923 !important;
}

/* 20260708-oc-flow-v1700: lighter portal-style home entry and balanced day/night shell. */
html body[data-page="home"] {
    --home-day-ink: #111827;
    --home-day-text: #2c3948;
    --home-day-muted: #617184;
    --home-day-paper: #f7fbfa;
    --home-day-panel: rgba(255, 255, 255, 0.78);
    --home-day-line: rgba(18, 28, 40, 0.11);
    --home-night-ink: #f6fbff;
    --home-night-text: #e2edf4;
    --home-night-muted: #b8c7d3;
    --home-night-paper: #1d2732;
    --home-night-panel: rgba(31, 41, 53, 0.72);
    --home-night-line: rgba(232, 244, 255, 0.14);
    background:
            radial-gradient(circle at 8% 4%, rgba(36, 183, 195, 0.11), transparent 28rem),
            linear-gradient(180deg, #fbfefe 0%, #f3faf9 52%, #fffaf3 100%) !important;
}

html body.animaker-theme-night[data-page="home"] {
    background:
            radial-gradient(circle at 12% 0%, rgba(109, 226, 236, 0.13), transparent 28rem),
            linear-gradient(180deg, #1a2430 0%, #243244 58%, #1e2937 100%) !important;
}

html body[data-page="home"].home-gateway-open .topbar,
html body[data-page="home"].home-gateway-open .shared-nav {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body[data-page="home"] .vue-home-gateway {
    isolation: isolate !important;
    place-items: center start !important;
    min-height: 100svh !important;
    padding: clamp(24px, 6vw, 92px) !important;
    color: var(--home-day-ink) !important;
    background-image:
            linear-gradient(90deg, rgba(250, 254, 253, 0.94) 0%, rgba(250, 254, 253, 0.74) 32%, rgba(250, 254, 253, 0.3) 62%, rgba(250, 254, 253, 0.05) 100%),
            var(--home-portal-art-v1700),
            var(--home-gateway-image) !important;
    background-position: center center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    color: var(--home-night-ink) !important;
    background-image:
            linear-gradient(90deg, rgba(20, 30, 42, 0.88) 0%, rgba(20, 30, 42, 0.66) 34%, rgba(20, 30, 42, 0.3) 66%, rgba(20, 30, 42, 0.08) 100%),
            var(--home-portal-art-v1700),
            var(--home-gateway-image) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    width: min(680px, 100%) !important;
    margin-left: clamp(0px, 5vw, 72px) !important;
    gap: 14px !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    min-height: 32px !important;
    color: #0d7885 !important;
    border-color: rgba(13, 120, 133, 0.18) !important;
    background: rgba(255, 255, 255, 0.68) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span {
    color: #a8f6ee !important;
    border-color: rgba(168, 246, 238, 0.22) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.2em !important;
    color: inherit !important;
    font-size: clamp(56px, 8.4vw, 116px) !important;
    line-height: 0.92 !important;
    text-shadow: none !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 560px !important;
    color: color-mix(in srgb, currentColor 74%, transparent) !important;
    font-size: clamp(16px, 1.5vw, 20px) !important;
    line-height: 1.68 !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    width: min(600px, 100%) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-gateway-steps em {
    min-width: 118px !important;
    padding: 9px 11px !important;
    border-radius: 16px !important;
    color: var(--home-day-ink) !important;
    border-color: rgba(17, 24, 39, 0.09) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 12px 30px rgba(30, 48, 66, 0.07) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-steps em {
    color: var(--home-night-ink) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(31, 41, 53, 0.58) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2) !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    right: clamp(16px, 4vw, 60px) !important;
    bottom: clamp(16px, 4vw, 56px) !important;
    min-height: 46px !important;
    color: #111827 !important;
    background: linear-gradient(135deg, #c9fff8, #ffe681) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    min-height: max(640px, calc(100svh - 72px)) !important;
    padding: clamp(26px, 4.6vw, 62px) clamp(18px, 5.6vw, 96px) !important;
    grid-template-columns: minmax(380px, 0.98fr) minmax(300px, 410px) !important;
    gap: clamp(20px, 3.6vw, 56px) !important;
    background-image:
            linear-gradient(90deg, rgba(250, 254, 253, 0.94) 0%, rgba(250, 254, 253, 0.82) 42%, rgba(250, 254, 253, 0.42) 72%, rgba(250, 254, 253, 0.16) 100%),
            var(--home-hero-image),
            var(--home-portal-art-v1700) !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(29, 39, 50, 0.92) 0%, rgba(29, 39, 50, 0.74) 42%, rgba(29, 39, 50, 0.4) 72%, rgba(29, 39, 50, 0.18) 100%),
            var(--home-hero-image),
            var(--home-portal-art-v1700) !important;
}

html body[data-page="home"] .vue-home-copy h1 {
    max-width: 7.7em !important;
    color: var(--home-day-ink) !important;
    font-size: clamp(42px, 5vw, 74px) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-copy h1 {
    color: var(--home-night-ink) !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 540px !important;
    color: var(--home-day-text) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    color: var(--home-night-text) !important;
}

html body[data-page="home"] .vue-home-brief,
html body[data-page="home"] .vue-home-feature,
html body[data-page="home"] .vue-home-creation,
html body[data-page="home"] .vue-home-next,
html body[data-page="home"] .vue-home-community-more {
    border-color: var(--home-day-line) !important;
    background: var(--home-day-panel) !important;
    box-shadow: 0 18px 44px rgba(28, 44, 62, 0.09) !important;
}

html body.animaker-theme-night[data-page="home"] :is(.vue-home-brief, .vue-home-feature, .vue-home-creation, .vue-home-next, .vue-home-community-more) {
    border-color: var(--home-night-line) !important;
    background: var(--home-night-panel) !important;
    box-shadow: 0 18px 44px rgba(5, 10, 18, 0.23) !important;
}

html body[data-page="home"] .vue-home-feature {
    min-height: 446px !important;
}

html body[data-page="home"] .vue-home-feature img {
    height: 264px !important;
    object-position: 50% 35% !important;
}

html body[data-page="home"] .vue-home-feature-body {
    color: var(--home-day-text) !important;
    background: color-mix(in srgb, white 70%, transparent) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-feature-body {
    color: var(--home-night-text) !important;
    background: rgba(31, 41, 53, 0.76) !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    min-height: 62px !important;
    border-radius: 16px !important;
}

html body[data-page="home"] .vue-home-brief-chips button img {
    width: 40px !important;
    height: 40px !important;
}

@media (max-width: 980px) {
    html body[data-page="home"] .vue-home-gateway {
        align-items: end !important;
        background-position: 60% center !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        margin-left: 0 !important;
    }

    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        background-position: 58% top !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        min-height: auto !important;
    }
}

@media (max-width: 680px) {
    html body[data-page="home"] .vue-home-gateway {
        padding: 22px 15px !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(46px, 13vw, 64px) !important;
    }

    html body[data-page="home"] .vue-home-gateway-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-gateway-steps em {
        min-width: 0 !important;
        padding: 8px !important;
    }

    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708-oc-flow-v1800: site-wide lightweight AI dock and balanced page theme. */
html body[data-page]:not([data-page="home"]):not([data-page="studio"]) {
    --site-ink: #121926;
    --site-text: #2b3747;
    --site-muted: #647386;
    --site-paper: #f7fbfa;
    --site-panel: rgba(255, 255, 255, 0.82);
    --site-panel-strong: #ffffff;
    --site-line: rgba(18, 28, 40, 0.11);
    --site-cyan: #1fb6c3;
    --site-gold: #ffe47c;
    --site-coral: #ff8fa8;
    --site-shadow: 0 18px 44px rgba(28, 44, 62, 0.09);
    color: var(--site-text) !important;
    background:
            radial-gradient(circle at 8% 0%, rgba(31, 182, 195, 0.1), transparent 26rem),
            radial-gradient(circle at 92% 4%, rgba(255, 228, 124, 0.12), transparent 24rem),
            linear-gradient(180deg, #fbfefe 0%, #f3faf9 55%, #fffaf4 100%) !important;
}

html body.animaker-theme-night[data-page]:not([data-page="home"]):not([data-page="studio"]) {
    --site-ink: #f6fbff;
    --site-text: #e2edf4;
    --site-muted: #b8c7d3;
    --site-paper: #1d2732;
    --site-panel: rgba(31, 41, 53, 0.76);
    --site-panel-strong: #263445;
    --site-line: rgba(232, 244, 255, 0.14);
    --site-cyan: #79e3eb;
    --site-gold: #ffe891;
    --site-coral: #ffa4b8;
    --site-shadow: 0 18px 44px rgba(5, 10, 18, 0.24);
    color: var(--site-text) !important;
    background:
            radial-gradient(circle at 10% 0%, rgba(121, 227, 235, 0.13), transparent 26rem),
            radial-gradient(circle at 90% 6%, rgba(255, 232, 145, 0.08), transparent 24rem),
            linear-gradient(180deg, #1a2430 0%, #243244 58%, #1f2b38 100%) !important;
}

html body[data-page].animaker-ai-dock-visible main {
    padding-bottom: clamp(112px, 12vh, 164px) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(.topbar, .shared-nav) {
    border-color: var(--site-line) !important;
    background: color-mix(in srgb, var(--site-panel-strong) 78%, transparent) !important;
    box-shadow: 0 10px 28px rgba(18, 28, 40, 0.06) !important;
}

html body.animaker-theme-night[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(.topbar, .shared-nav) {
    background: rgba(31, 41, 53, 0.82) !important;
    box-shadow: 0 10px 28px rgba(5, 10, 18, 0.18) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(.brand, .shared-nav-links a, .nav a, .nav-button) {
    color: var(--site-muted) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(.shared-nav-links a:hover, .shared-nav-links a.active, .nav a:hover, .nav a.active, .brand:hover, .nav-button:hover) {
    color: var(--site-ink) !important;
    background: color-mix(in srgb, var(--site-panel-strong) 72%, transparent) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(h1, h2, h3, h4, strong, b) {
    color: var(--site-ink) !important;
    letter-spacing: 0 !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(p, small, label, .muted) {
    color: var(--site-muted) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(input, textarea, select) {
    border-color: var(--site-line) !important;
    color: var(--site-text) !important;
    background: color-mix(in srgb, var(--site-panel-strong) 86%, transparent) !important;
}

html body.animaker-theme-night[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(input, textarea, select) {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(
    .vue-gallery-hero,
    .vue-templates-hero,
    .vue-characters-hero,
    .vue-feed-hero,
    .vue-me-hero,
    .vue-work-dock,
    .vue-ip-hero,
    .vue-export-hero,
    .auth-card,
    .vue-home-community-more,
    .empty-state,
    [class*="-card"],
    [class*="-panel"],
    [class*="-dock"],
    [class*="-command"],
    [class*="-empty"]
) {
    border-color: var(--site-line) !important;
    background: var(--site-panel) !important;
    box-shadow: var(--site-shadow) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(.primary-link, .primary-btn) {
    color: #101827 !important;
    background: linear-gradient(135deg, #c8fff8, var(--site-gold)) !important;
    box-shadow: 0 14px 30px rgba(31, 182, 195, 0.16) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(.secondary-btn, .ghost-link, .nav-button) {
    border-color: var(--site-line) !important;
    color: var(--site-text) !important;
    background: color-mix(in srgb, var(--site-panel-strong) 72%, transparent) !important;
}

html body[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(.pill, .eyebrow, [class*="-chip"]) {
    border-color: color-mix(in srgb, var(--site-cyan) 28%, transparent) !important;
    color: color-mix(in srgb, var(--site-cyan) 72%, var(--site-ink)) !important;
    background: color-mix(in srgb, var(--site-cyan) 10%, var(--site-panel-strong)) !important;
}

html body.animaker-theme-night[data-page]:not([data-page="home"]):not([data-page="studio"]) :is(.pill, .eyebrow, [class*="-chip"]) {
    color: var(--site-cyan) !important;
    background: rgba(121, 227, 235, 0.1) !important;
}

html body[data-page] .shared-ai-dock {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    z-index: 4300 !important;
    display: grid !important;
    grid-template-columns: minmax(160px, 0.72fr) minmax(260px, 1.25fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: min(1040px, calc(100vw - 36px)) !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border: 1px solid var(--site-line, rgba(18, 28, 40, 0.11)) !important;
    border-radius: 22px !important;
    color: var(--site-text, #2b3747) !important;
    background: color-mix(in srgb, var(--site-panel-strong, #ffffff) 86%, transparent) !important;
    box-shadow: 0 20px 54px rgba(18, 28, 40, 0.16) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
}

html body.animaker-theme-night[data-page] .shared-ai-dock {
    border-color: var(--site-line, rgba(232, 244, 255, 0.14)) !important;
    color: var(--site-text, #e2edf4) !important;
    background: rgba(31, 41, 53, 0.88) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28) !important;
}

html body[data-page] .shared-ai-dock-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html body[data-page] .shared-ai-dock-copy span,
html body[data-page] .shared-ai-dock label span {
    color: color-mix(in srgb, var(--site-cyan, #1fb6c3) 76%, var(--site-ink, #121926)) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

html body[data-page] .shared-ai-dock-copy strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--site-ink, #121926) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.animaker-theme-night[data-page] .shared-ai-dock-copy strong {
    color: var(--site-ink, #f6fbff) !important;
}

html body[data-page] .shared-ai-dock label {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

html body[data-page] .shared-ai-dock input {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    border: 1px solid var(--site-line, rgba(18, 28, 40, 0.11)) !important;
    border-radius: 16px !important;
    color: var(--site-text, #2b3747) !important;
    background: color-mix(in srgb, var(--site-panel-strong, #ffffff) 82%, transparent) !important;
    box-shadow: none !important;
}

html body.animaker-theme-night[data-page] .shared-ai-dock input {
    color: var(--site-text, #e2edf4) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page] .shared-ai-dock-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

html body[data-page] .shared-ai-dock-actions :is(.primary-link, .nav-button) {
    min-height: 42px !important;
    white-space: nowrap !important;
}

html body[data-page] .shared-ai-dock-actions .nav-button {
    padding-inline: 12px !important;
}

@media (max-width: 860px) {
    html body[data-page] .shared-ai-dock {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        width: min(520px, calc(100vw - 24px)) !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }

    html body[data-page] .shared-ai-dock-copy strong {
        white-space: normal !important;
    }

    html body[data-page] .shared-ai-dock-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    html body[data-page].animaker-ai-dock-visible main {
        padding-bottom: 224px !important;
    }
}

@media (max-width: 520px) {
    html body[data-page] .shared-ai-dock-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page] .shared-ai-dock-actions :is(.primary-link, .nav-button) {
        width: 100% !important;
    }

    html body[data-page].animaker-ai-dock-visible main {
        padding-bottom: 262px !important;
    }
}

/* 20260708-oc-flow-v1900: lighter next-step studio, safer public AI labels, new OC concept-board default. */
html body[data-page="studio"] {
    --studio-default-art-v1900: url("/animaker/img/generated/ux/default-oc-concept-board-v1900.webp");
    --studio-panel-v1900: rgba(255, 255, 255, 0.76);
    --studio-panel-soft-v1900: rgba(255, 255, 255, 0.56);
    --studio-line-v1900: rgba(19, 32, 44, 0.1);
    --studio-shadow-v1900: 0 18px 40px rgba(26, 43, 62, 0.08);
    background:
            radial-gradient(circle at 0% 0%, rgba(105, 216, 216, 0.13), transparent 28rem),
            radial-gradient(circle at 100% 8%, rgba(255, 220, 109, 0.16), transparent 28rem),
            linear-gradient(180deg, #fbfefd 0%, #f5fbf8 48%, #fff9ef 100%) !important;
}

html body[data-page="studio"].studio-theme-night,
html body.animaker-theme-night[data-page="studio"] {
    --studio-panel-v1900: rgba(31, 41, 50, 0.74);
    --studio-panel-soft-v1900: rgba(38, 49, 59, 0.58);
    --studio-line-v1900: rgba(232, 244, 255, 0.12);
    --studio-shadow-v1900: 0 20px 42px rgba(0, 0, 0, 0.2);
    background:
            radial-gradient(circle at 0% 0%, rgba(105, 216, 216, 0.13), transparent 28rem),
            radial-gradient(circle at 100% 8%, rgba(255, 220, 109, 0.09), transparent 28rem),
            linear-gradient(180deg, #202a35 0%, #263341 54%, #222d38 100%) !important;
}

html body[data-page="studio"] main {
    width: min(1320px, calc(100vw - 32px)) !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.56fr) !important;
    gap: clamp(12px, 2vw, 22px) !important;
    padding: clamp(14px, 2vw, 22px) !important;
    border-color: var(--studio-line-v1900) !important;
    border-radius: 26px !important;
    background: var(--studio-panel-v1900) !important;
    box-shadow: var(--studio-shadow-v1900) !important;
}

html body[data-page="studio"] .studio-launchpad-copy {
    gap: 10px !important;
}

html body[data-page="studio"] .studio-launchpad-copy h2 {
    max-width: 11em !important;
    font-size: clamp(30px, 4vw, 48px) !important;
    line-height: 1.04 !important;
}

html body[data-page="studio"] .studio-launchpad-copy p {
    max-width: 560px !important;
    line-height: 1.62 !important;
}

html body[data-page="studio"] .studio-launchpad-copy textarea {
    min-height: 88px !important;
    border-radius: 18px !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    min-height: 300px !important;
    max-height: 360px !important;
    border-radius: 22px !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    min-height: 300px !important;
}

html body[data-page="studio"] .studio-advanced-start,
html body[data-page="studio"].studio-wizard-ready .studio-path-banner,
html body[data-page="studio"].studio-wizard-ready .studio-advanced-start {
    display: none !important;
}

html body[data-page="studio"]:not(.studio-wizard-ready) .studio-hero-title.page-title,
html body[data-page="studio"].studio-wizard-ready:not(.studio-has-draft) .studio-hero-title.page-title {
    display: block !important;
}

html body[data-page="studio"]:not(.studio-wizard-ready) .studio-launchpad-lite,
html body[data-page="studio"].studio-wizard-ready:not(.studio-has-draft) .studio-launchpad-lite {
    display: grid !important;
}

html body[data-page="studio"].studio-wizard-ready:not(.studio-has-draft) .studio-workbench {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready.studio-has-draft .studio-hero-title.page-title,
html body[data-page="studio"].studio-wizard-ready.studio-has-draft .studio-launchpad-lite {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    gap: 16px !important;
    margin-top: 14px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    border-color: var(--studio-line-v1900) !important;
    border-radius: 22px !important;
    background: var(--studio-panel-v1900) !important;
    box-shadow: var(--studio-shadow-v1900) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-card > :not(.vue-assist-one-next):not(.vue-assist-mainline) {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    min-height: 88px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next strong {
    font-size: clamp(18px, 2vw, 24px) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-mainline {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-track-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-track-title strong {
    color: var(--studio-ink) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-groups {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-groups button {
    min-height: 76px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active,
html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    border-color: var(--studio-line-v1900) !important;
    background: var(--studio-panel-v1900) !important;
    box-shadow: var(--studio-shadow-v1900) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
    padding: clamp(14px, 1.8vw, 22px) !important;
    border-radius: 26px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-step-head, .vue-core-write-head, .vue-visual-write-head, .vue-story-write-head, .vue-image-write-head, .studio-bridge-head, .vue-image-readiness-head, .vue-publish-decision-head) {
    padding-bottom: 10px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-head strong, .vue-visual-write-head strong, .vue-story-write-head strong, .vue-image-write-head strong, .studio-bridge-head strong, .vue-image-readiness-head strong, .vue-publish-decision-head strong) {
    font-size: clamp(22px, 2.6vw, 34px) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-head, .vue-visual-head, .vue-story-head, .vue-core-mission, .vue-step-mission, .vue-core-quick-panel, .vue-creator-mode-coach, .vue-visual-route-card, .vue-visual-meter, .vue-story-meter, .vue-image-mode-board, .vue-cover-candidates, .studio-bridge-flow, .vue-image-readiness > small, .vue-ai-capability-panel) {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-field, .vue-visual-field, .vue-story-field, .vue-image-field) :is(input, select, textarea) {
    border-radius: 14px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    top: 144px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--studio-panel-solid) 82%, transparent) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
    min-height: clamp(330px, 42vh, 500px) !important;
    height: clamp(330px, 42vh, 500px) !important;
    border-radius: 20px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
    background-image: var(--studio-default-art-v1900) !important;
    background-size: cover !important;
    background-position: 50% 42% !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    content: var(--studio-default-art-v1900) !important;
    object-position: 50% 42% !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head {
    background: rgba(18, 25, 35, 0.5) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img {
    filter: saturate(0.98) brightness(1.05) !important;
}

html body[data-page="studio"]:not(.animaker-theme-night):not(.studio-theme-night).studio-wizard-ready .studio-preview.avatar-preview .vue-board-info,
html body[data-page="studio"]:not(.animaker-theme-night):not(.studio-theme-night).studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps,
html body[data-page="studio"]:not(.animaker-theme-night):not(.studio-theme-night).studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags {
    color: var(--studio-text) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
    font-size: clamp(22px, 2.1vw, 32px) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-source-card {
    display: none !important;
}

@media (max-width: 1160px) {
    html body[data-page="studio"] .studio-launchpad-lite,
    html body[data-page="studio"].studio-wizard-ready .studio-workbench,
    html body[data-page="studio"].studio-wizard-ready .vue-assist-card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
        top: auto !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="studio"] main {
        width: calc(100vw - 16px) !important;
    }

    html body[data-page="studio"] .studio-launchpad-lite {
        padding: 12px !important;
        border-radius: 22px !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview,
    html body[data-page="studio"] .studio-launchpad-preview img {
        min-height: 220px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-assist-groups,
    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-write-grid, .vue-visual-write-grid, .vue-story-write-grid, .vue-story-grid, .vue-image-primary-actions, .studio-bridge-actions) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next,
    html body[data-page="studio"].studio-wizard-ready .vue-assist-groups button {
        min-height: 0 !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
        min-height: 240px !important;
        height: 240px !important;
    }
}

/* 20260708-oc-flow-v2100: lighter whole-page day/night, daylight OC hero, reduced first-step noise. */
html body[data-page] {
    --oc-day-paper: #f8fcfb;
    --oc-day-surface: rgba(255, 255, 255, 0.82);
    --oc-day-surface-strong: rgba(255, 255, 255, 0.94);
    --oc-day-ink: #162033;
    --oc-day-text: #39475a;
    --oc-day-muted: #6f7b8c;
    --oc-day-line: rgba(20, 32, 48, 0.1);
    --oc-night-paper: #1e2833;
    --oc-night-surface: rgba(34, 45, 58, 0.76);
    --oc-night-surface-strong: rgba(42, 55, 70, 0.9);
    --oc-night-ink: #f4f8fb;
    --oc-night-text: #d9e4ec;
    --oc-night-muted: #aebdcc;
    --oc-night-line: rgba(232, 244, 255, 0.14);
    --oc-mint: #2bbfc2;
    --oc-mint-soft: #d9f8f4;
    --oc-gold: #ffe28a;
    --oc-coral: #ff7f9f;
    --oc-radius: 24px;
    --oc-radius-sm: 16px;
    --oc-shadow-day: 0 18px 44px rgba(24, 42, 64, 0.09);
    --oc-shadow-night: 0 18px 44px rgba(0, 0, 0, 0.22);
}

html body[data-page].animaker-theme-day,
html body[data-page]:not(.animaker-theme-night) {
    color: var(--oc-day-text) !important;
    background:
            linear-gradient(180deg, #f8fcfb 0%, #f3faf8 54%, #fff9ee 100%) !important;
}

html body[data-page].animaker-theme-night {
    color: var(--oc-night-text) !important;
    background:
            linear-gradient(180deg, #1f2934 0%, #273543 58%, #222d38 100%) !important;
}

html body[data-page] :is(.topbar, .shared-nav) {
    border-color: var(--oc-day-line) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 10px 28px rgba(24, 42, 64, 0.06) !important;
}

html body.animaker-theme-night[data-page] :is(.topbar, .shared-nav) {
    border-color: var(--oc-night-line) !important;
    background: rgba(31, 41, 53, 0.84) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

html body[data-page] :is(.primary-link, .primary-btn) {
    border-radius: 999px !important;
    color: #101827 !important;
    background: linear-gradient(135deg, #bffbf4, #ffe48c) !important;
    box-shadow: 0 12px 26px rgba(43, 191, 194, 0.14) !important;
}

html body[data-page] :is(.secondary-btn, .nav-button, .ghost-link) {
    border-radius: 999px !important;
}

html body[data-page="home"] {
    overflow-x: hidden !important;
}

html body[data-page="home"] main {
    width: 100% !important;
}

html body[data-page="home"] .vue-home {
    width: 100% !important;
}

html body[data-page="home"] .vue-home-gateway {
    min-height: 100svh !important;
    display: grid !important;
    align-items: center !important;
    padding: 82px clamp(18px, 7rem, 108px) !important;
    color: var(--oc-day-ink) !important;
    background-image:
            linear-gradient(90deg, rgba(248, 252, 251, 0.94) 0%, rgba(248, 252, 251, 0.74) 36%, rgba(248, 252, 251, 0.24) 66%, rgba(248, 252, 251, 0.06) 100%),
            var(--home-gateway-image) !important;
    background-position: center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    color: var(--oc-night-ink) !important;
    background-image:
            linear-gradient(90deg, rgba(24, 32, 42, 0.9) 0%, rgba(24, 32, 42, 0.64) 42%, rgba(24, 32, 42, 0.22) 72%, rgba(24, 32, 42, 0.06) 100%),
            var(--home-gateway-image) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    max-width: 650px !important;
    margin: 0 !important;
    display: grid !important;
    gap: 18px !important;
}

html body[data-page="home"] .vue-home-gateway-copy span,
html body[data-page="home"] .vue-home-gateway-cue {
    width: fit-content !important;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(1.05) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy span,
html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    background: rgba(31, 41, 53, 0.58) !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 8em !important;
    font-size: clamp(48px, 6.5rem, 104px) !important;
    line-height: 0.92 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 560px !important;
    font-size: clamp(17px, 1.25rem, 20px) !important;
    line-height: 1.72 !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-gateway-steps em {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border: 1px solid color-mix(in srgb, currentColor 13%, transparent) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    font-style: normal !important;
}

html body[data-page="home"] .vue-home-gateway-steps small {
    color: color-mix(in srgb, currentColor 72%, transparent) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: 100% !important;
    min-height: calc(100svh - 70px) !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(330px, 470px) !important;
    gap: clamp(18px, 3rem, 48px) !important;
    align-items: center !important;
    padding: clamp(32px, 5rem, 76px) max(24px, calc((100vw - 1240px) / 2)) !important;
    border-radius: 0 !important;
    color: var(--oc-day-text) !important;
    background-image:
            linear-gradient(90deg, rgba(248, 252, 251, 0.96) 0%, rgba(248, 252, 251, 0.78) 40%, rgba(248, 252, 251, 0.42) 74%, rgba(248, 252, 251, 0.16) 100%),
            var(--home-hero-image) !important;
    background-position: center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    color: var(--oc-night-text) !important;
    background-image:
            linear-gradient(90deg, rgba(24, 32, 42, 0.94) 0%, rgba(24, 32, 42, 0.72) 44%, rgba(24, 32, 42, 0.4) 76%, rgba(24, 32, 42, 0.14) 100%),
            var(--home-hero-image) !important;
}

html body[data-page="home"] section.vue-home-hero::before {
    opacity: 0.28 !important;
}

html body[data-page="home"] .vue-home-copy {
    max-width: 680px !important;
    gap: 16px !important;
}

html body[data-page="home"] .vue-home-copy h1 {
    max-width: 8.5em !important;
    color: var(--oc-day-ink) !important;
    font-size: clamp(42px, 5.7rem, 88px) !important;
    line-height: 0.96 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-copy h1 {
    color: var(--oc-night-ink) !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 560px !important;
    color: var(--oc-day-text) !important;
    font-size: 18px !important;
    line-height: 1.72 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    color: var(--oc-night-text) !important;
}

html body[data-page="home"] .vue-home-brief {
    max-width: 680px !important;
    padding: 12px !important;
    border: 1px solid var(--oc-day-line) !important;
    border-radius: var(--oc-radius) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: var(--oc-shadow-day) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief {
    border-color: var(--oc-night-line) !important;
    background: rgba(34, 45, 58, 0.76) !important;
    box-shadow: var(--oc-shadow-night) !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 76px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief textarea {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    min-width: 128px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-height: 54px !important;
    padding: 8px !important;
    border-radius: 18px !important;
}

html body[data-page="home"] .vue-home-brief-chips button img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
}

html body[data-page="home"] .vue-home-flow {
    width: min(100%, 680px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--oc-day-line) !important;
    border-radius: var(--oc-radius) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    box-shadow: none !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-flow {
    border-color: var(--oc-night-line) !important;
    background: rgba(34, 45, 58, 0.58) !important;
}

html body[data-page="home"] .vue-home-flow-head {
    gap: 4px !important;
    padding: 8px !important;
}

html body[data-page="home"] .vue-home-flow ol {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-flow li {
    min-height: 76px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: none !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-flow li {
    background: rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

html body[data-page="home"] .vue-home-feature {
    width: min(100%, 470px) !important;
    min-height: 560px !important;
    align-self: center !important;
    border: 1px solid var(--oc-day-line) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 22px 58px rgba(24, 42, 64, 0.12) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-feature {
    border-color: var(--oc-night-line) !important;
    background: rgba(34, 45, 58, 0.78) !important;
    box-shadow: var(--oc-shadow-night) !important;
}

html body[data-page="home"] .vue-home-feature > img {
    height: 300px !important;
    object-position: 58% 28% !important;
}

html body[data-page="home"] .vue-home-feature-body {
    padding: 18px !important;
}

html body[data-page="home"] .vue-home-feature-rail {
    width: 58px !important;
    background: rgba(24, 32, 44, 0.72) !important;
}

html body[data-page="home"] :is(.vue-home-creation, .vue-home-next, .vue-home-community-more) {
    width: min(100% - 40px, 1180px) !important;
    margin-inline: auto !important;
}

html body[data-page="home"] .vue-home-community-more {
    border-radius: var(--oc-radius) !important;
    background: var(--oc-day-surface) !important;
    box-shadow: var(--oc-shadow-day) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-community-more {
    background: var(--oc-night-surface) !important;
    box-shadow: var(--oc-shadow-night) !important;
}

html body[data-page="studio"] {
    --studio-panel-v2100: rgba(255, 255, 255, 0.82);
    --studio-soft-v2100: rgba(255, 255, 255, 0.58);
    --studio-line-v2100: rgba(20, 32, 48, 0.1);
    --studio-shadow-v2100: 0 16px 36px rgba(24, 42, 64, 0.08);
    background:
            linear-gradient(180deg, #f8fcfb 0%, #f4fbf8 56%, #fff9ef 100%) !important;
}

html body.animaker-theme-night[data-page="studio"],
html body[data-page="studio"].studio-theme-night {
    --studio-panel-v2100: rgba(34, 45, 58, 0.76);
    --studio-soft-v2100: rgba(42, 55, 70, 0.56);
    --studio-line-v2100: rgba(232, 244, 255, 0.14);
    --studio-shadow-v2100: 0 18px 42px rgba(0, 0, 0, 0.22);
    background:
            linear-gradient(180deg, #202a35 0%, #283643 56%, #222d38 100%) !important;
}

html body[data-page="studio"] .studio-hero-title.page-title {
    margin: 22px auto 14px !important;
    padding: 0 !important;
}

html body[data-page="studio"] .studio-hero-title.page-title > p:not(.eyebrow) {
    max-width: 640px !important;
}

html body[data-page="studio"] .studio-hero-beats {
    display: none !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    max-width: 1040px !important;
    margin: 16px auto 0 !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
    border-color: var(--studio-line-v2100) !important;
    border-radius: 28px !important;
    background: var(--studio-panel-v2100) !important;
    box-shadow: var(--studio-shadow-v2100) !important;
}

html body[data-page="studio"] .studio-launchpad-copy h2 {
    max-width: 12em !important;
    font-size: clamp(34px, 4.2rem, 56px) !important;
}

html body[data-page="studio"] .studio-launch-mini-path {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html body[data-page="studio"] .studio-launch-mini-path span {
    min-height: 34px !important;
    padding: 0 11px !important;
    border: 1px solid var(--studio-line-v2100) !important;
    border-radius: 999px !important;
    background: var(--studio-soft-v2100) !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    min-height: 280px !important;
    max-height: 340px !important;
    border-color: var(--studio-line-v2100) !important;
    border-radius: 24px !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    min-height: 280px !important;
    object-position: 58% 40% !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(286px, 340px) !important;
    gap: 14px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-card {
    grid-template-columns: minmax(0, 0.84fr) minmax(360px, 1fr) !important;
    border-radius: 24px !important;
    background: var(--studio-panel-v2100) !important;
    box-shadow: var(--studio-shadow-v2100) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(217, 248, 244, 0.72), rgba(255, 226, 138, 0.34)) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-assist-one-next,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-assist-one-next {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-track-title {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-groups button {
    min-height: 62px !important;
    border-radius: 15px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock,
html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav {
    border-color: var(--studio-line-v2100) !important;
    background: var(--studio-panel-v2100) !important;
    box-shadow: var(--studio-shadow-v2100) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
    padding: 18px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-core-command, .vue-core-write-now, .vue-visual-write-now, .vue-story-write-now, .vue-image-readiness, .vue-publish-decision) {
    border-radius: 22px !important;
    background: var(--studio-soft-v2100) !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview {
    top: 124px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    border-radius: 24px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dossier-rail,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-summary,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-status,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness-grid,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-file-stamps {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness {
    padding: 10px !important;
    border-radius: 18px !important;
    background: var(--studio-soft-v2100) !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-director-cue {
    padding: 10px !important;
    border-radius: 16px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
    min-height: clamp(300px, 38rem, 460px) !important;
    height: clamp(300px, 38rem, 460px) !important;
}

@media (max-width: 1180px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-inline: 24px !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        max-width: none !important;
        min-height: 420px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-assist-card,
    html body[data-page="studio"].studio-wizard-ready .studio-workbench {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-gateway {
        align-items: end !important;
        padding: 84px 16px 28px !important;
        background-position: 64% center !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1,
    html body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(40px, 3.8rem, 56px) !important;
    }

    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding: 28px 16px 40px !important;
        background-position: 58% top !important;
    }

    html body[data-page="home"] .vue-home-flow {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-flow ol {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-feature {
        min-height: 0 !important;
    }

    html body[data-page="studio"] .studio-launchpad-lite,
    html body[data-page="studio"].studio-wizard-ready .vue-assist-card,
    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active,
    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        border-radius: 22px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-assist-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
        min-height: 250px !important;
        height: 250px !important;
    }
}

/* 20260708-oc-flow-v2100-final-bg-tail: last-mile gateway art override. */
html body[data-page="home"] .vue-home-gateway {
    background:
            linear-gradient(90deg, rgba(248, 252, 251, 0.94) 0%, rgba(248, 252, 251, 0.74) 36%, rgba(248, 252, 251, 0.24) 66%, rgba(248, 252, 251, 0.06) 100%),
            url("/animaker/img/generated/ux/home-oc-daylight-studio-v2100.webp") center / cover no-repeat !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background:
            linear-gradient(90deg, rgba(24, 32, 42, 0.9) 0%, rgba(24, 32, 42, 0.64) 42%, rgba(24, 32, 42, 0.22) 72%, rgba(24, 32, 42, 0.06) 100%),
            url("/animaker/img/generated/ux/home-oc-daylight-studio-v2100.webp") center / cover no-repeat !important;
}

/* 20260708-oc-flow-v2100-interaction-tail: button hierarchy and guided flow cleanup. */
html body[data-page="home"] .vue-home-gateway,
html body[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(249, 253, 252, 0.93) 0%, rgba(249, 253, 252, 0.68) 34%, rgba(249, 253, 252, 0.16) 68%, rgba(249, 253, 252, 0.02) 100%),
            url("/animaker/img/generated/ux/home-oc-daylight-studio-v2100.webp") !important;
    background-position: center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(17, 24, 34, 0.91) 0%, rgba(17, 24, 34, 0.66) 38%, rgba(17, 24, 34, 0.26) 70%, rgba(17, 24, 34, 0.08) 100%),
            url("/animaker/img/generated/ux/home-oc-daylight-studio-v2100.webp") !important;
    background-position: center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page] img[src*="/img/generated/"],
html body[data-page="studio"].studio-theme-night img[src*="/img/generated/"] {
    filter: brightness(0.86) saturate(0.9) contrast(1.04);
}

html body[data-page] :is(.primary-link, .primary-btn) {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 24, 39, 0.9) !important;
    background: #15131f !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(22, 24, 34, 0.18) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}

html body[data-page] :is(.primary-link, .primary-btn)::after {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid currentColor !important;
    border-right: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    flex: 0 0 auto !important;
}

html body[data-page] :is(.primary-link:hover, .primary-btn:hover) {
    transform: translateY(-1px) !important;
    box-shadow: 0 20px 42px rgba(22, 24, 34, 0.23) !important;
}

html body[data-page] :is(.primary-btn:disabled, .secondary-btn:disabled) {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

html body[data-page] :is(.secondary-btn, .nav-button, .ghost-link, button.secondary-btn) {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: rgba(22, 24, 34, 0.76) !important;
    box-shadow: none !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

html body.animaker-theme-night[data-page] :is(.secondary-btn, .nav-button, .ghost-link, button.secondary-btn),
html body[data-page="studio"].studio-theme-night :is(.secondary-btn, .nav-button, .ghost-link, button.secondary-btn) {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(245, 248, 250, 0.78) !important;
}

html body[data-page] :is(input, textarea, select):focus {
    border-color: rgba(31, 177, 191, 0.78) !important;
    box-shadow: 0 0 0 4px rgba(31, 177, 191, 0.14) !important;
    outline: none !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 12rem !important;
    font-weight: 900 !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    min-width: 158px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #c7fff0, #ffe982) !important;
    color: #11131b !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow),
html body[data-page="home"] .vue-home-flow-head p,
html body[data-page="home"] .vue-home-flow li small,
html body[data-page="home"] .vue-home-route-card p,
html body[data-page="home"] .vue-home-feed-card p {
    display: none !important;
}

html body[data-page="home"] .vue-home-actions {
    gap: 10px !important;
    margin-top: 12px !important;
}

html body[data-page="home"] .vue-home-actions .primary-link {
    display: none !important;
}

html body[data-page="home"] .vue-home-brief-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
}

html body[data-page="home"] .vue-home-brief-actions .primary-link {
    min-height: 52px !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    border-radius: 22px !important;
    min-height: 148px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

html body[data-page="home"] .vue-home-brief-chips button:is(:hover, .is-active) {
    border-color: rgba(31, 177, 191, 0.48) !important;
    box-shadow: 0 18px 42px rgba(31, 177, 191, 0.12) !important;
    transform: translateY(-2px) !important;
}

html body[data-page="home"] .vue-home-flow {
    padding: 14px !important;
    border-radius: 24px !important;
}

html body[data-page="home"] .vue-home-flow ol {
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-flow li {
    min-height: 78px !important;
    border-radius: 18px !important;
}

html body[data-page="home"] .vue-home-flow li:first-child {
    border-color: rgba(31, 177, 191, 0.36) !important;
    box-shadow: inset 0 0 0 1px rgba(31, 177, 191, 0.14) !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    border-radius: 30px !important;
}

html body[data-page="studio"] .studio-launchpad-copy p,
html body[data-page="studio"] .studio-hero-beats small,
html body[data-page="studio"] .studio-mode-copy > p:not(.eyebrow),
html body[data-page="studio"] .studio-mode-card small,
html body[data-page="studio"] .studio-mode-roadmap strong,
html body[data-page="studio"] .studio-arrival-note small,
html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head p:not(.eyebrow),
html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head small,
html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav small,
html body[data-page="studio"] .studio-bridge-head p,
html body[data-page="studio"] .studio-bridge-flow p {
    display: none !important;
}

html body[data-page="studio"] .studio-launchpad-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
}

html body[data-page="studio"] .studio-launchpad-actions .primary-btn {
    min-height: 56px !important;
    font-size: 1rem !important;
}

html body[data-page="studio"] .studio-launchpad-actions .secondary-btn {
    min-width: 72px !important;
    padding-inline: 14px !important;
}

html body[data-page="studio"] .studio-launchpad-examples {
    display: grid !important;
    grid-template-columns: auto repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 8px !important;
}

html body[data-page="studio"] .studio-launchpad-examples span {
    font-size: 0 !important;
}

html body[data-page="studio"] .studio-launchpad-examples span::before {
    content: "灵感" !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    color: rgba(31, 177, 191, 0.86) !important;
}

html body[data-page="studio"] .studio-launchpad-examples button {
    min-height: 38px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

html body[data-page="studio"] .studio-launch-mini-path {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="studio"] .studio-launch-mini-path span {
    min-height: 52px !important;
    border-radius: 18px !important;
    align-items: center !important;
}

html body[data-page="studio"] .studio-launch-mini-path span:first-child {
    border-color: rgba(31, 177, 191, 0.36) !important;
    background: rgba(31, 177, 191, 0.1) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 24px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next strong {
    margin: 0 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next p {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next .primary-btn {
    min-width: 168px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-groups {
    gap: 8px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-groups button {
    min-height: 58px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-groups button.manual-active,
html body[data-page="studio"].studio-wizard-ready .vue-assist-groups button.active {
    border-color: rgba(31, 177, 191, 0.52) !important;
    background: linear-gradient(135deg, rgba(215, 255, 242, 0.92), rgba(255, 245, 183, 0.82)) !important;
    color: #10151f !important;
    box-shadow: 0 14px 32px rgba(31, 177, 191, 0.14) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav {
    position: sticky !important;
    bottom: 14px !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    backdrop-filter: blur(18px) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav div {
    min-width: 0 !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav span {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav .primary-btn {
    min-width: 140px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav .secondary-btn {
    min-width: 92px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active {
    scroll-margin-top: 104px !important;
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-brief-actions,
    html body[data-page="studio"] .studio-launchpad-actions,
    html body[data-page="studio"] .studio-launchpad-examples,
    html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next,
    html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page] :is(.primary-link, .primary-btn, .secondary-btn, .nav-button, .ghost-link) {
        width: 100% !important;
    }

    html body[data-page="studio"] .studio-launch-mini-path {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"] .studio-launchpad-examples span {
        font-size: 0.78rem !important;
    }

    html body[data-page="studio"] .studio-launchpad-examples span::before {
        content: none !important;
    }
}

/* 20260708-oc-flow-v2100-nav-and-entry-tail: remove duplicate fallback nav and keep entry actions near the work. */
html body[data-page] #sharedNavApp:not(:empty) ~ .nav,
html body[data-page] #sharedNavApp:not(:empty) ~ .primary-link {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    right: auto !important;
    left: clamp(210px, 27vw, 430px) !important;
    bottom: clamp(100px, 15vh, 180px) !important;
}

html body[data-page="studio"] .studio-hero-title.page-title {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: auto !important;
    overflow: visible !important;
}

html body[data-page="studio"] .studio-hero-title.page-title::after {
    content: none !important;
    display: none !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    overflow: hidden !important;
}

html body[data-page="studio"] .studio-launchpad-lite::before,
html body[data-page="studio"] .studio-launchpad-lite::after {
    opacity: 0.08 !important;
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-gateway-cue {
        left: 50% !important;
        right: auto !important;
        bottom: 34px !important;
        transform: translateX(-50%) !important;
    }

    html body[data-page="studio"] main {
        width: min(100%, calc(100vw - 20px)) !important;
        padding-top: 18px !important;
    }

    html body[data-page="studio"] .studio-hero-title.page-title {
        display: block !important;
        width: 100% !important;
        margin: 0 auto 18px !important;
    }

    html body[data-page="studio"] .studio-launchpad-lite {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        max-width: none !important;
        width: 100% !important;
        padding: 16px !important;
        border-radius: 24px !important;
    }

    html body[data-page="studio"] .studio-launchpad-copy {
        gap: 12px !important;
        padding: 0 !important;
    }

    html body[data-page="studio"] .studio-launchpad-copy h2 {
        max-width: 7em !important;
        font-size: clamp(40px, 14vw, 58px) !important;
        line-height: 0.98 !important;
    }

    html body[data-page="studio"] .studio-launchpad-copy textarea {
        width: 100% !important;
        min-height: 112px !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview {
        width: 100% !important;
        min-height: 220px !important;
        max-height: 260px !important;
        margin: 0 !important;
        border-radius: 20px !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview img {
        width: 100% !important;
        min-height: 220px !important;
        height: 220px !important;
        object-fit: cover !important;
    }

    html body[data-page="studio"] .studio-launch-mini-path {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708-oc-brief-v2300: low-friction OC brief surfaces. */
html body[data-page="home"] .vue-home-brief-output,
html body[data-page="studio"] .studio-brief-slots {
    display: grid !important;
    grid-template-columns: auto repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-top: 10px !important;
}

html body[data-page="home"] .vue-home-brief-output > span,
html body[data-page="studio"] .studio-brief-slots::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: rgba(31, 177, 191, 0.94) !important;
    background: rgba(31, 177, 191, 0.1) !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

html body[data-page="studio"] .studio-brief-slots::before {
    content: "OC Brief" !important;
}

html body[data-page="home"] .vue-home-brief-output em,
html body[data-page="studio"] .studio-brief-slots span {
    display: grid !important;
    align-content: center !important;
    gap: 2px !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(20, 32, 48, 0.1) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    font-style: normal !important;
    min-width: 0 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief-output em,
html body[data-page="studio"].studio-theme-night .studio-brief-slots span,
html body.animaker-theme-night[data-page="studio"] .studio-brief-slots span {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="home"] .vue-home-brief-output b,
html body[data-page="studio"] .studio-brief-slots span {
    color: rgba(31, 177, 191, 0.92) !important;
    font-size: 0.75rem !important;
    font-weight: 950 !important;
}

html body[data-page="home"] .vue-home-brief-output strong {
    overflow: hidden !important;
    color: rgba(22, 24, 34, 0.82) !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief-output strong {
    color: rgba(245, 248, 250, 0.86) !important;
}

html body[data-page="home"] .vue-home-brief-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    min-height: 116px !important;
    padding: 9px !important;
    border-radius: 18px !important;
}

html body[data-page="home"] .vue-home-brief-chips button img {
    height: 54px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

html body[data-page="home"] .vue-home-brief-chips button small {
    display: none !important;
}

html body[data-page="home"] .vue-home-creation {
    max-width: 1180px !important;
    margin-inline: auto !important;
    padding: 14px !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 16px 38px rgba(24, 42, 64, 0.07) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-creation {
    background: rgba(34, 45, 58, 0.58) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important;
}

html body[data-page="home"] .vue-home-creation-head p:not(.eyebrow),
html body[data-page="home"] .vue-home-creation-card p,
html body[data-page="home"] .vue-home-starter-card p,
html body[data-page="home"] .vue-home-next span {
    display: none !important;
}

html body[data-page="home"] .vue-home-creation-grid {
    gap: 10px !important;
}

html body[data-page="home"] .vue-home-creation-card {
    border-radius: 22px !important;
}

html body[data-page="studio"] .studio-brief-slots {
    margin-top: 2px !important;
}

html body[data-page="studio"] .studio-brief-slots span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    color: rgba(22, 24, 34, 0.78) !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
}

html body[data-page="studio"].studio-theme-night .studio-brief-slots span,
html body.animaker-theme-night[data-page="studio"] .studio-brief-slots span {
    color: rgba(245, 248, 250, 0.82) !important;
}

@media (max-width: 900px) {
    html body[data-page="home"] .vue-home-brief-output,
    html body[data-page="studio"] .studio-brief-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-brief-output > span,
    html body[data-page="studio"] .studio-brief-slots::before {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }

    html body[data-page="home"] .vue-home-brief-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-brief-output,
    html body[data-page="studio"] .studio-brief-slots {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260708-oc-brief-v2400: make guidance interactive instead of explanatory. */
html body[data-page="home"] .vue-home-brief.has-brief {
    border-color: rgba(31, 177, 191, 0.34) !important;
    box-shadow: 0 20px 54px rgba(31, 177, 191, 0.13) !important;
}

html body[data-page="home"] .vue-home-brief.has-brief .primary-link,
html body[data-page="studio"].studio-launch-has-brief .studio-launchpad-actions .primary-btn {
    background: linear-gradient(135deg, #bff7ec 0%, #fff06e 100%) !important;
    color: #10151f !important;
    box-shadow: 0 16px 34px rgba(31, 177, 191, 0.18) !important;
}

html body[data-page="home"] .vue-home-brief-output.is-ready em,
html body[data-page="studio"].studio-launch-has-brief .studio-brief-slots span {
    border-color: rgba(31, 177, 191, 0.32) !important;
    background: rgba(226, 255, 247, 0.72) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief-output.is-ready em,
html body[data-page="studio"].studio-theme-night.studio-launch-has-brief .studio-brief-slots span,
html body.animaker-theme-night[data-page="studio"].studio-launch-has-brief .studio-brief-slots span {
    border-color: rgba(139, 239, 229, 0.28) !important;
    background: rgba(86, 229, 213, 0.11) !important;
}

html body[data-page="studio"] .studio-launch-mini-path span,
html body[data-page="studio"] .studio-brief-slots span {
    position: relative !important;
    overflow: hidden !important;
}

html body[data-page="studio"] .studio-launch-mini-path span {
    border: 1px solid rgba(20, 32, 48, 0.1) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: rgba(22, 24, 34, 0.7) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

html body[data-page="studio"] .studio-launch-mini-path span.is-active,
html body[data-page="studio"] .studio-launch-mini-path span.is-done {
    border-color: rgba(31, 177, 191, 0.38) !important;
    color: #10151f !important;
}

html body[data-page="studio"] .studio-launch-mini-path span.is-active {
    background: linear-gradient(135deg, rgba(222, 252, 247, 0.95), rgba(255, 245, 173, 0.84)) !important;
    transform: translateY(-1px) !important;
}

html body[data-page="studio"] .studio-launch-mini-path span.is-done {
    background: rgba(228, 255, 248, 0.8) !important;
}

html body[data-page="studio"] .studio-launch-mini-path span.is-done::after {
    content: "完成" !important;
    margin-left: auto !important;
    color: rgba(31, 177, 191, 0.98) !important;
    font-size: 0.74rem !important;
    font-weight: 950 !important;
}

html body[data-page="studio"] .studio-brief-slots span::after {
    content: none !important;
}

html body[data-page="studio"] .studio-brief-slots span b,
html body[data-page="studio"] .studio-brief-slots span small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body[data-page="studio"] .studio-brief-slots span {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 1px !important;
}

html body[data-page="studio"] .studio-brief-slots span b {
    color: rgba(22, 24, 34, 0.84) !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
}

html body[data-page="studio"] .studio-brief-slots span small {
    margin-top: 3px !important;
    color: rgba(92, 101, 116, 0.72) !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
}

html body[data-page="studio"].studio-launch-has-brief .studio-brief-slots span small {
    color: rgba(31, 177, 191, 0.96) !important;
}

html body.animaker-theme-night[data-page="studio"] .studio-brief-slots span b,
html body[data-page="studio"].studio-theme-night .studio-brief-slots span b {
    color: rgba(245, 248, 250, 0.88) !important;
}

html body[data-page="studio"] .studio-hero-title.page-title > p:not(.eyebrow) {
    max-width: 24em !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    position: relative !important;
}

html body[data-page="studio"] .studio-launchpad-pins {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    margin: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

html body[data-page="studio"] .studio-launchpad-pins span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 999px !important;
    color: #10151f !important;
    background: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    backdrop-filter: blur(14px) !important;
}

html body.animaker-theme-night[data-page="studio"] .studio-launchpad-pins span,
html body[data-page="studio"].studio-theme-night .studio-launchpad-pins span {
    color: rgba(245, 248, 250, 0.9) !important;
    background: rgba(18, 24, 34, 0.62) !important;
}

html body[data-page="home"] .vue-home-brief-actions .primary-link,
html body[data-page="home"] .vue-home-brief-actions .secondary-btn,
html body[data-page="studio"] .studio-launchpad-actions .primary-btn,
html body[data-page="studio"] .studio-launchpad-actions .secondary-btn {
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
}

html body[data-page="home"] .vue-home-brief-output,
html body[data-page="home"] .vue-home-brief-output em,
html body[data-page="studio"] .studio-brief-slots,
html body[data-page="studio"] .studio-brief-slots span,
html body[data-page="studio"] .studio-launch-mini-path,
html body[data-page="studio"] .studio-launch-mini-path span {
    min-width: 0 !important;
}

@media (max-width: 760px) {
    html body[data-page="studio"],
    html body[data-page="studio"] main,
    html body[data-page="studio"] .studio-hero-title.page-title,
    html body[data-page="studio"] .studio-launchpad-lite,
    html body[data-page="studio"] .studio-launchpad-copy {
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body[data-page="home"] .vue-home-copy > p:not(.eyebrow),
    html body[data-page="studio"] .studio-hero-title.page-title > p:not(.eyebrow),
    html body[data-page="studio"] .studio-launchpad-preview {
        display: none !important;
    }

    html body[data-page="home"] .vue-home-brief-output,
    html body[data-page="studio"] .studio-brief-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    html body[data-page="home"] .vue-home-brief-output > span,
    html body[data-page="studio"] .studio-brief-slots::before {
        grid-column: 1 / -1 !important;
        min-height: 28px !important;
        justify-content: center !important;
    }

    html body[data-page="home"] .vue-home-brief-output em,
    html body[data-page="studio"] .studio-brief-slots span {
        min-height: 50px !important;
        padding: 7px 5px !important;
        border-radius: 14px !important;
        text-align: center !important;
    }

    html body[data-page="home"] .vue-home-brief-output b,
    html body[data-page="home"] .vue-home-brief-output strong,
    html body[data-page="studio"] .studio-brief-slots span,
    html body[data-page="studio"] .studio-brief-slots span b,
    html body[data-page="studio"] .studio-brief-slots span small {
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    html body[data-page="studio"] .studio-launch-mini-path {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    html body[data-page="studio"] .studio-launch-mini-path span {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        padding: 8px 6px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    html body[data-page="studio"] .studio-launch-mini-path span.is-done::after {
        display: none !important;
    }
}

/* 20260708-action-led-v2800 final cascade: keep the visible path action-first. */
html body[data-page] .shared-ai-dock {
    grid-template-columns: minmax(148px, 0.58fr) minmax(240px, 0.9fr) minmax(300px, 1.1fr) auto !important;
    border-radius: 24px !important;
}

html body[data-page] .shared-ai-dock.has-brief {
    border-color: rgba(31, 177, 191, 0.34) !important;
    box-shadow: 0 22px 58px rgba(31, 177, 191, 0.16) !important;
}

html body[data-page] .shared-ai-dock-picks {
    display: flex !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
}

html body[data-page] .shared-ai-dock-picks::-webkit-scrollbar {
    display: none !important;
}

html body[data-page] .shared-ai-dock-picks button {
    flex: 0 0 auto !important;
    max-width: 220px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--site-line, rgba(18, 28, 40, 0.12)) !important;
    border-radius: 999px !important;
    color: color-mix(in srgb, var(--site-text, #2b3747) 84%, var(--site-ink, #121926)) !important;
    background: color-mix(in srgb, var(--site-panel-strong, #ffffff) 76%, transparent) !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

html body[data-page] .shared-ai-dock-picks button:hover,
html body[data-page] .shared-ai-dock-picks button.active {
    border-color: rgba(31, 177, 191, 0.38) !important;
    color: #10151f !important;
    background: linear-gradient(135deg, rgba(214, 255, 247, 0.95), rgba(255, 244, 144, 0.9)) !important;
    box-shadow: 0 12px 26px rgba(31, 177, 191, 0.12) !important;
    transform: translateY(-1px) !important;
}

html body.animaker-theme-night[data-page] .shared-ai-dock-picks button {
    border-color: rgba(232, 244, 255, 0.14) !important;
    color: rgba(232, 244, 255, 0.86) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html body.animaker-theme-night[data-page] .shared-ai-dock-picks button:hover,
html body.animaker-theme-night[data-page] .shared-ai-dock-picks button.active {
    border-color: rgba(139, 239, 229, 0.34) !important;
    color: #10151f !important;
    background: linear-gradient(135deg, #bff7ec 0%, #fff06e 100%) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-next,
html body[data-page="studio"].studio-wizard-ready .vue-route-focus-card,
html body[data-page="studio"].studio-wizard-ready .vue-route-progress {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director {
    padding: clamp(14px, 1.8vw, 20px) !important;
    border: 1px solid var(--studio-line-v1900) !important;
    border-radius: 26px !important;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 255, 251, 0.7)),
            var(--studio-panel-v1900) !important;
    box-shadow: var(--studio-shadow-v1900) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-main {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy {
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy h2 {
    margin: 0 !important;
    color: var(--studio-ink, #121926) !important;
    font-size: clamp(24px, 3vw, 42px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy p {
    max-width: 24em !important;
    margin: 0 !important;
    color: rgba(57, 71, 90, 0.78) !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-stage {
    display: grid !important;
    grid-template-columns: minmax(118px, 0.34fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-step,
html body[data-page="studio"].studio-wizard-ready .vue-route-director-focus,
html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row {
    border: 1px solid rgba(20, 32, 48, 0.1) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-step,
html body[data-page="studio"].studio-wizard-ready .vue-route-director-focus {
    display: grid !important;
    align-content: center !important;
    gap: 7px !important;
    min-height: 112px !important;
    padding: 12px 14px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-focus p {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    background: rgba(247, 252, 250, 0.76) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button {
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 4px !important;
    min-height: 66px !important;
    min-width: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(31, 177, 191, 0.18) !important;
    border-radius: 16px !important;
    color: var(--studio-ink, #121926) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button span {
    color: rgba(31, 140, 154, 0.96) !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--studio-ink, #121926) !important;
    font-size: 0.86rem !important;
    font-weight: 950 !important;
    line-height: 1.22 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button:hover {
    border-color: rgba(31, 177, 191, 0.42) !important;
    background: linear-gradient(135deg, rgba(225, 255, 249, 0.96), rgba(255, 244, 157, 0.9)) !important;
    box-shadow: 0 14px 30px rgba(31, 177, 191, 0.13) !important;
    transform: translateY(-1px) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions {
    display: grid !important;
    grid-template-columns: minmax(180px, 0.7fr) auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 10px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions .primary-btn {
    min-height: 52px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
    box-shadow: 0 14px 30px rgba(31, 177, 191, 0.14) !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions .secondary-btn,
html body[data-page="studio"].studio-wizard-ready .vue-route-mode-chip {
    min-height: 44px !important;
    border-radius: 16px !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions small {
    overflow: hidden !important;
    color: rgba(57, 71, 90, 0.66) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director {
    background:
            linear-gradient(135deg, rgba(43, 55, 67, 0.9), rgba(32, 42, 53, 0.86)),
            var(--studio-panel-v1900) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director-step,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director-focus,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-choice-row,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director-step,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director-focus,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-choice-row {
    border-color: rgba(232, 244, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-choice-row button,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-choice-row button {
    border-color: rgba(232, 244, 255, 0.12) !important;
    color: rgba(245, 248, 250, 0.9) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-choice-row button strong,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-choice-row button strong,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-route-director-copy h2,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-route-director-copy h2 {
    color: rgba(245, 248, 250, 0.94) !important;
}

@media (max-width: 1040px) {
    html body[data-page] .shared-ai-dock {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    html body[data-page] .shared-ai-dock-copy,
    html body[data-page] .shared-ai-dock label,
    html body[data-page] .shared-ai-dock-picks {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 860px) {
    html body[data-page] .shared-ai-dock-picks button {
        max-width: 260px !important;
    }

    html body[data-page].animaker-ai-dock-visible main {
        padding-bottom: 286px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-route-director-main,
    html body[data-page="studio"].studio-wizard-ready .vue-route-director-stage,
    html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-route-director-actions small,
    html body[data-page="studio"].studio-wizard-ready .vue-route-director-copy p {
        display: none !important;
    }
}

@media (max-width: 520px) {
    html body[data-page] .shared-ai-dock {
        width: min(420px, calc(100vw - 20px)) !important;
        padding: 9px !important;
    }

    html body[data-page].animaker-ai-dock-visible main {
        padding-bottom: 318px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button strong {
        white-space: normal !important;
    }
}

/* 20260708-oc-gateway-v3200-final-tail: ensure late legacy cascades cannot override the new gateway/art direction. */
html body[data-page] {
    --oc-v3200-art-final: url("/animaker/img/generated/ux/ai-oc-creator-board-v3200.webp");
}

html body[data-page].animaker-theme-day,
html body[data-page]:not(.animaker-theme-night) {
    color: #3a4656 !important;
    background:
            radial-gradient(circle at 8% 0%, rgba(42, 209, 199, 0.13), transparent 28rem),
            linear-gradient(180deg, #f6fbfa 0%, #f7fcfa 52%, #fff8e9 100%) !important;
}

html body[data-page].animaker-theme-night {
    color: #d8e2eb !important;
    background:
            radial-gradient(circle at 12% 0%, rgba(42, 209, 199, 0.13), transparent 27rem),
            linear-gradient(180deg, #121a25 0%, #1c2835 58%, #111923 100%) !important;
}

html body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav, #sharedNavApp) {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body[data-page="home"] .vue-home-gateway,
html body[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(248, 253, 252, 0.94) 0%, rgba(248, 253, 252, 0.7) 35%, rgba(248, 253, 252, 0.17) 67%, rgba(248, 253, 252, 0.02) 100%),
            var(--oc-v3200-art-final) !important;
    background-position: center center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
            linear-gradient(90deg, rgba(13, 20, 30, 0.92) 0%, rgba(13, 20, 30, 0.7) 38%, rgba(13, 20, 30, 0.3) 72%, rgba(13, 20, 30, 0.1) 100%),
            var(--oc-v3200-art-final) !important;
}

html body[data-page="home"] .vue-home-gateway-steps,
html body[data-page="home"] .vue-home-flow {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 20em !important;
    font-size: clamp(16px, 1.4vw, 21px) !important;
    font-weight: 850 !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    left: clamp(18px, 7rem, 108px) !important;
    right: auto !important;
    bottom: clamp(34px, 9vh, 92px) !important;
    transform: none !important;
}

html body[data-page="home"] section.vue-home-hero {
    width: 100% !important;
    min-height: calc(100svh - 72px) !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 440px) !important;
    border-radius: 0 !important;
}

html body[data-page="home"] .vue-home-copy h1 {
    max-width: 7em !important;
    font-size: clamp(46px, 6.2vw, 86px) !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    display: block !important;
    max-width: 25em !important;
}

html body[data-page="home"] .vue-home-brief {
    max-width: 620px !important;
    padding: 10px !important;
    border-radius: 26px !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 64px !important;
}

html body[data-page="home"] .vue-home-brief-chips {
    max-height: 104px !important;
    overflow: hidden !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    min-height: 96px !important;
}

html body[data-page="home"] .vue-home-feature > img,
html body[data-page="studio"] .studio-launchpad-preview img {
    object-position: 55% 42% !important;
}

html body.animaker-theme-night[data-page] img[src*="/img/generated/"],
html body[data-page="studio"].studio-theme-night img[src*="/img/generated/"] {
    filter: brightness(0.78) saturate(0.88) contrast(1.08) !important;
}

html body[data-page] :is(.primary-link, .primary-btn) {
    border-color: rgba(42, 209, 199, 0.32) !important;
    color: #10151f !important;
    background: linear-gradient(135deg, #c2fff3 0%, #fff178 100%) !important;
    box-shadow: 0 15px 34px rgba(42, 209, 199, 0.16) !important;
}

html body[data-page].animaker-theme-night :is(.primary-link, .primary-btn),
html body[data-page="studio"].studio-theme-night :is(.primary-link, .primary-btn) {
    border-color: rgba(42, 209, 199, 0.42) !important;
    color: #f7fbff !important;
    background: linear-gradient(135deg, rgba(27, 44, 58, 0.98), rgba(25, 35, 47, 0.96)) !important;
}

@media (max-width: 1180px) {
    html body[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-gateway,
    html body[data-page="home"] section.vue-home-hero {
        background-position: 57% center !important;
    }

    html body[data-page="home"] .vue-home-gateway-cue {
        left: 16px !important;
        bottom: 24px !important;
    }

    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-brief-chips {
        max-height: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 20260708-oc-gateway-v3200-opacity-tail */
html body[data-page="home"] .vue-home-gateway {
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
}

@keyframes homeGatewayIn {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 20260708-oc-gateway-v3300-home-action-tail */
html body[data-page="home"] .vue-home-brief {
    display: grid !important;
    gap: 10px !important;
}

html body[data-page="home"] .vue-home-brief label {
    display: grid !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-brief-actions {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    margin: 0 !important;
}

html body[data-page="home"] .vue-home-brief-actions :is(.primary-link, .secondary-btn) {
    width: auto !important;
    min-width: 132px !important;
}

html body[data-page="home"] .vue-home-brief-actions .primary-link {
    min-height: 52px !important;
}

html body[data-page="home"] .vue-home-brief-actions .secondary-btn {
    min-height: 52px !important;
    padding-inline: 18px !important;
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-brief-actions :is(.primary-link, .secondary-btn) {
        width: 100% !important;
    }
}

/* 20260708-action-icons-v3400: add functional icons without turning every card into decoration. */
html body[data-page] :where(a, button)[data-ui-icon] {
    --ui-icon-bg: color-mix(in srgb, currentColor 11%, transparent);
    --ui-icon-size: 1.55em;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.52em !important;
}

html body[data-page] :where(a, button)[data-ui-icon]::before {
    content: var(--ui-icon, "•") !important;
    display: inline-grid !important;
    width: var(--ui-icon-size) !important;
    height: var(--ui-icon-size) !important;
    place-items: center !important;
    flex: 0 0 var(--ui-icon-size) !important;
    border-radius: 999px !important;
    background: var(--ui-icon-bg) !important;
    color: currentColor !important;
    font-size: 0.82em !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-align: center !important;
}

html body[data-page] [data-ui-icon="home"] { --ui-icon: "⌂"; }
html body[data-page] [data-ui-icon="studio"] { --ui-icon: "✎"; }
html body[data-page] [data-ui-icon="spark"] { --ui-icon: "✦"; }
html body[data-page] [data-ui-icon="shuffle"] { --ui-icon: "↻"; }
html body[data-page] [data-ui-icon="tune"] { --ui-icon: "≡"; }
html body[data-page] [data-ui-icon="community"] { --ui-icon: "◎"; }
html body[data-page] [data-ui-icon="template"] { --ui-icon: "▤"; }
html body[data-page] [data-ui-icon="archive"] { --ui-icon: "▣"; }
html body[data-page] [data-ui-icon="feed"] { --ui-icon: "◌"; }
html body[data-page] [data-ui-icon="user"] { --ui-icon: "◐"; }
html body[data-page] [data-ui-icon="login"] { --ui-icon: "↪"; }
html body[data-page] [data-ui-icon="logout"] { --ui-icon: "↩"; }
html body[data-page] [data-ui-icon="moon"] { --ui-icon: "◐"; }
html body[data-page] [data-ui-icon="sun"] { --ui-icon: "☼"; }
html body[data-page] [data-ui-icon="close"] { --ui-icon: "×"; }
html body[data-page] [data-ui-icon="signal"] { --ui-icon: "⌁"; }
html body[data-page] [data-ui-icon="stage"] { --ui-icon: "★"; }
html body[data-page] [data-ui-icon="mecha"] { --ui-icon: "⚙"; }
html body[data-page] [data-ui-icon="tide"] { --ui-icon: "≈"; }
html body[data-page] [data-ui-icon="bolt"] { --ui-icon: "↯"; }
html body[data-page] [data-ui-icon="core"] { --ui-icon: "◇"; }
html body[data-page] [data-ui-icon="visual"] { --ui-icon: "◒"; }
html body[data-page] [data-ui-icon="story"] { --ui-icon: "✎"; }
html body[data-page] [data-ui-icon="prompt"] { --ui-icon: "≣"; }
html body[data-page] [data-ui-icon="image"] { --ui-icon: "▧"; }
html body[data-page] [data-ui-icon="copy"] { --ui-icon: "⧉"; }
html body[data-page] [data-ui-icon="publish"] { --ui-icon: "↑"; }
html body[data-page] [data-ui-icon="save"] { --ui-icon: "✓"; }
html body[data-page] [data-ui-icon="edit"] { --ui-icon: "✎"; }
html body[data-page] [data-ui-icon="view"] { --ui-icon: "◉"; }
html body[data-page] [data-ui-icon="favorite"] { --ui-icon: "♡"; }
html body[data-page] [data-ui-icon="comment"] { --ui-icon: "≋"; }
html body[data-page] [data-ui-icon="follow"] { --ui-icon: "+"; }
html body[data-page] [data-ui-icon="export"] { --ui-icon: "⇱"; }
html body[data-page] [data-ui-icon="delete"] { --ui-icon: "×"; }
html body[data-page] [data-ui-icon="hide"] { --ui-icon: "−"; }
html body[data-page] [data-ui-icon="restore"] { --ui-icon: "↺"; }
html body[data-page] [data-ui-icon="filter"] { --ui-icon: "⌕"; }
html body[data-page] [data-ui-icon="search"] { --ui-icon: "⌕"; }
html body[data-page] [data-ui-icon="prev"] { --ui-icon: "←"; }
html body[data-page] [data-ui-icon="next"] { --ui-icon: "→"; }
html body[data-page] [data-ui-icon="refresh"] { --ui-icon: "↻"; }

html body[data-page] :is(.primary-link, .primary-btn)[data-ui-icon] {
    --ui-icon-bg: rgba(255, 255, 255, 0.16);
}

html body[data-page] :is(.secondary-btn, .nav-button, .ghost-link, .shared-nav-links a)[data-ui-icon] {
    --ui-icon-bg: rgba(20, 32, 48, 0.07);
}

html body.animaker-theme-night[data-page] :is(.secondary-btn, .nav-button, .ghost-link, .shared-nav-links a)[data-ui-icon],
html body[data-page="studio"].studio-theme-night :is(.secondary-btn, .nav-button, .ghost-link, .shared-nav-links a)[data-ui-icon] {
    --ui-icon-bg: rgba(255, 255, 255, 0.08);
}

html body[data-page] .shared-nav-links a[data-ui-icon] {
    gap: 0.36em !important;
}

html body[data-page] .shared-nav-links a[data-ui-icon]::before {
    --ui-icon-size: 1.38em;
    font-size: 0.76em !important;
}

html body[data-page] .shared-ai-dock-picks button[data-ui-icon]::before,
html body[data-page="studio"] .studio-launchpad-examples button[data-ui-icon]::before {
    --ui-icon-size: 1.35em;
    font-size: 0.72em !important;
}

html body[data-page="home"] .vue-home-brief-chips button[data-ui-icon]::before {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    --ui-icon-bg: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 20px rgba(22, 24, 34, 0.12) !important;
    z-index: 2 !important;
}

html body[data-page="studio"] .studio-mode-card[data-ui-icon]::before,
html body[data-page="studio"] .studio-quick-presets button[data-ui-icon]::before,
html body[data-page="studio"] .studio-spark-actions button[data-ui-icon]::before,
html body[data-page="studio"].studio-wizard-ready .vue-assist-groups button[data-ui-icon]::before,
html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button[data-ui-icon]::before {
    --ui-icon-bg: rgba(31, 177, 191, 0.12);
    margin-bottom: 2px !important;
}

html body[data-page="studio"] .studio-mode-card[data-ui-icon],
html body[data-page="studio"] .studio-quick-presets button[data-ui-icon],
html body[data-page="studio"] .studio-spark-actions button[data-ui-icon],
html body[data-page="studio"].studio-wizard-ready .vue-assist-groups button[data-ui-icon],
html body[data-page="studio"].studio-wizard-ready .vue-route-choice-row button[data-ui-icon] {
    justify-items: start !important;
    text-align: left !important;
}

/* 20260708-action-icons-v3500: card-like buttons keep content layout, icon becomes a corner affordance. */
html body[data-page] :is(
    .vue-core-actions button,
    .vue-starter-grid button,
    .vue-core-quick-grid article > div button,
    .vue-visual-route-card button,
    .vue-step-task-chips button,
    .vue-board-readiness-grid button,
    .vue-publish-mode-list button,
    .vue-publish-checks button,
    .vue-publish-gap-row button,
    .vue-publish-preview-gaps button
)[data-ui-icon] {
    position: relative !important;
    display: grid !important;
    align-items: start !important;
    justify-content: stretch !important;
    justify-items: start !important;
    gap: 6px !important;
    text-align: left !important;
}

html body[data-page] :is(
    .vue-core-actions button,
    .vue-starter-grid button,
    .vue-visual-route-card button,
    .vue-step-task-chips button,
    .vue-board-readiness-grid button,
    .vue-publish-mode-list button,
    .vue-publish-checks button
)[data-ui-icon]::before {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    --ui-icon-size: 1.42em;
    font-size: 0.72em !important;
    opacity: 0.92 !important;
}

html body[data-page] :is(
    .vue-publish-gap-row button,
    .vue-publish-preview-gaps button,
    .vue-core-quick-grid article > div button
)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

html body[data-page] :is(
    .vue-publish-gap-row button,
    .vue-publish-preview-gaps button,
    .vue-core-quick-grid article > div button
)[data-ui-icon]::before {
    position: static !important;
    --ui-icon-size: 1.35em;
}

html body[data-page="studio"] .studio-launch-mini-path span b {
    display: inline-grid !important;
    width: 1.9em !important;
    height: 1.9em !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(31, 177, 191, 0.11) !important;
}

html body[data-page="studio"].studio-launch-has-brief .studio-launch-mini-path span.is-done b,
html body[data-page="studio"] .studio-launch-mini-path span.is-active b {
    color: #10151f !important;
    background: linear-gradient(135deg, #bff7ec, #fff06e) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav [data-ui-icon="prev"]::after,
html body[data-page="studio"].studio-wizard-ready .studio-wizard-nav [data-ui-icon="next"]::after {
    content: none !important;
}

@media (max-width: 760px) {
    html body[data-page] :where(a, button)[data-ui-icon] {
        gap: 0.46em !important;
    }

    html body[data-page] :where(a, button)[data-ui-icon]::before {
        --ui-icon-size: 1.45em;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        display: none !important;
    }

    html body[data-page="studio"] .studio-launchpad-examples button[data-ui-icon]::before,
    html body[data-page] .shared-ai-dock-picks button[data-ui-icon]::before {
        display: none !important;
    }
}

/* 20260708-action-icons-v3400-override: win over older numbered launchpad pseudo labels. */
html body[data-page="studio"] :is(.studio-launchpad-actions, .studio-quick-actions, .studio-quick-secondary-actions, .studio-bridge-actions, .studio-path-banner, .studio-arrival-note, .studio-wizard-nav) :is(a, button, .primary-btn, .secondary-btn, .primary-link)[data-ui-icon]::before,
html body[data-page="studio"] :is(.studio-launchpad-examples, .studio-quick-presets, .studio-spark-actions) button[data-ui-icon]::before,
html body[data-page="home"] :is(.vue-home-brief-actions, .vue-home-actions, .vue-home-flow-head, .empty-state, .vue-home-empty-band) :is(a, button, .primary-btn, .secondary-btn, .primary-link)[data-ui-icon]::before,
html body[data-page] .shared-nav :is(a, button, .primary-link, .nav-button)[data-ui-icon]::before,
html body[data-page] .shared-ai-dock :is(a, button, .primary-link, .nav-button)[data-ui-icon]::before {
    content: var(--ui-icon, "•") !important;
}

/* 20260709-home-gateway-v3600: one-screen OC entry, then the lighter AI-first homepage. */
html body[data-page="home"].home-gateway-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #f7fbf8 !important;
}

html body.animaker-theme-night[data-page="home"].home-gateway-open {
    background: #101823 !important;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav, #sharedNavApp) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    padding: clamp(24px, 5vw, 72px) !important;
    display: grid !important;
    place-items: center start !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    background-image:
            linear-gradient(90deg, rgba(246, 251, 248, 0.96) 0%, rgba(246, 251, 248, 0.78) 32%, rgba(246, 251, 248, 0.18) 68%, rgba(246, 251, 248, 0.02) 100%),
            var(--home-gateway-image) !important;
    background-position: center center !important;
    background-size: cover !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
            linear-gradient(90deg, rgba(10, 18, 29, 0.94) 0%, rgba(10, 18, 29, 0.76) 34%, rgba(10, 18, 29, 0.34) 74%, rgba(10, 18, 29, 0.08) 100%),
            var(--home-gateway-image) !important;
}

html body[data-page="home"] .vue-home-gateway::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
            radial-gradient(circle at 18% 30%, rgba(36, 199, 190, 0.22), transparent 26rem),
            linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(246, 251, 248, 0.12)) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway::before {
    background:
            radial-gradient(circle at 18% 30%, rgba(36, 199, 190, 0.16), transparent 25rem),
            linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(9, 14, 22, 0.18)) !important;
}

html body[data-page="home"] .vue-home-gateway::after {
    content: "" !important;
    position: absolute !important;
    inset: clamp(16px, 2vw, 28px) !important;
    border: 1px solid rgba(28, 42, 54, 0.1) !important;
    border-radius: clamp(24px, 4vw, 44px) !important;
    pointer-events: none !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway::after {
    border-color: rgba(214, 235, 244, 0.16) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    position: relative !important;
    z-index: 2 !important;
    width: min(680px, 88vw) !important;
    padding: 0 !important;
    color: #10151f !important;
    text-shadow: none !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy {
    color: #f8fbff !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(31, 177, 191, 0.24) !important;
    color: #135c67 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span {
    color: #c8fff6 !important;
    background: rgba(13, 22, 32, 0.58) !important;
    border-color: rgba(190, 247, 236, 0.26) !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7em !important;
    margin: 22px 0 0 !important;
    display: grid !important;
    gap: 0 !important;
    font-size: clamp(64px, 9.5vw, 132px) !important;
    line-height: 0.88 !important;
    font-weight: 980 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 b {
    font: inherit !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 21em !important;
    margin: clamp(18px, 2.5vw, 30px) 0 0 !important;
    color: rgba(18, 25, 35, 0.82) !important;
    font-size: clamp(18px, 2vw, 28px) !important;
    line-height: 1.42 !important;
    font-weight: 850 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy p {
    color: rgba(232, 242, 248, 0.86) !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: inline-flex !important;
    width: auto !important;
    margin-top: clamp(18px, 2.8vw, 34px) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-gateway-steps em {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(31, 177, 191, 0.18) !important;
    background: rgba(255, 255, 255, 0.64) !important;
    color: rgba(21, 35, 47, 0.9) !important;
    font-style: normal !important;
    box-shadow: 0 12px 30px rgba(25, 35, 45, 0.08) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-steps em {
    color: rgba(239, 248, 252, 0.9) !important;
    background: rgba(13, 22, 32, 0.54) !important;
    border-color: rgba(190, 247, 236, 0.14) !important;
}

html body[data-page="home"] .vue-home-gateway-steps b,
html body[data-page="home"] .vue-home-gateway-steps small {
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

html body[data-page="home"] .vue-home-gateway-steps small {
    opacity: 0.68 !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    position: absolute !important;
    z-index: 2 !important;
    left: clamp(24px, 5vw, 72px) !important;
    right: auto !important;
    bottom: clamp(28px, 7vh, 80px) !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #111821 !important;
    background: linear-gradient(135deg, #c2fff3 0%, #fff178 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    box-shadow: 0 18px 50px rgba(25, 35, 45, 0.18) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    color: #f8fbff !important;
    background: rgba(15, 26, 38, 0.78) !important;
    border-color: rgba(190, 247, 236, 0.2) !important;
}

html body[data-page="home"] .vue-home-gateway-cue span {
    color: #102027 !important;
    -webkit-text-fill-color: #102027 !important;
    text-shadow: none !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue span {
    color: #f8fbff !important;
    -webkit-text-fill-color: #f8fbff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22) !important;
}

html body[data-page="home"] .vue-home-gateway-cue i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: rgba(16, 21, 31, 0.9) !important;
}

html body[data-page="home"] .vue-home-gateway-cue i::after {
    content: "→" !important;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

html body[data-page="home"] section.vue-home-hero {
    background-position: center center !important;
    overflow: clip !important;
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-gateway {
        padding: 22px !important;
        place-items: end start !important;
        background-position: 58% center !important;
        background-image:
                linear-gradient(180deg, rgba(246, 251, 248, 0.18) 0%, rgba(246, 251, 248, 0.58) 46%, rgba(246, 251, 248, 0.96) 100%),
                var(--home-gateway-image) !important;
    }

    html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
        background-image:
                linear-gradient(180deg, rgba(10, 18, 29, 0.18) 0%, rgba(10, 18, 29, 0.64) 48%, rgba(10, 18, 29, 0.96) 100%),
                var(--home-gateway-image) !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        width: min(100%, 340px) !important;
        padding-bottom: 86px !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(54px, 17vw, 72px) !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy p {
        max-width: 16em !important;
        font-size: 17px !important;
    }

    html body[data-page="home"] .vue-home-gateway-steps {
        flex-wrap: wrap !important;
        max-width: 280px !important;
    }

    html body[data-page="home"] .vue-home-gateway-cue {
        left: 22px !important;
        bottom: 22px !important;
        min-height: 48px !important;
    }
}

/* 20260709-action-icons-v3700: bounded line-icon system for action buttons. */
html body[data-page] {
    --ui-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10.5V20h13v-9.5'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E");
    --ui-icon-spark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.7l2.05 5.95L20 10.7l-5.95 2.05L12 18.7l-2.05-5.95L4 10.7l5.95-2.05L12 2.7zM18.5 15.2l.85 2.45 2.45.85-2.45.85-.85 2.45-.85-2.45-2.45-.85 2.45-.85.85-2.45z'/%3E%3C/svg%3E");
    --ui-icon-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.7-1.1L19.2 8.4a2.1 2.1 0 0 0 0-3l-.6-.6a2.1 2.1 0 0 0-3 0L5.1 15.3 4 20z'/%3E%3Cpath d='M14.5 5.8l3.7 3.7'/%3E%3C/svg%3E");
    --ui-icon-shuffle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h3.5c3.5 0 4.5 10 8 10H21'/%3E%3Cpath d='M18 14l3 3-3 3'/%3E%3Cpath d='M3 17h3.5c1.6 0 2.7-1.9 3.7-4'/%3E%3Cpath d='M14.5 7H21'/%3E%3Cpath d='M18 4l3 3-3 3'/%3E%3C/svg%3E");
    --ui-icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9'/%3E%3Cpath d='M17 6h3'/%3E%3Cpath d='M4 12h3'/%3E%3Cpath d='M11 12h9'/%3E%3Cpath d='M4 18h11'/%3E%3Cpath d='M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
    --ui-icon-community-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3.5 20c.8-3.2 2.5-5 4.5-5s3.7 1.8 4.5 5'/%3E%3Cpath d='M13.5 19c.6-2.2 1.9-3.4 3.5-3.4s2.9 1.2 3.5 3.4'/%3E%3C/svg%3E");
    --ui-icon-template-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M9 10h11'/%3E%3C/svg%3E");
    --ui-icon-archive-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10l4 4v12H5V4z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M8 14h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
    --ui-icon-user-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20c1.4-4.2 4-6.2 7.5-6.2s6.1 2 7.5 6.2'/%3E%3C/svg%3E");
    --ui-icon-login-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M14 4h5v16h-5'/%3E%3C/svg%3E");
    --ui-icon-logout-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 7l-5 5 5 5'/%3E%3Cpath d='M9 12h12'/%3E%3Cpath d='M10 4H5v16h5'/%3E%3C/svg%3E");
    --ui-icon-sun-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='M19 12h3'/%3E%3Cpath d='M4.9 4.9l2.1 2.1'/%3E%3Cpath d='M17 17l2.1 2.1'/%3E%3Cpath d='M19.1 4.9L17 7'/%3E%3Cpath d='M7 17l-2.1 2.1'/%3E%3C/svg%3E");
    --ui-icon-moon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.6 14.2A8.9 8.9 0 0 1 9.8 3.4 9 9 0 1 0 20.6 14.2z'/%3E%3C/svg%3E");
    --ui-icon-close-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/svg%3E");
    --ui-icon-eye-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --ui-icon-image-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.7'/%3E%3Cpath d='M6.5 17l4.5-4 3.2 3 2.1-2 3.2 3'/%3E%3C/svg%3E");
    --ui-icon-copy-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
    --ui-icon-upload-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M5 16v4h14v-4'/%3E%3C/svg%3E");
    --ui-icon-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
    --ui-icon-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 8.6c0 5.3-8.5 10.4-8.5 10.4S3.5 13.9 3.5 8.6A4.6 4.6 0 0 1 12 6a4.6 4.6 0 0 1 8.5 2.6z'/%3E%3C/svg%3E");
    --ui-icon-comment-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10.5H9l-5 4V5.5z'/%3E%3Cpath d='M8 10h8'/%3E%3Cpath d='M8 13h5'/%3E%3C/svg%3E");
    --ui-icon-plus-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    --ui-icon-external-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v6H4V6h6'/%3E%3C/svg%3E");
    --ui-icon-trash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M6.5 7l1 13h9l1-13'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E");
    --ui-icon-refresh-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6v5h-5'/%3E%3Cpath d='M4 18v-5h5'/%3E%3Cpath d='M18.5 10A7 7 0 0 0 6.2 7.2L4 9.5'/%3E%3Cpath d='M5.5 14a7 7 0 0 0 12.3 2.8L20 14.5'/%3E%3C/svg%3E");
    --ui-icon-search-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E");
    --ui-icon-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --ui-icon-arrow-left-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E");
    --ui-icon-core-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 9-8 9-8-9 8-9z'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E");
    --ui-icon-story-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h6a3 3 0 0 1 3 3V20a3 3 0 0 0-3-3H5V5.5z'/%3E%3Cpath d='M14 8.5a3 3 0 0 1 3-3h2V17h-2a3 3 0 0 0-3 3'/%3E%3C/svg%3E");
    --ui-icon-lines-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h14'/%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M5 18h9'/%3E%3C/svg%3E");
    --ui-icon-bolt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13.5 2L4.5 13h6L9.5 22l10-12h-6L13.5 2z'/%3E%3C/svg%3E");
    --ui-icon-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M3 10c3 0 3-3 6-3s3 3 6 3 3-3 6-3'/%3E%3Cpath d='M3 17c3 0 3-3 6-3s3 3 6 3 3-3 6-3'/%3E%3C/svg%3E");
    --ui-icon-gear-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.8v3'/%3E%3Cpath d='M12 18.2v3'/%3E%3Cpath d='M4 6.2l2.2 2.2'/%3E%3Cpath d='M17.8 15.6l2.2 2.2'/%3E%3Cpath d='M2.8 12h3'/%3E%3Cpath d='M18.2 12h3'/%3E%3Cpath d='M4 17.8l2.2-2.2'/%3E%3Cpath d='M17.8 8.4L20 6.2'/%3E%3C/svg%3E");
    --ui-icon-radio-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='3'/%3E%3Cpath d='M8 9l8-5'/%3E%3Ccircle cx='9' cy='14.5' r='2'/%3E%3Cpath d='M14 13h3'/%3E%3Cpath d='M14 17h2'/%3E%3C/svg%3E");
    --ui-icon-stage-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 16.9l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9L12 3z'/%3E%3C/svg%3E");
}

html body[data-page] [data-ui-icon="home"] { --ui-icon-mask: var(--ui-icon-home); }
html body[data-page] [data-ui-icon="studio"],
html body[data-page] [data-ui-icon="edit"] { --ui-icon-mask: var(--ui-icon-pen); }
html body[data-page] [data-ui-icon="spark"] { --ui-icon-mask: var(--ui-icon-spark-mask); }
html body[data-page] [data-ui-icon="shuffle"] { --ui-icon-mask: var(--ui-icon-shuffle-mask); }
html body[data-page] [data-ui-icon="tune"],
html body[data-page] [data-ui-icon="filter"] { --ui-icon-mask: var(--ui-icon-sliders); }
html body[data-page] [data-ui-icon="community"],
html body[data-page] [data-ui-icon="feed"] { --ui-icon-mask: var(--ui-icon-community-mask); }
html body[data-page] [data-ui-icon="follow"] { --ui-icon-mask: var(--ui-icon-plus-mask); }
html body[data-page] [data-ui-icon="template"] { --ui-icon-mask: var(--ui-icon-template-mask); }
html body[data-page] [data-ui-icon="archive"] { --ui-icon-mask: var(--ui-icon-archive-mask); }
html body[data-page] [data-ui-icon="user"] { --ui-icon-mask: var(--ui-icon-user-mask); }
html body[data-page] [data-ui-icon="login"] { --ui-icon-mask: var(--ui-icon-login-mask); }
html body[data-page] [data-ui-icon="logout"] { --ui-icon-mask: var(--ui-icon-logout-mask); }
html body[data-page] [data-ui-icon="moon"] { --ui-icon-mask: var(--ui-icon-moon-mask); }
html body[data-page] [data-ui-icon="sun"] { --ui-icon-mask: var(--ui-icon-sun-mask); }
html body[data-page] [data-ui-icon="close"] { --ui-icon-mask: var(--ui-icon-close-mask); }
html body[data-page] [data-ui-icon="core"] { --ui-icon-mask: var(--ui-icon-core-mask); }
html body[data-page] [data-ui-icon="visual"],
html body[data-page] [data-ui-icon="view"] { --ui-icon-mask: var(--ui-icon-eye-mask); }
html body[data-page] [data-ui-icon="story"] { --ui-icon-mask: var(--ui-icon-story-mask); }
html body[data-page] [data-ui-icon="prompt"] { --ui-icon-mask: var(--ui-icon-lines-mask); }
html body[data-page] [data-ui-icon="image"] { --ui-icon-mask: var(--ui-icon-image-mask); }
html body[data-page] [data-ui-icon="copy"] { --ui-icon-mask: var(--ui-icon-copy-mask); }
html body[data-page] [data-ui-icon="publish"] { --ui-icon-mask: var(--ui-icon-upload-mask); }
html body[data-page] [data-ui-icon="save"] { --ui-icon-mask: var(--ui-icon-check-mask); }
html body[data-page] [data-ui-icon="favorite"] { --ui-icon-mask: var(--ui-icon-heart-mask); }
html body[data-page] [data-ui-icon="comment"] { --ui-icon-mask: var(--ui-icon-comment-mask); }
html body[data-page] [data-ui-icon="export"] { --ui-icon-mask: var(--ui-icon-external-mask); }
html body[data-page] [data-ui-icon="delete"],
html body[data-page] [data-ui-icon="hide"] { --ui-icon-mask: var(--ui-icon-trash-mask); }
html body[data-page] [data-ui-icon="restore"],
html body[data-page] [data-ui-icon="refresh"] { --ui-icon-mask: var(--ui-icon-refresh-mask); }
html body[data-page] [data-ui-icon="search"] { --ui-icon-mask: var(--ui-icon-search-mask); }
html body[data-page] [data-ui-icon="next"] { --ui-icon-mask: var(--ui-icon-arrow-mask); }
html body[data-page] [data-ui-icon="prev"] { --ui-icon-mask: var(--ui-icon-arrow-left-mask); }
html body[data-page] [data-ui-icon="bolt"] { --ui-icon-mask: var(--ui-icon-bolt-mask); }
html body[data-page] [data-ui-icon="signal"] { --ui-icon-mask: var(--ui-icon-radio-mask); }
html body[data-page] [data-ui-icon="stage"] { --ui-icon-mask: var(--ui-icon-stage-mask); }
html body[data-page] [data-ui-icon="mecha"] { --ui-icon-mask: var(--ui-icon-gear-mask); }
html body[data-page] [data-ui-icon="tide"] { --ui-icon-mask: var(--ui-icon-wave-mask); }

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :where(a, button)[data-ui-icon] {
        --ui-icon-size: 1.18em;
        --ui-icon-opacity: 0.88;
        gap: 0.56em !important;
    }

    html body[data-page] :where(a, button)[data-ui-icon]::before {
        content: "" !important;
        width: var(--ui-icon-size) !important;
        height: var(--ui-icon-size) !important;
        flex: 0 0 var(--ui-icon-size) !important;
        border-radius: 0 !important;
        background: currentColor !important;
        opacity: var(--ui-icon-opacity) !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        box-shadow: none !important;
    }

    html body[data-page] :is(.primary-link, .primary-btn)[data-ui-icon] {
        --ui-icon-size: 1.22em;
        --ui-icon-opacity: 0.94;
    }

    html body[data-page] :is(.secondary-btn, .nav-button, .ghost-link, .shared-nav-links a)[data-ui-icon] {
        --ui-icon-opacity: 0.72;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        --ui-icon-size: 1.02em;
    }

    html body[data-page] :is(
        .vue-core-actions button,
        .vue-starter-grid button,
        .vue-core-quick-grid article > div button,
        .vue-visual-route-card button,
        .vue-step-task-chips button,
        .vue-board-readiness-grid button,
        .vue-publish-mode-list button,
        .vue-publish-checks button,
        .vue-publish-gap-row button,
        .vue-publish-preview-gaps button
    )[data-ui-icon]::before {
        --ui-icon-size: 1.18em;
        width: var(--ui-icon-size) !important;
        height: var(--ui-icon-size) !important;
    }
}

html body[data-page] .ui-action-mark[data-ui-icon] {
    display: inline-grid;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.42em;
    place-items: center;
    flex: 0 0 auto;
    vertical-align: -0.14em;
}

html body[data-page] .ui-action-mark[data-ui-icon]::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    opacity: 0.82;
    -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat;
    mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat;
}

/* 20260709-semantic-action-icons-v3900: keep icons useful, not decorative. */
html body[data-page] :is(
    .detail-actions,
    .modal-actions,
    .notification-actions,
    .generator-actions,
    .vue-empty-actions,
    .vue-work-actions,
    .vue-work-readiness-actions,
    .vue-work-launchpad-actions,
    .vue-work-task-copy,
    .vue-gallery-pulse-actions,
    .vue-gallery-mission-actions,
    .vue-gallery-radar-card-actions,
    .vue-template-starter-actions,
    .vue-template-match-actions,
    .vue-template-social-actions,
    .vue-templates-actions,
    .vue-command-actions,
    .vue-me-triage-actions,
    .vue-me-pipeline-actions,
    .vue-feed-loop-head,
    .vue-feed-player-actions,
    .vue-ip-series-actions,
    .vue-nextline-actions,
    .vue-character-completion-actions,
    .vue-user-fit-actions
) :is(a, button)[data-ui-icon] {
    min-width: 0 !important;
    gap: 0.5em !important;
}

html body[data-page] :is(.primary-link, .primary-btn)[data-ui-icon]::before {
    transform: translateY(-0.02em) !important;
}

html body[data-page] :is(
    .vue-work-mode-picker,
    .vue-home-brief-chips button,
    .vue-starter-grid button,
    .vue-visual-route-card button,
    .vue-step-task-chips button,
    .vue-board-readiness-grid button,
    .vue-publish-mode-list button,
    .vue-publish-checks button
)[data-ui-icon] {
    position: relative !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(
        .vue-work-mode-picker,
        .vue-starter-grid button,
        .vue-visual-route-card button,
        .vue-step-task-chips button,
        .vue-board-readiness-grid button,
        .vue-publish-mode-list button,
        .vue-publish-checks button
    )[data-ui-icon]::before {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        opacity: 0.58 !important;
    }

    html body[data-page] .vue-work-mode-picker[data-ui-icon] {
        padding-right: 42px !important;
    }

    html body[data-page] :is(.modal-actions, .detail-actions) :is(a, button)[data-ui-icon="close"]::before,
    html body[data-page] :is(.modal-actions, .detail-actions) :is(a, button)[data-ui-icon="delete"]::before {
        opacity: 0.62 !important;
    }
}

html body[data-page="home"] :is(.vue-home-hero-routes span, .vue-home-creation-card strong, .vue-home-starter-card small, .vue-home-next strong) {
    display: inline-flex !important;
    align-items: center !important;
}

/* 20260709-lightweight-shell-v3800: whole-page day/night shell and compact AI entry. */
html:has(body[data-page]) {
    min-height: 100%;
    background: #f6fbfa;
}

html:has(body.animaker-theme-night[data-page]) {
    background: #111923;
}

html body[data-page] {
    min-height: 100vh !important;
    background-color: #f6fbfa !important;
    background-attachment: fixed !important;
}

html body[data-page].animaker-theme-night,
html body.animaker-theme-night[data-page] {
    background-color: #111923 !important;
}

html body[data-page] main {
    min-height: calc(100vh - 72px) !important;
}

html body[data-page].animaker-ai-dock-compact main {
    padding-bottom: clamp(34px, 5vw, 62px) !important;
}

html body[data-page] .shared-ai-mini-dock {
    position: fixed !important;
    right: clamp(14px, 2vw, 26px) !important;
    bottom: clamp(14px, 2vw, 26px) !important;
    z-index: 950 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: min(520px, calc(100vw - 28px)) !important;
    padding: 8px !important;
    border: 1px solid rgba(21, 150, 163, 0.18) !important;
    border-radius: 999px !important;
    color: #172131 !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 18px 50px rgba(25, 41, 54, 0.16) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
}

html body.animaker-theme-night[data-page] .shared-ai-mini-dock {
    border-color: rgba(190, 247, 236, 0.16) !important;
    color: #edf7fb !important;
    background: rgba(18, 27, 38, 0.82) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3) !important;
}

html body[data-page] .shared-ai-mini-dock :is(button, a) {
    border: 0 !important;
    text-decoration: none !important;
}

html body[data-page] .shared-ai-mini-main {
    display: inline-grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 1px !important;
    align-items: center !important;
    min-height: 46px !important;
    max-width: 260px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    color: inherit !important;
    background: transparent !important;
    font: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
}

html body[data-page] .shared-ai-mini-main::before {
    grid-row: 1 / span 2 !important;
}

html body[data-page] .shared-ai-mini-main span,
html body[data-page] .shared-ai-mini-main strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page] .shared-ai-mini-main span {
    color: color-mix(in srgb, var(--cyan) 74%, #172131) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

html body[data-page] .shared-ai-mini-main strong {
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

html body[data-page] .shared-ai-mini-go {
    min-height: 42px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    color: #111821 !important;
    background: linear-gradient(135deg, #c2fff3 0%, #fff178 100%) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 28px rgba(31, 177, 191, 0.14) !important;
}

html body[data-page] .shared-ai-mini-close {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    color: rgba(23, 33, 49, 0.74) !important;
    background: rgba(16, 28, 40, 0.06) !important;
    font: 0/0 a !important;
    cursor: pointer !important;
}

html body.animaker-theme-night[data-page] .shared-ai-mini-close {
    color: rgba(237, 247, 251, 0.78) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page] .shared-ai-mini-close::before {
    margin: auto !important;
}

html body[data-page] .shared-ai-dock {
    right: clamp(14px, 2vw, 26px) !important;
    bottom: clamp(14px, 2vw, 26px) !important;
    width: min(960px, calc(100vw - 28px)) !important;
}

@media (max-width: 760px) {
    html body[data-page] .shared-ai-mini-dock {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        justify-content: stretch !important;
    }

    html body[data-page] .shared-ai-mini-main {
        flex: 1 1 auto !important;
        max-width: none !important;
        padding-inline: 12px !important;
    }

    html body[data-page] .shared-ai-mini-go {
        flex: 0 0 auto !important;
        padding-inline: 12px !important;
    }
}

/* 20260709-studio-focus-v4000: one-task-at-a-time creator flow. */
html body[data-page="studio"].studio-focus-flow {
    --studio-focus-panel: rgba(255, 255, 255, 0.84);
    --studio-focus-soft: rgba(245, 250, 249, 0.82);
    --studio-focus-line: rgba(26, 50, 64, 0.1);
    --studio-focus-ink: #111821;
    --studio-focus-text: #425066;
    --studio-focus-muted: #7b8797;
    --studio-focus-accent: #20c5bd;
    --studio-focus-warm: #f6d96a;
    --studio-focus-shadow: 0 20px 70px rgba(25, 41, 54, 0.11);
}

html body[data-page="studio"].studio-focus-flow.studio-theme-night,
html body.animaker-theme-night[data-page="studio"].studio-focus-flow {
    --studio-focus-panel: rgba(29, 38, 49, 0.82);
    --studio-focus-soft: rgba(20, 29, 40, 0.76);
    --studio-focus-line: rgba(221, 240, 247, 0.13);
    --studio-focus-ink: #f5f9fb;
    --studio-focus-text: #d7e2ea;
    --studio-focus-muted: #99a9b7;
    --studio-focus-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

html body[data-page="studio"].studio-focus-flow main {
    width: min(1240px, calc(100vw - 44px)) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-hero-title.page-title {
    max-width: 1120px !important;
    margin: clamp(18px, 4vw, 42px) auto 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

html body[data-page="studio"].studio-focus-flow .studio-hero-title.page-title > h1 {
    max-width: 10em !important;
    font-size: clamp(42px, 7vw, 86px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"].studio-focus-flow .studio-hero-title.page-title > p:not(.eyebrow) {
    max-width: 34em !important;
    color: var(--studio-focus-text) !important;
    font-size: clamp(16px, 1.7vw, 20px) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-theme-switch {
    justify-content: flex-start !important;
}

html body[data-page="studio"].studio-focus-flow :is(.studio-hero-beats, .vue-route-hero-shell:empty) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-lite {
    width: 100% !important;
    max-width: 1120px !important;
    grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.62fr) !important;
    align-items: stretch !important;
    gap: clamp(14px, 2vw, 22px) !important;
    margin-top: clamp(18px, 3vw, 30px) !important;
    padding: clamp(16px, 2.4vw, 26px) !important;
    border: 1px solid var(--studio-focus-line) !important;
    border-radius: 30px !important;
    background: var(--studio-focus-panel) !important;
    box-shadow: var(--studio-focus-shadow) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-copy {
    align-self: center !important;
    gap: 14px !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-copy > span {
    width: fit-content !important;
    color: color-mix(in srgb, var(--studio-focus-accent) 72%, var(--studio-focus-ink)) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-copy h2 {
    max-width: 9em !important;
    color: var(--studio-focus-ink) !important;
    font-size: clamp(32px, 4.5vw, 58px) !important;
    line-height: 0.98 !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-copy label {
    margin-top: 4px !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-copy textarea {
    min-height: 120px !important;
    border-radius: 22px !important;
    background: var(--studio-focus-soft) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-brief-slots {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="studio"].studio-focus-flow .studio-brief-slots span {
    min-height: 64px !important;
    border-radius: 18px !important;
    background: var(--studio-focus-soft) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-actions .primary-btn {
    min-width: min(240px, 100%) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-examples {
    margin-top: 2px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-examples > span {
    flex-basis: 100% !important;
    color: var(--studio-focus-muted) !important;
    font-size: 12px !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-preview {
    min-height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 26px !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-preview::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent 42%, rgba(8, 15, 24, 0.58) 100%) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-preview img {
    height: 100% !important;
    min-height: 420px !important;
    object-fit: cover !important;
    object-position: 54% 40% !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-preview > div {
    z-index: 2 !important;
    max-width: 72% !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-pins {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft .studio-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 370px) !important;
    grid-template-rows: auto minmax(0, auto) !important;
    align-items: start !important;
    gap: 14px !important;
    margin-top: clamp(14px, 2vw, 24px) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-rail {
    grid-column: 1 / -1 !important;
    grid-row: 1 / 2 !important;
    display: block !important;
    position: sticky !important;
    top: 78px !important;
    z-index: 28 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-flow.designer-form {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    gap: 12px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    top: 148px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.8fr) minmax(330px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px !important;
    border: 1px solid var(--studio-focus-line) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--studio-focus-panel) 90%, transparent) !important;
    box-shadow: 0 16px 42px rgba(25, 41, 54, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-card > :not(.vue-assist-one-next):not(.vue-assist-mainline) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--studio-focus-accent) 24%, transparent) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--studio-focus-accent) 12%, var(--studio-focus-panel)), color-mix(in srgb, var(--studio-focus-warm) 13%, var(--studio-focus-panel))) !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next span {
    font-size: 11px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next strong {
    font-size: clamp(16px, 1.7vw, 21px) !important;
    line-height: 1.12 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next p {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next .primary-btn {
    min-width: 126px !important;
    min-height: 38px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-mainline {
    display: grid !important;
    gap: 6px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-track-title {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-mode-advanced.studio-wizard-ready .vue-assist-groups {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button {
    min-height: 48px !important;
    padding: 8px 9px !important;
    border-radius: 15px !important;
    background: var(--studio-focus-soft) !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button small {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button strong {
    font-size: 13px !important;
    line-height: 1.1 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button.manual-active,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button.active {
    border-color: color-mix(in srgb, var(--studio-focus-accent) 46%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--studio-focus-accent) 17%, var(--studio-focus-panel)), color-mix(in srgb, var(--studio-focus-warm) 18%, var(--studio-focus-panel))) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active {
    gap: 14px !important;
    min-height: 560px !important;
    padding: clamp(16px, 2vw, 24px) !important;
    border: 1px solid var(--studio-focus-line) !important;
    border-radius: 28px !important;
    background: var(--studio-focus-panel) !important;
    box-shadow: var(--studio-focus-shadow) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active > .vue-step-head-shell {
    margin-bottom: -2px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head {
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--studio-focus-line) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head h2 {
    max-width: 12em !important;
    color: var(--studio-focus-ink) !important;
    font-size: clamp(28px, 3.6vw, 48px) !important;
    line-height: 1.02 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head :is(p:not(.eyebrow), small) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-mission,
    .vue-step-mission,
    .vue-core-quick-panel,
    .vue-core-head,
    .vue-core-command,
    .vue-creator-mode-coach,
    .vue-visual-route-card,
    .vue-visual-meter,
    .vue-story-meter,
    .vue-image-mode-board,
    .vue-cover-candidates,
    .studio-bridge-flow,
    .vue-ai-capability-panel,
    .vue-image-readiness > small
) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-head,
    .vue-visual-write-head,
    .vue-story-write-head,
    .vue-image-write-head,
    .studio-bridge-head,
    .vue-image-readiness-head,
    .vue-publish-decision-head
) {
    padding-bottom: 6px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-head p,
    .vue-visual-write-head p,
    .vue-story-write-head p,
    .vue-image-write-head p,
    .studio-bridge-head p,
    .vue-image-readiness-head p,
    .vue-publish-decision-head p
) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active :is(
    .vue-core-write-grid,
    .vue-visual-write-grid,
    .vue-story-write-grid,
    .vue-story-grid
) {
    gap: 10px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active :is(.vue-core-field, .vue-visual-field, .vue-story-field, .vue-image-field) {
    gap: 6px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: var(--studio-focus-soft) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active :is(.vue-core-field, .vue-visual-field, .vue-story-field, .vue-image-field) :is(input, select, textarea) {
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--studio-focus-panel) 82%, #fff) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active :is(.vue-core-ai-brief, .vue-image-readiness, .vue-publish-decision) {
    border-radius: 22px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--studio-focus-accent) 10%, var(--studio-focus-panel)), color-mix(in srgb, var(--studio-focus-warm) 10%, var(--studio-focus-panel))) !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-wizard-nav {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--studio-focus-line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--studio-focus-panel) 90%, transparent) !important;
    box-shadow: 0 18px 54px rgba(25, 41, 54, 0.12) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-wizard-nav small {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-wizard-nav .primary-btn {
    min-width: 126px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-wizard-nav .secondary-btn {
    min-width: 82px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--studio-focus-line) !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--studio-focus-panel) 88%, transparent) !important;
    box-shadow: var(--studio-focus-shadow) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
    min-height: clamp(300px, 44vh, 520px) !important;
    height: clamp(300px, 44vh, 520px) !important;
    border-radius: 22px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head {
    padding: 10px 12px !important;
    border-radius: 18px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info {
    gap: 6px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-info h2 {
    font-size: clamp(22px, 2vw, 30px) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview :is(
    .vue-board-dossier-rail,
    .vue-board-summary,
    .vue-board-status,
    .vue-board-notice,
    .vue-board-file-stamps,
    .vue-board-readiness-grid,
    .vue-board-source-card
) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-readiness {
    padding: 10px !important;
    border-radius: 18px !important;
    background: var(--studio-focus-soft) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

@media (max-width: 1180px) {
    html body[data-page="studio"].studio-focus-flow .studio-launchpad-lite,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft .studio-workbench,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-flow.designer-form,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview {
        position: relative !important;
        top: auto !important;
        order: -1 !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview :is(.vue-board-cover, .vue-board-empty-cover, .vue-board-empty-stage) {
        min-height: 320px !important;
        height: 320px !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="studio"].studio-focus-flow main {
        width: calc(100vw - 16px) !important;
    }

    html body[data-page="studio"].studio-focus-flow .studio-hero-title.page-title > h1 {
        font-size: clamp(38px, 13vw, 56px) !important;
    }

    html body[data-page="studio"].studio-focus-flow .studio-launchpad-lite {
        padding: 12px !important;
        border-radius: 24px !important;
    }

    html body[data-page="studio"].studio-focus-flow .studio-launchpad-preview img {
        min-height: 260px !important;
    }

    html body[data-page="studio"].studio-focus-flow .studio-brief-slots,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups,
    html body[data-page="studio"].studio-focus-flow.studio-mode-advanced.studio-wizard-ready .vue-assist-groups,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active :is(
        .vue-core-write-grid,
        .vue-visual-write-grid,
        .vue-story-write-grid,
        .vue-story-grid,
        .vue-image-primary-actions,
        .studio-bridge-actions
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-rail {
        position: relative !important;
        top: auto !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-card {
        padding: 8px !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next .primary-btn,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-wizard-nav .primary-btn,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-wizard-nav .secondary-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active {
        min-height: 0 !important;
        padding: 12px !important;
        border-radius: 24px !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-wizard-nav {
        grid-template-columns: minmax(0, 1fr) !important;
        position: static !important;
    }
}

/* 20260709-action-guidance-v4100: semantic icons should clarify actions, not decorate every word. */
html body[data-page] {
    --ui-icon-download-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
    --ui-icon-print-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V4h10v4'/%3E%3Crect x='5' y='8' width='14' height='8' rx='2'/%3E%3Cpath d='M8 15h8v5H8z'/%3E%3Cpath d='M17 11h.01'/%3E%3C/svg%3E");
    --ui-icon-bell-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E");
    --ui-icon-group-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M3.5 20c1-4 2.8-6 5.5-6s4.5 2 5.5 6'/%3E%3Cpath d='M14.5 19c.8-2.3 2-3.4 3.7-3.4 1.3 0 2.4.7 3.3 2.1'/%3E%3C/svg%3E");
    --ui-icon-lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E");
    --ui-icon-palette-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18h1.2a2 2 0 0 0 1.2-3.6 1.6 1.6 0 0 1 .9-2.9H17a4 4 0 0 0 0-8.1A8.9 8.9 0 0 0 12 3z'/%3E%3Ccircle cx='7.8' cy='11' r='.8'/%3E%3Ccircle cx='10.2' cy='7.5' r='.8'/%3E%3Ccircle cx='14.2' cy='7.7' r='.8'/%3E%3C/svg%3E");
}

html body[data-page] [data-ui-icon="download"] { --ui-icon: "↓"; --ui-icon-mask: var(--ui-icon-download-mask); }
html body[data-page] [data-ui-icon="print"] { --ui-icon: "▥"; --ui-icon-mask: var(--ui-icon-print-mask); }
html body[data-page] [data-ui-icon="notification"] { --ui-icon: "◌"; --ui-icon-mask: var(--ui-icon-bell-mask); }
html body[data-page] [data-ui-icon="group"] { --ui-icon: "◎"; --ui-icon-mask: var(--ui-icon-group-mask); }
html body[data-page] [data-ui-icon="lock"] { --ui-icon: "▣"; --ui-icon-mask: var(--ui-icon-lock-mask); }
html body[data-page] [data-ui-icon="palette"] { --ui-icon: "◒"; --ui-icon-mask: var(--ui-icon-palette-mask); }

html body[data-page] main :is(a, button)[data-ui-icon] {
    max-width: 100% !important;
    min-width: 0 !important;
}

html body[data-page] main :is(.primary-btn, .secondary-btn, .primary-link, .ghost-link)[data-ui-icon] {
    min-height: 42px !important;
    padding-inline: 16px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon] {
    gap: 0.62em !important;
    box-shadow: 0 14px 34px rgba(17, 22, 32, 0.14) !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button)[data-ui-icon] {
    gap: 0.5em !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        width: 1.22em !important;
        height: 1.22em !important;
        flex-basis: 1.22em !important;
        opacity: 0.98 !important;
        transform: translateY(-0.01em) !important;
    }

    html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button)[data-ui-icon]::before {
        width: 1.08em !important;
        height: 1.08em !important;
        flex-basis: 1.08em !important;
        opacity: 0.72 !important;
    }

    html body[data-page] .text-danger-btn[data-ui-icon]::before,
    html body[data-page] :is(.danger, [data-ui-icon="delete"], [data-ui-icon="hide"])[data-ui-icon]::before {
        opacity: 0.82 !important;
    }
}

html body[data-page] :is(
    .vue-light-start-actions,
    .vue-templates-actions,
    .vue-characters-actions,
    .vue-gallery-actions,
    .vue-command-actions,
    .vue-work-actions,
    .vue-work-readiness-actions,
    .vue-work-launchpad-actions,
    .vue-gallery-pulse-actions,
    .vue-gallery-mission-actions,
    .vue-template-starter-actions,
    .vue-template-match-actions,
    .vue-template-social-actions,
    .vue-character-completion-actions,
    .vue-user-fit-actions,
    .vue-feed-player-actions,
    .vue-nextline-actions
) :is(.primary-btn, .primary-link)[data-ui-icon] {
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent) !important;
}

html body[data-page] :is(
    .vue-quick-idea-row button,
    .vue-home-brief-chips button,
    .shared-ai-dock-picks button,
    .vue-world-chip-row button,
    .vue-gallery-pulse-grid button,
    .vue-gallery-mission-grid button,
    .vue-user-fit-grid button,
    .vue-library-boundary-card,
    .vue-command-track a,
    .vue-work-mode-picker,
    .vue-card-quickstart,
    .vue-comment-prompt
)[data-ui-icon] {
    position: relative !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(
        .vue-library-boundary-card,
        .vue-command-track a,
        .vue-gallery-pulse-grid button,
        .vue-gallery-mission-grid button,
        .vue-user-fit-grid button,
        .vue-work-mode-picker
    )[data-ui-icon]::before {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        opacity: 0.46 !important;
    }

    html body[data-page] :is(.vue-library-boundary-card, .vue-command-track a)[data-ui-icon] {
        padding-right: clamp(38px, 5vw, 54px) !important;
    }

    html body[data-page] :is(.vue-quick-idea-row button, .shared-ai-dock-picks button, .vue-home-brief-chips button)[data-ui-icon]::before {
        width: 1.02em !important;
        height: 1.02em !important;
        flex-basis: 1.02em !important;
        opacity: 0.58 !important;
    }
}

html body[data-page] .shared-nav-links a[data-ui-icon] {
    gap: 0.4em !important;
}

html body[data-page] .shared-nav-actions :is(.primary-link, .nav-button)[data-ui-icon] {
    white-space: nowrap !important;
}

html body[data-page].animaker-theme-night :is(.primary-btn, .primary-link)[data-ui-icon],
html body[data-page="studio"].studio-theme-night :is(.primary-btn, .primary-link)[data-ui-icon] {
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 760px) {
    html body[data-page] main :is(.primary-btn, .secondary-btn, .primary-link, .ghost-link)[data-ui-icon] {
        justify-content: center !important;
        min-height: 44px !important;
    }

    html body[data-page] :is(.vue-library-boundary-card, .vue-command-track a)[data-ui-icon] {
        padding-right: 18px !important;
    }

    html body[data-page] :is(.vue-library-boundary-card, .vue-command-track a)[data-ui-icon]::before {
        position: static !important;
    }
}

/* 20260709-action-feedback-v4213: icons now carry action meaning, with restrained press and status feedback. */
html body[data-page] :is(a, button)[data-ui-icon] {
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 160ms ease,
        filter 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease !important;
}

html body[data-page] :is(a, button)[data-ui-icon]:focus-visible {
    outline: 2px solid color-mix(in srgb, #4bc7d8 72%, currentColor 28%) !important;
    outline-offset: 3px !important;
}

html body[data-page] :is(a, button)[data-ui-icon].is-action-pressed {
    transform: translateY(1px) scale(0.985) !important;
    filter: saturate(1.08) brightness(0.985) !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon].is-action-pressed {
    box-shadow:
        0 10px 26px rgba(17, 22, 32, 0.16),
        0 0 0 5px color-mix(in srgb, currentColor 10%, transparent) !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button)[data-ui-icon].is-action-pressed {
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 9%, transparent) !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon="spark"]::before,
html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon="image"]::before,
html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon="publish"]::before {
    filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 28%, transparent)) !important;
}

html body[data-page] .global-action-toast {
    position: fixed;
    right: clamp(16px, 3vw, 34px);
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(360px, calc(100vw - 28px));
    min-height: 44px;
    padding: 10px 14px 10px 12px;
    border: 1px solid rgba(30, 36, 48, 0.12);
    border-radius: 999px;
    color: #161722;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(246, 249, 250, 0.9)),
        color-mix(in srgb, #fff 88%, #75d2d5);
    box-shadow: 0 18px 50px rgba(30, 36, 48, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
    backdrop-filter: blur(18px) saturate(1.08);
}

html body[data-page] .global-action-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

html body[data-page] .global-action-toast .ui-action-mark {
    width: 20px;
    height: 20px;
    margin: 0;
    color: #1f9dac;
}

html body[data-page] .global-action-toast strong {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body[data-page] .global-action-toast[data-feedback-tone="creative"] .ui-action-mark {
    color: #5b7cff;
}

html body[data-page] .global-action-toast[data-feedback-tone="done"] .ui-action-mark {
    color: #16a079;
}

html body[data-page] .global-action-toast[data-feedback-tone="warn"] .ui-action-mark {
    color: #cf5d4d;
}

html body[data-page].animaker-theme-night .global-action-toast,
html body[data-page="studio"].studio-theme-night .global-action-toast {
    border-color: rgba(255, 255, 255, 0.14);
    color: #f8f4f2;
    background:
        linear-gradient(135deg, rgba(28, 27, 36, 0.9), rgba(18, 21, 31, 0.88)),
        rgba(14, 18, 27, 0.92);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

@media (max-width: 760px) {
    html body[data-page] .global-action-toast {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        max-width: calc(100vw - 28px);
        min-height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body[data-page] :is(a, button)[data-ui-icon],
    html body[data-page] .global-action-toast {
        transition: none !important;
    }

    html body[data-page] :is(a, button)[data-ui-icon].is-action-pressed,
    html body[data-page] .global-action-toast {
        transform: none !important;
    }
}

/* 20260709-home-lightweight-v4300: first-entry cover, lighter day mode, and three obvious OC routes. */
body[data-page="home"] {
    --home4300-ink: #151925;
    --home4300-text: #3e4858;
    --home4300-muted: #6f7888;
    --home4300-line: rgba(21, 25, 37, 0.12);
    --home4300-paper: rgba(255, 255, 255, 0.88);
    --home4300-paper-strong: rgba(255, 255, 255, 0.96);
    --home4300-cyan: #21b7c5;
    --home4300-yellow: #ffe47a;
    --home4300-pink: #ff7aa2;
}

body.animaker-theme-night[data-page="home"] {
    --home4300-ink: #f7fbff;
    --home4300-text: #d8e4ef;
    --home4300-muted: #9dacbd;
    --home4300-line: rgba(236, 246, 255, 0.14);
    --home4300-paper: rgba(18, 27, 39, 0.8);
    --home4300-paper-strong: rgba(24, 35, 49, 0.92);
}

body[data-page="home"] .vue-home-gateway {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    min-height: 100dvh !important;
    padding: clamp(32px, 6vw, 92px) !important;
}

body[data-page="home"] .vue-home-gateway-copy {
    max-width: min(760px, 100%) !important;
}

body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.2em !important;
    margin-top: 16px !important;
    font-size: clamp(58px, 11vw, 142px) !important;
}

body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 15em !important;
    margin-top: 18px !important;
    font-size: clamp(18px, 1.7vw, 24px) !important;
}

body[data-page="home"] .vue-home-gateway-steps {
    display: flex !important;
    gap: 10px !important;
    margin-top: 24px !important;
}

body[data-page="home"] .vue-home-gateway-steps em {
    min-width: 92px !important;
    border-radius: 999px !important;
}

body[data-page="home"] .vue-home-gateway-cue {
    min-width: 154px !important;
    justify-content: center !important;
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    min-height: clamp(640px, 86dvh, 820px) !important;
    color: var(--home4300-ink) !important;
    background-image:
        linear-gradient(90deg, rgba(251, 254, 254, 0.96) 0%, rgba(251, 254, 254, 0.76) 42%, rgba(251, 254, 254, 0.22) 76%, rgba(251, 254, 254, 0.04) 100%),
        var(--home-hero-image) !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    color: var(--home4300-ink) !important;
    background-image:
        linear-gradient(90deg, rgba(13, 18, 30, 0.9) 0%, rgba(13, 18, 30, 0.62) 44%, rgba(13, 18, 30, 0.2) 82%),
        var(--home-hero-image) !important;
}

body[data-page="home"] .vue-home-copy :is(.eyebrow, h1, h1 span) {
    color: var(--home4300-ink) !important;
    text-shadow: none !important;
}

body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 22em !important;
    color: var(--home4300-text) !important;
    font-size: clamp(17px, 1.5vw, 21px) !important;
    font-weight: 850 !important;
}

body[data-page="home"] .vue-home-brief {
    max-width: 650px !important;
    border: 1px solid var(--home4300-line) !important;
    border-radius: 24px !important;
    color: var(--home4300-ink) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(249, 253, 253, 0.72)),
        var(--home4300-paper) !important;
    box-shadow: 0 22px 60px rgba(27, 43, 61, 0.13) !important;
}

html body[data-page="home"] .vue-home-brief .vue-home-brief-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-width: 150px !important;
}

html body[data-page="home"] .vue-home-brief .vue-home-brief-actions :is(.primary-link, .secondary-btn) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    justify-content: center !important;
    white-space: normal !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
        rgba(8, 13, 22, 0.68) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28) !important;
}

body[data-page="home"] .vue-home-brief label span {
    color: var(--home4300-cyan) !important;
}

body[data-page="home"] .vue-home-brief textarea {
    min-height: 74px !important;
    border: 1px solid var(--home4300-line) !important;
    color: var(--home4300-ink) !important;
    background: rgba(255, 255, 255, 0.82) !important;
}

body[data-page="home"] .vue-home-brief textarea::placeholder {
    color: rgba(62, 72, 88, 0.54) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief textarea {
    color: #f7fbff !important;
    background: rgba(5, 9, 16, 0.74) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief textarea::placeholder {
    color: rgba(238, 246, 255, 0.48) !important;
}

body[data-page="home"] .vue-home-brief-output {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: auto repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--home4300-cyan) 20%, transparent) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--home4300-cyan) 8%, transparent) !important;
}

body[data-page="home"] .vue-home-brief-output > span,
body[data-page="home"] .vue-home-brief-output em {
    min-width: 0 !important;
    border-radius: 14px !important;
}

body[data-page="home"] .vue-home-brief-output > span {
    display: inline-grid !important;
    place-items: center !important;
    padding: 8px 10px !important;
    color: var(--home4300-cyan) !important;
    font-weight: 950 !important;
}

body[data-page="home"] .vue-home-brief-output em {
    display: grid !important;
    gap: 2px !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    font-style: normal !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-output em {
    background: rgba(255, 255, 255, 0.07) !important;
}

body[data-page="home"] .vue-home-brief-output b {
    color: var(--home4300-muted) !important;
    font-size: 11px !important;
}

body[data-page="home"] .vue-home-brief-output strong {
    overflow: hidden !important;
    color: var(--home4300-ink) !important;
    font-size: 13px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="home"] .vue-home-brief-chips {
    max-height: none !important;
}

body[data-page="home"] .vue-home-brief-chips button {
    min-height: 82px !important;
    border-color: var(--home4300-line) !important;
    color: var(--home4300-text) !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-chips button {
    color: rgba(238, 246, 255, 0.82) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

body[data-page="home"] .vue-home-actions {
    display: none !important;
}

body[data-page="home"] .vue-home-hero-routes {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: 720px !important;
}

body[data-page="home"] .vue-home-hero-routes a {
    min-height: 108px !important;
    border-color: var(--home4300-line) !important;
    border-radius: 22px !important;
    color: var(--home4300-ink) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    box-shadow: 0 16px 42px rgba(27, 43, 61, 0.11) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-hero-routes a {
    color: #f7fbff !important;
    background: rgba(10, 16, 27, 0.52) !important;
}

body[data-page="home"] .vue-home-hero-routes :is(strong, small) {
    color: inherit !important;
}

body[data-page="home"] .vue-home-hero-routes small {
    opacity: 0.68 !important;
}

body[data-page="home"] .vue-home-feature {
    color: var(--home4300-ink) !important;
    border-color: var(--home4300-line) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 24px 70px rgba(27, 43, 61, 0.16) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-feature {
    color: #f7fbff !important;
    background: rgba(10, 16, 27, 0.72) !important;
    box-shadow: 0 24px 74px rgba(0, 0, 0, 0.32) !important;
}

body[data-page="home"] .vue-home-feature :is(span, p) {
    color: var(--home4300-text) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-feature :is(span, p) {
    color: rgba(238, 246, 255, 0.72) !important;
}

body[data-page="home"] .vue-home-creation-head h2 {
    font-size: clamp(28px, 3.2vw, 42px) !important;
}

body[data-page="home"] .vue-home-creation-head p:last-child,
body[data-page="home"] .vue-home-creation-card p,
body[data-page="home"] .vue-home-starter-card p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body[data-page="home"] .vue-home-creation-card,
body[data-page="home"] .vue-home-starter-card {
    border-radius: 24px !important;
}

body[data-page="home"] .vue-home-community-more > summary {
    cursor: pointer !important;
}

@media (max-width: 900px) {
    body[data-page="home"] .vue-home-gateway,
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="home"] .vue-home-feature {
        width: min(100%, 620px) !important;
        margin-inline: 0 !important;
    }

    body[data-page="home"] .vue-home-hero-routes {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-gateway {
        padding: 26px 16px !important;
    }

    body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(50px, 16vw, 78px) !important;
    }

    body[data-page="home"] .vue-home-gateway-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body[data-page="home"] .vue-home-gateway-steps em {
        min-width: 0 !important;
        padding: 8px 9px !important;
    }

    body[data-page="home"] .vue-home-brief-output {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-page="home"] .vue-home-brief-output > span {
        grid-column: 1 / -1 !important;
        justify-content: start !important;
    }
}

/* 20260709-action-icons-v4400: make icon affordances visible without turning every control into decoration. */
html body[data-page] :is(
    .primary-btn,
    .primary-link,
    .secondary-btn,
    .ghost-link,
    .nav-button,
    .link-button,
    .text-danger-btn,
    .shared-nav-links a,
    .shared-ai-mini-main,
    .shared-ai-mini-go,
    .shared-ai-mini-close
)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.52em !important;
}

html body[data-page] :is(a, button)[data-ui-icon]::before {
    display: block !important;
    box-sizing: border-box !important;
}

html body[data-page] .shared-nav-links a[data-ui-icon] {
    gap: 0.38em !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
        opacity: 0.58 !important;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon].active::before,
    html body[data-page] .shared-nav-actions :is(.primary-link, .nav-button)[data-ui-icon]::before {
        opacity: 0.88 !important;
    }
}

html body[data-page="studio"] :is(
    .vue-route-choice-row button,
    .vue-route-cover-list button,
    .vue-route-director-progress button,
    .vue-route-director-tasks button,
    .vue-route-mini-steps button,
    .vue-route-steps button,
    .vue-board-cover-candidates > button,
    .vue-board-readiness-grid button,
    .vue-publish-checks button,
    .vue-publish-preview-gaps button,
    .vue-publish-gap-row button,
    .vue-step-task-chips button
)[data-ui-icon] {
    position: relative !important;
    overflow: hidden !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"] :is(
        .vue-route-choice-row button,
        .vue-route-cover-list button,
        .vue-route-director-progress button,
        .vue-route-director-tasks button,
        .vue-route-mini-steps button,
        .vue-route-steps button,
        .vue-board-cover-candidates > button,
        .vue-board-readiness-grid button,
        .vue-publish-checks button,
        .vue-publish-preview-gaps button,
        .vue-publish-gap-row button,
        .vue-step-task-chips button
    )[data-ui-icon]::before {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 2 !important;
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
        opacity: 0.42 !important;
        transform: none !important;
    }

    html body[data-page="studio"] :is(
        .vue-route-director-progress button.active,
        .vue-route-director-progress button.complete,
        .vue-route-mini-steps button.active,
        .vue-route-mini-steps button.complete,
        .vue-route-steps button.active,
        .vue-route-steps button.complete,
        .vue-board-readiness-grid button.ready,
        .vue-publish-checks button.done
    )[data-ui-icon]::before {
        opacity: 0.78 !important;
    }

    html body[data-page="studio"] .vue-route-cover-list button[data-ui-icon]::before,
    html body[data-page="studio"] .vue-board-cover-candidates > button[data-ui-icon]::before {
        top: 8px !important;
        right: 8px !important;
        width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
        color: #fff !important;
        opacity: 0.84 !important;
        filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.34)) !important;
    }
}

html body[data-page="studio"] :is(
    .vue-image-missing button,
    .vue-draft-restore,
    .vue-route-cover-refresh,
    .vue-route-mode-chip
)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.46em !important;
}

html body[data-page="studio"] .vue-route-mode-chip[data-ui-icon] {
    min-height: 42px !important;
    padding-inline: 14px !important;
    border-radius: 999px !important;
}

html body[data-page="studio"] .vue-route-director-actions :is(.primary-btn, .secondary-btn)[data-ui-icon],
html body[data-page="studio"] .vue-step-next-actions :is(.primary-btn, .secondary-btn)[data-ui-icon],
html body[data-page="studio"] .vue-board-actions :is(.primary-btn, .secondary-btn)[data-ui-icon],
html body[data-page="studio"] .vue-image-primary-actions :is(.primary-btn, .secondary-btn)[data-ui-icon],
html body[data-page="studio"] .vue-publish-main-actions :is(.primary-btn, .secondary-btn)[data-ui-icon] {
    min-height: 48px !important;
}

@media (max-width: 760px) {
    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
    }

    html body[data-page="studio"] :is(
        .vue-route-director-progress button,
        .vue-route-mini-steps button,
        .vue-route-steps button,
        .vue-board-readiness-grid button
    )[data-ui-icon]::before {
        top: 8px !important;
        right: 8px !important;
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
    }
}

/* 20260709-ai-funnel-v4500: lower the OC creation threshold and keep the page light in day and night mode. */
body[data-page="home"] {
    --home4500-ink: #141722;
    --home4500-text: #3f4756;
    --home4500-muted: #77808f;
    --home4500-line: rgba(20, 23, 34, 0.12);
    --home4500-paper: rgba(255, 255, 255, 0.9);
    --home4500-soft: rgba(248, 253, 252, 0.88);
    --home4500-cyan: #1eb6c5;
    --home4500-pink: #ff7298;
    --home4500-yellow: #ffe36c;
}

body.animaker-theme-night[data-page="home"] {
    --home4500-ink: #f8fbff;
    --home4500-text: #d7e1ec;
    --home4500-muted: #99a8ba;
    --home4500-line: rgba(238, 246, 255, 0.14);
    --home4500-paper: rgba(15, 21, 32, 0.82);
    --home4500-soft: rgba(11, 18, 29, 0.78);
}

body[data-page="home"] section.vue-home-hero,
body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    grid-template-columns: minmax(0, 0.94fr) minmax(320px, 0.68fr) !important;
    align-items: center !important;
    gap: clamp(24px, 4vw, 58px) !important;
    min-height: clamp(680px, 92dvh, 900px) !important;
    padding-block: clamp(72px, 9vw, 118px) clamp(42px, 5vw, 72px) !important;
}

body.animaker-theme-day[data-page="home"] section.vue-home-hero,
body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(251, 254, 254, 0.97) 0%, rgba(251, 254, 254, 0.84) 38%, rgba(251, 254, 254, 0.38) 72%, rgba(251, 254, 254, 0.08) 100%),
        var(--home-hero-image) !important;
}

body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 17, 28, 0.92) 0%, rgba(12, 17, 28, 0.68) 43%, rgba(12, 17, 28, 0.24) 82%),
        var(--home-hero-image) !important;
}

body[data-page="home"] .vue-home-copy {
    max-width: 760px !important;
}

body[data-page="home"] .vue-home-copy h1 {
    margin-bottom: 14px !important;
    color: var(--home4500-ink) !important;
    font-size: clamp(48px, 6.8vw, 96px) !important;
    line-height: 0.94 !important;
}

body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 18em !important;
    color: var(--home4500-text) !important;
}

body[data-page="home"] .vue-home-brief {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    max-width: 740px !important;
    margin-top: 24px !important;
    padding: clamp(14px, 1.8vw, 20px) !important;
    border: 1px solid var(--home4500-line) !important;
    border-radius: 28px !important;
    color: var(--home4500-ink) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(248, 253, 252, 0.76)),
        var(--home4500-paper) !important;
    box-shadow: 0 24px 70px rgba(30, 43, 57, 0.15) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        var(--home4500-paper) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34) !important;
}

body[data-page="home"] .vue-home-intent-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body[data-page="home"] .vue-home-intent-row button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--home4500-cyan) 18%, var(--home4500-line)) !important;
    border-radius: 16px !important;
    color: var(--home4500-text) !important;
    background: color-mix(in srgb, var(--home4500-cyan) 8%, rgba(255, 255, 255, 0.68)) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-intent-row button {
    color: var(--home4500-text) !important;
    background: rgba(255, 255, 255, 0.065) !important;
}

body[data-page="home"] .vue-home-intent-row button span {
    font-size: 13px !important;
    font-weight: 950 !important;
}

body[data-page="home"] .vue-home-intent-row button small {
    display: block !important;
    overflow: hidden !important;
    color: var(--home4500-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="home"] .vue-home-brief label {
    grid-column: 1 / 2 !important;
}

body[data-page="home"] .vue-home-brief textarea {
    min-height: 94px !important;
    border-radius: 20px !important;
    border-color: var(--home4500-line) !important;
    color: var(--home4500-ink) !important;
    background: rgba(255, 255, 255, 0.88) !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief textarea {
    color: var(--home4500-ink) !important;
    background: rgba(5, 9, 16, 0.72) !important;
}

body[data-page="home"] .vue-home-brief-cue {
    grid-column: 1 / 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding-inline: 4px !important;
    color: var(--home4500-muted) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

body[data-page="home"] .vue-home-brief-cue[data-cue-state="ready"] {
    color: #147f8c !important;
}

body.animaker-theme-night[data-page="home"] .vue-home-brief-cue[data-cue-state="ready"] {
    color: #7edfe9 !important;
}

html body[data-page="home"] .vue-home-brief .vue-home-brief-actions {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 4 !important;
    align-self: stretch !important;
    min-width: 150px !important;
}

body[data-page="home"] .vue-home-brief-output {
    grid-column: 1 / -1 !important;
    grid-template-columns: auto repeat(4, minmax(0, 1fr)) !important;
    margin-top: 0 !important;
}

body[data-page="home"] .vue-home-brief-chips {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-height: none !important;
    gap: 8px !important;
}

body[data-page="home"] .vue-home-brief-chips button {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    min-height: 70px !important;
    padding: 8px !important;
    border-radius: 18px !important;
}

body[data-page="home"] .vue-home-brief-chips button img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
}

body[data-page="home"] .vue-home-brief-chips button small {
    display: none !important;
}

body[data-page="home"] .vue-home-flow {
    display: none !important;
}

body[data-page="home"] .vue-home-hero-routes {
    max-width: 740px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-page="home"] .vue-home-hero-routes a {
    min-height: 86px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--home4500-paper) 82%, transparent) !important;
}

body[data-page="home"] .vue-home-hero-routes small {
    display: none !important;
}

body[data-page="home"] .vue-home-feature {
    width: min(100%, 430px) !important;
    justify-self: end !important;
    border-radius: 28px !important;
}

body[data-page="home"] .vue-home-feature img {
    min-height: 310px !important;
}

body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft .studio-launchpad-lite,
body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft .studio-advanced-start,
body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft .studio-hero-beats {
    display: none !important;
}

body[data-page="studio"].studio-focus-flow .studio-launchpad-lite {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.62fr) !important;
    border-radius: 28px !important;
}

body[data-page="studio"].studio-focus-flow .studio-launchpad-copy label {
    border-radius: 24px !important;
}

body[data-page="studio"].studio-focus-flow .studio-launchpad-actions {
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(116px, 0.65fr)) !important;
}

body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel:not(.is-active) {
    display: none !important;
}

body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft .studio-workbench {
    margin-top: 18px !important;
}

body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active {
    border-radius: 28px !important;
    box-shadow: 0 18px 54px rgba(30, 43, 57, 0.1) !important;
}

body[data-page="studio"].studio-focus-flow.studio-theme-night.studio-wizard-ready .studio-panel.is-active,
body.animaker-theme-night[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active {
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.3) !important;
}

body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-wizard-nav {
    border-radius: 24px !important;
}

@media (max-width: 980px) {
    body[data-page="home"] section.vue-home-hero,
    body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
    }

    body[data-page="home"] .vue-home-feature {
        justify-self: start !important;
        width: min(100%, 640px) !important;
    }

    body[data-page="studio"].studio-focus-flow .studio-launchpad-lite {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    body[data-page="home"] .vue-home-copy h1 {
        font-size: clamp(44px, 13vw, 64px) !important;
    }

    body[data-page="home"] .vue-home-brief {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 12px !important;
        border-radius: 24px !important;
    }

    body[data-page="home"] .vue-home-intent-row,
    body[data-page="home"] .vue-home-brief-chips,
    body[data-page="home"] .vue-home-hero-routes {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="home"] .vue-home-brief label,
    body[data-page="home"] .vue-home-brief-cue,
    html body[data-page="home"] .vue-home-brief .vue-home-brief-actions {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    body[data-page="home"] .vue-home-brief-output {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-page="home"] .vue-home-brief-output > span {
        grid-column: 1 / -1 !important;
    }

    body[data-page="studio"].studio-focus-flow .studio-launchpad-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260709-action-boundary-v4510: icons mark decisions, while card links stay calm and readable. */
html body[data-page] :is(.section-heading, .vue-section-title) > a[data-ui-icon],
html body[data-page] .section-heading a[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.42em !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.section-heading, .vue-section-title) > a[data-ui-icon]::before,
    html body[data-page] .section-heading a[data-ui-icon]::before {
        width: 0.95em !important;
        height: 0.95em !important;
        flex-basis: 0.95em !important;
        opacity: 0.66 !important;
    }
}

html body[data-page="home"] :is(
    .vue-home-hero-routes a,
    .vue-home-feature,
    .vue-home-creation-card,
    .vue-home-starter-card,
    .vue-home-next a,
    .vue-home-metrics a,
    .vue-home-list a,
    .vue-home-template-list a
)[data-ui-icon] {
    position: relative !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="home"] :is(
        .vue-home-hero-routes a,
        .vue-home-feature,
        .vue-home-creation-card,
        .vue-home-starter-card,
        .vue-home-next a,
        .vue-home-metrics a,
        .vue-home-list a,
        .vue-home-template-list a
    )[data-ui-icon]::before {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 2 !important;
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
        opacity: 0.48 !important;
        transform: none !important;
    }

    html body[data-page="home"] .vue-home-feature[data-ui-icon]::before {
        top: 18px !important;
        right: 18px !important;
        color: #fff !important;
        opacity: 0.76 !important;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) !important;
    }
}

html body[data-page="login"] :is(.vue-auth-tabs button, .vue-password-field button, .auth-switch button)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.38em !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="login"] :is(.vue-auth-tabs button, .vue-password-field button, .auth-switch button)[data-ui-icon]::before {
        width: 1em !important;
        height: 1em !important;
        flex-basis: 1em !important;
        opacity: 0.72 !important;
    }
}

html body[data-page="studio"] :is(
    .vue-core-ai-brief-chips button,
    .vue-core-inspiration-grid button,
    .vue-candidate-grid button,
    .vue-visual-preset-grid button,
    .vue-story-preset-grid button,
    .vue-cover-candidate-grid button,
    .vue-image-director-grid button,
    .vue-external-grid button
)[data-ui-icon] {
    position: relative !important;
    overflow: hidden !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"] :is(
        .vue-core-ai-brief-chips button,
        .vue-core-inspiration-grid button,
        .vue-candidate-grid button,
        .vue-visual-preset-grid button,
        .vue-story-preset-grid button,
        .vue-cover-candidate-grid button,
        .vue-image-director-grid button,
        .vue-external-grid button
    )[data-ui-icon]::before {
        position: absolute !important;
        top: 11px !important;
        right: 12px !important;
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
        opacity: 0.42 !important;
        transform: none !important;
    }

    html body[data-page="studio"] :is(
        .vue-core-ai-brief-chips button.is-active,
        .vue-core-inspiration-grid button.is-applied,
        .vue-candidate-grid button.is-applied,
        .vue-visual-preset-grid button.is-applied,
        .vue-story-preset-grid button.is-applied,
        .vue-cover-candidate-grid button.active,
        .vue-external-grid button.active
    )[data-ui-icon]::before {
        opacity: 0.82 !important;
    }
}

/* 20260709-action-boundary-v4511: card buttons should collapse by available width, not squeeze text into columns. */
html body[data-page="studio"] :is(
    .vue-core-inspiration-grid,
    .vue-candidate-grid,
    .vue-visual-preset-grid,
    .vue-story-preset-grid,
    .vue-image-director-grid,
    .vue-external-grid
) {
    grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr)) !important;
}

html body[data-page="studio"] .studio-panel.is-active :is(
    .vue-core-inspiration-grid,
    .vue-candidate-grid,
    .vue-visual-preset-grid,
    .vue-story-preset-grid,
    .vue-image-director-grid,
    .vue-external-grid
) {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
}

html body[data-page="studio"] :is(
    .vue-core-inspiration-grid button,
    .vue-candidate-grid button,
    .vue-visual-preset-grid button,
    .vue-story-preset-grid button,
    .vue-image-director-grid button,
    .vue-external-grid button
)[data-ui-icon] {
    min-width: 0 !important;
}

/* 20260709-action-boundary-v4512: only operational buttons get icons; dense chips stay quiet. */
html body[data-page] .topbar > .primary-link[data-ui-icon] {
    min-height: 44px !important;
    padding-inline: 18px !important;
    white-space: nowrap !important;
}

html body[data-page] .topbar > .primary-link[data-ui-icon]::before {
    width: 1.12em !important;
    height: 1.12em !important;
    flex-basis: 1.12em !important;
}

html body[data-page="admin"] :is(
    .vue-admin-actions,
    .vue-admin-config-actions,
    .vue-admin-rollout-brief,
    .vue-admin-ops-actions,
    .vue-admin-row-actions
) :is(.primary-btn, .secondary-btn)[data-ui-icon] {
    min-height: 40px !important;
    border-radius: 999px !important;
}

html body[data-page="admin"] .vue-admin-tabs button[data-ui-icon] {
    justify-content: flex-start !important;
    gap: 0.46em !important;
}

html body[data-page="admin"] .vue-admin-tabs button[data-ui-icon] span {
    margin-left: auto !important;
}

html body[data-page="admin"] :is(.danger, [data-ui-icon="delete"], [data-ui-icon="hide"])[data-ui-icon] {
    color: #b94337 !important;
}

html body.animaker-theme-night[data-page="admin"] :is(.danger, [data-ui-icon="delete"], [data-ui-icon="hide"])[data-ui-icon] {
    color: #ff9a89 !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="admin"] .vue-admin-tabs button[data-ui-icon]::before,
    html body[data-page="admin"] .vue-admin-actions button[data-ui-icon]::before {
        width: 1em !important;
        height: 1em !important;
        flex-basis: 1em !important;
        opacity: 0.72 !important;
    }

    html body[data-page] :is(.vue-field-suggestions, .vue-filter-chip, .vue-template-chip) button[data-ui-icon]::before {
        display: none !important;
    }
}

@media (max-width: 1320px) {
    html body[data-page] .shared-nav {
        gap: 10px !important;
    }

    html body[data-page] .shared-nav-links {
        gap: 4px !important;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon] {
        padding-inline: 12px !important;
        gap: 0 !important;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        display: none !important;
    }
}

/* 20260709-icon-guidance-v4600: use icons as action landmarks, not decoration. */
html body[data-page] :is(
    .topbar .nav a,
    .shared-nav-links a,
    .primary-btn,
    .secondary-btn,
    .primary-link,
    .ghost-link,
    .nav-button,
    .link-button
)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
}

html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon] {
    gap: 0.38em !important;
}

html body[data-page] :is(.topbar .nav a.active, .shared-nav-links a.active)[data-ui-icon] {
    color: #151722 !important;
}

html body.animaker-theme-night[data-page] :is(.topbar .nav a.active, .shared-nav-links a.active)[data-ui-icon],
html body[data-page="studio"].studio-theme-night :is(.topbar .nav a.active, .shared-nav-links a.active)[data-ui-icon] {
    color: #fff9f0 !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon]::before {
        display: block !important;
        width: 1em !important;
        height: 1em !important;
        flex-basis: 1em !important;
        opacity: 0.6 !important;
    }

    html body[data-page] :is(.topbar .nav a.active, .shared-nav-links a.active)[data-ui-icon]::before {
        opacity: 0.95 !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        opacity: 1 !important;
        filter: drop-shadow(0 2px 8px color-mix(in srgb, currentColor 18%, transparent));
    }

    html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button)[data-ui-icon]::before {
        opacity: 0.78 !important;
    }
}

html body[data-page="studio"] .studio-launch-promise {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 14px;
}

html body[data-page="studio"] .studio-launch-promise span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, #3bc9d7 28%, transparent);
    border-radius: 999px;
    color: #16202b;
    background: color-mix(in srgb, #ffffff 86%, #d8fbff);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

html body[data-page="studio"].studio-theme-night .studio-launch-promise span,
html body.animaker-theme-night[data-page="studio"] .studio-launch-promise span {
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff4e8;
    background: rgba(255, 255, 255, 0.08);
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"] .studio-launch-promise span::before {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        background: currentColor;
        opacity: 0.78;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat;
    }
}

html body[data-page="studio"] .studio-launchpad-actions {
    align-items: stretch !important;
}

html body[data-page="studio"] .studio-launchpad-actions .primary-btn[data-ui-icon] {
    min-width: min(100%, 220px) !important;
}

html body[data-page="studio"] .studio-launchpad-actions .secondary-btn[data-ui-icon] {
    min-width: 0 !important;
    box-shadow: none !important;
}

html body[data-page="home"] .vue-home-intent-row button[data-ui-icon] {
    gap: 9px !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="home"] .vue-home-intent-row button[data-ui-icon]::before,
    html body[data-page] .shared-ai-mini-dock :is(a, button)[data-ui-icon]::before {
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        opacity: 0.8 !important;
    }

    html body[data-page="home"] .vue-home-brief-chips button[data-ui-icon]::before,
    html body[data-page="studio"] .studio-launchpad-examples button[data-ui-icon]::before,
    html body[data-page] .shared-ai-dock-picks button[data-ui-icon]::before {
        opacity: 0.42 !important;
    }
}

@media (max-width: 1320px) {
    html body[data-page] .shared-nav-links a[data-ui-icon] {
        gap: 0.32em !important;
        padding-inline: 10px !important;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        display: block !important;
        width: 0.92em !important;
        height: 0.92em !important;
        flex-basis: 0.92em !important;
    }
}

@media (max-width: 760px) {
    html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon] {
        gap: 0.26em !important;
    }

    html body[data-page="studio"] .studio-launch-promise {
        margin-top: 10px;
    }

    html body[data-page="studio"] .studio-launch-promise span {
        min-height: 30px;
        padding-inline: 9px;
    }
}

/* 20260709-light-command-v4700: template/archive start panels behave like compact AI commands. */
html body:is([data-page="templates"], [data-page="characters"]) .vue-light-start {
    max-width: 680px !important;
    gap: 10px !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-light-start > div:first-child strong {
    max-width: 36em !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-light-output-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -2px;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-light-output-pills span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--oc-air-cyan) 26%, var(--oc-air-line));
    border-radius: 999px;
    color: var(--oc-air-ink);
    background: color-mix(in srgb, var(--oc-air-panel-strong) 82%, #e7fffb);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
}

html body.animaker-theme-night:is([data-page="templates"], [data-page="characters"]) .vue-light-output-pills span {
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff5e8;
    background: rgba(255, 255, 255, 0.08);
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    overflow: visible !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button[data-ui-icon] {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon text";
    align-items: center !important;
    gap: 2px 8px !important;
    min-height: 58px !important;
    width: auto !important;
    padding: 10px !important;
    text-align: left !important;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button strong {
    grid-area: title;
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button small {
    grid-area: text;
    overflow: hidden;
    color: color-mix(in srgb, var(--oc-air-muted) 90%, transparent);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body:is([data-page="templates"], [data-page="characters"]) .vue-light-output-pills span::before {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        background: currentColor;
        opacity: 0.75;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat;
    }

    html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button[data-ui-icon]::before {
        grid-area: icon;
        position: static !important;
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        opacity: 0.76 !important;
    }
}

@media (max-width: 980px) {
    html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body:is([data-page="templates"], [data-page="characters"]) .vue-light-output-pills {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body:is([data-page="templates"], [data-page="characters"]) .vue-light-output-pills span {
        justify-content: center;
    }

    html body:is([data-page="templates"], [data-page="characters"]) .vue-quick-idea-row button[data-ui-icon] {
        min-height: 54px !important;
    }
}

/* 20260709-one-tap-icons-v4800: full-screen first cover and clearer icon-led action grammar. */
html body[data-page="home"] main {
    width: 100% !important;
    max-width: none !important;
}

html body[data-page="home"] .vue-home {
    width: 100% !important;
    overflow: hidden !important;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav, #sharedNavApp, .shared-nav-root) {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-steps em[data-ui-icon] {
    position: relative !important;
    padding-left: 11px !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="home"] .vue-home-gateway-steps em[data-ui-icon]::before {
        content: "" !important;
        display: block !important;
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 15px !important;
        background: currentColor !important;
        opacity: 0.78 !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
    }
}

html body[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    grid-template-columns: minmax(420px, 660px) minmax(340px, 430px) !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    padding-inline: max(28px, calc((100vw - 1180px) / 2 + 28px)) !important;
    border-radius: 0 !important;
    background-attachment: scroll !important;
}

html body[data-page="home"] .vue-home-copy {
    width: 100% !important;
    max-width: 660px !important;
    padding-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-self: start !important;
}

html body[data-page="home"] .vue-home-feature {
    width: min(100%, 430px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: end !important;
}

html body[data-page="home"] .vue-home-intent-row button[data-ui-icon] {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas:
        "icon title"
        "icon text" !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 2px 10px !important;
    min-height: 58px !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-intent-row button[data-ui-icon] span {
    grid-area: title !important;
}

html body[data-page="home"] .vue-home-intent-row button[data-ui-icon] small {
    grid-area: text !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="home"] .vue-home-intent-row button[data-ui-icon]::before {
        grid-area: icon !important;
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px !important;
        place-self: center !important;
        opacity: 0.9 !important;
        transform: none !important;
    }
}

html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button)[data-ui-icon] {
    border-radius: 14px !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon] {
    gap: 0.68em !important;
    min-height: 46px !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button)[data-ui-icon] {
    min-height: 42px !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;
        opacity: 1 !important;
    }

    html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button)[data-ui-icon]::before {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
        opacity: 0.78 !important;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
        opacity: 0.68 !important;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon].active::before {
        opacity: 1 !important;
        filter: drop-shadow(0 3px 8px color-mix(in srgb, currentColor 22%, transparent)) !important;
    }
}

html body[data-page="home"] :is(.vue-home-hero-routes a, .vue-home-next a)[data-ui-icon] {
    padding-right: 44px !important;
}

html body[data-page="home"] .vue-home-brief-actions :is(.primary-link, .secondary-btn)[data-ui-icon] {
    border-radius: 18px !important;
}

@media (max-width: 980px) {
    html body[data-page="home"] section.vue-home-hero {
        padding-inline: 22px !important;
    }

    html body[data-page="home"] .vue-home-copy {
        padding-inline: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body[data-page="home"] .vue-home-feature {
        margin-inline: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding-top: 42px !important;
    }

    html body[data-page="home"] .vue-home-intent-row button[data-ui-icon] {
        min-height: 56px !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: calc(100% - 32px) !important;
        margin-inline: 16px !important;
    }
}

/* 20260709-studio-icon-roadmap-v4930: icons become action landmarks instead of decoration. */
html body[data-page] .topbar .nav a[data-ui-icon],
html body[data-page] .shared-nav-links a[data-ui-icon] {
    gap: 0.42em !important;
    border-radius: 14px !important;
}

@media (max-width: 1320px) {
    html body[data-page] .shared-nav-links a[data-ui-icon] {
        gap: 0.3em !important;
        padding-inline: 10px !important;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        display: block !important;
    }
}

html body[data-page="studio"].studio-focus-flow :is(
    .studio-launchpad-actions,
    .vue-core-ai-brief-actions,
    .studio-bridge-actions,
    .vue-image-primary-actions,
    .vue-publish-main-actions
) {
    align-items: stretch !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.42fr) repeat(2, minmax(116px, 0.72fr)) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-actions :is(.primary-btn, .secondary-btn)[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .vue-core-ai-brief-actions :is(.primary-btn, .secondary-btn)[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .studio-wizard-nav :is(.primary-btn, .secondary-btn)[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .vue-board-actions :is(.primary-btn, .secondary-btn)[data-ui-icon] {
    justify-content: center !important;
    min-height: 50px !important;
    border-radius: 18px !important;
    font-weight: 950 !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-actions .primary-btn[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .vue-core-ai-brief-actions .primary-btn[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .studio-wizard-nav .primary-btn[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .vue-board-actions .primary-btn[data-ui-icon] {
    min-height: 56px !important;
    color: #12151f !important;
    background:
        linear-gradient(135deg, #bbfff2 0%, #fff277 100%) !important;
    border: 1px solid rgba(28, 50, 62, 0.1) !important;
    box-shadow: 0 18px 42px rgba(25, 65, 72, 0.16) !important;
}

html body[data-page="studio"].studio-theme-night .studio-launchpad-actions .primary-btn[data-ui-icon],
html body.animaker-theme-night[data-page="studio"] .studio-launchpad-actions .primary-btn[data-ui-icon],
html body[data-page="studio"].studio-theme-night .vue-core-ai-brief-actions .primary-btn[data-ui-icon],
html body.animaker-theme-night[data-page="studio"] .vue-core-ai-brief-actions .primary-btn[data-ui-icon],
html body[data-page="studio"].studio-theme-night .studio-wizard-nav .primary-btn[data-ui-icon],
html body.animaker-theme-night[data-page="studio"] .studio-wizard-nav .primary-btn[data-ui-icon],
html body[data-page="studio"].studio-theme-night .vue-board-actions .primary-btn[data-ui-icon],
html body.animaker-theme-night[data-page="studio"] .vue-board-actions .primary-btn[data-ui-icon] {
    color: #11141f !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-actions .secondary-btn[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .vue-core-ai-brief-actions .secondary-btn[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .studio-wizard-nav .secondary-btn[data-ui-icon],
html body[data-page="studio"].studio-focus-flow .vue-board-actions .secondary-btn[data-ui-icon] {
    border: 1px solid color-mix(in srgb, var(--studio-focus-ink) 10%, transparent) !important;
    color: var(--studio-focus-ink) !important;
    background: color-mix(in srgb, var(--studio-focus-panel) 78%, transparent) !important;
    box-shadow: none !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-core-ai-brief-actions,
        .studio-wizard-nav,
        .vue-board-actions
    ) .primary-btn[data-ui-icon]::before {
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
        opacity: 1 !important;
    }

    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-core-ai-brief-actions,
        .studio-wizard-nav,
        .vue-board-actions
    ) .secondary-btn[data-ui-icon]::before {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
        opacity: 0.76 !important;
    }
}

html body[data-page="studio"].studio-focus-flow .vue-core-ai-brief-chips,
html body[data-page="studio"].studio-focus-flow .studio-launchpad-examples {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(142px, 100%), 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-examples > span {
    grid-column: 1 / -1 !important;
}

html body[data-page="studio"].studio-focus-flow :is(.vue-core-ai-brief-chips button, .studio-launchpad-examples button)[data-ui-icon] {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-areas:
        "icon tag"
        "icon title" !important;
    align-items: center !important;
    justify-content: stretch !important;
    min-height: 58px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    text-align: left !important;
}

html body[data-page="studio"].studio-focus-flow :is(.vue-core-ai-brief-chips button, .studio-launchpad-examples button)[data-ui-icon] span {
    grid-area: tag !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page="studio"].studio-focus-flow :is(.vue-core-ai-brief-chips button, .studio-launchpad-examples button)[data-ui-icon] strong,
html body[data-page="studio"].studio-focus-flow .studio-launchpad-examples button[data-ui-icon] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body[data-page="studio"].studio-focus-flow .vue-core-ai-brief-chips button[data-ui-icon] strong {
    grid-area: title !important;
    white-space: nowrap !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"].studio-focus-flow :is(.vue-core-ai-brief-chips button, .studio-launchpad-examples button)[data-ui-icon]::before {
        grid-area: icon !important;
        position: static !important;
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
        place-self: center !important;
        opacity: 0.82 !important;
        transform: none !important;
    }
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-examples button[data-ui-icon] {
    display: inline-flex !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    text-align: center !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"].studio-focus-flow .studio-launchpad-examples button[data-ui-icon]::before {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
        place-self: auto !important;
    }
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button[data-ui-icon],
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-director-progress button[data-ui-icon] {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    grid-template-areas: "icon label" !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    text-align: left !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-director-progress button[data-ui-icon] {
    min-height: 54px !important;
    padding: 9px 10px !important;
    border-radius: 17px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-director-progress button[data-ui-icon] span,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button[data-ui-icon] span {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-director-progress button[data-ui-icon] strong,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button[data-ui-icon] strong {
    grid-area: label !important;
    overflow: hidden !important;
    color: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready :is(.vue-assist-groups button, .vue-route-director-progress button)[data-ui-icon]::before {
        grid-area: icon !important;
        position: static !important;
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        place-self: center !important;
        opacity: 0.74 !important;
        transform: none !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready :is(.vue-assist-groups button.active, .vue-assist-groups button.manual-active, .vue-route-director-progress button.active, .vue-route-director-progress button.complete)[data-ui-icon]::before {
        opacity: 1 !important;
        filter: drop-shadow(0 3px 10px color-mix(in srgb, currentColor 22%, transparent)) !important;
    }
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-board-next-action[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.62em !important;
    width: 100% !important;
    min-height: 52px !important;
    border: 1px solid color-mix(in srgb, var(--studio-focus-accent) 36%, transparent) !important;
    border-radius: 18px !important;
    color: #12151f !important;
    background: linear-gradient(135deg, #c7fff3, #fff27b) !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 32px rgba(25, 65, 72, 0.14) !important;
}

html body[data-page="studio"].studio-theme-night.studio-wizard-ready .vue-board-next-action[data-ui-icon],
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .vue-board-next-action[data-ui-icon] {
    color: #11141f !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32) !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-board-next-action[data-ui-icon]::before {
        position: static !important;
        width: 21px !important;
        height: 21px !important;
        flex-basis: 21px !important;
        opacity: 1 !important;
    }
}

@media (max-width: 860px) {
    html body[data-page="studio"].studio-focus-flow .studio-launchpad-actions,
    html body[data-page="studio"].studio-focus-flow .vue-core-ai-brief-actions,
    html body[data-page="studio"].studio-focus-flow .studio-bridge-actions,
    html body[data-page="studio"].studio-focus-flow .vue-image-primary-actions,
    html body[data-page="studio"].studio-focus-flow .vue-publish-main-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-director-progress button[data-ui-icon],
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-groups button[data-ui-icon] {
        min-height: 48px !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head h2 {
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html body[data-page="studio"].studio-focus-flow .vue-visual-kit,
    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-grid,
    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-card {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-grid,
    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options button[data-ui-icon] {
        min-width: 0 !important;
    }
}

html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options {
    grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)) !important;
}

html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options button[data-ui-icon] {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    grid-template-areas:
        "icon title"
        "icon text" !important;
    align-items: center !important;
    align-content: center !important;
    gap: 3px 9px !important;
    min-height: 66px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    text-align: left !important;
}

html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options button[data-ui-icon] b {
    grid-area: title !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 13px !important;
    line-height: 1.16 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options button[data-ui-icon] small {
    grid-area: text !important;
    display: block !important;
    overflow: hidden !important;
    color: color-mix(in srgb, var(--studio-focus-muted, #7b8797) 94%, transparent) !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options button[data-ui-icon]::before {
        grid-area: icon !important;
        position: static !important;
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        place-self: center !important;
        opacity: 0.74 !important;
        transform: none !important;
    }

    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options button[data-ui-icon].active::before {
        opacity: 1 !important;
        filter: drop-shadow(0 3px 10px color-mix(in srgb, currentColor 22%, transparent)) !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-grid,
    html body[data-page="studio"].studio-focus-flow .vue-visual-kit-options {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow :is(
        .vue-core-dock,
        .vue-visual-dock,
        .vue-story-dock,
        .vue-image-dock,
        .vue-publish-dock
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow :is(
        .vue-studio-toolbox,
        .vue-visual-toolbox,
        .vue-story-toolbox,
        .vue-studio-refine,
        .vue-visual-manual,
        .vue-story-manual
    ) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* 20260709-command-icons-v5000: make icons a bounded action language across the product. */
html body[data-page] {
    --command-icon-line: rgba(16, 24, 34, 0.14);
    --command-icon-quiet: rgba(16, 24, 34, 0.64);
    --command-icon-wash: color-mix(in srgb, #bff7ec 30%, transparent);
    --command-icon-hot: color-mix(in srgb, #fff06e 48%, #bff7ec 18%);
}

html body.animaker-theme-night[data-page],
html body[data-page="studio"].studio-theme-night {
    --command-icon-line: rgba(238, 247, 252, 0.16);
    --command-icon-quiet: rgba(238, 247, 252, 0.72);
    --command-icon-wash: rgba(190, 247, 236, 0.12);
    --command-icon-hot: color-mix(in srgb, #fff06e 56%, #7be8ef 22%);
}

html body[data-page] main :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button)[data-ui-icon] {
    position: relative !important;
    isolation: isolate !important;
    white-space: normal !important;
}

html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon] {
    min-height: 52px !important;
    padding: 0 20px 0 18px !important;
    border-radius: 18px !important;
    gap: 0.72em !important;
}

html body[data-page] main :is(.secondary-btn, .ghost-link)[data-ui-icon] {
    min-height: 44px !important;
    padding: 0 15px !important;
    border-radius: 16px !important;
    gap: 0.58em !important;
}

html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon]::after {
    margin-left: 2px !important;
    opacity: 0.72 !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        width: 21px !important;
        height: 21px !important;
        flex-basis: 21px !important;
        opacity: 1 !important;
        filter:
            drop-shadow(0 0 0 color-mix(in srgb, currentColor 0%, transparent))
            drop-shadow(0 5px 14px color-mix(in srgb, currentColor 18%, transparent)) !important;
    }

    html body[data-page] main :is(.secondary-btn, .ghost-link)[data-ui-icon]::before {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
        opacity: 0.88 !important;
    }

    html body[data-page] main :is([data-ui-icon="delete"], [data-ui-icon="hide"], .danger)[data-ui-icon]::before {
        opacity: 0.9 !important;
    }
}

html body[data-page] :is(
    .vue-light-start-actions,
    .vue-templates-actions,
    .vue-characters-actions,
    .vue-gallery-actions,
    .vue-command-actions,
    .vue-gallery-pulse-actions,
    .vue-gallery-mission-actions,
    .vue-gallery-radar-actions,
    .vue-gallery-cocreate-actions,
    .vue-template-starter-actions,
    .vue-template-match-actions,
    .vue-template-social-actions,
    .vue-character-completion-actions,
    .vue-character-remix-actions,
    .vue-me-actions,
    .vue-me-triage-actions,
    .vue-me-ops-actions,
    .vue-me-pipeline-actions,
    .vue-me-achievement-actions,
    .vue-empty-actions
) {
    gap: 10px !important;
    align-items: center !important;
}

html body[data-page] :is(
    .vue-light-start-actions,
    .vue-command-actions,
    .vue-gallery-cocreate-actions,
    .vue-template-starter-actions,
    .vue-character-completion-actions,
    .vue-me-triage-actions,
    .vue-me-pipeline-actions,
    .vue-me-achievement-actions
) :is(.primary-btn, .primary-link)[data-ui-icon] {
    min-height: 56px !important;
    border-radius: 20px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, #11151f 94%, #24c7be), #15131f) !important;
    box-shadow: 0 18px 46px rgba(18, 25, 35, 0.18) !important;
}

html body.animaker-theme-night[data-page] :is(
    .vue-light-start-actions,
    .vue-command-actions,
    .vue-gallery-cocreate-actions,
    .vue-template-starter-actions,
    .vue-character-completion-actions,
    .vue-me-triage-actions,
    .vue-me-pipeline-actions,
    .vue-me-achievement-actions
) :is(.primary-btn, .primary-link)[data-ui-icon] {
    color: #11151f !important;
    background: linear-gradient(135deg, #bff7ec 0%, #fff06e 100%) !important;
}

html body[data-page] :is(
    .vue-gallery-pulse-actions,
    .vue-gallery-mission-actions,
    .vue-gallery-radar-card-actions,
    .vue-template-match-actions,
    .vue-template-social-actions,
    .vue-character-remix-actions,
    .vue-me-ops-actions
) :is(.primary-btn, .primary-link, .secondary-btn)[data-ui-icon] {
    border-radius: 16px !important;
}

html body[data-page] :is(
    .social-row,
    .card-foot,
    .vue-feed-player-actions,
    .vue-gallery-radar-card-actions,
    .vue-admin-row-actions
) {
    gap: 7px !important;
}

html body[data-page] :is(.social-row, .card-foot) :is(.secondary-btn, .primary-link, .primary-btn)[data-ui-icon],
html body[data-page] :is(.vue-card-quickstart, .vue-me-pipeline-action)[data-ui-icon] {
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.social-row, .card-foot) :is(.secondary-btn, .primary-link, .primary-btn)[data-ui-icon]::before,
    html body[data-page] :is(.vue-card-quickstart, .vue-me-pipeline-action)[data-ui-icon]::before {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
        opacity: 0.84 !important;
    }
}

html body[data-page] :is(
    .vue-library-boundary-card,
    .vue-path-card,
    .vue-command-track a,
    .vue-me-ownership-card
)[data-ui-icon] {
    display: grid !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    position: relative !important;
    padding-right: clamp(44px, 5vw, 58px) !important;
}

html body[data-page] :is(
    .vue-library-boundary-card,
    .vue-path-card,
    .vue-command-track a,
    .vue-me-ownership-card
)[data-ui-icon]::before {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
    opacity: 0.78 !important;
    color: color-mix(in srgb, currentColor 76%, #24c7be) !important;
}

html body[data-page] :is(
    .vue-library-boundary-card.active,
    .vue-path-card:hover,
    .vue-command-track a:hover,
    .vue-me-ownership-card.active
)[data-ui-icon]::before {
    opacity: 1 !important;
    filter: drop-shadow(0 5px 14px color-mix(in srgb, currentColor 18%, transparent)) !important;
}

html body[data-page] :is(.vue-me-health-grid article > a, .vue-character-dimension-grid article > a)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    gap: 0.5em !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #11151f !important;
    background: var(--command-icon-wash) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

html body.animaker-theme-night[data-page] :is(.vue-me-health-grid article > a, .vue-character-dimension-grid article > a)[data-ui-icon] {
    color: rgba(246, 250, 252, 0.92) !important;
}

html body[data-page] .section-heading > a[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--command-icon-line) !important;
    color: var(--command-icon-quiet) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

/* 20260709-icon-guidance-v5700: compact action labels keep mobile navigation clear. */
html body[data-page] .shared-nav-label-short {
    display: none !important;
}

html body[data-page] .shared-nav-primary-action {
    min-width: fit-content !important;
}

@media (max-width: 760px) {
    html body[data-page] main :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link)[data-ui-icon] {
        width: 100% !important;
        justify-content: center !important;
    }

    html body[data-page] :is(
        .vue-library-boundary-card,
        .vue-path-card,
        .vue-command-track a,
        .vue-me-ownership-card
    )[data-ui-icon] {
        padding-right: 18px !important;
    }

    html body[data-page] :is(
        .vue-library-boundary-card,
        .vue-path-card,
        .vue-command-track a,
        .vue-me-ownership-card
    )[data-ui-icon]::before {
        position: static !important;
        margin-bottom: 4px !important;
    }

    html body[data-page] :is(.social-row, .card-foot) :is(.secondary-btn, .primary-link, .primary-btn)[data-ui-icon] {
        width: auto !important;
    }
}

/* 20260709-oc-default-visual-v5200: split wide studio backgrounds from vertical OC cover defaults. */
html body[data-page] {
    --oc-v5200-default-cover: url("/animaker/img/generated/ux/default-oc-studio-cover-v5200.webp");
}

html body[data-page="studio"] .studio-launchpad-preview,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    background:
            radial-gradient(circle at 18% 10%, rgba(43, 205, 196, 0.16), transparent 18rem),
            radial-gradient(circle at 82% 14%, rgba(255, 211, 105, 0.18), transparent 17rem),
            linear-gradient(145deg, #f8fbfb 0%, #eef7f7 52%, #fff7e7 100%) !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    min-height: 360px !important;
    border: 1px solid rgba(24, 34, 48, 0.12) !important;
    box-shadow: 0 22px 58px rgba(31, 43, 58, 0.14) !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: 50% 38% !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    transform: scale(1.01) !important;
}

html body[data-page="studio"].studio-focus-flow .studio-launchpad-preview img,
html body[data-page="studio"].studio-wizard-ready .studio-launchpad-preview img {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    object-fit: cover !important;
    object-position: 50% 38% !important;
    border-radius: inherit !important;
    transform: scale(1.01) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    border: 1px solid rgba(24, 34, 48, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.54) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover::before,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover::after {
    opacity: 0.34 !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
    background: var(--oc-v5200-default-cover) center 38% / cover no-repeat !important;
    border-radius: 22px !important;
    overflow: hidden !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 46%),
            linear-gradient(0deg, rgba(12, 17, 26, 0.28), transparent 34%) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    object-position: 50% 38% !important;
    transform: scale(1.01) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head {
    max-width: calc(100% - 24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background: rgba(14, 20, 30, 0.50) !important;
    box-shadow: 0 12px 30px rgba(9, 14, 22, 0.18) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head span {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head strong {
    font-size: clamp(22px, 3.8vw, 42px) !important;
    line-height: 1.04 !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-head small {
    max-width: 28em !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

html body.animaker-theme-night[data-page="studio"] .studio-launchpad-preview,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover,
html body[data-page="studio"].studio-theme-night .studio-launchpad-preview,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    background:
            radial-gradient(circle at 14% 8%, rgba(43, 205, 196, 0.14), transparent 18rem),
            radial-gradient(circle at 86% 12%, rgba(255, 211, 105, 0.10), transparent 16rem),
            linear-gradient(145deg, #101820 0%, #17222c 56%, #111720 100%) !important;
    border-color: rgba(218, 234, 242, 0.12) !important;
}

html body.animaker-theme-night[data-page="studio"] .studio-launchpad-preview img,
html body.animaker-theme-night[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img,
html body[data-page="studio"].studio-theme-night .studio-launchpad-preview img,
html body[data-page="studio"].studio-theme-night.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img {
    filter: brightness(0.82) saturate(0.92) contrast(1.04) !important;
}

@media (max-width: 760px) {
    html body[data-page="studio"] .studio-launchpad-preview {
        min-height: 300px !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview img {
        width: 100% !important;
        min-height: 300px !important;
        border-radius: inherit !important;
    }

    html body[data-page="studio"].studio-focus-flow .studio-launchpad-preview img,
    html body[data-page="studio"].studio-wizard-ready .studio-launchpad-preview img {
        width: 100% !important;
        min-height: 300px !important;
    }
}

/* 20260709-icon-guidance-v5700: keep the header usable on narrow screens. */
@media (max-width: 980px) {
    html body[data-page] {
        overflow-x: hidden !important;
    }

    html body[data-page] .topbar {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        overflow: hidden !important;
    }

    html body[data-page] .topbar .brand {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body[data-page] .topbar :is(.nav, .shared-nav-root nav, .shared-nav-list) {
        order: 2 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 2px 4px !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
    }

    html body[data-page] .topbar :is(.nav, .shared-nav-root nav, .shared-nav-list)::-webkit-scrollbar {
        display: none !important;
    }

    html body[data-page] .topbar :is(.nav a, .shared-nav-root a, .shared-nav-list a) {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
    }

    html body[data-page] .topbar :is(.primary-link, .theme-toggle, .theme-switch, button[data-theme-toggle], a[data-ui-icon]) {
        min-width: 0 !important;
    }

    html body[data-page] .topbar > :is(.primary-link, .secondary-btn, button, .theme-toggle, .theme-switch) {
        order: 3 !important;
        flex: 0 1 calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        min-height: 40px !important;
        padding-inline: 10px !important;
        justify-content: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body[data-page] .topbar > :is(.primary-link, .secondary-btn, button, .theme-toggle, .theme-switch)::before {
        flex: 0 0 auto !important;
    }

    html body[data-page] .topbar #sharedNavApp {
        box-sizing: border-box !important;
        order: 2 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-page] .topbar .shared-nav {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    html body[data-page] .topbar .shared-nav-actions {
        box-sizing: border-box !important;
        order: 1 !important;
        width: min(100%, 22rem) !important;
        max-width: min(100%, 22rem) !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    html body[data-page] .topbar .shared-nav-actions :is(.primary-link, .nav-button, button) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding-inline: 10px !important;
        justify-content: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body[data-page] .topbar .shared-nav-actions .shared-nav-label-full {
        display: none !important;
    }

    html body[data-page] .topbar .shared-nav-actions .shared-nav-label-short {
        display: inline !important;
    }

    html body[data-page] .topbar .shared-nav-actions .shared-nav-primary-action {
        min-width: 0 !important;
    }

    html body[data-page] .topbar .shared-nav-actions .shared-nav-primary-action::after {
        content: none !important;
        display: none !important;
    }

    html body[data-page] .topbar .shared-nav-actions :is(.primary-link, .nav-button, button)::before {
        flex: 0 0 auto !important;
        width: 1em !important;
        height: 1em !important;
    }

    html body[data-page] .topbar .shared-nav-links {
        box-sizing: border-box !important;
        order: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 0 2px 4px !important;
        scrollbar-width: none !important;
    }

    html body[data-page] .topbar .shared-nav-links::-webkit-scrollbar {
        display: none !important;
    }

    html body[data-page] main {
        max-width: 100vw !important;
        overflow-x: clip !important;
    }
}

/* 20260709-icon-guidance-v5700: icons become a clear action language, not decoration. */
html body[data-page] {
    --icon-guide-accent: #1fb8c2;
    --icon-guide-line: rgba(18, 27, 38, 0.13);
    --icon-guide-muted: rgba(18, 27, 38, 0.58);
}

html body.animaker-theme-night[data-page],
html body[data-page="studio"].studio-theme-night {
    --icon-guide-line: rgba(236, 247, 252, 0.15);
    --icon-guide-muted: rgba(236, 247, 252, 0.68);
}

html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    gap: 0.62em !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon] {
    min-height: 48px !important;
    padding-inline: 18px !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon] {
    min-height: 40px !important;
    padding-inline: 14px !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
        opacity: 1 !important;
        transform: translateY(-0.01em) !important;
        filter: drop-shadow(0 7px 14px color-mix(in srgb, currentColor 16%, transparent)) !important;
    }

    html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon]::before {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
        opacity: 0.78 !important;
    }

    html body[data-page] :is([data-ui-icon="spark"], [data-ui-icon="image"], [data-ui-icon="prompt"], [data-ui-icon="palette"])[data-ui-icon]::before {
        color: color-mix(in srgb, currentColor 78%, var(--icon-guide-accent)) !important;
    }

    html body[data-page] :is([data-ui-icon="delete"], [data-ui-icon="hide"])[data-ui-icon]::before {
        opacity: 0.88 !important;
    }
}

html body[data-page] :is(.section-heading, .vue-section-title) > a[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.46em !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--icon-guide-line) !important;
    border-radius: 999px !important;
    color: var(--icon-guide-muted) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

html body[data-page] :is(.vue-feed-filter-chip, .vue-sort-chip)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42em !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.vue-feed-filter-chip, .vue-sort-chip)[data-ui-icon]::before {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
        opacity: 0.56 !important;
    }

    html body[data-page] :is(.vue-feed-filter-chip.is-active, .vue-sort-chip.is-active)[data-ui-icon]::before {
        opacity: 0.9 !important;
    }
}

html body[data-page] :is(.vue-filter-chip, .vue-template-chip, .vue-field-suggestions button, .vue-visual-swatches button)[data-ui-icon]::before {
    content: none !important;
    display: none !important;
}

html body[data-page] .shared-nav-actions :is(.primary-link, .nav-button)[data-ui-icon] {
    border: 1px solid var(--icon-guide-line) !important;
}

html body[data-page] .shared-nav-primary-action[data-ui-icon] {
    border-color: color-mix(in srgb, var(--icon-guide-accent) 34%, var(--icon-guide-line)) !important;
}

@media (max-width: 760px) {
    html body[data-page] .shared-nav-links a[data-ui-icon] {
        gap: 0.34em !important;
    }

    html body[data-page] .shared-nav-links a[data-ui-icon]::before {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
    }

    html body[data-page] main :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon] {
        justify-content: center !important;
    }
}

/* 20260709-oc-experience-v6000: lighter AI-first OC flow, full-screen entry, and whole-page day/night polish. */
html body[data-page] {
    --oc-v6000-ink: #141722;
    --oc-v6000-text: rgba(20, 23, 34, 0.92);
    --oc-v6000-muted: rgba(20, 23, 34, 0.62);
    --oc-v6000-soft: #f7faf9;
    --oc-v6000-panel: rgba(255, 255, 255, 0.86);
    --oc-v6000-panel-solid: #ffffff;
    --oc-v6000-line: rgba(22, 30, 42, 0.12);
    --oc-v6000-cyan: #1fb8c2;
    --oc-v6000-lemon: #ffe56b;
    --oc-v6000-coral: #ff7e9b;
    background:
        radial-gradient(circle at 9% 8%, rgba(31, 184, 194, 0.12), transparent 25rem),
        radial-gradient(circle at 90% 14%, rgba(255, 229, 107, 0.12), transparent 22rem),
        var(--oc-v6000-soft) !important;
    color: var(--oc-v6000-text) !important;
}

html:has(body.animaker-theme-night[data-page]) {
    background: #0f131b !important;
    color-scheme: dark;
}

html body.animaker-theme-night[data-page],
html body[data-page="studio"].studio-theme-night {
    --oc-v6000-ink: #f4f8fb;
    --oc-v6000-text: rgba(244, 248, 251, 0.92);
    --oc-v6000-muted: rgba(227, 236, 242, 0.68);
    --oc-v6000-soft: #0f131b;
    --oc-v6000-panel: rgba(22, 25, 36, 0.78);
    --oc-v6000-panel-solid: #171b26;
    --oc-v6000-line: rgba(233, 244, 249, 0.14);
    background:
        radial-gradient(circle at 10% 8%, rgba(31, 184, 194, 0.12), transparent 24rem),
        radial-gradient(circle at 88% 10%, rgba(255, 126, 155, 0.09), transparent 22rem),
        linear-gradient(180deg, #0f131b 0%, #121823 52%, #0e1118 100%) !important;
    color: var(--oc-v6000-text) !important;
}

html body[data-page] :is(.topbar, .shared-nav, .auth-card, .vue-light-start, .vue-home-community-more, .studio-panel, .studio-route-sidebar, .studio-preview, .vue-work-dock, .vue-gallery-shell, .vue-feed-shell, .vue-me-shell, .vue-template-shell, .vue-character-shell) {
    border-color: var(--oc-v6000-line) !important;
}

html body.animaker-theme-night[data-page] :is(.topbar, .shared-nav, .auth-card, .vue-light-start, .vue-home-community-more, .studio-panel, .studio-route-sidebar, .studio-preview, .vue-work-dock, .vue-gallery-shell, .vue-feed-shell, .vue-me-shell, .vue-template-shell, .vue-character-shell),
html body[data-page="studio"].studio-theme-night :is(.studio-panel, .studio-route-sidebar, .studio-preview) {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
        var(--oc-v6000-panel) !important;
    color: var(--oc-v6000-text) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.26) !important;
}

html body.animaker-theme-night[data-page] :is(input, textarea, select),
html body[data-page="studio"].studio-theme-night :is(input, textarea, select) {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(236, 247, 252, 0.16) !important;
    color: rgba(246, 250, 252, 0.94) !important;
}

html body.animaker-theme-night[data-page] :is(input, textarea, select)::placeholder,
html body[data-page="studio"].studio-theme-night :is(input, textarea, select)::placeholder {
    color: rgba(228, 238, 244, 0.48) !important;
}

html body.animaker-theme-night[data-page] img[src*="/img/generated/"],
html body[data-page="studio"].studio-theme-night img[src*="/img/generated/"] {
    filter: brightness(0.84) saturate(0.9) contrast(1.04) !important;
}

html body[data-page="home"].home-gateway-open {
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #10151f !important;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav, #sharedNavApp, .shared-nav-root) {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: clamp(24px, 5vw, 72px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background:
        linear-gradient(90deg, rgba(246, 251, 251, 0.96) 0%, rgba(246, 251, 251, 0.70) 38%, rgba(246, 251, 251, 0.16) 78%),
        var(--home-gateway-image) center / cover no-repeat !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background:
        linear-gradient(90deg, rgba(12, 16, 24, 0.95) 0%, rgba(12, 16, 24, 0.68) 40%, rgba(12, 16, 24, 0.18) 82%),
        var(--home-gateway-image) center / cover no-repeat !important;
}

html body[data-page="home"] .vue-home-gateway::before {
    content: "" !important;
    position: absolute !important;
    inset: clamp(16px, 3vw, 42px) !important;
    border: 1px solid rgba(23, 34, 48, 0.13) !important;
    border-radius: clamp(28px, 4.5vw, 54px) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34) !important;
    pointer-events: none !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway::before {
    border-color: rgba(236, 247, 252, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    position: relative !important;
    width: min(100%, 980px) !important;
    margin-right: auto !important;
    color: #111722 !important;
    text-align: left !important;
    transform: translateX(clamp(0px, 4vw, 46px)) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy {
    color: #f7fbff !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    align-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(31, 184, 194, 0.30) !important;
    background: rgba(255, 255, 255, 0.55) !important;
    color: #13939d !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #a8f4f1 !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 9.8em !important;
    margin: 20px 0 18px !important;
    color: inherit !important;
    font-size: clamp(56px, 10vw, 148px) !important;
    line-height: 0.88 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 b {
    display: block !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 18em !important;
    margin: 0 !important;
    color: color-mix(in srgb, currentColor 76%, transparent) !important;
    font-size: clamp(18px, 2vw, 26px) !important;
    font-weight: 850 !important;
    line-height: 1.28 !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    margin-top: clamp(24px, 4vw, 48px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

html body[data-page="home"] .vue-home-gateway-steps em {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 27, 38, 0.12) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    color: inherit !important;
    box-shadow: 0 14px 38px rgba(24, 34, 48, 0.10) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-steps em {
    border-color: rgba(236, 247, 252, 0.14) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    position: absolute !important;
    left: clamp(24px, 6vw, 86px) !important;
    right: auto !important;
    bottom: clamp(24px, 5vw, 68px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: fit-content !important;
    padding: 10px 14px 10px 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 27, 38, 0.12) !important;
    background: rgba(255, 255, 255, 0.64) !important;
    color: #111722 !important;
    box-shadow: 0 18px 46px rgba(24, 34, 48, 0.14) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    border-color: rgba(236, 247, 252, 0.14) !important;
    background: rgba(12, 16, 24, 0.58) !important;
    color: #f6fbff !important;
}

html body[data-page="home"] .vue-home-gateway-cue i {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #bff8ef, #fff076) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    width: min(calc(100% - clamp(24px, 5vw, 72px)), 1340px) !important;
    min-height: min(760px, calc(100dvh - 104px)) !important;
    margin: clamp(18px, 3vw, 36px) auto clamp(40px, 7vw, 88px) !important;
    border-radius: clamp(24px, 3vw, 42px) !important;
    border: 1px solid var(--oc-v6000-line) !important;
    box-shadow: 0 32px 92px rgba(27, 39, 58, 0.16) !important;
    background:
        linear-gradient(90deg, rgba(252, 254, 253, 0.96) 0%, rgba(252, 254, 253, 0.78) 39%, rgba(252, 254, 253, 0.18) 74%),
        var(--home-hero-image) center / cover no-repeat !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    border-color: rgba(236, 247, 252, 0.13) !important;
    box-shadow: 0 34px 98px rgba(0, 0, 0, 0.34) !important;
    background:
        linear-gradient(90deg, rgba(13, 17, 26, 0.94) 0%, rgba(13, 17, 26, 0.70) 42%, rgba(13, 17, 26, 0.22) 80%),
        var(--home-hero-image) center / cover no-repeat !important;
}

html body[data-page="home"] .vue-home-copy {
    max-width: 650px !important;
}

html body[data-page="home"] .vue-home-copy > h1 {
    font-size: clamp(52px, 7vw, 112px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
    color: var(--oc-v6000-ink) !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 28em !important;
    color: var(--oc-v6000-muted) !important;
}

html body[data-page="home"] .vue-home-brief {
    max-width: 600px !important;
    padding: clamp(14px, 2vw, 20px) !important;
    border-radius: 24px !important;
    border-color: var(--oc-v6000-line) !important;
    background: color-mix(in srgb, var(--oc-v6000-panel-solid) 76%, transparent) !important;
    backdrop-filter: blur(18px) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief {
    background: rgba(18, 22, 32, 0.70) !important;
}

html body[data-page="home"] .vue-home-intent-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-intent-row button {
    min-height: 58px !important;
    border-radius: 18px !important;
    text-align: left !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 76px !important;
    border-radius: 18px !important;
    line-height: 1.48 !important;
}

html body[data-page="home"] .vue-home-brief-output {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body[data-page="home"] .vue-home-brief-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    min-height: 112px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

html body[data-page="home"] .vue-home-brief-chips button img {
    height: 58px !important;
    object-position: 50% 40% !important;
}

html body[data-page="home"] .vue-home-feature {
    align-self: end !important;
    width: min(100%, 430px) !important;
    border-radius: 28px !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    overflow: hidden !important;
    transform: translateY(18px) !important;
}

html body[data-page="home"] .vue-home-feature > img {
    min-height: 300px !important;
    object-fit: cover !important;
    object-position: 50% 36% !important;
}

html body[data-page="home"] .vue-home-feature-body {
    backdrop-filter: blur(16px) !important;
}

html body[data-page="home"] .vue-home-creation {
    width: min(calc(100% - clamp(24px, 5vw, 72px)), 1180px) !important;
    margin-inline: auto !important;
}

html body[data-page="home"] .vue-home-community-more {
    width: min(calc(100% - clamp(24px, 5vw, 72px)), 1180px) !important;
    margin: 28px auto 80px !important;
    border-radius: 28px !important;
    background: var(--oc-v6000-panel) !important;
    backdrop-filter: blur(14px) !important;
}

html body[data-page="home"] .vue-home-community-more > summary {
    min-height: 88px !important;
    border-radius: 28px !important;
}

html body[data-page="studio"] .studio-launchpad-preview,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover {
    background:
        radial-gradient(circle at 18% 10%, rgba(31, 184, 194, 0.13), transparent 18rem),
        linear-gradient(145deg, #fbfdfc 0%, #eff8f7 52%, #fff8e9 100%) !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
    background: url("/animaker/img/generated/ux/default-oc-draft-board-v7000.webp") center 48% / cover no-repeat !important;
}

@media (max-width: 900px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        padding: 28px !important;
        background-position: 58% 50% !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        transform: none !important;
    }

    html body[data-page="home"] .vue-home-brief-output,
    html body[data-page="home"] .vue-home-brief-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body[data-page="home"] .vue-home-gateway {
        padding: 22px !important;
        background-position: 58% 50% !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        transform: none !important;
        width: 100% !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(48px, 18vw, 76px) !important;
    }

    html body[data-page="home"] .vue-home-gateway-steps {
        max-width: 16rem !important;
    }

    html body[data-page="home"] .vue-home-gateway-cue {
        left: 22px !important;
        bottom: 22px !important;
    }

    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: calc(100% - 24px) !important;
        margin-top: 12px !important;
        padding: 18px !important;
        border-radius: 24px !important;
    }

    html body[data-page="home"] .vue-home-copy > h1 {
        font-size: clamp(42px, 15vw, 64px) !important;
    }

    html body[data-page="home"] .vue-home-intent-row,
    html body[data-page="home"] .vue-home-brief-output,
    html body[data-page="home"] .vue-home-brief-chips {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="home"] .vue-home-brief-chips button {
        min-height: 86px !important;
        display: grid !important;
        grid-template-columns: 86px minmax(0, 1fr) !important;
        align-items: center !important;
        text-align: left !important;
    }

    html body[data-page="home"] .vue-home-brief-chips button img {
        width: 86px !important;
        height: 100% !important;
        grid-row: span 3 !important;
    }
}

/* 20260709-oc-experience-v6000: keep the first usable screen focused on one action. */
html body[data-page="home"] .vue-home-copy {
    align-content: center !important;
    gap: 14px !important;
}

html body[data-page="home"] .vue-home-copy > h1 {
    font-size: clamp(46px, 6.3vw, 92px) !important;
    max-width: 7.5em !important;
}

html body[data-page="home"] .vue-home-brief-output,
html body[data-page="home"] .vue-home-brief-chips {
    display: none !important;
}

html body[data-page="home"] .vue-home-brief {
    gap: 12px !important;
    margin-top: 4px !important;
}

html body[data-page="home"] .vue-home-brief label {
    gap: 7px !important;
}

html body[data-page="home"] .vue-home-brief-cue {
    display: none !important;
}

html body[data-page="home"] .vue-home-brief-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(132px, 0.75fr) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-feature {
    align-self: center !important;
    transform: none !important;
}

@media (max-width: 900px) {
    html body[data-page="home"] .vue-home-copy > h1 {
        font-size: clamp(42px, 12vw, 70px) !important;
    }
}

@media (max-width: 560px) {
    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="home"] .vue-home-intent-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    html body[data-page="home"] .vue-home-intent-row button {
        min-height: 62px !important;
        padding: 8px 6px !important;
        gap: 3px !important;
        text-align: center !important;
    }

    html body[data-page="home"] .vue-home-intent-row button::before {
        margin: 0 auto !important;
    }

    html body[data-page="home"] .vue-home-intent-row button small {
        display: none !important;
    }

    html body[data-page="home"] .vue-home-brief-cue {
        display: none !important;
    }

    html body[data-page="home"] .vue-home-brief textarea {
        min-height: 68px !important;
    }
}

/* 20260709-oc-experience-v6200: override older home action-column rules. */
html body[data-page="home"] .vue-home-brief .vue-home-brief-actions {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    align-self: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(132px, 0.75fr) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-brief .vue-home-brief-actions :is(.primary-link, .secondary-btn) {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 560px) {
    html body[data-page="home"] .vue-home-brief .vue-home-brief-actions {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 901px) {
    html body[data-page="home"] .vue-home-copy {
        transform: translateY(-64px) !important;
    }
}

/* 20260709-icon-boundary-v6700: make icons read as action language while keeping dense chips quiet. */
html body[data-page] {
    --icon6700-primary: #18202d;
    --icon6700-accent: #1fb8c2;
    --icon6700-warm: #ffe66d;
    --icon6700-line: rgba(22, 30, 42, 0.14);
    --icon6700-chip: rgba(255, 255, 255, 0.72);
}

html body.animaker-theme-night[data-page],
html body[data-page="studio"].studio-theme-night {
    --icon6700-primary: #f7fbff;
    --icon6700-line: rgba(238, 246, 255, 0.16);
    --icon6700-chip: rgba(255, 255, 255, 0.10);
}

html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon] {
    gap: 7px !important;
    white-space: nowrap !important;
}

html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon] {
    gap: 9px !important;
    letter-spacing: 0 !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon] {
    min-height: 48px !important;
    padding-inline: 18px 20px !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon] {
    min-height: 40px !important;
    padding-inline: 13px 15px !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon="spark"],
html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon="image"],
html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon="publish"],
html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon="next"] {
    box-shadow:
        0 16px 34px rgba(20, 28, 40, 0.15),
        inset 0 0 0 1px color-mix(in srgb, #ffffff 22%, transparent) !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon]::before {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
        opacity: 0.68 !important;
        transform: translateY(-0.01em) !important;
    }

    html body[data-page] :is(.topbar .nav a.active, .shared-nav-links a.active)[data-ui-icon]::before {
        color: var(--icon6700-accent) !important;
        opacity: 1 !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        width: 21px !important;
        height: 21px !important;
        flex-basis: 21px !important;
        color: currentColor !important;
        opacity: 1 !important;
        filter: drop-shadow(0 6px 14px color-mix(in srgb, currentColor 18%, transparent)) !important;
    }

    html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon]::before {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
        color: currentColor !important;
        opacity: 0.82 !important;
    }

    html body[data-page] :is([data-ui-icon="spark"], [data-ui-icon="image"], [data-ui-icon="prompt"], [data-ui-icon="palette"], [data-ui-icon="visual"])[data-ui-icon]::before {
        color: color-mix(in srgb, currentColor 72%, var(--icon6700-accent)) !important;
    }

    html body[data-page] :is([data-ui-icon="publish"], [data-ui-icon="export"], [data-ui-icon="download"], [data-ui-icon="save"])[data-ui-icon]::before {
        color: color-mix(in srgb, currentColor 78%, #20a77a) !important;
    }

    html body[data-page] :is([data-ui-icon="delete"], [data-ui-icon="hide"], [data-ui-icon="logout"])[data-ui-icon]::before {
        color: color-mix(in srgb, currentColor 76%, #d75f52) !important;
    }
}

html body[data-page] .topbar .nav a[data-ui-icon] {
    min-height: 38px !important;
    padding-inline: 12px !important;
    border-radius: 999px !important;
}

html body[data-page] .topbar .nav a.active[data-ui-icon] {
    background: color-mix(in srgb, var(--icon6700-chip) 78%, var(--icon6700-accent) 10%) !important;
    box-shadow: inset 0 0 0 1px var(--icon6700-line) !important;
}

html body[data-page] .shared-nav-primary-action[data-ui-icon] {
    min-width: max-content !important;
}

html body[data-page] :is(.vue-field-suggestions button, .vue-filter-chip, .vue-template-chip, .vue-visual-swatches button, .vue-world-chip-row .secondary-btn)[data-ui-icon]::before {
    content: none !important;
    display: none !important;
}

html body[data-page] :is(.social-row, .card-foot) :is(.secondary-btn, .primary-link, .primary-btn)[data-ui-icon] {
    gap: 7px !important;
}

@media (max-width: 1320px) {
    html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon] {
        gap: 6px !important;
        padding-inline: 10px !important;
    }

    html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon]::before {
        display: block !important;
        width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
    }
}

@media (max-width: 760px) {
    html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon] {
        justify-content: center !important;
    }

    html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon] {
        gap: 5px !important;
        min-height: 34px !important;
        padding-inline: 9px !important;
    }

    html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon]::before {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
    }
}

/* 20260709-oc-flow-v7000-final: final cascade guard for the OC flow pass. */
html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    width: min(calc(100% - clamp(18px, 3vw, 44px)), 1720px) !important;
    min-height: clamp(680px, calc(100dvh - 92px), 920px) !important;
    margin-top: clamp(10px, 1.8vw, 22px) !important;
    margin-bottom: clamp(34px, 5vw, 72px) !important;
    background-position: center center !important;
}

html body[data-page="studio"] .vue-assist-card {
    gap: 14px !important;
}

html body[data-page="studio"] .vue-assist-one-next {
    border-radius: 26px !important;
    box-shadow:
        0 18px 42px rgba(23, 31, 46, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.54) !important;
}

html body[data-page="studio"] .vue-assist-toolbox > summary {
    min-height: 70px !important;
    padding: 16px 18px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
}

html body[data-page="studio"] .vue-assist-toolbox > summary::before {
    content: "" !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 34% 30%, #ffffff 0 14%, transparent 15%),
        linear-gradient(135deg, #c4f7ee, #ffe979) !important;
    box-shadow: 0 12px 26px rgba(31, 184, 194, 0.16) !important;
}

html body[data-page="studio"] .vue-assist-compact-lane {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.85fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

html body[data-page="studio"] .vue-assist-toolbox .vue-assist-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body[data-page="studio"] .vue-image-runway {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

html body[data-page="studio"] .vue-image-runway span {
    position: relative !important;
    min-height: 76px !important;
    padding: 12px 12px 12px 46px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(22, 30, 42, 0.10) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: var(--oc-v6000-muted) !important;
    overflow: hidden !important;
}

html body[data-page="studio"].studio-theme-night .vue-image-runway span {
    border-color: rgba(238, 246, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="studio"] .vue-image-runway i {
    position: absolute !important;
    left: 16px !important;
    top: 16px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(31, 184, 194, 0.30) !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 5px #ffffff !important;
}

html body[data-page="studio"] .vue-image-runway span.done i,
html body[data-page="studio"] .vue-image-runway span.active i {
    border-color: #1fb8c2 !important;
    background: linear-gradient(135deg, #1fb8c2, #ffe56b) !important;
}

html body[data-page="studio"] .vue-image-runway span.active,
html body[data-page="studio"] .vue-image-runway span.done {
    color: var(--oc-v6000-ink) !important;
}

html body[data-page="studio"] .vue-image-runway strong,
html body[data-page="studio"] .vue-image-runway small {
    display: block !important;
    line-height: 1.25 !important;
}

html body[data-page="studio"] .vue-image-done-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

html body[data-page="studio"] .vue-board-default-art img[src*="default-oc-draft-board-v7000"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 48% !important;
}

/* 20260709-flow-check: make the cover-generation handoff obvious. */
html body[data-page="studio"] .vue-image-readiness.studio-cover-action-pulse,
html body[data-page="studio"] #studioVueImage.studio-cover-action-pulse {
    position: relative !important;
    border-color: rgba(31, 184, 194, 0.64) !important;
    box-shadow:
            0 0 0 4px rgba(31, 184, 194, 0.14),
            0 22px 58px rgba(31, 184, 194, 0.16) !important;
}

html body[data-page="studio"] .vue-image-readiness.studio-cover-action-pulse::after,
html body[data-page="studio"] #studioVueImage.studio-cover-action-pulse::after {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    border-radius: 24px;
    border: 1px solid rgba(255, 229, 107, 0.58);
    animation: studioCoverPulseRing 1.6s ease-out both;
}

html body[data-page="studio"] .vue-image-primary-actions .primary-btn:disabled {
    opacity: 1 !important;
    color: rgba(23, 21, 31, 0.72) !important;
    background: linear-gradient(135deg, rgba(224, 246, 244, 0.92), rgba(255, 247, 176, 0.86)) !important;
    cursor: progress !important;
}

html body.animaker-theme-night[data-page="studio"] .vue-image-primary-actions .primary-btn:disabled,
html body.studio-theme-night[data-page="studio"] .vue-image-primary-actions .primary-btn:disabled {
    color: rgba(237, 246, 255, 0.82) !important;
    background: linear-gradient(135deg, rgba(31, 184, 194, 0.22), rgba(255, 229, 107, 0.18)) !important;
}

@keyframes studioCoverPulseRing {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.025);
    }
}

@media (max-width: 900px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        width: calc(100% - 24px) !important;
    }

    html body[data-page="studio"] .vue-assist-compact-lane,
    html body[data-page="studio"] .vue-image-runway,
    html body[data-page="studio"] .vue-image-done-actions {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="studio"] .vue-assist-toolbox .vue-assist-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 20260709-oc-guide-v9100 legacy guard: stable generated OC portal art and resolution-safe entry. */
html body[data-page="home"] {
    --oc-v8000-ink: #17151f;
    --oc-v8000-muted: rgba(23, 21, 31, 0.66);
    --oc-v8000-line: rgba(23, 21, 31, 0.10);
    --oc-v8000-panel: rgba(255, 255, 255, 0.82);
    --oc-v8000-cyan: #20b8c5;
    --oc-v8000-lemon: #ffe56b;
    background:
        radial-gradient(circle at 12% 8%, rgba(32, 184, 197, 0.12), transparent 24rem),
        radial-gradient(circle at 88% 18%, rgba(255, 122, 162, 0.10), transparent 22rem),
        linear-gradient(180deg, #f8fbff 0%, #edf8f8 48%, #fff9ea 100%) !important;
    color: var(--oc-v8000-ink) !important;
}

html body.animaker-theme-night[data-page="home"] {
    --oc-v8000-ink: #f7fbff;
    --oc-v8000-muted: rgba(237, 246, 255, 0.72);
    --oc-v8000-line: rgba(237, 246, 255, 0.14);
    --oc-v8000-panel: rgba(17, 22, 32, 0.78);
    background:
        radial-gradient(circle at 10% 6%, rgba(32, 184, 197, 0.13), transparent 24rem),
        radial-gradient(circle at 86% 16%, rgba(255, 122, 162, 0.10), transparent 22rem),
        linear-gradient(180deg, #0f141e 0%, #111923 54%, #0d1018 100%) !important;
    color: var(--oc-v8000-ink) !important;
}

html body[data-page="home"].home-gateway-open {
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #10151f !important;
}

html body[data-page="home"] .vue-home-gateway,
html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
html body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: clamp(22px, 4.8vw, 72px) !important;
    display: grid !important;
    place-items: center start !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 253, 0.96) 0%, rgba(250, 253, 253, 0.78) 36%, rgba(250, 253, 253, 0.20) 70%, rgba(250, 253, 253, 0.04) 100%),
        var(--home-gateway-image) !important;
    background-size: cover !important;
    background-position: 58% 46% !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
        linear-gradient(90deg, rgba(12, 16, 24, 0.94) 0%, rgba(12, 16, 24, 0.72) 38%, rgba(12, 16, 24, 0.22) 76%, rgba(12, 16, 24, 0.05) 100%),
        var(--home-gateway-image) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    width: min(100%, 960px) !important;
    margin-left: clamp(0px, 5vw, 72px) !important;
    margin-right: 0 !important;
    transform: none !important;
    color: var(--oc-v8000-ink) !important;
    text-align: left !important;
    text-shadow: 0 10px 34px rgba(255, 255, 255, 0.32) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy {
    text-shadow: 0 18px 48px rgba(0, 0, 0, 0.46) !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 9.2em !important;
    margin: 20px 0 18px !important;
    font-size: clamp(54px, 10.5vw, 148px) !important;
    line-height: 0.88 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 17em !important;
    color: color-mix(in srgb, currentColor 78%, transparent) !important;
}

html body[data-page="home"] .vue-home-gateway-steps em,
html body[data-page="home"] .vue-home-gateway-cue {
    border-color: var(--oc-v8000-line) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    backdrop-filter: blur(14px) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-steps em,
html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    background: rgba(14, 18, 28, 0.62) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    width: min(calc(100% - clamp(20px, 5vw, 76px)), 1380px) !important;
    min-height: clamp(640px, calc(100dvh - 112px), 780px) !important;
    margin: clamp(16px, 3vw, 34px) auto clamp(42px, 6vw, 82px) !important;
    padding: clamp(28px, 4vw, 58px) !important;
    border-radius: clamp(24px, 3vw, 38px) !important;
    background-image:
        linear-gradient(90deg, rgba(253, 255, 253, 0.95) 0%, rgba(253, 255, 253, 0.80) 42%, rgba(253, 255, 253, 0.30) 72%, rgba(253, 255, 253, 0.10) 100%),
        var(--home-hero-image) !important;
    background-size: cover !important;
    background-position: 60% 46% !important;
    box-shadow: 0 30px 86px rgba(27, 39, 58, 0.15) !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 16, 24, 0.93) 0%, rgba(12, 16, 24, 0.73) 44%, rgba(12, 16, 24, 0.30) 78%, rgba(12, 16, 24, 0.12) 100%),
        var(--home-hero-image) !important;
}

html body[data-page="home"] .vue-home-copy {
    max-width: 620px !important;
    transform: none !important;
}

html body[data-page="home"] .vue-home-copy > h1 {
    max-width: 7.2em !important;
    font-size: clamp(46px, 6vw, 86px) !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-brief,
html body[data-page="home"] .vue-home-feature,
html body[data-page="home"] .vue-home-creation,
html body[data-page="home"] .vue-home-next,
html body[data-page="home"] .vue-home-community-more {
    border-radius: 28px !important;
}

html body[data-page="home"] .vue-home-feature {
    width: min(100%, 420px) !important;
    align-self: center !important;
    transform: none !important;
    background: rgba(18, 20, 30, 0.78) !important;
}

html body[data-page="home"] .vue-home-feature > img,
html body[data-page="home"] img[src*="oc-creator-default-v9000"] {
    object-fit: cover !important;
    object-position: 50% 42% !important;
}

html body[data-page="home"] .vue-home-feature > img {
    min-height: 318px !important;
    max-height: 440px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
    background: url("/animaker/img/generated/ux/oc-creator-default-v9000.webp") center 42% / cover no-repeat !important;
}

html body[data-page="studio"] .vue-board-default-art img[src*="oc-creator-default-v9000"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 42% !important;
}

html body[data-page="studio"] .vue-image-field textarea,
html body[data-page="studio"] [data-bridge-field="imagePromptInput"] textarea {
    line-height: 1.58 !important;
}

@media (min-width: 1600px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: min(calc(100% - 120px), 1440px) !important;
        min-height: clamp(680px, 76vh, 820px) !important;
    }
}

@media (max-width: 900px) {
    html body[data-page="home"] .vue-home-gateway,
    html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
    html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
        place-items: end start !important;
        background-position: 62% 50% !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        width: min(100%, 520px) !important;
        margin-left: 0 !important;
        padding-bottom: clamp(84px, 18vw, 128px) !important;
    }

    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: calc(100% - 24px) !important;
        min-height: auto !important;
        padding: 24px !important;
        background-position: 68% 50% !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: 100% !important;
    }
}

@media (max-width: 560px) {
    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(48px, 18vw, 76px) !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy p {
        max-width: 14em !important;
        font-size: 17px !important;
    }

    html body[data-page="home"] .vue-home-gateway-steps {
        max-width: 17rem !important;
    }

    html body[data-page="home"] .vue-home-gateway-cue {
        left: 18px !important;
        bottom: 18px !important;
        right: auto !important;
    }
}

/* 20260709-oc-guide-v9100: lighter OC-first flow, balanced day/night, fewer competing choices. */
html body[data-page] {
    --oc-guide-ink: #191821;
    --oc-guide-muted: rgba(25, 24, 33, 0.64);
    --oc-guide-soft: rgba(25, 24, 33, 0.08);
    --oc-guide-line: rgba(25, 24, 33, 0.10);
    --oc-guide-panel: rgba(255, 255, 255, 0.86);
    --oc-guide-panel-solid: #ffffff;
    --oc-guide-cyan: #23b8c7;
    --oc-guide-rose: #ff77a2;
    --oc-guide-lemon: #ffe66d;
    --oc-guide-shadow: 0 24px 70px rgba(27, 38, 54, 0.13);
    background:
        radial-gradient(circle at 8% 0%, rgba(35, 184, 199, 0.10), transparent 28rem),
        radial-gradient(circle at 96% 12%, rgba(255, 119, 162, 0.08), transparent 24rem),
        linear-gradient(180deg, #fbfdff 0%, #f3fbfb 52%, #fff9e9 100%) !important;
    color: var(--oc-guide-ink) !important;
}

html body.animaker-theme-night[data-page],
html body.studio-theme-night[data-page] {
    --oc-guide-ink: #f6f9fb;
    --oc-guide-muted: rgba(238, 246, 252, 0.66);
    --oc-guide-soft: rgba(238, 246, 252, 0.11);
    --oc-guide-line: rgba(238, 246, 252, 0.14);
    --oc-guide-panel: rgba(19, 24, 34, 0.80);
    --oc-guide-panel-solid: #171d29;
    --oc-guide-shadow: 0 28px 78px rgba(0, 0, 0, 0.34);
    background:
        radial-gradient(circle at 8% 0%, rgba(35, 184, 199, 0.16), transparent 28rem),
        radial-gradient(circle at 94% 10%, rgba(255, 119, 162, 0.10), transparent 24rem),
        linear-gradient(180deg, #101720 0%, #141d27 54%, #10141d 100%) !important;
    color: var(--oc-guide-ink) !important;
}

html body[data-page] :is(.panel, .card, .empty-state, .vue-home-creation, .vue-home-next, .vue-home-community-more, .vue-assist-card, .vue-route-director, .vue-board-shell, .vue-core-card, .vue-image-dock, .vue-story-dock, .vue-publish-dock) {
    border-color: var(--oc-guide-line) !important;
    border-radius: 24px !important;
}

html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon] {
    min-height: 44px !important;
    border-radius: 16px !important;
    gap: 9px !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon] {
    background: linear-gradient(135deg, #111720 0%, #232232 52%, #1fb8c2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px rgba(31, 184, 194, 0.18) !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon] {
    background: color-mix(in srgb, var(--oc-guide-panel-solid) 82%, transparent) !important;
    border: 1px solid var(--oc-guide-line) !important;
    color: var(--oc-guide-ink) !important;
}

html body.animaker-theme-night[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon],
html body.studio-theme-night[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon] {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button)[data-ui-icon]::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 12px !important;
}

html body[data-page="home"] {
    --home-portal-art: url("/animaker/img/generated/ux/oc-creator-default-v9000.webp");
}

html body[data-page="home"].home-gateway-open {
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #f7fbfd !important;
}

html body.animaker-theme-night[data-page="home"].home-gateway-open {
    background: #0f151f !important;
}

html body[data-page="home"] .vue-home-gateway,
html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
html body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: clamp(22px, 4.6vw, 76px) !important;
    display: grid !important;
    align-items: center !important;
    justify-items: start !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background-image:
        linear-gradient(90deg, rgba(251, 253, 254, 0.98) 0%, rgba(251, 253, 254, 0.84) 36%, rgba(251, 253, 254, 0.30) 64%, rgba(251, 253, 254, 0.04) 100%),
        var(--home-gateway-image, var(--home-portal-art)) !important;
    background-size: cover !important;
    background-position: 55% 48% !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
        linear-gradient(90deg, rgba(12, 17, 25, 0.94) 0%, rgba(12, 17, 25, 0.78) 38%, rgba(12, 17, 25, 0.32) 68%, rgba(12, 17, 25, 0.07) 100%),
        var(--home-gateway-image, var(--home-portal-art)) !important;
    filter: saturate(0.92) contrast(1.02) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    width: min(100%, 780px) !important;
    margin-left: clamp(0px, 4vw, 64px) !important;
    color: var(--oc-guide-ink) !important;
    text-align: left !important;
    transform: none !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid var(--oc-guide-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: var(--oc-guide-muted) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-copy > span {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.4em !important;
    margin: 18px 0 18px !important;
    font-size: clamp(54px, 9.2vw, 132px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 15em !important;
    margin: 0 0 20px !important;
    color: var(--oc-guide-muted) !important;
    font-size: clamp(18px, 2.1vw, 28px) !important;
    line-height: 1.38 !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

html body[data-page="home"] .vue-home-gateway-steps em {
    min-width: 118px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--oc-guide-line) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 14px 38px rgba(32, 44, 64, 0.09) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-steps em {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    left: clamp(22px, 8.6vw, 140px) !important;
    right: auto !important;
    bottom: clamp(22px, 6vw, 68px) !important;
    border-radius: 999px !important;
    border-color: var(--oc-guide-line) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: var(--oc-guide-ink) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    background: rgba(255, 255, 255, 0.09) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    width: min(calc(100% - clamp(20px, 5vw, 72px)), 1400px) !important;
    min-height: clamp(620px, calc(100dvh - 118px), 800px) !important;
    margin: clamp(18px, 3vw, 36px) auto clamp(44px, 6vw, 84px) !important;
    padding: clamp(24px, 4vw, 56px) !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 0.92fr) minmax(300px, 0.62fr) !important;
    align-items: center !important;
    gap: clamp(22px, 4vw, 60px) !important;
    border: 1px solid var(--oc-guide-line) !important;
    border-radius: clamp(24px, 3vw, 38px) !important;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.83) 42%, rgba(255, 255, 255, 0.38) 70%, rgba(255, 255, 255, 0.12) 100%),
        var(--home-hero-image, var(--home-portal-art)) !important;
    background-size: cover !important;
    background-position: 58% 48% !important;
    box-shadow: var(--oc-guide-shadow) !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 17, 25, 0.94) 0%, rgba(12, 17, 25, 0.78) 45%, rgba(12, 17, 25, 0.38) 76%, rgba(12, 17, 25, 0.15) 100%),
        var(--home-hero-image, var(--home-portal-art)) !important;
    filter: saturate(0.96) !important;
}

html body[data-page="home"] .vue-home-copy {
    max-width: 600px !important;
    transform: none !important;
}

html body[data-page="home"] .vue-home-copy > h1 {
    max-width: 6.5em !important;
    margin: 8px 0 14px !important;
    font-size: clamp(42px, 5.4vw, 76px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 25em !important;
    margin-bottom: 18px !important;
    color: var(--oc-guide-muted) !important;
}

html body[data-page="home"] .vue-home-brief {
    padding: clamp(16px, 2.2vw, 22px) !important;
    border: 1px solid var(--oc-guide-line) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 18px 46px rgba(23, 33, 46, 0.10) !important;
    backdrop-filter: blur(16px) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief {
    background: rgba(15, 20, 30, 0.76) !important;
}

html body[data-page="home"] .vue-home-intent-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-intent-row button {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
}

html body[data-page="home"] .vue-home-brief label {
    margin-top: 10px !important;
}

html body[data-page="home"] .vue-home-brief textarea {
    min-height: 88px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.82) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief textarea {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="home"] .vue-home-brief-cue {
    min-height: 44px !important;
    margin-top: 10px !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    color: var(--oc-guide-muted) !important;
}

html body[data-page="home"] .vue-home-brief-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.85fr) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

html body[data-page="home"] .vue-home-brief-output {
    margin-top: 12px !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-brief-output:not(.is-ready),
html body[data-page="home"] .vue-home-brief-chips {
    display: none !important;
}

html body[data-page="home"] .vue-home-brief.has-brief .vue-home-brief-chips {
    display: grid !important;
}

html body[data-page="home"] .vue-home-brief-output em {
    min-height: 54px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
}

html body[data-page="home"] .vue-home-brief-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

html body[data-page="home"] .vue-home-brief-chips button {
    min-height: 82px !important;
    padding: 8px !important;
    border-radius: 18px !important;
}

html body[data-page="home"] .vue-home-brief-chips button img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
}

html body[data-page="home"] .vue-home-brief:not(.has-brief) .vue-home-brief-chips {
    display: none !important;
}

html body[data-page="home"] .vue-home-actions,
html body[data-page="home"] .vue-home-hero-routes {
    display: none !important;
}

html body[data-page="home"] .vue-home-flow {
    margin-top: 14px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--oc-guide-panel-solid) 76%, transparent) !important;
    border: 1px solid var(--oc-guide-line) !important;
}

html body[data-page="home"] .vue-home-flow-head {
    display: none !important;
}

html body[data-page="home"] .vue-home-flow ol {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="home"] .vue-home-flow li {
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.56) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-flow li {
    background: rgba(255, 255, 255, 0.08) !important;
}

html body[data-page="home"] .vue-home-feature {
    width: min(100%, 390px) !important;
    justify-self: end !important;
    align-self: center !important;
    transform: none !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    background: rgba(18, 22, 32, 0.78) !important;
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.22) !important;
}

html body[data-page="home"] .vue-home-feature > img,
html body[data-page="home"] img[src*="oc-creator-default-v9000"] {
    object-fit: cover !important;
    object-position: 50% 48% !important;
}

html body[data-page="home"] .vue-home-feature > img {
    min-height: 280px !important;
    max-height: 390px !important;
}

html body[data-page="home"] .vue-home-creation,
html body[data-page="home"] .vue-home-next,
html body[data-page="home"] .vue-home-community-more {
    width: min(calc(100% - clamp(24px, 5vw, 80px)), 1240px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: var(--oc-guide-panel) !important;
    border: 1px solid var(--oc-guide-line) !important;
    box-shadow: 0 16px 52px rgba(27, 38, 54, 0.08) !important;
}

html body[data-page="home"] .vue-home-creation-head p,
html body[data-page="home"] .vue-home-next span {
    color: var(--oc-guide-muted) !important;
}

html body[data-page="home"] .vue-home-starter-strip {
    gap: 10px !important;
}

html body[data-page="home"] .vue-home-community-more > summary {
    border-radius: 24px !important;
}

html body[data-page="studio"],
html body.animaker-theme-day[data-page="studio"] {
    background:
        radial-gradient(circle at 3% 0%, rgba(35, 184, 199, 0.10), transparent 25rem),
        radial-gradient(circle at 100% 12%, rgba(255, 119, 162, 0.08), transparent 22rem),
        linear-gradient(180deg, #fbfdff 0%, #f5fbfb 48%, #fff9ed 100%) !important;
}

html body[data-page="studio"].studio-theme-night,
html body.animaker-theme-night[data-page="studio"] {
    background:
        radial-gradient(circle at 4% 0%, rgba(35, 184, 199, 0.14), transparent 25rem),
        radial-gradient(circle at 100% 12%, rgba(255, 119, 162, 0.08), transparent 22rem),
        linear-gradient(180deg, #101720 0%, #141d27 50%, #10141d 100%) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-card {
    padding: 14px !important;
    border-radius: 24px !important;
    background: var(--oc-guide-panel) !important;
    border: 1px solid var(--oc-guide-line) !important;
    box-shadow: var(--oc-guide-shadow) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 0 10px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-head h2 {
    margin: 2px 0 0 !important;
    font-size: clamp(19px, 2vw, 26px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-head p:not(.eyebrow) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-head > strong {
    width: 62px !important;
    height: 62px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(35, 184, 199, 0.14), rgba(255, 230, 109, 0.24)) !important;
    color: var(--oc-guide-ink) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-meter {
    height: 6px !important;
    margin: 0 0 12px !important;
    border-radius: 999px !important;
    background: var(--oc-guide-soft) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-meter span {
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--oc-guide-cyan), var(--oc-guide-lemon)) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px !important;
    border: 1px solid rgba(35, 184, 199, 0.22) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(35, 184, 199, 0.13), rgba(255, 230, 109, 0.18)),
        color-mix(in srgb, var(--oc-guide-panel-solid) 74%, transparent) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next span {
    color: var(--oc-guide-cyan) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next strong {
    font-size: clamp(20px, 2.2vw, 28px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next p {
    max-width: 38em !important;
    margin-top: 5px !important;
    color: var(--oc-guide-muted) !important;
    line-height: 1.46 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next .primary-btn {
    min-width: 148px !important;
    justify-content: center !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox {
    margin-top: 10px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox > summary {
    min-height: 52px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--oc-guide-line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--oc-guide-panel-solid) 72%, transparent) !important;
}

html body.animaker-theme-night[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox > summary,
html body[data-page="studio"].studio-theme-night.studio-focus-flow.studio-wizard-ready .vue-assist-toolbox > summary {
    background: rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox > summary span {
    color: var(--oc-guide-cyan) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox > summary strong {
    font-size: 15px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox-body {
    padding-top: 12px !important;
    display: grid !important;
    gap: 12px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-toolbox:not([open]) {
    opacity: 0.92 !important;
}

html body[data-page="studio"] .vue-assist-compact-lane,
html body[data-page="studio"] .vue-generation-progress,
html body[data-page="studio"] .vue-starter-panel,
html body[data-page="studio"] .vue-nudge-panel,
html body[data-page="studio"] .vue-ai-capability-strip,
html body[data-page="studio"] .vue-operation-panel {
    border-radius: 20px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art {
    background: url("/animaker/img/generated/ux/oc-creator-default-v9000.webp") center 48% / cover no-repeat !important;
}

html body[data-page="studio"] .vue-board-default-art img[src*="oc-creator-default-v9000"],
html body[data-page="studio"] .vue-board-default-art img[src*="oc-creator-default-v9000"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 48% !important;
}

@media (max-width: 980px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        grid-template-columns: 1fr !important;
        width: calc(100% - 24px) !important;
        min-height: auto !important;
        padding: 22px !important;
        background-position: 67% 48% !important;
    }

    html body[data-page="home"] .vue-home-feature {
        width: 100% !important;
        justify-self: stretch !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next .primary-btn {
        width: 100% !important;
    }
}

@media (max-width: 620px) {
    html body[data-page="home"] .vue-home-gateway {
        align-items: end !important;
        background-position: 68% 50% !important;
        padding: 20px !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        margin-left: 0 !important;
        padding-bottom: 82px !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(46px, 17vw, 74px) !important;
    }

    html body[data-page="home"] .vue-home-intent-row,
    html body[data-page="home"] .vue-home-brief-chips,
    html body[data-page="home"] .vue-home-flow ol,
    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="home"] .vue-home-intent-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-intent-row button {
        min-height: 52px !important;
        padding: 8px 6px !important;
    }

    html body[data-page="home"] .vue-home-intent-row button small {
        display: none !important;
    }

    html body[data-page="home"] .vue-home-brief-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="home"] .vue-home-brief {
        padding: 16px !important;
    }

    html body[data-page="home"] .vue-home-brief textarea {
        min-height: 72px !important;
    }

    html body[data-page="home"] .vue-home-brief-output {
        grid-template-columns: 1fr 1fr !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-head {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-head > strong {
        width: auto !important;
        height: 44px !important;
        justify-self: start !important;
    }
}

/* 20260709-cover-result-v9200: show the generated cover as the outcome, not as a tiny sidebar thumbnail. */
html body[data-page="studio"] .vue-image-result-card {
    display: grid !important;
    grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    padding: 14px !important;
    border: 1px solid color-mix(in srgb, var(--oc-guide-cyan) 28%, var(--oc-guide-line)) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--oc-guide-cyan) 9%, var(--oc-guide-panel-solid)), color-mix(in srgb, var(--oc-guide-lemon) 13%, var(--oc-guide-panel-solid))),
        var(--oc-guide-panel) !important;
    box-shadow: 0 22px 58px rgba(31, 184, 194, 0.14) !important;
}

html body.animaker-theme-night[data-page="studio"] .vue-image-result-card,
html body[data-page="studio"].studio-theme-night .vue-image-result-card {
    background:
        linear-gradient(135deg, rgba(31, 184, 194, 0.14), rgba(255, 230, 109, 0.10)),
        rgba(18, 23, 34, 0.84) !important;
}

html body[data-page="studio"] .vue-image-result-media {
    min-width: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #101720 !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 18%, transparent) !important;
}

html body[data-page="studio"] .vue-image-result-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: 50% 38% !important;
}

html body[data-page="studio"] .vue-image-result-copy {
    display: grid !important;
    align-content: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.8vw, 18px) !important;
}

html body[data-page="studio"] .vue-image-result-copy span {
    width: max-content !important;
    max-width: 100% !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #0f5f67 !important;
    background: rgba(31, 184, 194, 0.14) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

html body.animaker-theme-night[data-page="studio"] .vue-image-result-copy span,
html body[data-page="studio"].studio-theme-night .vue-image-result-copy span {
    color: #c9fbff !important;
    background: rgba(31, 184, 194, 0.18) !important;
}

html body[data-page="studio"] .vue-image-result-copy strong {
    color: var(--oc-guide-ink) !important;
    font-size: clamp(24px, 3.4vw, 42px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"] .vue-image-result-copy p {
    max-width: 32em !important;
    margin: 0 !important;
    color: var(--oc-guide-muted) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;
}

html body[data-page="studio"] .vue-image-result-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 6px !important;
}

html body[data-page="studio"] .vue-image-result-actions :is(.primary-btn, .secondary-btn) {
    width: 100% !important;
    min-width: 0 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

@media (max-width: 760px) {
    html body[data-page="studio"] .vue-image-result-card {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 12px !important;
        gap: 12px !important;
        border-radius: 24px !important;
    }

    html body[data-page="studio"] .vue-image-result-media img {
        min-height: 0 !important;
        height: auto !important;
        max-height: 62vh !important;
        aspect-ratio: 3 / 4 !important;
    }

    html body[data-page="studio"] .vue-image-result-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock,
    html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock,
    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-dock {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        align-items: center !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
    html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover,
    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover {
        width: 112px !important;
        height: 150px !important;
        min-height: 150px !important;
        aspect-ratio: 3 / 4 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img,
    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-cover img {
        width: 112px !important;
        height: 150px !important;
        min-height: 150px !important;
    }
}

/* 20260710-oc-lite-r2: keep provider details available without making them the main creation task. */
html body[data-page="studio"] .vue-image-channel-drawer {
    border: 1px solid color-mix(in srgb, var(--oc-guide-line) 76%, transparent) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--oc-guide-panel-solid) 84%, transparent) !important;
    box-shadow: 0 14px 34px rgba(30, 40, 64, 0.06) !important;
    overflow: hidden !important;
}

html body[data-page="studio"] .vue-image-channel-drawer > summary {
    min-height: 56px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    list-style: none !important;
}

html body[data-page="studio"] .vue-image-channel-drawer > summary::-webkit-details-marker {
    display: none !important;
}

html body[data-page="studio"] .vue-image-channel-drawer > summary span,
html body[data-page="studio"] .vue-image-channel-drawer > summary em {
    color: var(--oc-guide-muted) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

html body[data-page="studio"] .vue-image-channel-drawer > summary strong {
    display: block !important;
    margin-top: 2px !important;
    color: var(--oc-guide-ink) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

html body[data-page="studio"] .vue-image-channel-drawer > summary em {
    max-width: 160px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--oc-guide-cyan) 12%, transparent) !important;
    color: #11717b !important;
    text-align: center !important;
}

html body[data-page="studio"] .vue-image-channel-drawer .vue-image-mode-board {
    margin: 0 12px 12px !important;
}

html body.animaker-theme-night[data-page="studio"] .vue-image-channel-drawer,
html body[data-page="studio"].studio-theme-night .vue-image-channel-drawer {
    background: rgba(19, 23, 34, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html body.animaker-theme-night[data-page="studio"] .vue-image-channel-drawer > summary em,
html body[data-page="studio"].studio-theme-night .vue-image-channel-drawer > summary em {
    color: #c9fbff !important;
    background: rgba(31, 184, 194, 0.16) !important;
}

/* 20260710-oc-lite-r2: icon-led creation actions with clear primary/secondary boundaries. */
html body[data-page] {
    --oc-action-ink: #141a24;
    --oc-action-muted: rgba(20, 26, 36, 0.66);
    --oc-action-line: rgba(20, 28, 42, 0.13);
    --oc-action-panel: rgba(255, 255, 255, 0.82);
    --oc-action-soft: rgba(255, 255, 255, 0.62);
    --oc-action-cyan: #1fb8c2;
    --oc-action-mint: #86f2df;
    --oc-action-lemon: #fff06f;
    --oc-action-rose: #ff78a7;
}

html body.animaker-theme-night[data-page],
html body[data-page="studio"].studio-theme-night {
    --oc-action-ink: #f6fbff;
    --oc-action-muted: rgba(237, 246, 255, 0.70);
    --oc-action-line: rgba(237, 246, 255, 0.14);
    --oc-action-panel: rgba(22, 28, 40, 0.76);
    --oc-action-soft: rgba(255, 255, 255, 0.08);
}

html body[data-page="studio"] {
    color: var(--oc-action-ink) !important;
}

html body[data-page="studio"].studio-focus-flow :is(
    .studio-launchpad-actions,
    .vue-route-director-actions,
    .vue-step-next-actions,
    .vue-core-ai-brief-actions,
    .vue-core-command,
    .vue-step-mission-actions,
    .vue-visual-actions,
    .studio-bridge-actions,
    .vue-image-primary-actions,
    .vue-image-result-actions,
    .vue-publish-main-actions,
    .vue-post-create-actions,
    .vue-board-actions,
    .studio-wizard-nav
) :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button, .vue-route-mode-chip)[data-ui-icon] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    gap: 10px !important;
    border-radius: 18px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
}

html body[data-page="studio"].studio-focus-flow :is(
    .studio-launchpad-actions,
    .vue-route-director-actions,
    .vue-step-next-actions,
    .vue-core-ai-brief-actions,
    .vue-core-command,
    .vue-step-mission-actions,
    .vue-visual-actions,
    .studio-bridge-actions,
    .vue-image-primary-actions,
    .vue-image-result-actions,
    .vue-publish-main-actions,
    .vue-post-create-actions,
    .vue-board-actions,
    .studio-wizard-nav
) :is(.primary-btn, .primary-link)[data-ui-icon] {
    min-height: 54px !important;
    padding: 12px 20px 12px 16px !important;
    color: #111722 !important;
    border: 1px solid color-mix(in srgb, var(--oc-action-cyan) 28%, rgba(15, 24, 36, 0.10)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--oc-action-mint) 86%, #ffffff), color-mix(in srgb, var(--oc-action-lemon) 90%, #ffffff)) !important;
    box-shadow:
        0 18px 42px rgba(31, 88, 96, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
    font-weight: 950 !important;
}

html body[data-page="studio"].studio-focus-flow :is(
    .studio-launchpad-actions,
    .vue-route-director-actions,
    .vue-step-next-actions,
    .vue-core-ai-brief-actions,
    .vue-core-command,
    .vue-step-mission-actions,
    .vue-visual-actions,
    .studio-bridge-actions,
    .vue-image-primary-actions,
    .vue-image-result-actions,
    .vue-publish-main-actions,
    .vue-post-create-actions,
    .vue-board-actions,
    .studio-wizard-nav
) :is(.secondary-btn, .ghost-link, .link-button, .vue-route-mode-chip)[data-ui-icon] {
    min-height: 46px !important;
    padding: 10px 15px !important;
    color: var(--oc-action-ink) !important;
    border: 1px solid var(--oc-action-line) !important;
    background: color-mix(in srgb, var(--oc-action-panel) 82%, transparent) !important;
    box-shadow: none !important;
    font-weight: 900 !important;
}

html body[data-page="studio"].studio-focus-flow :is(.vue-route-mode-chip)[data-ui-icon] {
    min-height: 42px !important;
    padding-inline: 12px !important;
    color: var(--oc-action-muted) !important;
    background: color-mix(in srgb, var(--oc-action-soft) 78%, transparent) !important;
}

html body[data-page="studio"].studio-theme-night.studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
    .vue-core-ai-brief-actions,
    .vue-core-command,
    .vue-step-mission-actions,
    .vue-visual-actions,
    .studio-bridge-actions,
    .vue-image-primary-actions,
    .vue-image-result-actions,
    .vue-publish-main-actions,
    .vue-post-create-actions,
    .vue-board-actions,
    .studio-wizard-nav
) :is(.primary-btn, .primary-link)[data-ui-icon],
html body.animaker-theme-night[data-page="studio"].studio-focus-flow :is(
    .studio-launchpad-actions,
    .vue-route-director-actions,
    .vue-step-next-actions,
    .vue-core-ai-brief-actions,
    .vue-core-command,
    .vue-step-mission-actions,
    .vue-visual-actions,
    .studio-bridge-actions,
    .vue-image-primary-actions,
    .vue-image-result-actions,
    .vue-publish-main-actions,
    .vue-post-create-actions,
    .vue-board-actions,
    .studio-wizard-nav
) :is(.primary-btn, .primary-link)[data-ui-icon] {
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        content: var(--ui-icon, "→") !important;
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        display: inline-grid !important;
        place-items: center !important;
        border-radius: 12px !important;
        color: #111722 !important;
        background:
            radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.96) 0 18%, transparent 19%),
            linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--oc-action-cyan) 18%, #ffffff)) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.64),
            0 10px 22px rgba(18, 34, 48, 0.18) !important;
        transform: none !important;
    }

    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.secondary-btn, .ghost-link, .link-button, .vue-route-mode-chip)[data-ui-icon]::before {
        content: var(--ui-icon, "•") !important;
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
        display: inline-grid !important;
        place-items: center !important;
        border-radius: 9px !important;
        color: currentColor !important;
        background: color-mix(in srgb, currentColor 10%, var(--oc-action-soft)) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 0.94 !important;
        font-size: 11px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow: inset 0 0 0 1px var(--oc-action-line) !important;
        transform: none !important;
    }
}

html body[data-page="studio"].studio-focus-flow .vue-route-director-actions {
    display: grid !important;
    grid-template-columns: minmax(180px, 1.3fr) minmax(124px, 0.72fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

html body[data-page="studio"].studio-focus-flow .vue-route-director-actions small {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    color: var(--oc-action-muted) !important;
}

html body[data-page="studio"].studio-focus-flow .vue-route-primary-stack .primary-btn,
html body[data-page="studio"].studio-focus-flow .vue-assist-one-next .primary-btn,
html body[data-page="studio"].studio-focus-flow .vue-board-next-action {
    width: 100% !important;
}

html body[data-page="studio"].studio-focus-flow .vue-step-next-cue,
html body[data-page="studio"].studio-focus-flow .vue-route-director-focus,
html body[data-page="studio"].studio-focus-flow .vue-board-director-cue {
    border-radius: 22px !important;
    border: 1px solid color-mix(in srgb, var(--oc-action-cyan) 24%, var(--oc-action-line)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--oc-action-cyan) 9%, transparent), color-mix(in srgb, var(--oc-action-lemon) 12%, transparent)),
        color-mix(in srgb, var(--oc-action-panel) 84%, transparent) !important;
}

html body[data-page="studio"].studio-focus-flow :is(.vue-route-director-progress, .vue-route-mini-steps, .vue-route-steps, .vue-assist-groups) button[data-ui-icon] {
    border-radius: 16px !important;
    color: var(--oc-action-muted) !important;
    background: color-mix(in srgb, var(--oc-action-panel) 66%, transparent) !important;
}

html body[data-page="studio"].studio-focus-flow :is(.vue-route-director-progress, .vue-route-mini-steps, .vue-route-steps, .vue-assist-groups) button:is(.active, .complete, .done, .manual-active)[data-ui-icon] {
    color: var(--oc-action-ink) !important;
    border-color: color-mix(in srgb, var(--oc-action-cyan) 26%, var(--oc-action-line)) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--oc-action-cyan) 12%, var(--oc-action-panel)), color-mix(in srgb, var(--oc-action-lemon) 14%, var(--oc-action-panel))) !important;
}

html body[data-page="studio"].studio-focus-flow :is(.studio-launchpad-examples, .vue-core-ai-brief-chips, .vue-cover-candidate-grid, .vue-route-cover-list) button[data-ui-icon] {
    border-radius: 16px !important;
}

@media (max-width: 900px) {
    html body[data-page="studio"].studio-focus-flow .vue-route-director-actions,
    html body[data-page="studio"].studio-focus-flow :is(.studio-launchpad-actions, .studio-bridge-actions, .vue-image-primary-actions, .vue-image-result-actions, .vue-publish-main-actions, .vue-post-create-actions) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button, .vue-route-mode-chip)[data-ui-icon] {
        width: 100% !important;
    }
}

/* 20260710-oc-lite-r2: keep action icons as real line glyphs, not text badges. */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        content: "" !important;
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
        border-radius: 0 !important;
        color: currentColor !important;
        background: currentColor !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        opacity: 1 !important;
        box-shadow: none !important;
        filter: drop-shadow(0 7px 14px rgba(19, 29, 42, 0.22)) !important;
        transform: translateY(-0.01em) !important;
    }

    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.secondary-btn, .ghost-link, .link-button, .vue-route-mode-chip)[data-ui-icon]::before {
        content: "" !important;
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        border-radius: 0 !important;
        color: currentColor !important;
        background: currentColor !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        opacity: 0.76 !important;
        box-shadow: none !important;
        transform: translateY(-0.01em) !important;
    }

    html body[data-page="studio"].studio-theme-night.studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.primary-btn, .primary-link)[data-ui-icon]::before,
    html body.animaker-theme-night[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        filter: drop-shadow(0 8px 18px rgba(134, 242, 223, 0.26)) !important;
    }
}

/* 20260710-oc-lite-r2: AI-first OC entry, softer surfaces, real draft-board fallback. */
html body[data-page] {
    --oc-lite-ink: #171b22;
    --oc-lite-muted: rgba(23, 27, 34, 0.66);
    --oc-lite-soft: rgba(23, 184, 196, 0.08);
    --oc-lite-line: rgba(23, 27, 34, 0.11);
    --oc-lite-panel: rgba(255, 255, 255, 0.82);
    --oc-lite-solid: #ffffff;
    --oc-lite-cyan: #1db8c6;
    --oc-lite-rose: #ff7aa6;
    --oc-lite-lemon: #ffe879;
    --oc-lite-shadow: 0 22px 64px rgba(25, 36, 52, 0.11);
    --oc-lite-draft-art: url("/animaker/img/generated/ux/oc-ai-draft-board-lite-v1.webp");
    background:
        radial-gradient(circle at 8% 0%, rgba(29, 184, 198, 0.10), transparent 28rem),
        radial-gradient(circle at 94% 10%, rgba(255, 122, 166, 0.08), transparent 24rem),
        linear-gradient(180deg, #fbfdfd 0%, #f2fbfa 54%, #fff9eb 100%) !important;
    color: var(--oc-lite-ink) !important;
}

html body.animaker-theme-night[data-page],
html body.studio-theme-night[data-page] {
    --oc-lite-ink: #f6f9fb;
    --oc-lite-muted: rgba(238, 246, 252, 0.68);
    --oc-lite-soft: rgba(238, 246, 252, 0.10);
    --oc-lite-line: rgba(238, 246, 252, 0.14);
    --oc-lite-panel: rgba(20, 28, 40, 0.78);
    --oc-lite-solid: #17202d;
    --oc-lite-shadow: 0 26px 78px rgba(0, 0, 0, 0.34);
    background:
        radial-gradient(circle at 7% 0%, rgba(29, 184, 198, 0.15), transparent 30rem),
        radial-gradient(circle at 92% 12%, rgba(255, 122, 166, 0.10), transparent 24rem),
        linear-gradient(180deg, #111925 0%, #162130 52%, #111722 100%) !important;
    color: var(--oc-lite-ink) !important;
}

html body[data-page] :is(.topbar, .shared-nav) {
    border-color: var(--oc-lite-line) !important;
    background: color-mix(in srgb, var(--oc-lite-solid) 78%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body[data-page] :is(.panel, .card, .empty-state, .vue-home-creation, .vue-home-next, .vue-home-community-more, .vue-assist-card, .vue-route-director, .vue-route-focus-card, .vue-route-next-card, .vue-board-dock, .vue-core-card, .vue-visual-card, .vue-story-dock, .vue-image-dock, .vue-publish-dock) {
    border-color: var(--oc-lite-line) !important;
    border-radius: 24px !important;
}

html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon] {
    min-height: 44px !important;
    border-radius: 16px !important;
    gap: 9px !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon] {
    background: linear-gradient(135deg, #141924 0%, #252637 54%, #1db8c6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px rgba(29, 184, 198, 0.18) !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon] {
    background: color-mix(in srgb, var(--oc-lite-solid) 82%, transparent) !important;
    border: 1px solid var(--oc-lite-line) !important;
    color: var(--oc-lite-ink) !important;
}

html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon]:hover {
    transform: translateY(-1px) !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon]::before {
        content: "" !important;
        display: inline-block !important;
        background: currentColor !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: translateY(-0.01em) !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        width: 21px !important;
        height: 21px !important;
        flex: 0 0 21px !important;
        opacity: 1 !important;
        filter: drop-shadow(0 6px 14px rgba(255, 255, 255, 0.16)) !important;
    }

    html body[data-page] :is(.secondary-btn, .ghost-link, .nav-button, .link-button, .text-danger-btn)[data-ui-icon]::before {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
        opacity: 0.78 !important;
    }
}

html body[data-page="home"] {
    --home-portal-art: var(--oc-lite-draft-art);
}

html body[data-page="home"].home-gateway-open {
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #f7fbfb !important;
}

html body.animaker-theme-night[data-page="home"].home-gateway-open {
    background: #101720 !important;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav, #sharedNavApp, .shared-nav-root) {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway,
html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
html body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: clamp(22px, 5vw, 80px) !important;
    display: grid !important;
    align-items: center !important;
    justify-items: start !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 253, 0.98) 0%, rgba(250, 253, 253, 0.86) 34%, rgba(250, 253, 253, 0.32) 64%, rgba(250, 253, 253, 0.04) 100%),
        var(--home-gateway-image, var(--home-portal-art)) !important;
    background-size: cover !important;
    background-position: 58% 48% !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.94) 0%, rgba(12, 18, 27, 0.78) 37%, rgba(12, 18, 27, 0.32) 68%, rgba(12, 18, 27, 0.08) 100%),
        var(--home-gateway-image, var(--home-portal-art)) !important;
    filter: saturate(0.96) contrast(1.02) !important;
}

html body[data-page="home"] .vue-home-gateway-copy {
    width: min(100%, 780px) !important;
    margin-left: clamp(0px, 4vw, 64px) !important;
    transform: none !important;
    text-align: left !important;
    color: var(--oc-lite-ink) !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid var(--oc-lite-line) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--oc-lite-solid) 66%, transparent) !important;
    color: var(--oc-lite-muted) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.4em !important;
    margin: 18px 0 16px !important;
    font-size: clamp(52px, 9.2vw, 128px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 15em !important;
    margin: 0 !important;
    color: var(--oc-lite-muted) !important;
    font-size: clamp(18px, 2.1vw, 27px) !important;
    line-height: 1.38 !important;
}

html body[data-page="home"] .vue-home-gateway-steps {
    display: none !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    left: clamp(22px, 8.6vw, 140px) !important;
    right: auto !important;
    bottom: clamp(22px, 5.4vw, 66px) !important;
    border-radius: 999px !important;
    border-color: var(--oc-lite-line) !important;
    background: color-mix(in srgb, var(--oc-lite-solid) 76%, transparent) !important;
    color: var(--oc-lite-ink) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    width: min(calc(100% - clamp(18px, 4vw, 72px)), 1460px) !important;
    min-height: clamp(620px, calc(100dvh - 108px), 800px) !important;
    margin: clamp(14px, 2.4vw, 30px) auto clamp(40px, 6vw, 86px) !important;
    padding: clamp(28px, 4vw, 58px) !important;
    border-radius: clamp(24px, 3vw, 38px) !important;
    background-image:
        linear-gradient(90deg, rgba(253, 255, 253, 0.94) 0%, rgba(253, 255, 253, 0.80) 43%, rgba(253, 255, 253, 0.32) 72%, rgba(253, 255, 253, 0.10) 100%),
        var(--home-hero-image, var(--oc-lite-draft-art)) !important;
    background-size: cover !important;
    background-position: 59% 48% !important;
    box-shadow: var(--oc-lite-shadow) !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.92) 0%, rgba(12, 18, 27, 0.74) 43%, rgba(12, 18, 27, 0.34) 74%, rgba(12, 18, 27, 0.13) 100%),
        var(--home-hero-image, var(--oc-lite-draft-art)) !important;
}

html body[data-page="home"] .vue-home-copy {
    max-width: 620px !important;
    transform: none !important;
}

html body[data-page="home"] .vue-home-copy > h1 {
    max-width: 7.4em !important;
    font-size: clamp(44px, 5.6vw, 84px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-feature {
    width: min(100%, 420px) !important;
    align-self: center !important;
    transform: none !important;
    border-radius: 28px !important;
    background: rgba(18, 23, 34, 0.74) !important;
}

html body[data-page="home"] .vue-home-feature > img,
html body[data-page="home"] img[src*="oc-ai-draft-board-lite-v1"] {
    object-fit: cover !important;
    object-position: 50% 46% !important;
}

html body[data-page="home"] .vue-home-feature > img {
    min-height: 300px !important;
    max-height: 430px !important;
}

html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-empty-cover,
html body[data-page="studio"] .vue-board-empty-cover {
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 16% 8%, rgba(29, 184, 198, 0.18), transparent 16rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(244, 251, 250, 0.78)) !important;
}

html body.animaker-theme-night[data-page="studio"] .vue-board-empty-cover,
html body[data-page="studio"].studio-theme-night .vue-board-empty-cover {
    background:
        radial-gradient(circle at 16% 8%, rgba(29, 184, 198, 0.18), transparent 16rem),
        linear-gradient(135deg, rgba(18, 25, 36, 0.88), rgba(22, 30, 43, 0.80)) !important;
}

html body[data-page="studio"] .vue-board-empty-stage {
    min-height: clamp(320px, 52vh, 560px) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.20)),
        var(--oc-lite-draft-art) center 46% / cover no-repeat !important;
}

html body[data-page="studio"] .vue-board-default-art {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: var(--oc-lite-draft-art) center 46% / cover no-repeat !important;
    opacity: 1 !important;
}

html body[data-page="studio"] .vue-board-default-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 46% !important;
    opacity: 1 !important;
    filter: none !important;
}

html body[data-page="studio"] .vue-board-blueprint {
    position: absolute !important;
    left: clamp(14px, 4vw, 28px) !important;
    right: clamp(14px, 4vw, 28px) !important;
    bottom: clamp(14px, 4vw, 28px) !important;
    width: auto !important;
    max-width: 520px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.44) !important;
    background: rgba(15, 20, 30, 0.64) !important;
    color: #ffffff !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24) !important;
}

html body[data-page="studio"] .vue-board-blueprint :is(span, small, em span) {
    color: rgba(255, 255, 255, 0.74) !important;
}

html body[data-page="studio"] .vue-board-blueprint-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body[data-page="studio"] .vue-board-empty-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

html body[data-page="studio"] .vue-board-empty-grid article {
    min-height: 58px !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--oc-lite-solid) 72%, transparent) !important;
}

html body[data-page="studio"] .vue-board-cover-topline,
html body[data-page="studio"] .vue-board-empty-head {
    position: relative !important;
    z-index: 2 !important;
}

html body[data-page="studio"] .studio-launchpad-preview img[src*="oc-ai-draft-board-lite-v1"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 46% !important;
}

@media (min-width: 1600px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: min(calc(100% - 120px), 1480px) !important;
    }
}

@media (max-width: 900px) {
    html body[data-page="home"] .vue-home-gateway,
    html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
    html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
        place-items: end start !important;
        background-position: 64% 50% !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        width: min(100%, 520px) !important;
        margin-left: 0 !important;
        padding-bottom: clamp(84px, 18vw, 128px) !important;
    }

    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: calc(100% - 24px) !important;
        min-height: auto !important;
        padding: 24px !important;
        background-position: 66% 50% !important;
    }

    html body[data-page="studio"] .vue-board-empty-stage {
        min-height: 360px !important;
    }

    html body[data-page="studio"] .vue-board-blueprint-lines,
    html body[data-page="studio"] .vue-board-empty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(48px, 18vw, 74px) !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy p {
        max-width: 14em !important;
        font-size: 17px !important;
    }

    html body[data-page="home"] .vue-home-gateway-cue {
        left: 18px !important;
        bottom: 18px !important;
        right: auto !important;
    }

    html body[data-page="studio"] .vue-board-empty-stage {
        min-height: 320px !important;
    }

    html body[data-page="studio"] .vue-board-blueprint {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: none !important;
    }
}

/* 20260710-oc-lite-r2: make the studio step cue a compact action rail instead of a bulky banner. */
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px) !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--oc-lite-line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--oc-lite-solid) 78%, transparent) !important;
    box-shadow: 0 14px 40px rgba(29, 42, 58, 0.08) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head > div:first-child {
    min-width: 0 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head .eyebrow {
    min-height: 24px !important;
    margin: 0 0 4px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--oc-lite-cyan) 10%, transparent) !important;
    color: color-mix(in srgb, var(--oc-lite-cyan) 74%, var(--oc-lite-ink)) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head h2 {
    margin: 0 !important;
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head > div:first-child > p:not(.eyebrow) {
    max-width: 52em !important;
    margin-top: 6px !important;
    color: var(--oc-lite-muted) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-side {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    justify-self: end !important;
    width: 100% !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-side > .vue-step-state {
    min-height: 32px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-cue {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 8px 10px 8px 13px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--oc-lite-cyan) 8%, transparent), color-mix(in srgb, var(--oc-lite-lemon) 14%, transparent)),
        color-mix(in srgb, var(--oc-lite-solid) 70%, transparent) !important;
    box-shadow: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-cue > span {
    grid-column: 1 !important;
    margin: 0 !important;
    color: color-mix(in srgb, var(--oc-lite-cyan) 70%, var(--oc-lite-ink)) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-cue > strong {
    grid-column: 1 !important;
    margin: -2px 0 0 !important;
    color: var(--oc-lite-ink) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-cue > small {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-actions {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-actions :is(.primary-btn, .secondary-btn) {
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
}

@media (max-width: 960px) {
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-side {
        justify-self: stretch !important;
    }
}

@media (max-width: 620px) {
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head {
        border-radius: 18px !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-head > div:first-child > p:not(.eyebrow) {
        display: none !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-side,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-cue {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-actions {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-step-next-actions :is(.primary-btn, .secondary-btn) {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
}

/* 20260710-oc-lite-r2: keep guidance in-flow; the sticky top rail was obscuring the active work area. */
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-rail {
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-card {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 8px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(25, 41, 54, 0.06) !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-mainline {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 50px !important;
    padding: 8px 10px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next strong {
    font-size: clamp(15px, 1.45vw, 19px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next .primary-btn {
    min-height: 36px !important;
    min-width: 118px !important;
    border-radius: 13px !important;
}

/* 20260710-oc-flow-v4: lighter OC-first shell, real mask icons, clearer next action. */
html body[data-page] {
    --oc-lite-draft-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp") !important;
    --oc-flow-panel: rgba(255, 255, 255, 0.86);
    --oc-flow-line: rgba(22, 31, 44, 0.12);
    --oc-flow-ink: #151b24;
    --oc-flow-muted: rgba(21, 27, 36, 0.64);
    --oc-flow-cyan: #18b8c7;
    --oc-flow-rose: #f76598;
    --oc-flow-gold: #ffe36d;
    --oc-flow-shadow: 0 26px 80px rgba(28, 42, 58, 0.12);
}

html body.animaker-theme-night[data-page],
html body[data-page="studio"].studio-theme-night {
    --oc-flow-panel: rgba(18, 24, 35, 0.78);
    --oc-flow-line: rgba(237, 246, 255, 0.14);
    --oc-flow-ink: #f7fbff;
    --oc-flow-muted: rgba(238, 246, 255, 0.68);
    --oc-flow-shadow: 0 28px 84px rgba(0, 0, 0, 0.34);
}

html body[data-page] :where(a, button)[data-ui-icon] {
    gap: 0.54em !important;
    letter-spacing: 0 !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :where(a, button, span)[data-ui-icon]::before {
        content: "" !important;
        display: inline-block !important;
        width: 1.08em !important;
        height: 1.08em !important;
        flex: 0 0 1.08em !important;
        border-radius: 0 !important;
        background: currentColor !important;
        opacity: 0.82 !important;
        box-shadow: none !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        transform: translateY(-0.02em) !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before {
        width: 1.22em !important;
        height: 1.22em !important;
        flex-basis: 1.22em !important;
        opacity: 0.98 !important;
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12)) !important;
    }

    html body[data-page] :is(.secondary-btn, .ghost-link, .link-button, .nav-button)[data-ui-icon]::before {
        opacity: 0.74 !important;
    }
}

html body[data-page] :is(.primary-btn, .primary-link)[data-ui-icon] {
    border-radius: 16px !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    width: calc(100% - clamp(18px, 4vw, 64px)) !important;
    max-width: none !important;
    min-height: clamp(640px, calc(100dvh - 106px), 860px) !important;
    background-position: 52% 48% !important;
}

html body[data-page="home"] .vue-home-gateway,
html body[data-page="home"] section.vue-home-hero {
    --home-gateway-image: var(--oc-lite-draft-art) !important;
    --home-hero-image: var(--oc-lite-draft-art) !important;
}

html body[data-page="home"] :is(.vue-home-feature > img, img[src*="oc-ai-workbench-hero-v6"], img[src*="oc-ai-draft-board-lite-v1"]) {
    object-fit: cover !important;
    object-position: 50% 46% !important;
}

html body[data-page="studio"] .page-title.studio-hero-title {
    width: min(calc(100% - 32px), 1320px) !important;
    margin: 18px auto 0 !important;
    padding: clamp(18px, 3vw, 34px) !important;
}

html body[data-page="studio"] .studio-hero-title > h1 {
    max-width: 10em !important;
    font-size: clamp(34px, 5vw, 62px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"] .studio-hero-title > p:not(.eyebrow) {
    max-width: 34em !important;
    color: var(--oc-flow-muted) !important;
}

html body[data-page="studio"] .studio-hero-beats {
    display: none !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr) !important;
    gap: clamp(16px, 3vw, 30px) !important;
    margin-top: 20px !important;
    padding: clamp(18px, 3vw, 32px) !important;
    border: 1px solid var(--oc-flow-line) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(247, 253, 252, 0.72)),
        radial-gradient(circle at 0% 0%, rgba(24, 184, 199, 0.12), transparent 26rem) !important;
    box-shadow: var(--oc-flow-shadow) !important;
}

html body.animaker-theme-night[data-page="studio"] .studio-launchpad-lite,
html body[data-page="studio"].studio-theme-night .studio-launchpad-lite {
    background:
        linear-gradient(135deg, rgba(20, 25, 36, 0.88), rgba(17, 24, 34, 0.76)),
        radial-gradient(circle at 0% 0%, rgba(24, 184, 199, 0.15), transparent 26rem) !important;
}

html body[data-page="studio"] .studio-launchpad-copy {
    align-self: center !important;
}

html body[data-page="studio"] .studio-launchpad-copy h2 {
    font-size: clamp(30px, 4.2vw, 54px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"] .studio-launchpad-copy label {
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--oc-flow-panel) 82%, transparent) !important;
    border: 1px solid var(--oc-flow-line) !important;
}

html body[data-page="studio"] .studio-launchpad-copy textarea {
    min-height: 112px !important;
}

html body[data-page="studio"] .studio-launch-promise {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="studio"] .studio-launch-promise span[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--oc-flow-panel) 82%, transparent) !important;
    color: var(--oc-flow-ink) !important;
    border: 1px solid var(--oc-flow-line) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

html body[data-page="studio"] .studio-launchpad-actions {
    grid-template-columns: minmax(180px, 1fr) auto auto !important;
    align-items: center !important;
}

html body[data-page="studio"] .studio-launchpad-actions .primary-btn {
    min-height: 54px !important;
    font-size: 16px !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    min-height: clamp(360px, 48vw, 520px) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #111824 !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 54% 48% !important;
    filter: saturate(1.04) contrast(1.02) !important;
}

html body[data-page="studio"] .studio-launchpad-preview > div {
    border-radius: 20px !important;
    background: rgba(14, 19, 28, 0.66) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
}

html body[data-page="studio"] .studio-launchpad-pins {
    display: none !important;
}

html body[data-page="studio"] :is(.vue-route-director, .vue-step-next-cue, .vue-board-director-cue, .vue-assist-card) {
    border-radius: 22px !important;
}

html body[data-page="studio"] :is(.vue-route-director-actions, .vue-step-next-actions, .vue-board-actions, .vue-image-primary-actions, .vue-image-result-actions) :is(.primary-btn, .secondary-btn) {
    min-height: 44px !important;
}

html body[data-page="studio"] .shared-nav-primary-action {
    min-width: 0 !important;
}

html body[data-page="studio"] .shared-nav-primary-action .shared-nav-label-long {
    display: none !important;
}

html body[data-page="studio"] .shared-nav-primary-action .shared-nav-label-short {
    display: inline !important;
}

@media (max-width: 920px) {
    html body[data-page="studio"] .studio-launchpad-lite,
    html body[data-page="studio"] .studio-launchpad-actions,
    html body[data-page="studio"] .studio-launch-promise {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview {
        min-height: 320px !important;
        order: -1 !important;
    }
}

@media (max-width: 640px) {
    html body[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
    html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
        width: calc(100% - 20px) !important;
        min-height: auto !important;
    }

    html body[data-page="studio"] .page-title.studio-hero-title {
        width: calc(100% - 20px) !important;
        padding: 16px !important;
    }

    html body[data-page="studio"] .studio-launchpad-copy textarea {
        min-height: 96px !important;
    }
}

/* 20260710-oc-flow-v4-icon-fix: win over old character badges everywhere actions appear. */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] main :is(a.primary-link, button.primary-btn, button.secondary-btn, a.secondary-btn, button.ghost-link, a.ghost-link, button.link-button, a.link-button)[data-ui-icon]::before,
    html body[data-page] header :is(a.primary-link, button.primary-btn, button.secondary-btn, a.secondary-btn, button.nav-button, a.nav-button)[data-ui-icon]::before,
    html body[data-page] .shared-nav :is(a, button)[data-ui-icon]::before,
    html body[data-page] .shared-nav-actions :is(a, button)[data-ui-icon]::before,
    html body[data-page] .shared-ai-dock :is(a, button)[data-ui-icon]::before,
    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button, .vue-route-mode-chip)[data-ui-icon]::before {
        content: "" !important;
        display: inline-block !important;
        width: 1.08em !important;
        height: 1.08em !important;
        flex: 0 0 1.08em !important;
        border-radius: 0 !important;
        color: currentColor !important;
        background: currentColor !important;
        opacity: 0.84 !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        transform: translateY(-0.02em) !important;
    }

    html body[data-page] main :is(a.primary-link, button.primary-btn)[data-ui-icon]::before,
    html body[data-page] header :is(a.primary-link, button.primary-btn)[data-ui-icon]::before,
    html body[data-page] .shared-nav-actions .shared-nav-primary-action[data-ui-icon]::before,
    html body[data-page="studio"].studio-focus-flow :is(
        .studio-launchpad-actions,
        .vue-route-director-actions,
        .vue-step-next-actions,
        .vue-core-ai-brief-actions,
        .vue-core-command,
        .vue-step-mission-actions,
        .vue-visual-actions,
        .studio-bridge-actions,
        .vue-image-primary-actions,
        .vue-image-done-actions,
        .vue-image-result-actions,
        .vue-publish-main-actions,
        .vue-post-create-actions,
        .vue-board-actions,
        .studio-wizard-nav
    ) :is(.primary-btn, .primary-link)[data-ui-icon]::before {
        width: 1.22em !important;
        height: 1.22em !important;
        flex-basis: 1.22em !important;
        opacity: 0.98 !important;
    }
}

/* 20260710-oc-flow-v12-final-tail: lighter OC creation entry, whole-page themes, and single-next-action override. */
html body[data-page] {
    --oc-v6-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp");
    --oc-v6-ink: #141925;
    --oc-v6-text: #253244;
    --oc-v6-muted: #687484;
    --oc-v6-page: #f7fbfd;
    --oc-v6-page-2: #fff8ed;
    --oc-v6-panel: rgba(255, 255, 255, 0.78);
    --oc-v6-panel-solid: #ffffff;
    --oc-v6-line: rgba(25, 40, 58, 0.12);
    --oc-v6-cyan: #1ab9c6;
    --oc-v6-lemon: #f6df68;
    --oc-v6-coral: #ff7ea6;
    --oc-v6-violet: #7d7cff;
    --oc-v6-shadow: 0 18px 54px rgba(22, 36, 52, 0.10);
    color: var(--oc-v6-text) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(26, 185, 198, 0.10), transparent 28rem),
        radial-gradient(circle at 100% 8%, rgba(255, 126, 166, 0.07), transparent 25rem),
        linear-gradient(180deg, var(--oc-v6-page) 0%, #fbfdff 50%, var(--oc-v6-page-2) 100%) !important;
}

html body[data-page].animaker-theme-night,
html body[data-page].studio-theme-night {
    --oc-v6-ink: #f8fbff;
    --oc-v6-text: #e6edf5;
    --oc-v6-muted: #aab7c5;
    --oc-v6-page: #111821;
    --oc-v6-page-2: #10151d;
    --oc-v6-panel: rgba(20, 28, 39, 0.74);
    --oc-v6-panel-solid: #151e2a;
    --oc-v6-line: rgba(230, 241, 250, 0.14);
    --oc-v6-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    color: var(--oc-v6-text) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(26, 185, 198, 0.16), transparent 29rem),
        radial-gradient(circle at 100% 8%, rgba(255, 126, 166, 0.09), transparent 25rem),
        linear-gradient(180deg, var(--oc-v6-page) 0%, #141d28 54%, var(--oc-v6-page-2) 100%) !important;
}

html body[data-page] :is(.topbar, .shared-nav, .panel, .card, .empty-state, .modal, details, .vue-home-brief, .vue-home-creation, .vue-home-next, .vue-home-community-more, .studio-launchpad-lite, .studio-advanced-start, .vue-route-director, .vue-assist-card, .vue-board-dock, .vue-core-card, .vue-image-dock, .vue-story-dock, .vue-publish-dock) {
    border-color: var(--oc-v6-line) !important;
    background-color: var(--oc-v6-panel) !important;
    box-shadow: var(--oc-v6-shadow) !important;
}

html body[data-page].animaker-theme-night :is(.topbar, .shared-nav, .panel, .card, .empty-state, .modal, details, .vue-home-brief, .vue-home-creation, .vue-home-next, .vue-home-community-more, .studio-launchpad-lite, .studio-advanced-start, .vue-route-director, .vue-assist-card, .vue-board-dock, .vue-core-card, .vue-image-dock, .vue-story-dock, .vue-publish-dock),
html body[data-page].studio-theme-night :is(.topbar, .shared-nav, .panel, .card, .empty-state, .modal, details, .vue-home-brief, .vue-home-creation, .vue-home-next, .vue-home-community-more, .studio-launchpad-lite, .studio-advanced-start, .vue-route-director, .vue-assist-card, .vue-board-dock, .vue-core-card, .vue-image-dock, .vue-story-dock, .vue-publish-dock) {
    color: var(--oc-v6-text) !important;
    background-color: var(--oc-v6-panel) !important;
}

html body[data-page] :is(h1, h2, h3, h4, strong, label span) {
    letter-spacing: 0 !important;
}

html body[data-page] :is(p, small, .muted, .eyebrow) {
    color: var(--oc-v6-muted) !important;
}

html body[data-page="home"] .vue-home-gateway,
html body[data-page="home"] section.vue-home-hero,
html body[data-page="studio"] .studio-hero-title {
    --home-gateway-image: var(--oc-v6-art);
    --home-hero-image: var(--oc-v6-art);
}

html body[data-page="home"] .vue-home-gateway,
html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
html body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    z-index: 9999 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.97) 0%, rgba(250, 253, 255, 0.82) 35%, rgba(250, 253, 255, 0.24) 68%, rgba(250, 253, 255, 0.02) 100%),
        var(--oc-v6-art) !important;
    background-position: 56% 50% !important;
    letter-spacing: 0 !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
        linear-gradient(90deg, rgba(14, 19, 29, 0.94) 0%, rgba(14, 19, 29, 0.78) 38%, rgba(14, 19, 29, 0.32) 72%, rgba(14, 19, 29, 0.06) 100%),
        var(--oc-v6-art) !important;
    filter: saturate(0.92) contrast(1.03) brightness(0.86) !important;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    max-width: 7.4em !important;
    font-size: clamp(54px, 9vw, 124px) !important;
    line-height: 0.92 !important;
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-cue {
    min-height: 52px !important;
    color: var(--oc-v6-ink) !important;
    background: rgba(255, 255, 255, 0.86) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway-cue {
    color: var(--oc-v6-text) !important;
    background: rgba(21, 30, 42, 0.72) !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    width: min(calc(100vw - clamp(16px, 3.8vw, 72px)), 1500px) !important;
    min-height: clamp(600px, calc(100dvh - 104px), 800px) !important;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.80) 42%, rgba(255, 255, 255, 0.26) 72%, rgba(255, 255, 255, 0.04) 100%),
        var(--oc-v6-art) !important;
    background-position: 58% 50% !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.92) 0%, rgba(12, 18, 27, 0.74) 44%, rgba(12, 18, 27, 0.34) 76%, rgba(12, 18, 27, 0.08) 100%),
        var(--oc-v6-art) !important;
    filter: saturate(0.94) contrast(1.02) brightness(0.90) !important;
}

html body[data-page="home"] .vue-home-copy > h1 {
    font-size: clamp(42px, 5.4vw, 72px) !important;
}

html body[data-page="home"] .vue-home-brief {
    max-width: 620px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.74) !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-brief {
    background: rgba(16, 23, 34, 0.76) !important;
}

html body[data-page="home"] .vue-home-brief-chips,
html body[data-page="home"] .vue-home-brief-output {
    display: none !important;
}

html body[data-page="home"] .vue-home-intent-row button {
    border-radius: 999px !important;
    min-height: 46px !important;
}

html body[data-page="home"] .vue-home-feature {
    width: min(100%, 330px) !important;
    opacity: 0.94 !important;
}

html body[data-page="home"] .vue-home-creation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body[data-page="home"] .vue-home-creation-card {
    border-radius: 22px !important;
}

html body[data-page="home"] .vue-home-creation-card img {
    max-height: 132px !important;
    object-fit: cover !important;
}

html body[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.72) 54%, rgba(255, 255, 255, 0.16) 100%),
        var(--oc-v6-art) 62% 50% / cover no-repeat !important;
}

html body[data-page="studio"].studio-theme-night .studio-hero-title,
html body.animaker-theme-night[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(14, 20, 31, 0.94) 0%, rgba(14, 20, 31, 0.78) 54%, rgba(14, 20, 31, 0.20) 100%),
        var(--oc-v6-art) 62% 50% / cover no-repeat !important;
}

html body[data-page="studio"] .studio-launchpad-lite {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr) !important;
    border-radius: 26px !important;
}

html body[data-page="studio"] .studio-launch-promise,
html body[data-page="studio"] .studio-launchpad-examples > span,
html body[data-page="studio"] .studio-launchpad-preview > div small {
    display: none !important;
}

html body[data-page="studio"] .studio-launchpad-actions {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.72fr) minmax(0, 0.62fr) !important;
}

html body[data-page="studio"] .studio-launchpad-actions .primary-btn {
    min-height: 58px !important;
}

html body[data-page="studio"] .studio-launchpad-examples {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html body[data-page="studio"] .studio-launchpad-examples button {
    min-height: 38px !important;
    border-radius: 999px !important;
}

html body[data-page="studio"] .studio-launchpad-preview {
    min-height: 300px !important;
}

html body[data-page="studio"] .studio-launchpad-preview img {
    min-height: 300px !important;
    object-position: 58% 50% !important;
}

html body[data-page="studio"] .studio-advanced-start {
    display: block !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--oc-v6-panel-solid) 78%, transparent) !important;
}

html body[data-page="studio"] .studio-advanced-start > summary {
    min-height: 50px !important;
    border-radius: 22px !important;
}

html body[data-page="studio"] .studio-advanced-start > summary strong {
    font-size: 14px !important;
}

html body[data-page="studio"] .studio-advanced-start:not([open]) {
    box-shadow: none !important;
}

html body[data-page="studio"] .studio-advanced-start:not([open]) > summary {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--oc-v6-cyan) 11%, transparent), color-mix(in srgb, var(--oc-v6-lemon) 14%, transparent)) !important;
}

html body[data-page="studio"] .studio-advanced-start[open] .studio-mode-hub,
html body[data-page="studio"].studio-mode-advanced .studio-advanced-start[open] .studio-mode-hub {
    display: grid !important;
}

html body[data-page="studio"].studio-wizard-ready #studioVueRouteHero .vue-route-director-actions,
html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next,
html body[data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
    display: none !important;
}

/* 20260711-studio-flow-major: the Vue stepper is now the primary creation path. */
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-launchpad-lite {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .page-title.studio-hero-title {
    width: min(calc(100% - 28px), 1180px) !important;
    min-height: 0 !important;
    margin-top: 12px !important;
    padding: 14px 16px !important;
    border-radius: 24px !important;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62)),
        var(--oc-v6-art) 70% 48% / cover no-repeat !important;
}

html body[data-page="studio"].studio-focus-flow.studio-theme-night.studio-wizard-ready .page-title.studio-hero-title,
html body.animaker-theme-night[data-page="studio"].studio-focus-flow.studio-wizard-ready .page-title.studio-hero-title {
    background:
        linear-gradient(90deg, rgba(14, 20, 31, 0.92), rgba(14, 20, 31, 0.70)),
        var(--oc-v6-art) 70% 48% / cover no-repeat !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-hero-title > :is(.eyebrow, h1, p:not(.eyebrow), .studio-theme-switch, .studio-hero-beats, .studio-arrival-note) {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-route-hero-shell {
    margin: 0 !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-workbench {
    margin-top: 14px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-core-dock {
    display: grid !important;
    gap: 14px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-core-write-now {
    display: grid !important;
    gap: 12px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 14px !important;
    border-radius: 22px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-core-write-head p {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-flow-console {
    grid-template-columns: minmax(132px, 0.22fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 20px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-flow-console button {
    min-height: 66px !important;
    padding: 10px 10px 10px 42px !important;
    border-radius: 16px !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-flow-console button small {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-ai-brief,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-command,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-mission,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-actions-drawer,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-inspiration-drawer,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-quick-panel {
    border-radius: 20px !important;
}

@media (max-width: 860px) {
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-flow-console,
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-panel.is-active .vue-core-write-head {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-flow-mode {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-flow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .page-title.studio-hero-title {
        width: calc(100% - 18px) !important;
        padding: 10px !important;
    }

    html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-core-flow-steps {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    html body[data-page] .topbar > .nav {
        display: none !important;
    }

    html body[data-page] .shared-nav-links {
        display: none !important;
    }

    html body[data-page] .shared-nav,
    html body[data-page] .shared-nav-actions {
        min-width: 0 !important;
    }
}

/* 20260710-oc-flow-v12: make actions scan by icon first, not text volume. */
html body[data-page] :is(
    .primary-btn,
    .primary-link,
    .secondary-btn,
    .ghost-link,
    .link-button,
    .nav-button,
    .shared-nav-primary-action
)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.58em !important;
    letter-spacing: 0 !important;
}

html body[data-page] :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon] {
    border-radius: 18px !important;
}

html body[data-page] :is(.secondary-btn, .ghost-link, .link-button, .nav-button)[data-ui-icon] {
    border-radius: 15px !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(
        .primary-btn,
        .primary-link,
        .secondary-btn,
        .ghost-link,
        .link-button,
        .nav-button,
        .shared-nav-primary-action
    )[data-ui-icon]::before {
        content: var(--ui-icon, "•") !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 1.95em !important;
        height: 1.95em !important;
        flex: 0 0 1.95em !important;
        border-radius: 999px !important;
        color: currentColor !important;
        background:
            radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95) 0 16%, transparent 17%),
            color-mix(in srgb, currentColor 11%, transparent) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        font-size: 0.72em !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent),
            0 8px 18px rgba(21, 32, 46, 0.10) !important;
        transform: none !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before {
        width: 2.12em !important;
        height: 2.12em !important;
        flex-basis: 2.12em !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98) 0 17%, transparent 18%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--oc-v6-cyan, #1ab9c6) 26%, #ffffff)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.52),
            0 10px 24px rgba(20, 42, 56, 0.16) !important;
    }

    html body[data-page].animaker-theme-night :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before,
    html body[data-page].studio-theme-night :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before {
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.88) 0 15%, transparent 16%),
            linear-gradient(135deg, rgba(134, 242, 223, 0.22), rgba(255, 227, 109, 0.18)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.12),
            0 12px 28px rgba(0, 0, 0, 0.24) !important;
    }
}

html body[data-page] :is(.topbar .nav a, .shared-nav-links a)[data-ui-icon]::before {
    opacity: 0.72 !important;
}

html body[data-page] :is(.topbar .nav a.active, .shared-nav-links a.active)[data-ui-icon]::before {
    opacity: 1 !important;
}

html body[data-page="studio"] .vue-image-readiness[data-readiness-state="done"] .vue-image-primary-actions {
    display: none !important;
}

html body[data-page="studio"] .vue-image-result-actions {
    grid-template-columns: minmax(160px, 1fr) auto auto !important;
    align-items: center !important;
}

html body[data-page="studio"] .vue-image-result-actions .primary-btn {
    min-height: 52px !important;
}

html body[data-page="studio"] .vue-image-result-actions .secondary-btn {
    min-height: 42px !important;
}

html body[data-page="studio"] .vue-image-result-card {
    border-radius: 26px !important;
}

@media (max-width: 760px) {
    html body[data-page="studio"] .vue-image-result-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

html body[data-page="studio"].studio-wizard-ready:not(.studio-has-draft) .studio-advanced-start,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready:not(.studio-has-draft) .studio-advanced-start,
html body[data-page="studio"].studio-mode-advanced .studio-advanced-start {
    display: block !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready.studio-has-draft:not(.studio-mode-advanced) .studio-advanced-start {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-card > :not(.vue-assist-one-next) {
    display: block !important;
}

@media (max-width: 920px) {
    html body[data-page="home"] section.vue-home-hero,
    html body[data-page="studio"] .studio-launchpad-lite {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="home"] .vue-home-feature {
        display: none !important;
    }

    html body[data-page="studio"] .studio-launchpad-preview {
        order: -1 !important;
    }
}

@media (max-width: 640px) {
    html body[data-page="home"] .vue-home-gateway,
    html body[data-page="home"] section.vue-home-hero {
        background-position: 66% 50% !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        margin-left: 0 !important;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(48px, 17vw, 72px) !important;
    }

    html body[data-page="home"] .vue-home-intent-row,
    html body[data-page="home"] .vue-home-brief-actions,
    html body[data-page="home"] .vue-home-creation-grid,
    html body[data-page="studio"] .studio-launchpad-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

html body[data-page] .shared-nav-primary-action .shared-nav-label-short {
    display: none !important;
}

html body[data-page] .shared-nav-primary-action .shared-nav-label-full {
    display: inline !important;
}

html body[data-page="studio"] .shared-nav-primary-action .shared-nav-label-full {
    display: none !important;
}

html body[data-page="studio"] .shared-nav-primary-action .shared-nav-label-short {
    display: inline !important;
}

html body[data-page="studio"].studio-wizard-ready #studioVueRouteHero .vue-route-director-actions {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-one-next {
    display: none !important;
}

html body[data-page="studio"].studio-focus-flow.studio-wizard-ready .vue-assist-one-next,
html body[data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready .vue-assist-one-next {
    display: none !important;
}

html body[data-page="studio"].studio-wizard-ready .vue-assist-card > :not(.vue-assist-one-next) {
    display: block !important;
}

html body[data-page="studio"] .shared-nav-primary-action {
    width: auto !important;
    max-width: 9rem !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] .shared-nav-actions .shared-nav-primary-action[data-ui-icon="spark"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="spark"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="image"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="publish"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="export"]::before,
    html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon="save"]::before,
    html body[data-page="home"] :is(
        .vue-home-brief-actions,
        .vue-home-actions,
        .vue-home-flow-head,
        .vue-home-empty-band,
        .vue-home-hero-routes,
        .empty-state
    ) :is(a, button, .primary-btn, .secondary-btn, .primary-link)[data-ui-icon]::before {
        content: "" !important;
        display: inline-block !important;
        width: 1.16em !important;
        height: 1.16em !important;
        flex: 0 0 1.16em !important;
        border-radius: 0 !important;
        color: currentColor !important;
        background: currentColor !important;
        opacity: 0.92 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
        mask: var(--ui-icon-mask, var(--ui-icon-spark-mask)) center / contain no-repeat !important;
    }
}

/* 20260710-oc-flow-v12-absolute-tail: action icons win after every previous override. */
html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button, .nav-button, .shared-nav-primary-action)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.62em !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button, .nav-button, .shared-nav-primary-action)[data-ui-icon]::before {
        content: var(--ui-icon, "•") !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 1.95em !important;
        height: 1.95em !important;
        flex: 0 0 1.95em !important;
        border-radius: 999px !important;
        color: currentColor !important;
        background:
            radial-gradient(circle at 33% 23%, rgba(255, 255, 255, 0.95) 0 16%, transparent 17%),
            color-mix(in srgb, currentColor 12%, transparent) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        font-size: 0.74em !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent),
            0 8px 18px rgba(21, 32, 46, 0.11) !important;
        transform: none !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link, .shared-nav-primary-action)[data-ui-icon]::before {
        width: 2.12em !important;
        height: 2.12em !important;
        flex-basis: 2.12em !important;
        color: #111722 !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98) 0 17%, transparent 18%),
            linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--oc-v6-cyan, #1ab9c6) 28%, #ffffff)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.56),
            0 10px 24px rgba(20, 42, 56, 0.16) !important;
    }
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page] main :is(button.primary-btn, a.primary-link, button.secondary-btn, a.secondary-btn, button.ghost-link, a.ghost-link, button.link-button, a.link-button)[data-ui-icon]::before,
    html body[data-page] header :is(a.primary-link, button.primary-btn, button.secondary-btn, a.secondary-btn, button.nav-button, a.nav-button)[data-ui-icon]::before {
        content: var(--ui-icon, "•") !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 1.95em !important;
        height: 1.95em !important;
        flex: 0 0 1.95em !important;
        border-radius: 999px !important;
        color: currentColor !important;
        background:
            radial-gradient(circle at 33% 23%, rgba(255, 255, 255, 0.95) 0 16%, transparent 17%),
            color-mix(in srgb, currentColor 12%, transparent) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        font-size: 0.74em !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent),
            0 8px 18px rgba(21, 32, 46, 0.11) !important;
        transform: none !important;
    }

    html body[data-page] main :is(button.primary-btn, a.primary-link)[data-ui-icon]::before,
    html body[data-page] header :is(a.primary-link, button.primary-btn)[data-ui-icon]::before {
        width: 2.12em !important;
        height: 2.12em !important;
        flex-basis: 2.12em !important;
        color: #111722 !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98) 0 17%, transparent 18%),
            linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--oc-v6-cyan, #1ab9c6) 28%, #ffffff)) !important;
    }

    html body[data-page] main button.primary-btn[data-ui-icon="publish"]::before,
    html body[data-page] main a.primary-link[data-ui-icon="publish"]::before {
        content: "↑" !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 2.12em !important;
        height: 2.12em !important;
        flex: 0 0 2.12em !important;
        border-radius: 999px !important;
        color: #111722 !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98) 0 17%, transparent 18%),
            linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--oc-v6-cyan, #1ab9c6) 28%, #ffffff)) !important;
        -webkit-mask: none !important;
        mask: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        opacity: 1 !important;
        font-size: 0.78em !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.56),
            0 10px 24px rgba(20, 42, 56, 0.16) !important;
        transform: none !important;
    }
}

/* 20260710-oc-usability-v20-post-tail: final visual hierarchy overrides after legacy tails. */
html body[data-page="home"],
html body[data-page="studio"] {
    --oc-v13-day-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp");
    --oc-v13-night-art: url("/animaker/img/generated/ux/oc-ai-concept-studio-default-v22.webp");
    --oc-v6-art: var(--oc-v13-day-art);
    overflow-x: hidden !important;
}

html body[data-page="home"] section.vue-home-hero,
html body.animaker-theme-day[data-page="home"] section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero {
    --home-hero-image: var(--oc-v13-day-art) !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: clamp(640px, 82svh, 880px) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(48px, 6vw, 88px) max(24px, calc((100vw - 1180px) / 2)) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.97) 0%, rgba(250, 253, 255, 0.84) 38%, rgba(250, 253, 255, 0.26) 76%, rgba(250, 253, 255, 0.05) 100%),
        var(--home-hero-image, var(--oc-v13-day-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: none !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    --home-hero-image: var(--oc-v13-night-art) !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: clamp(640px, 82svh, 880px) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(48px, 6vw, 88px) max(24px, calc((100vw - 1180px) / 2)) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.94) 0%, rgba(12, 18, 27, 0.78) 42%, rgba(12, 18, 27, 0.34) 78%, rgba(12, 18, 27, 0.08) 100%),
        var(--home-hero-night-image, var(--oc-v13-night-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: none !important;
}

html body[data-page="home"] .vue-home-gateway,
html body.animaker-theme-day[data-page="home"] .vue-home-gateway,
html body[data-page="home"]:not(.animaker-theme-night) .vue-home-gateway {
    --home-gateway-image: var(--oc-v13-day-art) !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100svh !important;
    inset: 0 !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.96) 0%, rgba(250, 253, 255, 0.72) 42%, rgba(250, 253, 255, 0.16) 100%),
        var(--home-gateway-image, var(--oc-v13-day-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    --home-gateway-image: var(--oc-v13-night-art) !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100svh !important;
    inset: 0 !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.92) 0%, rgba(12, 18, 27, 0.74) 44%, rgba(12, 18, 27, 0.16) 100%),
        var(--home-gateway-night-image, var(--oc-v13-night-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html body[data-page="home"].animaker-theme-night,
html body[data-page="studio"].animaker-theme-night,
html body[data-page="studio"].studio-theme-night {
    --oc-v6-art: var(--oc-v13-night-art);
}

html body[data-page="home"] main,
html body[data-page="home"] .vue-home-root,
html body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
}

html body[data-page="home"] section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: clamp(640px, 82svh, 880px) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(48px, 6vw, 88px) max(24px, calc((100vw - 1180px) / 2)) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.97) 0%, rgba(250, 253, 255, 0.84) 38%, rgba(250, 253, 255, 0.26) 76%, rgba(250, 253, 255, 0.05) 100%),
        var(--home-hero-image, var(--oc-v13-day-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html body.animaker-theme-night[data-page="home"] section.vue-home-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.94) 0%, rgba(12, 18, 27, 0.78) 42%, rgba(12, 18, 27, 0.34) 78%, rgba(12, 18, 27, 0.08) 100%),
        var(--home-hero-night-image, var(--oc-v13-night-art)) !important;
}

html body[data-page="home"] .vue-home-gateway {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100svh !important;
    inset: 0 !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(250, 253, 255, 0.96) 0%, rgba(250, 253, 255, 0.72) 42%, rgba(250, 253, 255, 0.16) 100%),
        var(--home-gateway-image, var(--oc-v13-day-art)) !important;
    background-size: cover !important;
    background-position: center center !important;
}

html body.animaker-theme-night[data-page="home"] .vue-home-gateway {
    background-image:
        linear-gradient(90deg, rgba(12, 18, 27, 0.92) 0%, rgba(12, 18, 27, 0.74) 44%, rgba(12, 18, 27, 0.16) 100%),
        var(--home-gateway-night-image, var(--oc-v13-night-art)) !important;
}

html body[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 58%, rgba(255, 255, 255, 0.14) 100%),
        var(--oc-v13-day-art) 60% 50% / cover no-repeat !important;
}

html body[data-page="studio"].studio-theme-night .studio-hero-title,
html body.animaker-theme-night[data-page="studio"] .studio-hero-title {
    background:
        linear-gradient(100deg, rgba(12, 18, 28, 0.94) 0%, rgba(12, 18, 28, 0.78) 58%, rgba(12, 18, 28, 0.18) 100%),
        var(--oc-v13-night-art) 62% 50% / cover no-repeat !important;
}

html body[data-page="studio"] .vue-image-result-actions {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

html body[data-page="studio"] .vue-image-result-actions .primary-btn {
    min-height: 52px !important;
}

html body[data-page="studio"] .vue-image-result-more,
html body[data-page="studio"] .vue-publish-completion-more {
    position: relative !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="studio"] .vue-image-result-more > summary,
html body[data-page="studio"] .vue-publish-completion-more > summary {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.56em !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(33, 48, 66, 0.14) !important;
    color: #24303d !important;
    background: rgba(255, 255, 255, 0.72) !important;
    cursor: pointer !important;
    user-select: none !important;
    list-style: none !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 22px rgba(20, 42, 56, 0.08) !important;
}

html body[data-page="studio"] .vue-image-result-more > summary::-webkit-details-marker,
html body[data-page="studio"] .vue-publish-completion-more > summary::-webkit-details-marker {
    display: none !important;
}

html body[data-page="studio"] .vue-image-result-more[open],
html body[data-page="studio"] .vue-publish-completion-more[open] {
    z-index: 8 !important;
}

html body[data-page="studio"] .vue-image-result-more[open] > :not(summary),
html body[data-page="studio"] .vue-publish-completion-more[open] > :not(summary) {
    width: 100% !important;
    margin-top: 8px !important;
}

html body[data-page="studio"] .vue-post-create-actions.vue-publish-completion-actions {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(132px, auto)) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

html body[data-page="studio"] .vue-publish-completion-actions :is(.primary-btn, .secondary-btn),
html body[data-page="studio"] .vue-image-result-actions :is(.primary-btn, .secondary-btn),
html body[data-page="studio"] .vue-publish-completion-more > summary,
html body[data-page="studio"] .vue-image-result-more > summary {
    border-radius: 16px !important;
    white-space: nowrap !important;
}

html body[data-page="studio"] .vue-publish-completion-more > summary {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    background: rgba(255, 255, 255, 0.13) !important;
    box-shadow: none !important;
}

html body[data-page="studio"] .vue-publish-completion-more[open] {
    display: grid !important;
    gap: 8px !important;
}

html body[data-page="studio"] .vue-publish-completion-more .secondary-btn {
    justify-content: flex-start !important;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    html body[data-page="studio"] :is(.vue-image-result-more, .vue-publish-completion-more) > summary[data-ui-icon]::before {
        content: var(--ui-icon, "↻") !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 1.85em !important;
        height: 1.85em !important;
        flex: 0 0 1.85em !important;
        border-radius: 999px !important;
        color: currentColor !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92) 0 16%, transparent 17%),
            color-mix(in srgb, currentColor 13%, transparent) !important;
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
        font-size: 0.72em !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 920px) {
    html body[data-page="home"] section.vue-home-hero {
        min-height: auto !important;
        padding: 38px 18px 46px !important;
        background-position: 60% 50% !important;
    }

    html body[data-page="home"] .vue-home-feature {
        display: none !important;
    }

    html body[data-page="studio"] .vue-post-create-actions.vue-publish-completion-actions,
    html body[data-page="studio"] .vue-image-result-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"] .vue-post-create-actions.vue-publish-completion-actions > *,
    html body[data-page="studio"] .vue-image-result-actions > * {
        width: 100% !important;
    }

    html body[data-page="studio"] .vue-image-result-more > summary,
    html body[data-page="studio"] .vue-publish-completion-more > summary {
        width: 100% !important;
    }
}

/* 20260710-oc-workbench-v24-eof: final quick-mode hierarchy after all legacy tails. */
html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-path-banner,
html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-rail,
html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-next,
html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-focus-card,
html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-progress,
html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-cover-strip,
html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-tasks {
    display: none !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 0 auto clamp(14px, 2vw, 22px) !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
    display: grid !important;
    padding: clamp(16px, 2.2vw, 24px) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(33, 48, 66, 0.10) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 255, 0.78)),
        linear-gradient(135deg, rgba(31, 184, 194, 0.10), rgba(255, 229, 107, 0.16)) !important;
    box-shadow: 0 18px 44px rgba(23, 34, 48, 0.10) !important;
}

html body[data-page="studio"].studio-theme-night.studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director,
html body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director {
    border-color: rgba(238, 246, 255, 0.12) !important;
    background:
        linear-gradient(135deg, rgba(23, 27, 38, 0.88), rgba(32, 36, 50, 0.72)),
        linear-gradient(135deg, rgba(43, 208, 216, 0.12), rgba(255, 229, 107, 0.08)) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.20) !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-main {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(280px, 1fr) !important;
    gap: clamp(14px, 2vw, 22px) !important;
    align-items: stretch !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-copy h2 {
    max-width: 11em !important;
    font-size: clamp(28px, 4vw, 56px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready #studioVueRouteHero .vue-route-director-actions,
html body[data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready #studioVueRouteHero .vue-route-director-actions {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto auto !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 12px !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready #studioVueRouteHero .vue-route-director-actions .primary-btn {
    min-height: 56px !important;
    justify-content: flex-start !important;
    padding-inline: 14px 18px !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready #studioVueRouteHero .vue-route-director-actions :is(.secondary-btn, .vue-route-mode-chip) {
    min-height: 48px !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready #studioVueRouteHero .vue-route-director-actions small {
    grid-column: 1 / -1 !important;
    color: rgba(69, 82, 99, 0.76) !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench,
html body[data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready.studio-has-draft .studio-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) !important;
    gap: clamp(16px, 2vw, 24px) !important;
    align-items: start !important;
}

html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img[src*="oc-ai-concept-studio-default-v22"] {
    object-position: 54% 48% !important;
    filter: saturate(1.02) contrast(1.02) !important;
}

html body[data-page="studio"].studio-theme-night.studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img[src*="oc-ai-concept-studio-default-v22"],
html body.animaker-theme-night[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview .vue-board-default-art img[src*="oc-ai-concept-studio-default-v22"] {
    filter: saturate(1.08) contrast(0.98) brightness(0.86) !important;
}

@media (max-width: 1040px) {
    html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-workbench,
    html body[data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready.studio-has-draft .studio-workbench,
    html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .studio-preview.avatar-preview {
        position: static !important;
        order: -1 !important;
    }
}

@media (max-width: 700px) {
    html body[data-page="studio"].studio-mode-quick.studio-wizard-ready #studioVueRouteHero .vue-route-director-actions,
    html body[data-page="studio"].studio-mode-quick.studio-wizard-ready .vue-route-hero-shell .vue-route-director-progress {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 20260710-oc-permission-v25: explicit public/remix boundary and calmer action affordances. */
html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button, .nav-button)[data-ui-icon] {
    min-height: 42px !important;
    border-radius: 16px !important;
    letter-spacing: 0 !important;
}

html body[data-page] main :is(.primary-btn, .primary-link)[data-ui-icon] {
    min-height: 48px !important;
    padding-inline: 12px 18px !important;
}

html body[data-page] :is(.vue-card-license, .vue-work-license-note)[data-ui-icon] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(48, 59, 75, 0.12) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: rgba(43, 53, 68, 0.82) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

html body[data-page] .vue-card-license[data-ui-icon] {
    min-height: 36px !important;
    padding: 0 12px !important;
}

html body[data-page] .vue-card-license[data-ui-icon]::before,
html body[data-page] .vue-work-license-note[data-ui-icon]::before {
    content: var(--ui-icon, "•") !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 1.55em !important;
    height: 1.55em !important;
    flex: 0 0 1.55em !important;
    border-radius: 999px !important;
    background: rgba(21, 29, 42, 0.08) !important;
    color: currentColor !important;
    font-size: 0.75em !important;
    font-weight: 950 !important;
}

html body[data-page] .vue-work-license-note[data-ui-icon] {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px 12px !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(244, 250, 252, 0.72)),
        rgba(255, 255, 255, 0.72) !important;
}

html body[data-page] .vue-work-license-note[data-ui-icon]::before {
    grid-row: 1 / span 3 !important;
    margin-top: 2px !important;
}

html body[data-page] .vue-work-license-note span,
html body[data-page] .vue-work-license-note strong,
html body[data-page] .vue-work-license-note p {
    margin: 0 !important;
}

html body[data-page] .vue-work-license-note span {
    color: #1aa6b3 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

html body[data-page] .vue-work-license-note strong {
    color: #172132 !important;
    font-size: 16px !important;
}

html body[data-page] .vue-work-license-note p {
    color: rgba(50, 61, 78, 0.72) !important;
    line-height: 1.6 !important;
}

html body[data-page="studio"] .vue-publish-permission-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 12px 0 4px !important;
}

html body[data-page="studio"] .vue-publish-permission-strip :is(article, button) {
    min-width: 0 !important;
    min-height: 88px !important;
    display: grid !important;
    align-content: start !important;
    justify-items: start !important;
    gap: 4px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(36, 52, 70, 0.12) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    color: #1f2a3b !important;
    text-align: left !important;
    box-shadow: 0 12px 28px rgba(25, 38, 52, 0.08) !important;
}

html body[data-page="studio"] .vue-publish-permission-strip button {
    position: relative !important;
    cursor: pointer !important;
}

html body[data-page="studio"] .vue-publish-permission-strip button.active {
    border-color: rgba(31, 184, 194, 0.42) !important;
    background:
        linear-gradient(135deg, rgba(221, 252, 247, 0.82), rgba(255, 248, 210, 0.68)),
        rgba(255, 255, 255, 0.76) !important;
    box-shadow:
        0 0 0 1px rgba(31, 184, 194, 0.12),
        0 14px 34px rgba(31, 184, 194, 0.13) !important;
}

html body[data-page="studio"] .vue-publish-permission-strip :is(article, button) span {
    color: #1aa6b3 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

html body[data-page="studio"] .vue-publish-permission-strip :is(article, button) strong {
    color: #172132 !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
}

html body[data-page="studio"] .vue-publish-permission-strip :is(article, button) small {
    color: rgba(50, 61, 78, 0.68) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body[data-page="studio"] .vue-publish-permission-strip button[data-ui-icon]::before {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    --ui-icon-size: 1.7em;
    background: rgba(31, 184, 194, 0.12) !important;
}

html body.animaker-theme-night[data-page] .vue-card-license,
html body.animaker-theme-night[data-page] .vue-work-license-note,
html body[data-page="studio"].studio-theme-night .vue-publish-permission-strip :is(article, button),
html body.animaker-theme-night[data-page="studio"] .vue-publish-permission-strip :is(article, button) {
    border-color: rgba(235, 244, 255, 0.13) !important;
    background: rgba(24, 28, 38, 0.72) !important;
    color: rgba(240, 246, 255, 0.86) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

html body[data-page="studio"].studio-theme-night .vue-publish-permission-strip :is(article, button) strong,
html body.animaker-theme-night[data-page="studio"] .vue-publish-permission-strip :is(article, button) strong,
html body.animaker-theme-night[data-page] .vue-work-license-note strong {
    color: #f5f8ff !important;
}

html body[data-page="studio"].studio-theme-night .vue-publish-permission-strip :is(article, button) small,
html body.animaker-theme-night[data-page="studio"] .vue-publish-permission-strip :is(article, button) small,
html body.animaker-theme-night[data-page] .vue-work-license-note p {
    color: rgba(229, 237, 248, 0.68) !important;
}

@media (max-width: 720px) {
    html body[data-page="studio"] .vue-publish-permission-strip {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page] :is(.primary-btn, .primary-link, .secondary-btn, .ghost-link, .link-button, .nav-button)[data-ui-icon] {
        width: 100% !important;
        justify-content: center !important;
    }
}

body[data-page="me"] .vue-me-profile-editor {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    padding: 16px;
    border: 1px solid rgba(120, 138, 166, 0.2);
    border-radius: 24px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 251, 0.9)),
            radial-gradient(circle at 8% 16%, rgba(114, 211, 255, 0.18), transparent 34%),
            radial-gradient(circle at 96% 80%, rgba(255, 210, 113, 0.18), transparent 30%);
    box-shadow: 0 18px 48px rgba(31, 42, 68, 0.08);
}

body[data-page="me"] .vue-me-profile-preview {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

body[data-page="me"] .vue-me-profile-preview img {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 34px rgba(43, 56, 88, 0.14);
}

body[data-page="me"] .vue-me-profile-fields {
    display: grid;
    gap: 12px;
    min-width: 0;
}

body[data-page="me"] .vue-me-profile-fields h2 {
    margin: 0;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.08;
    letter-spacing: 0;
}

body[data-page="me"] .vue-me-profile-fields label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-weight: 800;
}

body[data-page="me"] .vue-me-profile-fields :is(input, textarea) {
    width: 100%;
    border: 1px solid rgba(120, 138, 166, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ink);
    font: inherit;
    font-weight: 760;
    line-height: 1.55;
    padding: 12px 14px;
    outline: none;
    resize: vertical;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body[data-page="me"] .vue-me-profile-fields :is(input, textarea):focus {
    border-color: rgba(33, 183, 197, 0.62);
    box-shadow: 0 0 0 4px rgba(33, 183, 197, 0.12);
}

body[data-page="me"] .vue-me-avatar-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

body[data-page="me"] .vue-me-avatar-presets button {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 10px 24px rgba(31, 42, 68, 0.08);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body[data-page="me"] .vue-me-avatar-presets button:hover,
body[data-page="me"] .vue-me-avatar-presets button:focus-visible,
body[data-page="me"] .vue-me-avatar-presets button.active {
    border-color: rgba(33, 183, 197, 0.74);
    box-shadow: 0 12px 28px rgba(33, 183, 197, 0.18);
    transform: translateY(-1px);
    outline: none;
}

body[data-page="me"] .vue-me-avatar-presets img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="me"] .vue-me-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body[data-page="me"] .vue-me-profile-actions small {
    color: var(--muted);
    font-weight: 800;
}

html body[data-page="me"].animaker-theme-night .vue-me-profile-editor,
html body[data-page="me"].studio-theme-night .vue-me-profile-editor {
    border-color: rgba(255, 255, 255, 0.12);
    background:
            linear-gradient(135deg, rgba(25, 22, 34, 0.94), rgba(30, 40, 50, 0.9)),
            radial-gradient(circle at 10% 16%, rgba(114, 211, 255, 0.18), transparent 34%),
            radial-gradient(circle at 92% 82%, rgba(255, 210, 113, 0.16), transparent 30%);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.34);
}

html body[data-page="me"].animaker-theme-night .vue-me-profile-fields :is(input, textarea),
html body[data-page="me"].studio-theme-night .vue-me-profile-fields :is(input, textarea) {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html body[data-page="me"].animaker-theme-night .vue-me-avatar-presets button,
html body[data-page="me"].studio-theme-night .vue-me-avatar-presets button {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

@media (max-width: 760px) {
    body[data-page="me"] .vue-me-profile-editor {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        border-radius: 20px;
    }

    body[data-page="me"] .vue-me-profile-preview img {
        border-radius: 18px;
    }

    body[data-page="me"] .vue-me-profile-preview .secondary-btn {
        grid-column: 1 / -1;
    }

    body[data-page="me"] .vue-me-profile-fields .row-between {
        align-items: flex-start;
        gap: 10px;
    }
}

body[data-page="gallery"] .creator-avatar-mark {
    --avatar-hue: 196;
    --avatar-hue-next: 340;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    color: #101018;
    background:
            linear-gradient(135deg,
            hsl(var(--avatar-hue) 82% 82%),
            hsl(var(--avatar-hue-next) 86% 78%));
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.76),
            0 10px 22px rgba(34, 32, 46, 0.14);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
}

body[data-page="gallery"] .creator-avatar-mark.is-large {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
    border-radius: 18px;
    font-size: 18px;
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.72),
            0 18px 38px rgba(34, 32, 46, 0.16);
}

html body[data-page="gallery"].animaker-theme-night .creator-avatar-mark,
html body[data-page="gallery"].studio-theme-night .creator-avatar-mark {
    color: rgba(255, 255, 255, 0.94);
    background:
            linear-gradient(135deg,
            hsl(var(--avatar-hue) 74% 38% / 0.92),
            hsl(var(--avatar-hue-next) 78% 34% / 0.9));
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.16),
            0 14px 30px rgba(0, 0, 0, 0.28);
}

body[data-page="studio"] .vue-route-creation-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

body[data-page="studio"] .vue-route-creation-type > button {
    display: grid;
    gap: 4px;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid rgba(120, 138, 166, 0.22);
    border-radius: 18px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 28px rgba(31, 42, 68, 0.08);
    text-align: left;
    cursor: pointer;
}

body[data-page="studio"] .vue-route-creation-type > button span,
body[data-page="studio"] .vue-route-source-ip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

body[data-page="studio"] .vue-route-creation-type > button strong {
    font-size: 15px;
    font-weight: 950;
    line-height: 1.18;
}

body[data-page="studio"] .vue-route-creation-type > button small {
    color: var(--muted);
    font-weight: 800;
    line-height: 1.35;
}

body[data-page="studio"] .vue-route-creation-type > button:hover,
body[data-page="studio"] .vue-route-creation-type > button:focus-visible,
body[data-page="studio"] .vue-route-creation-type > button.active {
    border-color: rgba(33, 183, 197, 0.68);
    background: rgba(231, 251, 253, 0.9);
    box-shadow: 0 14px 32px rgba(33, 183, 197, 0.14);
    outline: none;
}

body[data-page="studio"] .vue-route-source-ip {
    display: grid;
    gap: 7px;
    min-width: 0;
}

body[data-page="studio"] .vue-route-fanwork-panel {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(120, 138, 166, 0.18);
    border-radius: 20px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(236, 250, 252, 0.76));
    box-shadow: 0 14px 34px rgba(31, 42, 68, 0.08);
}

body[data-page="studio"] .vue-route-source-ip input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(120, 138, 166, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--ink);
    font: inherit;
    font-weight: 820;
    padding: 0 13px;
    outline: none;
}

body[data-page="studio"] .vue-route-source-ip input:focus {
    border-color: rgba(33, 183, 197, 0.68);
    box-shadow: 0 0 0 4px rgba(33, 183, 197, 0.12);
}

body[data-page="studio"] .vue-route-ip-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"] .vue-route-ip-presets button {
    display: grid;
    gap: 3px;
    min-height: 86px;
    padding: 10px;
    border: 1px solid rgba(120, 138, 166, 0.18);
    border-radius: 16px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.76);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(31, 42, 68, 0.07);
}

body[data-page="studio"] .vue-route-ip-presets button span {
    color: #12808a;
    font-size: 11px;
    font-weight: 950;
}

body[data-page="studio"] .vue-route-ip-presets button strong {
    font-size: 14px;
    font-weight: 950;
    line-height: 1.16;
}

body[data-page="studio"] .vue-route-ip-presets button small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 820;
    line-height: 1.28;
}

body[data-page="studio"] .vue-route-ip-presets button:hover,
body[data-page="studio"] .vue-route-ip-presets button:focus-visible,
body[data-page="studio"] .vue-route-ip-presets button.active {
    border-color: rgba(33, 183, 197, 0.72);
    background: rgba(231, 251, 253, 0.94);
    box-shadow: 0 14px 28px rgba(33, 183, 197, 0.15);
    outline: none;
}

body[data-page="studio"] .vue-route-fanwork-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 820;
    line-height: 1.45;
}

html body[data-page="studio"].studio-theme-night .vue-route-creation-type > button,
html body.animaker-theme-night[data-page="studio"] .vue-route-creation-type > button,
html body[data-page="studio"].studio-theme-night .vue-route-source-ip input,
html body.animaker-theme-night[data-page="studio"] .vue-route-source-ip input {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

html body[data-page="studio"].studio-theme-night .vue-route-fanwork-panel,
html body.animaker-theme-night[data-page="studio"] .vue-route-fanwork-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(33, 183, 197, 0.08));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

html body[data-page="studio"].studio-theme-night .vue-route-ip-presets button,
html body.animaker-theme-night[data-page="studio"] .vue-route-ip-presets button {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
}

html body[data-page="studio"].studio-theme-night .vue-route-ip-presets button span,
html body.animaker-theme-night[data-page="studio"] .vue-route-ip-presets button span {
    color: #8ef0f8;
}

html body[data-page="studio"].studio-theme-night .vue-route-ip-presets button small,
html body.animaker-theme-night[data-page="studio"] .vue-route-ip-presets button small,
html body[data-page="studio"].studio-theme-night .vue-route-fanwork-note,
html body.animaker-theme-night[data-page="studio"] .vue-route-fanwork-note {
    color: rgba(255, 255, 255, 0.68);
}

body[data-page="studio"] .vue-core-fanwork-quick {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(120, 138, 166, 0.18);
    border-radius: 20px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(236, 250, 252, 0.78));
    box-shadow: 0 14px 34px rgba(31, 42, 68, 0.08);
}

body[data-page="studio"] .vue-core-fanwork-quick[data-fanwork-active="true"] {
    border-color: rgba(33, 183, 197, 0.58);
    box-shadow: 0 16px 34px rgba(33, 183, 197, 0.13);
}

body[data-page="studio"] .vue-core-fanwork-copy {
    display: grid;
    gap: 4px;
}

body[data-page="studio"] .vue-core-fanwork-copy span {
    color: #12808a;
    font-size: 12px;
    font-weight: 950;
}

body[data-page="studio"] .vue-core-fanwork-copy strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.2;
}

body[data-page="studio"] .vue-core-fanwork-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 820;
    line-height: 1.45;
}

body[data-page="studio"] .vue-core-fanwork-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="studio"] .vue-core-fanwork-grid button {
    display: grid;
    gap: 3px;
    min-height: 86px;
    padding: 10px;
    border: 1px solid rgba(120, 138, 166, 0.18);
    border-radius: 16px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.78);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(31, 42, 68, 0.07);
}

body[data-page="studio"] .vue-core-fanwork-grid button span {
    color: #12808a;
    font-size: 11px;
    font-weight: 950;
}

body[data-page="studio"] .vue-core-fanwork-grid button strong {
    font-size: 14px;
    font-weight: 950;
    line-height: 1.16;
}

body[data-page="studio"] .vue-core-fanwork-grid button small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 820;
    line-height: 1.28;
}

body[data-page="studio"] .vue-core-fanwork-grid button:hover,
body[data-page="studio"] .vue-core-fanwork-grid button:focus-visible,
body[data-page="studio"] .vue-core-fanwork-grid button.active {
    border-color: rgba(33, 183, 197, 0.72);
    background: rgba(231, 251, 253, 0.94);
    box-shadow: 0 14px 28px rgba(33, 183, 197, 0.15);
    outline: none;
}

html body[data-page="studio"].studio-theme-night .vue-core-fanwork-quick,
html body.animaker-theme-night[data-page="studio"] .vue-core-fanwork-quick {
    border-color: rgba(255, 255, 255, 0.12);
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(33, 183, 197, 0.08));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

html body[data-page="studio"].studio-theme-night .vue-core-fanwork-copy strong,
html body.animaker-theme-night[data-page="studio"] .vue-core-fanwork-copy strong,
html body[data-page="studio"].studio-theme-night .vue-core-fanwork-grid button,
html body.animaker-theme-night[data-page="studio"] .vue-core-fanwork-grid button {
    color: rgba(255, 255, 255, 0.92);
}

html body[data-page="studio"].studio-theme-night .vue-core-fanwork-grid button,
html body.animaker-theme-night[data-page="studio"] .vue-core-fanwork-grid button {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
}

html body[data-page="studio"].studio-theme-night .vue-core-fanwork-copy span,
html body.animaker-theme-night[data-page="studio"] .vue-core-fanwork-copy span,
html body[data-page="studio"].studio-theme-night .vue-core-fanwork-grid button span,
html body.animaker-theme-night[data-page="studio"] .vue-core-fanwork-grid button span {
    color: #8ef0f8;
}

html body[data-page="studio"].studio-theme-night .vue-core-fanwork-copy p,
html body.animaker-theme-night[data-page="studio"] .vue-core-fanwork-copy p,
html body[data-page="studio"].studio-theme-night .vue-core-fanwork-grid button small,
html body.animaker-theme-night[data-page="studio"] .vue-core-fanwork-grid button small {
    color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 760px) {
    body[data-page="studio"] .vue-route-creation-type {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="studio"] .vue-route-ip-presets,
    body[data-page="studio"] .vue-core-fanwork-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 20260710-fanwork-gateway-v30: full-screen first-click gateway, fanwork-aware home entry, balanced day/night. */
html body[data-page="home"].home-gateway-open {
    overflow: hidden;
}

html body[data-page="home"].home-gateway-open :is(.topbar, .shared-nav) {
    opacity: 0;
    pointer-events: none;
}

html body[data-page="home"] .vue-home-gateway {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    min-height: 100svh !important;
    padding: clamp(22px, 5vw, 76px) !important;
    overflow: hidden !important;
    color: #12121a !important;
    background:
            linear-gradient(180deg, rgba(250, 252, 255, 0.18), rgba(250, 252, 255, 0.78)),
            linear-gradient(90deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.24) 44%, rgba(255, 255, 255, 0.68)),
            var(--home-gateway-image, var(--oc-v13-day-art)) center / cover no-repeat !important;
    cursor: pointer !important;
    isolation: isolate;
}

html body[data-page="home"] .vue-home-gateway::before {
    content: "";
    position: absolute;
    inset: clamp(12px, 2.4vw, 34px);
    border: 1px solid rgba(18, 18, 26, 0.18);
    border-radius: clamp(24px, 4vw, 54px);
    pointer-events: none;
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.42),
            0 30px 90px rgba(24, 28, 42, 0.16);
}

html body[data-page="home"] .vue-home-gateway-copy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: clamp(14px, 2.2vw, 24px);
    width: min(1040px, 100%);
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

html body[data-page="home"] .vue-home-gateway-copy > span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid rgba(18, 18, 26, 0.18);
    border-radius: 999px;
    color: #126b72;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 32px rgba(24, 28, 42, 0.08);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html body[data-page="home"] .vue-home-gateway-copy h1 {
    display: grid;
    gap: 2px;
    margin: 0;
    color: #11111a;
    font-size: clamp(58px, 12vw, 156px);
    font-weight: 950;
    line-height: 0.92;
    letter-spacing: 0;
}

html body[data-page="home"] .vue-home-gateway-copy h1 b {
    font-weight: inherit;
}

html body[data-page="home"] .vue-home-gateway-copy p {
    max-width: 760px;
    margin: 0;
    color: rgba(18, 18, 26, 0.78);
    font-size: clamp(17px, 2vw, 25px);
    font-weight: 850;
    line-height: 1.55;
}

html body[data-page="home"] .vue-home-gateway-paths {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: min(860px, 100%);
}

html body[data-page="home"] .vue-home-gateway-paths em {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(18, 18, 26, 0.14);
    border-radius: 999px;
    color: #17151f;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 30px rgba(24, 28, 42, 0.08);
    font-size: 13px;
    font-style: normal;
    font-weight: 920;
    line-height: 1;
}

html body[data-page="home"] .vue-home-gateway-cue {
    position: absolute;
    z-index: 1;
    right: clamp(24px, 5vw, 76px);
    bottom: clamp(24px, 6vw, 78px);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(18, 18, 26, 0.16);
    border-radius: 999px;
    color: #11111a;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 42px rgba(24, 28, 42, 0.12);
    font-weight: 950;
}

html body[data-page="home"] .vue-home-gateway-cue i {
    display: block;
    width: 36px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: right center;
    animation: animakerGatewayCue 1.5s ease-in-out infinite;
}

@keyframes animakerGatewayCue {
    0%, 100% {
        transform: scaleX(0.55);
        opacity: 0.52;
    }
    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

html body[data-page="home"].animaker-theme-night .vue-home-gateway,
html body[data-page="home"].studio-theme-night .vue-home-gateway {
    color: rgba(255, 255, 255, 0.94) !important;
    background:
            linear-gradient(180deg, rgba(6, 8, 15, 0.2), rgba(6, 8, 15, 0.72)),
            linear-gradient(90deg, rgba(6, 8, 15, 0.88), rgba(6, 8, 15, 0.22) 44%, rgba(6, 8, 15, 0.82)),
            var(--home-gateway-night-image, var(--home-gateway-image, var(--oc-v13-night-art))) center / cover no-repeat !important;
}

html body[data-page="home"].animaker-theme-night .vue-home-gateway::before,
html body[data-page="home"].studio-theme-night .vue-home-gateway::before {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.08),
            0 30px 90px rgba(0, 0, 0, 0.48);
}

html body[data-page="home"].animaker-theme-night .vue-home-gateway-copy,
html body[data-page="home"].studio-theme-night .vue-home-gateway-copy {
    text-shadow: 0 16px 44px rgba(0, 0, 0, 0.48);
}

html body[data-page="home"].animaker-theme-night .vue-home-gateway-copy h1,
html body[data-page="home"].studio-theme-night .vue-home-gateway-copy h1,
html body[data-page="home"].animaker-theme-night .vue-home-gateway-copy p,
html body[data-page="home"].studio-theme-night .vue-home-gateway-copy p {
    color: rgba(255, 255, 255, 0.96);
}

html body[data-page="home"].animaker-theme-night .vue-home-gateway-copy > span,
html body[data-page="home"].studio-theme-night .vue-home-gateway-copy > span,
html body[data-page="home"].animaker-theme-night .vue-home-gateway-paths em,
html body[data-page="home"].studio-theme-night .vue-home-gateway-paths em,
html body[data-page="home"].animaker-theme-night .vue-home-gateway-cue,
html body[data-page="home"].studio-theme-night .vue-home-gateway-cue {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.94);
    background: rgba(17, 18, 28, 0.62);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

html body[data-page="home"] section.vue-home-hero {
    min-height: clamp(680px, 82vh, 940px) !important;
    border-radius: clamp(24px, 3vw, 40px) !important;
    background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68) 46%, rgba(255, 255, 255, 0.36)),
            linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(241, 247, 251, 0.84)),
            var(--home-hero-image, var(--oc-v13-day-art)) center / cover no-repeat !important;
}

html body[data-page="home"].animaker-theme-night section.vue-home-hero,
html body[data-page="home"].studio-theme-night section.vue-home-hero {
    background:
            linear-gradient(90deg, rgba(11, 12, 20, 0.9), rgba(11, 12, 20, 0.7) 46%, rgba(11, 12, 20, 0.28)),
            linear-gradient(180deg, rgba(12, 15, 26, 0.2), rgba(12, 15, 26, 0.86)),
            var(--home-hero-night-image, var(--home-hero-image, var(--oc-v13-night-art))) center / cover no-repeat !important;
}

html body[data-page="home"] .vue-home-copy > h1 {
    max-width: 760px;
    color: #12121a;
    font-size: clamp(44px, 7vw, 98px);
    line-height: 0.98;
    letter-spacing: 0;
}

html body[data-page="home"] .vue-home-copy > p:not(.eyebrow) {
    max-width: 650px;
    color: rgba(18, 18, 26, 0.72);
}

html body[data-page="home"] .vue-home-actions {
    gap: 10px;
}

html body[data-page="home"] .vue-home-brief,
html body[data-page="home"] .vue-home-creation,
html body[data-page="home"] .vue-home-next,
html body[data-page="home"] .vue-home-community-more {
    border-radius: 26px !important;
}

html body[data-page="home"] .vue-home-intent-row button,
html body[data-page="home"] .vue-home-brief-chips button,
html body[data-page="home"] .vue-home-hero-routes a,
html body[data-page="home"] .vue-home-starter-card,
html body[data-page="home"] .vue-home-creation-card,
html body[data-page="home"] .vue-home-next a {
    border-radius: 20px !important;
}

html body[data-page="home"] .vue-home-intent-row button[data-ui-icon="archive"],
html body[data-page="home"] .vue-home-hero-routes a[data-ui-icon="archive"],
html body[data-page="home"] .vue-home-starter-card[data-ui-icon="archive"] {
    border-color: rgba(255, 123, 83, 0.26);
    background: linear-gradient(135deg, rgba(255, 246, 238, 0.95), rgba(236, 250, 253, 0.9));
}

html body[data-page="home"] .vue-home-feature {
    border-radius: 28px !important;
}

html body[data-page="home"] .vue-home-feature > img {
    border-radius: 22px !important;
}

@media (max-width: 860px) {
    html body[data-page="home"] .vue-home-gateway {
        padding: 22px !important;
    }

    html body[data-page="home"] .vue-home-gateway::before {
        inset: 10px;
        border-radius: 26px;
    }

    html body[data-page="home"] .vue-home-gateway-copy {
        gap: 14px;
    }

    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(46px, 15vw, 92px);
    }

    html body[data-page="home"] .vue-home-gateway-copy p {
        max-width: 560px;
        font-size: 16px;
    }

    html body[data-page="home"] .vue-home-gateway-cue {
        left: 50%;
        right: auto;
        bottom: 22px;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    html body[data-page="home"] section.vue-home-hero {
        min-height: 720px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 560px) {
    html body[data-page="home"] .vue-home-gateway-copy h1 {
        font-size: clamp(42px, 18vw, 72px);
    }

    html body[data-page="home"] .vue-home-gateway-paths {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: min(310px, 100%);
    }

    html body[data-page="home"] .vue-home-gateway-paths em {
        justify-content: center;
        min-height: 40px;
    }

    html body[data-page="home"] .vue-home-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    html body[data-page="home"] .vue-home-gateway-cue i {
        animation: none;
    }
}

/* 20260711-mobile-nav-final: keep small screens free of duplicated nav overflow. */
@media (max-width: 640px) {
    html body[data-page] .topbar > .nav,
    html body[data-page] .shared-nav-links {
        display: none !important;
    }

    html body[data-page] .topbar,
    html body[data-page] .shared-nav,
    html body[data-page] .shared-nav-actions {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* 20260711-home-intro-v41: make the home hero a true viewport stage after the click-through intro. */
html body[data-page="home"] {
    overflow-x: hidden !important;
}

html body[data-page="home"] main,
html body[data-page="home"] .vue-home-root,
html body[data-page="home"] .vue-home {
    width: 100% !important;
    max-width: none !important;
}

html body[data-page="home"] section.vue-home-hero,
html body[data-page="home"].animaker-theme-day section.vue-home-hero,
html body[data-page="home"]:not(.animaker-theme-night) section.vue-home-hero,
html body[data-page="home"].animaker-theme-night section.vue-home-hero,
html body[data-page="home"].studio-theme-night section.vue-home-hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: max(720px, calc(100svh - 68px)) !important;
    margin: 0 calc(50% - 50vw) !important;
    padding:
            clamp(56px, 6vw, 92px)
            max(24px, calc((100vw - 1180px) / 2))
            clamp(52px, 5vw, 82px) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

@media (max-width: 860px) {
    html body[data-page="home"] section.vue-home-hero,
    html body[data-page="home"].animaker-theme-night section.vue-home-hero,
    html body[data-page="home"].studio-theme-night section.vue-home-hero {
        min-height: max(680px, calc(100svh - 62px)) !important;
        padding: 42px 20px 36px !important;
        border-radius: 0 !important;
    }
}

/* 20260711-gallery-contrast-v46: keep the community entry legible in both themes. */
html body[data-page="gallery"] .vue-gallery-light-start .vue-light-start-actions a.primary-link[data-ui-icon] {
    border-color: rgba(5, 111, 121, 0.38) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #087783 0%, #1099a3 58%, #18a8ac 100%) !important;
    box-shadow: 0 16px 34px rgba(11, 132, 143, 0.24) !important;
}

html body[data-page="gallery"] .vue-gallery-light-start .vue-light-start-actions a.primary-link[data-ui-icon]:is(:hover, :focus-visible) {
    border-color: rgba(5, 91, 101, 0.56) !important;
    background: linear-gradient(135deg, #066b76 0%, #0b8c97 58%, #139fa5 100%) !important;
    box-shadow: 0 18px 38px rgba(11, 132, 143, 0.3) !important;
}

html body.animaker-theme-night[data-page="gallery"] .vue-gallery-light-start .vue-light-start-actions a.primary-link[data-ui-icon] {
    border-color: rgba(224, 255, 246, 0.34) !important;
    color: #111827 !important;
    background: linear-gradient(135deg, #c7fff1 0%, #dff5cf 56%, #ffe77a 100%) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}

html body[data-page="gallery"] .vue-gallery-feature::after {
    background: linear-gradient(180deg, transparent 38%, rgba(8, 13, 24, 0.18) 58%, rgba(8, 13, 24, 0.9) 100%) !important;
}

html body[data-page="gallery"] .vue-gallery-feature > div {
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(10, 15, 27, 0.9), rgba(16, 22, 34, 0.76)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(10px) saturate(1.08) !important;
}

html body[data-page="gallery"] .vue-gallery .vue-gallery-hero.has-feature .vue-gallery-feature > div strong {
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32) !important;
}

html body[data-page="gallery"] .vue-gallery .vue-gallery-hero.has-feature .vue-gallery-feature > div small {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* 20260715-global-ai-task-v106: persistent creation feedback across the whole product. */
.global-ai-task {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 260;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(760px, calc(100vw - 48px));
    min-height: 84px;
    padding: 14px 14px 14px 16px;
    overflow: hidden;
    border: 1px solid rgba(21, 77, 81, 0.2);
    border-radius: 18px;
    color: #172329;
    background:
            linear-gradient(112deg, rgba(229, 255, 248, 0.98) 0%, rgba(249, 252, 241, 0.98) 56%, rgba(255, 248, 209, 0.98) 100%);
    box-shadow: 0 22px 60px rgba(23, 51, 57, 0.2);
    backdrop-filter: blur(18px) saturate(1.12);
}

.global-ai-task[data-task-status="done"] {
    border-color: rgba(11, 133, 136, 0.34);
    box-shadow: 0 24px 68px rgba(10, 101, 105, 0.24);
}

.global-ai-task[data-task-status="failed"] {
    border-color: rgba(180, 77, 45, 0.28);
    background: linear-gradient(112deg, rgba(255, 245, 238, 0.98), rgba(255, 251, 229, 0.98));
}

.global-ai-task-progress {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    overflow: hidden;
    background: rgba(22, 61, 65, 0.08);
}

.global-ai-task-progress i {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(90deg, #12a8a8 0%, #7bd9b3 58%, #f2d75b 100%);
    box-shadow: 0 0 18px rgba(18, 168, 168, 0.34);
    transition: width 700ms ease;
}

.global-ai-task-icon,
.global-ai-task-thumb {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid rgba(19, 101, 104, 0.18);
    border-radius: 14px;
    color: #08777d;
    background: rgba(255, 255, 255, 0.76);
}

.global-ai-task-icon::before {
    width: 24px;
    height: 24px;
}

.global-ai-task[data-task-status="running"] .global-ai-task-icon::before {
    animation: global-ai-task-pulse 1.8s ease-in-out infinite;
}

.global-ai-task-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-ai-task-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.global-ai-task-copy > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #08777d;
    font-size: 11px;
    font-weight: 900;
}

.global-ai-task-copy > span b {
    padding: 2px 6px;
    border-radius: 999px;
    color: #4c470e;
    background: rgba(244, 217, 82, 0.42);
    font-size: 10px;
}

.global-ai-task-copy > strong {
    overflow: hidden;
    color: #172329;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-ai-task-copy > small {
    overflow: hidden;
    color: #627077;
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-ai-task-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.global-ai-task-actions :is(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(24, 66, 69, 0.14);
    border-radius: 12px;
    color: #243237;
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.global-ai-task-actions .global-ai-task-return {
    border-color: #162227;
    color: #ffffff;
    background: #162227;
}

.global-ai-task-actions .global-ai-task-community:is(:hover, :focus-visible) {
    border-color: rgba(8, 119, 125, 0.35);
    color: #076b70;
    background: #ffffff;
}

.global-ai-task-actions .global-ai-task-return:is(:hover, :focus-visible) {
    background: #08777d;
}

.global-ai-task-actions .global-ai-task-dismiss {
    width: 42px;
    padding: 0;
}

@keyframes global-ai-task-pulse {
    0%, 100% { transform: scale(0.88); opacity: 0.7; }
    50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .global-ai-task-progress i,
    .global-ai-task-icon::before {
        animation: none !important;
        transition: none !important;
    }
}

/* 20260715-mobile-focus-v106: mobile keeps one clear task per page. */
@media (max-width: 760px) {
    .shared-ai-mini-dock,
    .shared-ai-dock {
        display: none !important;
    }

    .global-ai-task {
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 10px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 9px;
        width: auto;
        min-height: 72px;
        padding: 11px 10px 10px;
        border-radius: 14px;
        box-shadow: 0 18px 44px rgba(23, 51, 57, 0.22);
    }

    html body[data-page="studio"] .global-ai-task {
        bottom: calc(152px + env(safe-area-inset-bottom));
    }

    .global-ai-task-icon,
    .global-ai-task-thumb {
        width: 42px;
        height: 42px;
        border-radius: 11px;
    }

    .global-ai-task-copy > strong {
        font-size: 14px;
    }

    .global-ai-task-copy > small {
        display: none;
    }

    .global-ai-task-actions {
        gap: 4px;
    }

    .global-ai-task-actions :is(a, button) {
        width: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        font-size: 0;
    }

    html body[data-page] .global-ai-task .global-ai-task-actions :is(a, button)[data-ui-icon]::before {
        content: "" !important;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        color: currentColor;
    }

    .global-ai-task-actions .global-ai-task-community {
        color: #08777d;
    }

    .global-ai-task-actions .global-ai-task-return {
        color: #ffffff;
    }

    .global-ai-task-actions .global-ai-task-dismiss {
        color: #53626a;
    }

    html body[data-page="home"] .vue-home-creation-grid .vue-home-creation-card:nth-child(n+3),
    html body[data-page="home"] .vue-home-starter-strip .vue-home-starter-card:nth-child(n+3),
    html body[data-page="home"] .vue-home-community-more,
    html body[data-page="gallery"] :is(
        .vue-gallery-light-start,
        .vue-gallery-boundary-strip,
        .vue-gallery-more,
        .vue-gallery-stats,
        .vue-gallery-pulse,
        .vue-gallery-mission,
        .vue-gallery-creator-radar,
        .vue-gallery-cocreate,
        .vue-gallery-ip-grid,
        .vue-gallery-feed
    ),
    html body[data-page="templates"] :is(
        .vue-template-command,
        .vue-template-boundary,
        .vue-templates-stats,
        .vue-template-pathfinder,
        .vue-template-starter,
        .vue-template-match,
        .vue-template-social,
        .vue-template-guide
    ),
    html body[data-page="characters"] :is(
        .vue-character-command,
        .vue-character-boundary,
        .vue-characters-stats,
        .vue-ownership-strip,
        .vue-light-start,
        .vue-character-insights
    ) {
        display: none !important;
    }

    html body[data-page="gallery"] .vue-gallery-chip-row.is-fanwork-ip,
    html body[data-page="gallery"] .vue-gallery-chip-row.is-reference {
        display: none !important;
    }

    html body[data-page="gallery"] .vue-gallery-workspace,
    html body[data-page="templates"] .vue-template-library,
    html body[data-page="characters"] .vue-character-library {
        margin-top: 18px !important;
    }

    html body[data-page="gallery"] .vue-gallery-discovery-head p,
    html body[data-page="templates"] .vue-template-library-head p,
    html body[data-page="characters"] .vue-character-library-head p {
        display: none !important;
    }

    html body[data-page="gallery"] .vue-gallery-work-grid,
    html body[data-page="templates"] .vue-template-grid,
    html body[data-page="characters"] .vue-character-grid {
        gap: 14px !important;
    }

    html body[data-page="gallery"] .vue-gallery-work-card p,
    html body[data-page="templates"] .vue-template-card p,
    html body[data-page="characters"] .vue-character-card > .card-body > p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}