/* Non-studio experience surfaces. Every rule stays behind a page or Vue-root boundary. */

:root {
    --experience-width: 1180px;
    --experience-gutter: clamp(16px, 3vw, 40px);
    --experience-section-gap: clamp(42px, 6vw, 76px);
    --experience-control-height: 44px;
    --experience-radius: 18px;
    --experience-radius-small: 12px;
    --experience-focus: 0 0 0 3px rgba(184, 84, 72, 0.22);
    --experience-transition: 160ms ease;
}

/* Unfinished studio draft handoff: one clear choice before a new route can overwrite local work. */
body[data-page="studio"] > .mobile-sheet-backdrop .mobile-sheet-panel:has(.studio-draft-conflict) {
    width: min(600px, 100%);
}

.studio-draft-conflict {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px 18px;
}

.studio-draft-conflict-mark {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(200, 83, 57, 0.22);
    border-radius: 14px;
    color: #b84d36;
    background: #fff1eb;
}

.studio-draft-conflict-copy {
    align-self: center;
}

.studio-draft-conflict-copy h3 {
    margin: 0 0 5px;
    color: #2f2421;
    font-size: 24px;
    line-height: 1.25;
}

.studio-draft-conflict-copy p,
.studio-draft-conflict-request p,
.studio-draft-conflict-warning {
    margin: 0;
    color: #74615a;
    line-height: 1.65;
}

.studio-draft-conflict-existing,
.studio-draft-conflict-request,
.studio-draft-conflict-warning {
    grid-column: 1 / -1;
}

.studio-draft-conflict-existing {
    display: flex;
    min-height: 82px;
    padding: 15px 17px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(112, 76, 66, 0.14);
    border-left: 4px solid #cb5a42;
    border-radius: 12px;
    background: #fffdfb;
}

.studio-draft-conflict-existing > div {
    display: grid;
    gap: 3px;
}

.studio-draft-conflict-existing span,
.studio-draft-conflict-request span {
    color: #a54b38;
    font-size: 12px;
    font-weight: 800;
}

.studio-draft-conflict-existing strong {
    color: #2f2421;
    font-size: 20px;
    line-height: 1.3;
}

.studio-draft-conflict-existing small {
    color: #89746c;
    white-space: nowrap;
}

.studio-draft-conflict-request {
    display: grid;
    padding: 13px 16px;
    gap: 4px;
    border-radius: 10px;
    background: #f8f1ed;
}

.studio-draft-conflict-warning {
    padding-left: 18px;
    position: relative;
    font-size: 13px;
}

.studio-draft-conflict-warning::before {
    position: absolute;
    left: 3px;
    content: "!";
    color: #b84d36;
    font-weight: 900;
}

.studio-draft-conflict-discard {
    color: #9f4432 !important;
}

@media (max-width: 600px) {
    .studio-draft-conflict {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
    }

    .studio-draft-conflict-mark {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .studio-draft-conflict-copy h3 {
        font-size: 20px;
    }

    .studio-draft-conflict-existing {
        display: grid;
        min-height: 0;
        padding: 13px 14px;
        gap: 5px;
    }

    .studio-draft-conflict-existing small {
        white-space: normal;
    }

    body[data-page="studio"] > .mobile-sheet-backdrop .mobile-sheet-panel:has(.studio-draft-conflict) .mobile-sheet-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Empty home submissions explain the missing step and remain usable on touch screens. */
html body[data-page="home"] #homeVueApp .vue-home-brief-cue {
    display: flex !important;
}

html body[data-page="home"] #homeVueApp .vue-home-brief-cue[data-cue-state="invalid"] {
    color: #9c3f2d !important;
    border: 1px solid rgba(194, 82, 57, 0.24) !important;
    background: linear-gradient(135deg, rgba(255, 239, 232, 0.96), rgba(255, 248, 241, 0.92)) !important;
}

html body[data-page="home"] #homeVueApp .vue-home-brief textarea[aria-invalid="true"] {
    border-color: rgba(194, 82, 57, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(194, 82, 57, 0.11) !important;
}

html body[data-page="home"] #homeVueApp .vue-home-brief-actions .primary-link[data-brief-ready="false"] {
    cursor: pointer !important;
    filter: saturate(0.82) brightness(1.03) !important;
}

@media (max-width: 720px) {
    html body[data-page="home"] #homeVueApp .vue-home-brief-cue {
        order: 2 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 9px 11px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    html body[data-page="home"] #homeVueApp .vue-home-brief-actions {
        order: 3 !important;
    }
}

/* V2.5 final mobile action layer: one quiet, thumb-reachable control surface per context page. */
.mobile-context-action-bar {
    display: none;
}

@media (max-width: 760px) {
    :root {
        --animaker-mobile-context-action-height: 72px;
    }

    html body[data-page]:is(
        [data-page="work"],
        [data-page="user"],
        [data-page="ip"],
        [data-page="export"]
    ).animaker-mobile-context-page {
        padding-bottom: calc(var(--animaker-mobile-context-action-height) + env(safe-area-inset-bottom) + 18px) !important;
    }

    html body[data-page] .mobile-context-action-bar {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        z-index: var(--animaker-mobile-layer-tabs, 1300) !important;
        display: grid !important;
        min-height: calc(var(--animaker-mobile-context-action-height) + env(safe-area-inset-bottom)) !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
        border-top: 1px solid rgba(94, 62, 53, 0.13) !important;
        background: rgba(255, 252, 249, 0.96) !important;
        box-shadow: 0 -12px 30px rgba(67, 42, 35, 0.1) !important;
        backdrop-filter: blur(18px) saturate(1.04) !important;
    }

    html body[data-page] :is(.mobile-work-actions, .mobile-user-actions) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body[data-page] :is(.mobile-ip-actions, .mobile-export-actions) {
        grid-template-columns: minmax(0, 1.55fr) minmax(96px, 0.75fr) !important;
    }

    html body[data-page] .mobile-context-action-bar > :is(a, button) {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        overflow: hidden !important;
        border: 1px solid rgba(104, 70, 60, 0.17) !important;
        border-radius: 12px !important;
        color: #493934 !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body[data-page] .mobile-context-action-bar > :is(a, button)::before {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }

    html body[data-page] .mobile-context-action-bar > :is(.is-primary, .is-active) {
        border-color: #c95b43 !important;
        color: #fffaf7 !important;
        background: #c95b43 !important;
    }

    html body[data-page]:is(
        [data-page="work"],
        [data-page="user"],
        [data-page="ip"],
        [data-page="export"]
    ) .global-ai-task {
        bottom: calc(var(--animaker-mobile-context-action-height) + 10px + env(safe-area-inset-bottom)) !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-actions,
    html body[data-page="user"] #userProfileVueApp .vue-user-hero .vue-user-actions,
    html body[data-page="ip"] #ipDetailVueApp .vue-ip-actions,
    html body[data-page="export"] #exportVueApp .vue-export-actions {
        display: none !important;
    }

    html body[data-page] .mobile-sheet-panel :is(input, select, textarea) {
        font-size: 16px !important;
    }
}

/* Publication result and owned-work controls keep community and archive state explicit. */
html body[data-page="studio"] .vue-publish-success-dialog {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px 20px;
    align-items: center;
}

html body[data-page="studio"] .vue-publish-success-dialog.has-cover {
    grid-template-columns: 132px minmax(0, 1fr);
}

html body[data-page="studio"] .vue-publish-success-dialog > img {
    grid-row: 1 / span 2;
    width: 132px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 8px;
    background: #f3e7e1;
}

html body[data-page="studio"] .vue-publish-success-copy {
    display: grid;
    gap: 6px;
}

html body[data-page="studio"] .vue-publish-success-copy > span {
    color: #b34d3a;
    font-size: 13px;
    font-weight: 800;
}

html body[data-page="studio"] .vue-publish-success-copy h3,
html body[data-page="studio"] .vue-publish-success-copy p {
    margin: 0;
}

html body[data-page="studio"] .vue-publish-success-copy h3 {
    color: #2e2421;
    font-size: 25px;
    line-height: 1.2;
}

html body[data-page="studio"] .vue-publish-success-copy p {
    color: #74615a;
    font-size: 14px;
    line-height: 1.6;
}

html body[data-page="studio"] .vue-publish-state-badges,
html body[data-page="me"] .vue-me-work-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html body[data-page="studio"] .vue-publish-state-badges > strong,
html body[data-page="me"] .vue-me-work-status > strong {
    display: inline-flex;
    min-height: 34px;
    padding: 7px 11px;
    align-items: center;
    gap: 6px;
    border: 1px solid #dec8bf;
    border-radius: 8px;
    color: #69564f;
    background: #fffaf7;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
}

html body[data-page="studio"] .vue-publish-state-badges > strong[data-state="public"],
html body[data-page="me"] .vue-me-work-status > strong[data-state="public"] {
    border-color: #d9876f;
    color: #8f382b;
    background: linear-gradient(135deg, #fff5ef, #f8e3d8);
}

html body[data-page="studio"] .vue-publish-success-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

html body[data-page="studio"] .vue-publish-success-actions > :is(a, button) {
    min-height: 48px;
    justify-content: center;
}

html body[data-page="studio"] .vue-publish-completion-main .vue-publish-state-badges {
    margin-top: 12px;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-item {
    display: grid;
    min-width: 0;
    padding: 14px;
    gap: 12px;
    border: 1px solid rgba(112, 76, 66, 0.18);
    border-radius: 8px;
    background: #fffdfb;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-item.is-focused-work {
    border-color: #c95a43;
    box-shadow: 0 0 0 3px rgba(201, 90, 67, 0.13), 0 16px 36px rgba(84, 48, 39, 0.1);
}

html body[data-page="me"] #meVueDashboard .vue-me-work-main {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-main > img {
    width: 92px;
    height: 112px;
    object-fit: cover;
    border-radius: 8px;
    background: #f2e7e1;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-main > div {
    display: grid;
    min-width: 0;
    gap: 5px;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-main :is(strong, p, small) {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-main > div > strong {
    color: #302522;
    font-size: 18px;
    line-height: 1.25;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-main p {
    display: -webkit-box;
    overflow: hidden;
    color: #76635c;
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-main small {
    color: #9a776c;
    font-size: 12px;
    line-height: 1.4;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-actions > :is(a, button) {
    display: inline-flex;
    min-height: 44px;
    padding: 9px 12px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dfcbc2;
    border-radius: 8px;
    color: #4d3d38;
    background: #fffaf7;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-actions > button[data-channel="community"]:not(:disabled) {
    border-color: #c95a43;
    color: #fff;
    background: #c95a43;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-actions > button[data-channel="archive"]:not(:disabled) {
    border-color: #c97a66;
    color: #8f3e31;
    background: linear-gradient(135deg, #fffaf6, #f8e8df);
}

html body[data-page="me"] #meVueDashboard .vue-me-work-actions > .is-delete:not(:disabled) {
    border-color: transparent;
    color: #8f4b40;
    background: #f7efeb;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-delete-feedback {
    margin: 12px 0 0;
    color: #7b584f;
    font-size: 13px;
    font-weight: 750;
}

html body[data-page="me"] #meVueDashboard .vue-me-work-feedback {
    margin: 0;
    color: #8d4537;
    font-size: 12px;
    line-height: 1.45;
}

/* Keep asynchronous AI progress isolated from the studio document compositor. */
html body[data-page] .global-ai-task {
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: layout paint style;
    isolation: isolate;
}

html body[data-page] .global-ai-task-progress i,
html body[data-page] .global-ai-task[data-task-status="running"] .global-ai-task-icon::before,
html body[data-page="studio"] .vue-image-primary-action.is-busy::before {
    animation: none !important;
    transition: none !important;
}

@media (max-width: 760px) {
    html body[data-page="studio"] .vue-publish-success-dialog {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    html body[data-page="studio"] .vue-publish-success-dialog.has-cover {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    html body[data-page="studio"] .vue-publish-success-dialog > img {
        width: 88px;
        grid-row: auto;
    }

    html body[data-page="studio"] .vue-publish-success-copy h3 {
        font-size: 20px;
    }

    html body[data-page="studio"] .vue-publish-state-badges,
    html body[data-page="studio"] .vue-publish-success-actions {
        grid-column: 1 / -1;
    }

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

    html body[data-page="me"] #meVueDashboard .vue-me-work-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-work-item {
        padding: 12px;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-work-main {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    html body[data-page="me"] #meVueDashboard .vue-me-work-main > img {
        width: 78px;
        height: 96px;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-work-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 360px) {
    html body[data-page] .mobile-context-action-bar > :is(a, button) {
        padding-inline: 7px !important;
        gap: 5px !important;
        font-size: 12px !important;
    }
}

html body[data-page]:not([data-page="studio"]) main {
    min-height: calc(100svh - 70px);
}

html body[data-page]:not([data-page="studio"]) main > [id$="VueApp"]:empty,
html body[data-page]:not([data-page="studio"]) main > [id$="App"]:empty {
    display: block;
    width: min(var(--experience-width), calc(100% - (var(--experience-gutter) * 2)));
    min-height: min(620px, calc(100svh - 110px));
    margin: 28px auto;
    border-radius: var(--experience-radius);
    background:
        linear-gradient(100deg, rgba(255, 250, 247, 0.92) 20%, rgba(244, 226, 221, 0.72) 36%, rgba(255, 250, 247, 0.92) 52%) 0 0 / 220% 100%;
    animation: experience-mount-pulse 1.6s ease-in-out infinite;
}

.action-surface {
    box-sizing: border-box;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.action-surface-link,
.action-surface-button,
.action-surface-primary {
    min-height: var(--experience-control-height);
    cursor: pointer;
}

.action-surface-link,
.action-surface-button {
    display: grid;
    width: 100%;
    border: 1px solid var(--archive-line);
    border-radius: var(--experience-radius-small);
    background: var(--archive-surface);
    text-align: left;
    font: inherit;
    transition:
        border-color var(--experience-transition),
        box-shadow var(--experience-transition),
        transform var(--experience-transition),
        background-color var(--experience-transition);
}

.action-surface-entity {
    position: relative;
    display: grid;
    min-width: 0;
}

.action-surface-primary {
    display: grid;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.action-surface-primary::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
}

.action-surface-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.action-surface-actions :is(a, button),
html body[data-page]:not([data-page="studio"]) main :is(a, button, summary, input, select, textarea) {
    min-height: var(--experience-control-height);
}

.action-surface.is-interactive:hover,
.action-surface-link:hover,
.action-surface-button:hover {
    border-color: rgba(184, 84, 72, 0.34);
    box-shadow: 0 14px 32px rgba(78, 55, 47, 0.1);
    transform: translateY(-1px);
}

.action-surface :is(a, button):focus-visible,
.action-surface-link:focus-visible,
.action-surface-button:focus-visible,
html body[data-page]:not([data-page="studio"]) main :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 0;
    box-shadow: var(--experience-focus) !important;
}

.action-surface-static,
.action-surface.is-static {
    cursor: default;
    transform: none !important;
}

.action-surface.is-disabled {
    cursor: not-allowed;
    opacity: 0.56;
    transform: none !important;
}

@keyframes experience-mount-pulse {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    html body[data-page]:not([data-page="studio"]) main > [id$="VueApp"]:empty,
    html body[data-page]:not([data-page="studio"]) main > [id$="App"]:empty {
        animation: none;
    }

    .action-surface,
    .action-surface-link,
    .action-surface-button {
        transition: none !important;
    }
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery {
    display: flex !important;
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-hero {
    order: 1;
    display: grid !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 0 20px !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) !important;
    gap: 28px !important;
    align-items: center !important;
    border: 0 !important;
    border-bottom: 1px solid var(--archive-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-copy {
    width: auto !important;
    max-width: 680px !important;
    padding: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-copy > h1 {
    max-width: 14ch !important;
    margin: 8px 0 12px !important;
    font-size: 40px !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-copy > p:not(.eyebrow) {
    max-width: 46em !important;
    margin: 0 !important;
    color: var(--archive-muted) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-actions {
    display: flex !important;
    margin: 18px 0 0 !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-feature {
    width: 100% !important;
    min-height: 0 !important;
    height: 190px !important;
    margin: 0 !important;
    border: 1px solid rgba(83, 62, 55, 0.16) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 42px rgba(78, 55, 47, 0.14) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-feature > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart {
    max-width: none !important;
    margin: 16px 0 0 !important;
    border: 1px solid var(--archive-line) !important;
    border-radius: 14px !important;
    background: rgba(255, 252, 249, 0.78) !important;
    overflow: hidden !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart > summary {
    display: flex !important;
    min-height: 62px !important;
    padding: 12px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    cursor: pointer !important;
    list-style: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart > summary::-webkit-details-marker,
html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more > summary::-webkit-details-marker {
    display: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart > summary > div {
    display: grid !important;
    gap: 2px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart > summary strong {
    color: var(--archive-ink) !important;
    font-size: 15px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart > summary small {
    color: var(--archive-muted) !important;
    line-height: 1.45 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart > summary > span {
    color: var(--archive-coral-deep) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart[open] > summary {
    border-bottom: 1px solid var(--archive-line) !important;
    background: var(--archive-coral-wash) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart[open] > summary > span {
    font-size: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart[open] > summary > span::after {
    /* @copy-context: Expanded-state action label in the gallery quick-start disclosure; intent: navigation, cancellation, or recovery. */
    content: "收起";
    font-size: 13px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-light-start {
    margin: 0 !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 253, 251, 0.94) !important;
    box-shadow: none !important;
}

html body[data-page="gallery"] #galleryVueApp > .vue-gallery > .vue-gallery-source-notice {
    order: 1;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-workspace {
    order: 2;
    margin: 0 !important;
    padding: 22px 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-head {
    display: grid !important;
    margin-bottom: 10px !important;
    grid-template-columns: minmax(260px, 0.8fr) minmax(430px, 1.2fr) !important;
    gap: 18px !important;
    align-items: end !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-head h2 {
    margin: 4px 0 0 !important;
    font-size: 28px !important;
    letter-spacing: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-head p:last-child {
    margin: 4px 0 0 !important;
    line-height: 1.45 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 150px auto !important;
    gap: 8px !important;
    align-items: end !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools label {
    display: grid !important;
    gap: 4px !important;
    color: var(--archive-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools :is(input, select) {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid var(--archive-line) !important;
    border-radius: 12px !important;
    background: rgba(255, 253, 251, 0.9) !important;
    color: var(--archive-ink) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools .secondary-btn {
    min-height: 42px !important;
    padding: 0 14px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-chip-row.is-category {
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid var(--archive-line) !important;
    border-radius: 14px !important;
    background: rgba(255, 252, 249, 0.82) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more {
    margin-top: 10px !important;
    border: 1px solid var(--archive-line) !important;
    border-radius: 14px !important;
    background: rgba(255, 252, 249, 0.64) !important;
    overflow: hidden !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more > summary {
    display: flex !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    cursor: pointer !important;
    list-style: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more > summary span {
    color: var(--archive-ink) !important;
    font-weight: 800 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more > summary small {
    color: var(--archive-muted) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more[open] > summary {
    border-bottom: 1px solid var(--archive-line) !important;
    background: var(--archive-coral-wash) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more-body {
    display: grid !important;
    padding: 10px !important;
    gap: 8px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more-body :is(.vue-gallery-chip-row, .vue-gallery-sort-row) {
    margin: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-more {
    order: 3;
    margin: 24px 0 56px !important;
}

@media (max-width: 760px) {
    html body[data-page="studio"].studio-wizard-ready > section.shared-ai-mini-dock {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready.studio-step-publish {
        padding-bottom: calc(var(--mobile-studio-nav) + 28px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(var(--mobile-studio-nav) + 28px + env(safe-area-inset-bottom)) !important;
    }

    html body[data-page="studio"].studio-wizard-ready.studio-step-publish .designer-form.studio-flow > .studio-wizard-nav {
        display: none !important;
    }

    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-focus-flow.studio-wizard-ready > main > .vue-mobile-studio-shell {
        position: fixed !important;
        inset: var(--mobile-studio-topbar) 0 auto 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery {
        width: min(100% - 24px, 1180px) !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-hero {
        padding: 18px 0 16px !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-copy > h1 {
        max-width: 12ch !important;
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-feature {
        height: 188px !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-quickstart > summary {
        align-items: flex-start !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-head {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-head h2 {
        font-size: 25px !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 112px auto !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools label {
        font-size: 0 !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools :is(input, select) {
        font-size: 14px !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-chip-row.is-category {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-chip-row.is-category > span {
        grid-column: 1 / -1 !important;
    }

}

/* V2.2 discovery surfaces: one interaction language, three different content grammars. */
html body[data-page="home"] #homeVueApp .vue-home-work-card.action-surface-entity,
html body[data-page="home"] #homeVueApp .vue-home-ip-card.action-surface-link,
html body[data-page="home"] #homeVueApp .vue-home-feed-card.action-surface-link,
html body[data-page="characters"] #charactersVueApp .vue-character-card.action-surface-entity,
html body[data-page="templates"] #templatesVueApp .vue-template-card.action-surface-link {
    overflow: hidden !important;
    border: 1px solid rgba(105, 73, 63, 0.18) !important;
    border-radius: 16px !important;
    background: #fffaf7 !important;
    box-shadow: 0 10px 26px rgba(78, 55, 47, 0.07) !important;
}

html body[data-page="home"] #homeVueApp :is(.vue-home-work-card, .vue-home-ip-card, .vue-home-feed-card):is(:hover, :focus-within),
html body[data-page="characters"] #charactersVueApp .vue-character-card:is(:hover, :focus-within),
html body[data-page="templates"] #templatesVueApp .vue-template-card:is(:hover, :focus-visible) {
    border-color: rgba(184, 84, 72, 0.42) !important;
    box-shadow: 0 18px 38px rgba(78, 55, 47, 0.12) !important;
    transform: translateY(-2px) !important;
}

html body[data-page="home"] #homeVueApp .vue-home-work-card > .action-surface-primary {
    display: block !important;
}

html body[data-page="home"] #homeVueApp .vue-home-work-card > .action-surface-primary > img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
}

html body[data-page="home"] #homeVueApp .vue-home-work-body {
    padding: 16px 16px 12px !important;
}

html body[data-page="home"] #homeVueApp .vue-home-work-body h3 {
    margin: 10px 0 8px !important;
    font-size: 21px !important;
    line-height: 1.24 !important;
}

html body[data-page="home"] #homeVueApp .vue-home-work-body > p {
    min-height: 3.2em !important;
    margin: 8px 0 12px !important;
    color: #75655f !important;
    line-height: 1.6 !important;
}

html body[data-page="home"] #homeVueApp .vue-home-work-card > .action-surface-actions {
    min-height: 60px !important;
    padding: 10px 14px !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(105, 73, 63, 0.13) !important;
    background: rgba(247, 236, 231, 0.62) !important;
}

html body[data-page="home"] #homeVueApp .vue-home-work-card .creator-line {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 8px !important;
    color: #4d3f3a !important;
    text-decoration: none !important;
}

html body[data-page="home"] #homeVueApp .vue-home-work-card .creator-line img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

html body[data-page="home"] #homeVueApp :is(.vue-home-ip-card, .vue-home-feed-card) {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    align-items: stretch !important;
}

html body[data-page="home"] #homeVueApp :is(.vue-home-ip-card, .vue-home-feed-card) > img {
    width: 100% !important;
    height: 100% !important;
    min-height: 156px !important;
    object-fit: cover !important;
}

html body[data-page="home"] #homeVueApp :is(.vue-home-ip-card, .vue-home-feed-card) > div {
    min-width: 0 !important;
    padding: 16px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-card {
    position: relative !important;
    min-height: 190px !important;
    padding: 18px !important;
    grid-template-rows: auto auto 1fr auto !important;
    gap: 8px !important;
    border: 1px solid rgba(105, 73, 63, 0.17) !important;
    border-radius: 15px !important;
    background: #fffaf7 !important;
    color: #241e1c !important;
    box-shadow: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-card:nth-child(2) {
    background: linear-gradient(150deg, #fffaf7 0%, #f6e9e2 100%) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-card:nth-child(3) {
    background: linear-gradient(150deg, #fffaf7 0%, #f4ede4 100%) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-card:nth-child(4) {
    background: linear-gradient(150deg, #fffaf7 0%, #f2e3dd 100%) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-card > span {
    color: #b35446 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-card > strong {
    font-size: 19px !important;
    line-height: 1.28 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-card > p {
    margin: 0 !important;
    color: #796963 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-cta {
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
    color: #3b2e2a !important;
    font-size: 14px !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card > .action-surface-primary {
    display: block !important;
    flex: 1 1 auto !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .oc-archive-index {
    position: absolute !important;
    z-index: 2 !important;
    top: 14px !important;
    left: 14px !important;
    display: flex !important;
    min-height: 34px !important;
    padding: 6px 9px !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 9px !important;
    background: rgba(30, 24, 22, 0.78) !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .oc-archive-index :is(span, strong) {
    color: inherit !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .oc-archive-cover {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    overflow: hidden !important;
    background: #efe4de !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .oc-archive-cover > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-body {
    padding: 16px !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-body h3 {
    margin: 10px 0 8px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card > .action-surface-actions {
    padding: 12px 14px 14px !important;
    border-top: 1px solid rgba(105, 73, 63, 0.13) !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-foot {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-foot > * {
    flex: 1 1 112px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-card {
    position: relative !important;
    display: grid !important;
    grid-template-rows: 126px minmax(0, 1fr) !important;
    min-height: 330px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: #c8604b;
}

html body[data-page="templates"] #templatesVueApp .vue-template-card > img {
    display: block !important;
    width: 100% !important;
    height: 126px !important;
    object-fit: cover !important;
    filter: saturate(0.72) contrast(0.96) !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-card > .card-body {
    display: flex !important;
    min-width: 0 !important;
    padding: 18px 18px 16px 22px !important;
    flex-direction: column !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-card h3 {
    margin: 10px 0 8px !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-card p {
    margin: 0 !important;
    color: #75655f !important;
    line-height: 1.58 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-card .social-row {
    display: grid !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px 12px !important;
    align-items: center !important;
    border-top: 1px solid rgba(105, 73, 63, 0.13) !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-card .vue-card-quickstart {
    grid-column: 1 / -1 !important;
    display: flex !important;
    min-height: 44px !important;
    align-items: center !important;
    color: #a74738 !important;
}

@media (max-width: 980px) {
    html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-grid,
    html body[data-page="characters"] #charactersVueApp .vue-character-grid,
    html body[data-page="templates"] #templatesVueApp .vue-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-grid,
    html body[data-page="characters"] #charactersVueApp .vue-character-grid,
    html body[data-page="templates"] #templatesVueApp .vue-template-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-mission-card {
        min-height: 156px !important;
    }

    html body[data-page="home"] #homeVueApp :is(.vue-home-ip-card, .vue-home-feed-card) {
        grid-template-columns: 104px minmax(0, 1fr) !important;
    }

    html body[data-page="home"] #homeVueApp :is(.vue-home-ip-card, .vue-home-feed-card) > img {
        min-height: 132px !important;
    }

    html body[data-page="home"] #homeVueApp .vue-home-work-card > .action-surface-actions {
        align-items: stretch !important;
    }
}

/* V2.5 mobile native shell: contextual back, root-only tabs, sheets, and keyboard-safe actions. */
.mobile-app-bar {
    display: none;
}

.mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    padding: 24px;
    place-items: center;
    background: rgba(43, 31, 29, 0.46);
    backdrop-filter: blur(5px);
}

.mobile-sheet-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(540px, 100%);
    max-height: min(760px, calc(100dvh - 48px));
    overflow: hidden;
    border: 1px solid rgba(112, 76, 66, 0.16);
    border-radius: 16px;
    color: #342925;
    background: #fffaf7;
    box-shadow: 0 28px 80px rgba(67, 42, 35, 0.24);
    outline: none;
}

.mobile-sheet-handle {
    display: none;
}

.mobile-sheet-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 64px;
    padding: 10px 12px 10px 20px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(112, 76, 66, 0.12);
}

.mobile-sheet-head h2 {
    margin: 0;
    color: #2f2421;
    font-size: 21px;
    line-height: 1.25;
}

.mobile-sheet-head button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #6f5c55;
    background: #f6ece7;
}

.mobile-sheet-body {
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
}

.mobile-sheet-panel .mobile-comment-form {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-sheet-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 20px;
    gap: 10px;
    border-top: 1px solid rgba(112, 76, 66, 0.12);
}

.vue-gallery-mobile-filter-trigger {
    display: none !important;
}

.mobile-filter-form {
    display: grid;
    gap: 14px;
}

.mobile-filter-form > label {
    display: grid;
    gap: 7px;
    color: #6f5c55;
    font-size: 13px;
    font-weight: 800;
}

.mobile-filter-form :is(input, select) {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid rgba(112, 76, 66, 0.18);
    border-radius: 12px;
    color: #342925;
    background: #fff;
}

@media (max-width: 760px) {
    :root {
        --animaker-mobile-header-height: 58px;
        --animaker-mobile-layer-header: 1100;
        --animaker-mobile-layer-tabs: 1300;
        --animaker-mobile-layer-task: 1400;
        --animaker-mobile-layer-overlay: 1600;
        --animaker-mobile-layer-toast: 1700;
    }

    html body[data-page].animaker-mobile-context-page {
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }

    html body[data-page].animaker-mobile-context-page > header.topbar {
        display: block !important;
        min-height: calc(var(--animaker-mobile-header-height) + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) 0 0 !important;
    }

    html body[data-page].animaker-mobile-context-page > header.topbar > .brand {
        display: none !important;
    }

    html body[data-page].animaker-mobile-context-page > header.topbar > #sharedNavApp.shared-nav-root,
    html body[data-page].animaker-mobile-context-page > header.topbar > #sharedNavApp .shared-nav {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
    }

    html body[data-page] .mobile-app-bar {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        width: 100% !important;
        min-height: var(--animaker-mobile-header-height) !important;
        padding: 7px 10px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    html body[data-page] .mobile-app-bar > strong {
        overflow: hidden !important;
        color: #342925 !important;
        font-size: 17px !important;
        font-weight: 850 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body[data-page] .mobile-app-bar-back {
        display: grid !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        place-items: center !important;
        border: 1px solid rgba(112, 76, 66, 0.14) !important;
        border-radius: 12px !important;
        color: #5d4a44 !important;
        background: rgba(255, 255, 255, 0.72) !important;
        box-shadow: none !important;
    }

    html body[data-page] .mobile-app-bar-back::before {
        width: 19px !important;
        height: 19px !important;
    }

    html body[data-page] .shared-mobile-nav-badge {
        position: absolute !important;
        top: 3px !important;
        left: calc(50% + 8px) !important;
        display: grid !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 4px !important;
        place-items: center !important;
        border: 2px solid #fffaf7 !important;
        border-radius: 999px !important;
        color: #fff !important;
        background: #bb4e3a !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    html body[data-page].animaker-mobile-root-page .global-ai-task {
        bottom: calc(var(--animaker-mobile-nav-height) + 10px + env(safe-area-inset-bottom)) !important;
    }

    html body[data-page].animaker-mobile-context-page .global-ai-task {
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    html body[data-page] .global-ai-task {
        z-index: var(--animaker-mobile-layer-task) !important;
        animation: none !important;
    }

    html body[data-page] .global-ai-task[data-task-status="running"] :is(.global-ai-task-icon, .global-ai-task-progress i) {
        animation: none !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-mobile-filter-trigger {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 46px !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools > :is(label, button):not(.vue-gallery-mobile-filter-trigger),
    html body[data-page="gallery"] #galleryVueApp .vue-gallery-filter-more {
        display: none !important;
    }

    html body[data-page] main :is(input, select, textarea) {
        font-size: 16px !important;
    }

    html body[data-page] :is(a, button, summary, input, select, textarea) {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    @media (hover: none) and (pointer: coarse) {
        html body[data-page] :is(a, button, summary):not(:disabled):active {
            transform: scale(0.985) !important;
            transition-duration: 70ms !important;
        }

        html body[data-page] :is(a, button, summary):hover {
            transform: none !important;
        }
    }

    html body.animaker-mobile-sheet-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .mobile-sheet-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: var(--animaker-mobile-layer-overlay) !important;
        display: flex !important;
        padding-top: max(56px, 10dvh) !important;
        align-items: flex-end !important;
        background: rgba(43, 31, 29, 0.46) !important;
        backdrop-filter: blur(5px) !important;
        overscroll-behavior: contain !important;
    }

    .mobile-sheet-panel {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        width: 100% !important;
        max-height: min(88dvh, 760px) !important;
        overflow: hidden !important;
        border: 1px solid rgba(112, 76, 66, 0.16) !important;
        border-bottom: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        color: #342925 !important;
        background: #fffaf7 !important;
        box-shadow: 0 -24px 70px rgba(67, 42, 35, 0.22) !important;
        outline: none !important;
    }

    .mobile-sheet-handle {
        width: 38px !important;
        height: 4px !important;
        margin: 8px auto 4px !important;
        border-radius: 999px !important;
        background: rgba(96, 67, 58, 0.24) !important;
    }

    .mobile-sheet-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        min-height: 56px !important;
        padding: 4px 12px 8px 16px !important;
        align-items: center !important;
        gap: 10px !important;
        border-bottom: 1px solid rgba(112, 76, 66, 0.12) !important;
    }

    .mobile-sheet-head h2 {
        margin: 0 !important;
        color: #2f2421 !important;
        font-size: 19px !important;
        line-height: 1.25 !important;
    }

    .mobile-sheet-head button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        color: #6f5c55 !important;
        background: #f6ece7 !important;
    }

    .mobile-sheet-body {
        min-height: 0 !important;
        padding: 16px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .mobile-sheet-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
        border-top: 1px solid rgba(112, 76, 66, 0.12) !important;
        background: rgba(255, 250, 247, 0.98) !important;
    }

    .mobile-sheet-actions > :is(a, button) {
        width: 100% !important;
        min-height: 48px !important;
    }

    .mobile-sheet-enter-active,
    .mobile-sheet-leave-active {
        transition: opacity 170ms ease !important;
    }

    .mobile-sheet-enter-active .mobile-sheet-panel,
    .mobile-sheet-leave-active .mobile-sheet-panel {
        transition: transform 190ms cubic-bezier(0.2, 0.75, 0.24, 1) !important;
    }

    .mobile-sheet-enter-from,
    .mobile-sheet-leave-to {
        opacity: 0 !important;
    }

    .mobile-sheet-enter-from .mobile-sheet-panel,
    .mobile-sheet-leave-to .mobile-sheet-panel {
        transform: translateY(24px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-sheet-enter-active,
    .mobile-sheet-leave-active,
    .mobile-sheet-enter-active .mobile-sheet-panel,
    .mobile-sheet-leave-active .mobile-sheet-panel {
        transition: none !important;
    }
}

/* V148: creator assets, route, and milestones become one readable operating surface. */
html body[data-page="me"] #meVueDashboard .vue-me-pipeline,
html body[data-page="me"] #meVueDashboard .vue-me-achievement {
    margin: 0 !important;
    padding: clamp(22px, 3vw, 34px) !important;
    border: 1px solid rgba(111, 75, 63, 0.18) !important;
    border-radius: 16px !important;
    background: rgba(255, 253, 251, 0.94) !important;
    box-shadow: 0 16px 42px rgba(78, 48, 38, 0.07) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 20px !important;
    margin-bottom: 22px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(111, 75, 63, 0.14) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-head h2 {
    margin: 5px 0 4px !important;
    color: #2d211d !important;
    font-size: clamp(30px, 4vw, 52px) !important;
    line-height: 1.06 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-head > div > p:last-child {
    max-width: 700px !important;
    margin: 0 !important;
    color: #796c66 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-top: 3px solid rgba(188, 86, 63, 0.24) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid > article {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(42px, auto) 1fr auto !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 224px !important;
    padding: 20px clamp(16px, 2vw, 24px) 16px !important;
    border: 0 !important;
    border-right: 1px solid rgba(111, 75, 63, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid > article:last-child {
    border-right: 0 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid > article::before {
    content: "" !important;
    position: absolute !important;
    top: -3px !important;
    right: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: #bd573f !important;
    opacity: 0.8 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid > article.is-clear::before {
    background: #cfc4bf !important;
    opacity: 0.7 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-lane-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-lane-head span {
    color: #765e55 !important;
    font: 800 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-lane-head strong {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #813a2b !important;
    background: #f8e8e3 !important;
    font-size: 13px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid h3 {
    margin: 0 !important;
    color: #2d211d !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid > article > p:not(.vue-me-pipeline-empty) {
    margin: 0 !important;
    color: #7b6e68 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-items {
    display: grid !important;
    gap: 6px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-items > a {
    display: grid !important;
    gap: 2px !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(111, 75, 63, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-items > a:nth-child(n+2),
html body[data-page="me"] #meVueDashboard .vue-me-pipeline-empty {
    display: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline-action {
    align-self: end !important;
    justify-self: start !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    border: 0 !important;
    color: #b34e38 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 2.22fr) !important;
    gap: clamp(22px, 4vw, 48px) !important;
    align-items: start !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-copy {
    display: grid !important;
    gap: 10px !important;
    align-content: start !important;
    padding-right: 24px !important;
    border-right: 1px solid rgba(111, 75, 63, 0.14) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-copy h2 {
    margin: 4px 0 0 !important;
    color: #2d211d !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.08 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-copy > p:not(.eyebrow) {
    margin: 0 !important;
    color: #796c66 !important;
    line-height: 1.6 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-width: 0 !important;
    border-top: 1px solid rgba(111, 75, 63, 0.16) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid > article {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 182px !important;
    padding: 18px 14px 12px !important;
    border: 0 !important;
    border-right: 1px solid rgba(111, 75, 63, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid > article:last-child {
    border-right: 0 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid > article::before {
    content: "" !important;
    position: absolute !important;
    top: -4px !important;
    left: 14px !important;
    width: 7px !important;
    height: 7px !important;
    border: 2px solid #b8ada8 !important;
    border-radius: 50% !important;
    background: #fffdfb !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid > article.done::before {
    border-color: #bd573f !important;
    background: #bd573f !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid span {
    color: #9a8c86 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid strong {
    color: #382924 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid p {
    margin: 0 !important;
    color: #7b6e68 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid a {
    min-height: 40px !important;
    color: #b34e38 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-sprint {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(160px, 0.5fr) minmax(0, 1.5fr) !important;
    gap: 18px !important;
    margin: -18px 0 0 !important;
    padding: 18px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(111, 75, 63, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-sprint ol {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel,
html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide {
    min-height: 0 !important;
}

/* Detail pass: keep every desktop destination visible and make tablet navigation intentional. */
@media (min-width: 1180px) {
    html body[data-page] > header.topbar .shared-nav {
        width: 100% !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    html body[data-page] > header.topbar .shared-nav-links {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    html body[data-page] > header.topbar .shared-nav-actions {
        flex: 0 0 auto !important;
    }
}

@media (min-width: 781px) and (max-width: 1179px) {
    html body[data-page] > header.topbar .shared-nav {
        width: 100% !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    html body[data-page] > header.topbar .shared-nav-access-status {
        display: none !important;
    }

    html body[data-page] > header.topbar .shared-nav-links {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        gap: 2px !important;
        overflow: visible !important;
    }

    html body[data-page] > header.topbar .shared-nav-links > a {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
    }

    html body[data-page] > header.topbar .shared-nav-links > a.active {
        width: auto !important;
        min-width: 72px !important;
        max-width: 118px !important;
        padding: 0 10px !important;
        gap: 7px !important;
        font-size: 13px !important;
    }

    html body[data-page] > header.topbar .shared-nav-links > a::before {
        margin: 0 !important;
    }

    html body[data-page] > header.topbar .shared-nav-actions {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    html body[data-page] > header.topbar .shared-nav-actions .nav-button {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    html body[data-page] > header.topbar .shared-nav-primary-action .shared-nav-label-full {
        display: none !important;
    }

    html body[data-page] > header.topbar .shared-nav-primary-action .shared-nav-label-short {
        display: inline !important;
    }
}

/* Empty states are messages, not a card nested inside another card. */
html body[data-page="feed"] #feedVueApp .vue-feed-empty {
    border: 1px solid var(--archive-line) !important;
    border-radius: 16px !important;
    background: rgba(255, 252, 249, 0.72) !important;
    box-shadow: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-empty > .empty-state {
    min-height: 150px !important;
    padding: 30px 24px !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    html body[data-page="templates"] #templatesVueApp .vue-template-filter-meta,
    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-filter-meta > small,
    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta > small {
        display: none !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-filter-meta > .filter-count,
    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta > .filter-count {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        text-align: left !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
}

/* V2.2 interaction audit: the visible label and its surrounding row share one usable target. */
html body[data-page] > header.topbar > .brand {
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-grid .work-card h3 > a,
html body[data-page="work"] #workDetailVueApp .detail-recommend-grid .work-card h3 > a {
    display: flex !important;
    min-height: 44px !important;
    align-items: center !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-grid .creator-line {
    min-height: 44px !important;
    padding-block: 5px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card.action-surface-entity {
    overflow: hidden !important;
    border: 1px solid rgba(105, 73, 63, 0.17) !important;
    border-radius: 16px !important;
    background: #fffaf7 !important;
    box-shadow: 0 9px 24px rgba(78, 55, 47, 0.06) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card > .action-surface-primary {
    display: block !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #231d24 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card > .action-surface-primary > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: 50% 32% !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card .vue-gallery-work-main {
    position: absolute !important;
    z-index: 2 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    min-height: 0 !important;
    padding: 66px 15px 17px !important;
    color: #fffdfb !important;
    background: linear-gradient(180deg, transparent 0%, rgba(27, 20, 24, 0.8) 58%, rgba(27, 20, 24, 0.94) 100%) !important;
    pointer-events: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card .vue-gallery-work-main h3 {
    margin: 9px 0 4px !important;
    color: #fffdfb !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card .vue-gallery-work-main > p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(255, 253, 251, 0.82) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card .vue-gallery-work-main > .pill {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff8f1 !important;
    background: rgba(196, 88, 65, 0.8) !important;
    backdrop-filter: blur(8px) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card > .action-surface-actions {
    display: block !important;
    padding: 0 !important;
    border-top: 1px solid rgba(105, 73, 63, 0.13) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-actions {
    display: grid !important;
    min-width: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-actions > .creator-line {
    margin: 0 !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.1) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    padding: 10px 12px 12px !important;
    align-items: center !important;
    gap: 7px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-stats {
    display: flex !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 10px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-stats > span {
    color: #7a6962 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-stats > .vue-card-license {
    margin-left: auto !important;
    color: #8a756d !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-controls > .vue-card-quickstart {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

@media (max-width: 640px) {
    html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card > .action-surface-primary > img {
        aspect-ratio: 4 / 3 !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-card .vue-gallery-work-main {
        padding: 58px 14px 15px !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-work-controls {
        align-items: center !important;
    }
}

/* V2.2 detail audit: semantic focus and visible state must agree with the real route. */
html body[data-page="home"] .vue-home-gateway[role="button"]:focus-visible {
    outline: 3px solid rgba(189, 88, 70, 0.88) !important;
    outline-offset: -8px !important;
}

html body[data-page="home"] .vue-home-gateway-copy .vue-home-gateway-title {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 2px !important;
    margin: 0 !important;
    color: #11111a !important;
    font-size: clamp(58px, 12vw, 156px) !important;
    font-weight: 950 !important;
    line-height: 0.92 !important;
    letter-spacing: 0 !important;
}

html body[data-page="home"] .vue-home-gateway-copy .vue-home-gateway-title > b {
    color: inherit !important;
    font-weight: inherit !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-next {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-line-clamp: unset !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-ip-cocreate-brief > pre {
    max-height: 240px !important;
    margin-top: 12px !important;
    overflow: auto !important;
    opacity: 1 !important;
    transform: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-empty-action {
    display: flex !important;
    min-height: 120px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-empty-action > span {
    max-width: 46em !important;
}

@media (max-width: 760px) {
    html body[data-page="home"] .vue-home-gateway-copy .vue-home-gateway-title {
        font-size: 56px !important;
        line-height: 0.9 !important;
    }

    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        white-space: normal !important;
    }

    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta > * {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-inventory-empty-action {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

@media (max-width: 420px) {
    html body[data-page="home"] .vue-home-gateway-copy .vue-home-gateway-title {
        font-size: 50px !important;
    }
}

/* V2.2 holistic audit: every non-studio destination keeps one clear job above the fold. */
html body[data-page="me"] #meVueDashboard .vue-me-hero { order: 1 !important; }
html body[data-page="me"] #meVueDashboard .vue-me-triage { order: 2 !important; }
html body[data-page="me"] #meVueDashboard .vue-me-inventory { order: 3 !important; }
html body[data-page="me"] #meVueDashboard .vue-me-profile-settings { order: 4 !important; }
html body[data-page="me"] #meVueDashboard .vue-me-asset-boundary { order: 5 !important; }
html body[data-page="me"] #meVueDashboard .vue-me-more-section { order: 6 !important; }
html body[data-page="me"] #meVueDashboard .vue-me-growth-suite { order: 7 !important; }
html body[data-page="me"] #meVueDashboard .vue-me-shortcuts { order: 8 !important; }

html body[data-page="me"] #meVueDashboard .vue-me-stats {
    display: none !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-settings,
    .vue-me-asset-boundary,
    .vue-me-more-section,
    .vue-me-growth-suite,
    .vue-me-shortcuts
) {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(105, 73, 63, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-settings,
    .vue-me-asset-boundary,
    .vue-me-more-section,
    .vue-me-growth-suite,
    .vue-me-shortcuts
) > summary {
    display: flex !important;
    min-height: 70px !important;
    padding: 14px 4px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    color: #3d312d !important;
    cursor: pointer !important;
    list-style: none !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-settings,
    .vue-me-asset-boundary,
    .vue-me-more-section,
    .vue-me-growth-suite,
    .vue-me-shortcuts
) > summary::-webkit-details-marker {
    display: none !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-settings,
    .vue-me-asset-boundary,
    .vue-me-more-section,
    .vue-me-growth-suite,
    .vue-me-shortcuts
) > summary::after {
    content: "+" !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    border-radius: 50% !important;
    background: #f2e3dd !important;
    color: #a74b3d !important;
    font-size: 23px !important;
    line-height: 1 !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-settings,
    .vue-me-asset-boundary,
    .vue-me-more-section,
    .vue-me-growth-suite,
    .vue-me-shortcuts
)[open] > summary::after {
    content: "−" !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-settings,
    .vue-me-asset-boundary,
    .vue-me-more-section,
    .vue-me-growth-suite,
    .vue-me-shortcuts
) > summary > div {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-settings,
    .vue-me-asset-boundary,
    .vue-me-more-section,
    .vue-me-growth-suite,
    .vue-me-shortcuts
) > summary span {
    color: #a74b3d !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-settings,
    .vue-me-asset-boundary,
    .vue-me-more-section,
    .vue-me-growth-suite,
    .vue-me-shortcuts
) > summary strong {
    overflow: hidden !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page="me"] #meVueDashboard :is(
    .vue-me-profile-editor,
    .vue-me-ownership,
    .vue-me-ops-desk,
    .vue-me-pipeline,
    .vue-me-achievement,
    .vue-me-command-grid,
    .vue-me-section-nav
) {
    margin: 0 0 22px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-triage {
    margin: 0 !important;
    padding: 22px 0 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.15) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-triage-grid > article {
    border-color: rgba(105, 73, 63, 0.16) !important;
    background: #fffaf7 !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel {
    min-height: 0 !important;
    border-color: rgba(105, 73, 63, 0.16) !important;
    background: #fffaf7 !important;
    box-shadow: 0 12px 30px rgba(78, 55, 47, 0.06) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-shortcuts .vue-me-section-nav {
    display: none !important;
}

/* Activity pages reveal actual activity before supporting explanations. */
html body[data-page="feed"] #feedVueApp .vue-feed-hero {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px) !important;
    gap: 22px !important;
    padding: 18px 0 14px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-hero h1 {
    margin: 4px 0 7px !important;
    font-size: clamp(32px, 3.5vw, 43px) !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-next {
    padding: 13px 15px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-command {
    padding: 14px 0 12px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-command-head {
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr) !important;
    gap: 18px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-command-head h2 {
    margin: 2px 0 0 !important;
    font-size: 23px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-command-head p:not(.eyebrow) {
    display: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-list,
html body[data-page="feed"] #feedVueApp .vue-feed-empty {
    padding-top: 16px !important;
}

/* A completed work gets one visual, one dossier and one action rail. */
html body[data-page="work"] #workDetailVueApp .vue-work-dock {
    grid-template-columns: minmax(240px, 0.7fr) minmax(340px, 1.2fr) minmax(220px, 0.62fr) !important;
    gap: 24px !important;
    padding: 22px !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-main h1 {
    max-width: 14ch !important;
    margin: 9px 0 14px !important;
    font-size: clamp(40px, 4.4vw, 66px) !important;
    line-height: 1.02 !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-action-path {
    display: none !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-ownership-strip > span:nth-child(n + 3) {
    display: none !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-next {
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(105, 73, 63, 0.15) !important;
}

/* IP detail surfaces use the relationship map as the primary content. */
html body[data-page="ip"] #ipDetailVueApp :is(
    .vue-ip-nextline,
    .vue-ip-section-grid,
    .vue-ip-production,
    .vue-ip-cocreate,
    .vue-ip-series
) {
    border-color: rgba(105, 73, 63, 0.16) !important;
    background: #fffaf7 !important;
    color: #382d29 !important;
    box-shadow: none !important;
}

html body[data-page="ip"] #ipDetailVueApp :is(
    .vue-ip-nextline,
    .vue-ip-section-grid,
    .vue-ip-production,
    .vue-ip-cocreate,
    .vue-ip-series
) :is(.pill, span, small) {
    border-color: rgba(105, 73, 63, 0.15) !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-ip-block {
    margin-top: 22px !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-relation-map {
    height: 420px !important;
}

/* Export stays a preview tool instead of another explanatory landing page. */
html body[data-page="export"] #exportVueApp .vue-export-ready {
    gap: 16px !important;
}

html body[data-page="export"] #exportVueApp .vue-export-hero {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 20px !important;
}

html body[data-page="export"] #exportVueApp .vue-export-cover {
    height: 280px !important;
}

html body[data-page="export"] #exportVueApp .vue-export-hero h1 {
    font-size: clamp(38px, 4.4vw, 62px) !important;
    line-height: 1.02 !important;
}

@media (max-width: 900px) {
    html body[data-page="feed"] #feedVueApp .vue-feed-hero,
    html body[data-page="feed"] #feedVueApp .vue-feed-command-head,
    html body[data-page="work"] #workDetailVueApp .vue-work-dock,
    html body[data-page="export"] #exportVueApp .vue-export-hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-next {
        display: none !important;
    }

    html body[data-page="work"] #workDetailVueApp :is(.vue-work-cover, .vue-work-main, .vue-work-side),
    html body[data-page="export"] #exportVueApp .vue-export-cover {
        grid-column: 1 !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-cover {
        max-height: 640px !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-cover {
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-relation-map {
        height: 360px !important;
    }
}

@media (max-width: 640px) {
    html body[data-page="me"] #meVueDashboard .vue-me-dashboard,
    html body[data-page="work"] #workDetailVueApp .vue-work,
    html body[data-page="ip"] #ipDetailVueApp .vue-ip,
    html body[data-page="export"] #exportVueApp .vue-export {
        width: calc(100% - 24px) !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-hero {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding-top: 16px !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-avatar {
        width: 58px !important;
        height: 58px !important;
        border-radius: 14px !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-next {
        grid-column: 1 / -1 !important;
        min-height: 0 !important;
        padding: 14px !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-hero-copy > h1 {
        font-size: 28px !important;
    }

    html body[data-page="me"] #meVueDashboard :is(
        .vue-me-profile-settings,
        .vue-me-asset-boundary,
        .vue-me-more-section,
        .vue-me-growth-suite,
        .vue-me-shortcuts
    ) > summary strong {
        white-space: normal !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-hero {
        padding-top: 14px !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-dock,
    html body[data-page="export"] #exportVueApp .vue-export-hero {
        gap: 16px !important;
        padding: 14px !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-main h1,
    html body[data-page="export"] #exportVueApp .vue-export-hero h1 {
        font-size: 38px !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-relation-map {
        height: 310px !important;
    }
}

/* V149: commercial phase and real quota status stay compact and close to the action they describe. */
html body[data-page] > header.topbar .shared-nav-access-status {
    display: inline-flex;
    min-height: 30px;
    padding: 0 10px;
    align-items: center;
    border-left: 2px solid #c85a43;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(90deg, rgba(200, 90, 67, 0.1), rgba(239, 183, 105, 0.06));
    color: #974333;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

html body[data-page="home"] #homeVueApp .vue-home-access-note {
    display: flex;
    width: fit-content;
    max-width: min(100%, 620px);
    margin: 14px 0 0;
    padding: 8px 0 8px 12px;
    align-items: baseline;
    gap: 10px;
    border-left: 3px solid #e0775b;
    color: rgba(255, 247, 239, 0.82);
}

html body[data-page="home"] #homeVueApp .vue-home-access-note strong {
    color: #ffd17d;
    font-size: 13px;
    white-space: nowrap;
}

html body[data-page="home"] #homeVueApp .vue-home-access-note span {
    font-size: 13px;
    line-height: 1.55;
}

html body[data-page="home"] #homeVueApp .vue-home-access-note.is-gateway {
    color: rgba(255, 255, 255, 0.78);
}

html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(220px, 390px);
    width: fit-content;
    max-width: min(100%, 720px);
    margin: 10px 0 0 !important;
    padding: 13px 18px 14px !important;
    align-items: center;
    gap: clamp(18px, 3vw, 36px);
    overflow: hidden;
    border: 1px solid rgba(255, 224, 139, 0.54) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    background:
            linear-gradient(90deg, rgba(146, 48, 36, 0.84), rgba(42, 29, 35, 0.68) 58%, rgba(26, 25, 34, 0.56)) !important;
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 18px 46px rgba(21, 12, 18, 0.24),
            0 0 34px rgba(255, 178, 92, 0.1) !important;
    backdrop-filter: blur(14px) saturate(1.08);
}

html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway strong {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
    color: #ffe39a;
    white-space: nowrap;
    text-shadow: 0 0 22px rgba(255, 207, 106, 0.36);
}

html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway strong small {
    color: rgba(255, 239, 194, 0.78);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
}

html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway strong b {
    color: #ffe39a !important;
    -webkit-text-fill-color: #ffe39a !important;
    font-size: clamp(26px, 2.5vw, 38px);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.05;
    text-shadow: 0 0 22px rgba(255, 207, 106, 0.38) !important;
}

html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway span {
    position: relative;
    z-index: 1;
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    font-size: 14px !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    line-height: 1.5;
}

html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 32%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 225, 153, 0.72), transparent);
    box-shadow: 0 0 24px rgba(255, 202, 105, 0.48);
    transform: rotate(12deg);
    pointer-events: none;
}

html body[data-page="login"] #loginVueApp .vue-login-access-note,
html body[data-page="login"] #loginVueApp .vue-login-access-skeleton {
    display: flex;
    margin: 14px 0 0;
    padding: 10px 0 0;
    align-items: baseline;
    gap: 10px;
    border-top: 1px solid rgba(169, 94, 73, 0.2);
    color: #806e67;
    font-size: 12px;
    line-height: 1.55;
}

html body[data-page="login"] #loginVueApp .vue-login-access-note strong {
    color: #a54838;
    white-space: nowrap;
}

html body[data-page="studio"] #studioVueImage .vue-image-access-strip {
    display: flex;
    margin: 0 0 16px;
    padding: 11px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(188, 88, 67, 0.2);
    border-radius: 8px;
    background: linear-gradient(105deg, #fff8f2, #f9eee8 58%, #fff4dc);
    color: #5e4a43;
}

html body[data-page="studio"] #studioVueImage .vue-image-access-strip > span {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 10px;
}

html body[data-page="studio"] #studioVueImage .vue-image-access-strip strong,
html body[data-page="studio"] #studioVueImage .vue-image-access-strip b {
    color: #a44736;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

html body[data-page="studio"] #studioVueImage .vue-image-access-strip small {
    overflow: hidden;
    color: #7b6962;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body[data-page="me"] #meVueDashboard .vue-me-ai-usage {
    display: grid;
    margin: 12px 0 18px;
    padding: 10px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(159, 91, 72, 0.18);
    border-bottom: 1px solid rgba(159, 91, 72, 0.18);
}

html body[data-page="me"] #meVueDashboard .vue-me-ai-usage > span {
    display: inline-flex;
    min-height: 34px;
    padding: 0 16px;
    align-items: center;
    gap: 9px;
    color: #624d46;
    font-size: 13px;
    font-weight: 750;
}

html body[data-page="me"] #meVueDashboard .vue-me-ai-usage > span + span {
    border-left: 1px solid rgba(159, 91, 72, 0.18);
}

@media (max-width: 760px) {
    html body[data-page] > header.topbar .shared-nav-access-status {
        min-height: 26px;
        padding: 0 7px;
        font-size: 11px;
    }

    html body[data-page="home"] #homeVueApp .vue-home-access-note,
    html body[data-page="login"] #loginVueApp .vue-login-access-note {
        align-items: flex-start;
    }

    html body[data-page="home"] .vue-home-gateway .vue-home-gateway-copy {
        width: 100% !important;
        min-width: 0 !important;
        justify-items: start !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    html body[data-page="home"] .vue-home-gateway .vue-home-gateway-copy h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 56px !important;
        line-height: 0.9 !important;
    }

    html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        padding: 12px 14px !important;
        align-items: flex-start !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway::after {
        top: auto;
        right: 14px;
        bottom: 0;
        left: 14px;
        width: auto;
        height: 1px;
        transform: none;
    }

    html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway strong b {
        font-size: 28px;
    }

    html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway span {
        max-width: 100% !important;
        white-space: normal !important;
    }

    html body[data-page="home"] .vue-home-gateway .vue-home-gateway-index {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        gap: 14px !important;
    }

    html body[data-page="home"] .vue-home-gateway .vue-home-gateway-enter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-page="studio"] #studioVueImage .vue-image-access-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    html body[data-page="studio"] #studioVueImage .vue-image-access-strip > span {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    html body[data-page="studio"] #studioVueImage .vue-image-access-strip small {
        white-space: normal;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-ai-usage {
        grid-template-columns: minmax(0, 1fr);
    }

    html body[data-page="me"] #meVueDashboard .vue-me-ai-usage > span + span {
        border-top: 1px solid rgba(159, 91, 72, 0.14);
        border-left: 0;
    }
}

@media (max-width: 420px) {
    html body[data-page="home"] .vue-home-gateway .vue-home-gateway-copy h1 {
        font-size: 50px !important;
    }
}

html body[data-page="me"] #meVueDashboard .vue-me-mini-list > a.is-local-draft {
    border-left: 3px solid #bd573f !important;
    background: linear-gradient(90deg, rgba(251, 239, 235, 0.72), rgba(255, 255, 255, 0.9)) !important;
}

@media (max-width: 1050px) {
    html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid > article:nth-child(2) {
        border-right: 0 !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid > article:nth-child(n+3) {
        border-top: 1px solid rgba(111, 75, 63, 0.14) !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-achievement {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-achievement-copy {
        padding: 0 0 18px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(111, 75, 63, 0.14) !important;
    }

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

    html body[data-page="me"] #meVueDashboard .vue-me-sprint {
        grid-column: 1 !important;
    }
}

@media (max-width: 680px) {
    html body[data-page="me"] #meVueDashboard .vue-me-pipeline-head,
    html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid,
    html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid,
    html body[data-page="me"] #meVueDashboard .vue-me-sprint,
    html body[data-page="me"] #meVueDashboard .vue-me-sprint ol {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-pipeline-grid > article,
    html body[data-page="me"] #meVueDashboard .vue-me-achievement-grid > article {
        min-height: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(111, 75, 63, 0.14) !important;
    }

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

/* V2.2 wave 3: completed work reads like a dossier, not another creation form. */
html body[data-page="work"] #workDetailVueApp .vue-work {
    width: min(100% - 40px, 1420px) !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-dock {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.72fr) minmax(360px, 1.15fr) minmax(250px, 0.72fr) !important;
    gap: 28px !important;
    padding: 26px !important;
    align-items: stretch !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-cover {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-dock {
    color: #372b27 !important;
    border-color: rgba(105, 73, 63, 0.16) !important;
    background: #fffaf7 !important;
    box-shadow: 0 20px 52px rgba(78, 55, 47, 0.08) !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-main {
    grid-column: 2 !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
    color: #372b27 !important;
    background: transparent !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-main h1 {
    max-width: 12ch !important;
    margin: 12px 0 18px !important;
    font-size: clamp(42px, 5vw, 76px) !important;
    line-height: 0.98 !important;
    color: #211a17 !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-main blockquote {
    color: #6f5f58 !important;
}

html body[data-page="work"] #workDetailVueApp :is(.vue-work-tags span, .vue-work-file-stamps span, .vue-work-ownership-strip span) {
    border-color: rgba(105, 73, 63, 0.15) !important;
    color: #4e3e38 !important;
    background: #f5e8e3 !important;
}

html body[data-page="work"] #workDetailVueApp .creator-line {
    color: #5a4841 !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-side {
    grid-column: 3 !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    color: #372b27 !important;
    border: 0 !important;
    background: transparent !important;
}

html body[data-page="work"] #workDetailVueApp :is(.vue-work-stats article, .vue-work-action-path, .vue-work-action-path article, .vue-work-nav a) {
    border-color: rgba(105, 73, 63, 0.16) !important;
    color: #372b27 !important;
    background: #fdf7f4 !important;
}

html body[data-page="work"] #workDetailVueApp :is(.vue-work-stats strong, .vue-work-action-path > strong, .vue-work-action-path article span, .vue-work-nav strong) {
    color: #2c221f !important;
}

html body[data-page="work"] #workDetailVueApp :is(.vue-work-next, .vue-work-action-path article p, .vue-work-nav span) {
    color: #796963 !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-nav {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-guidance,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history {
    overflow: hidden !important;
    border: 1px solid rgba(105, 73, 63, 0.18) !important;
    border-radius: 16px !important;
    background: rgba(255, 250, 247, 0.88) !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-guidance > summary,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history > summary {
    display: flex !important;
    min-height: 68px !important;
    padding: 14px 20px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    cursor: pointer !important;
    list-style: none !important;
    color: #3b2f2b !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-guidance > summary::-webkit-details-marker,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history > summary::-webkit-details-marker {
    display: none !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-guidance > summary::after,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history > summary::after {
    content: "+" !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    border-radius: 50% !important;
    background: #f1dfd8 !important;
    color: #9f4638 !important;
    font-size: 24px !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-guidance[open] > summary::after,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history[open] > summary::after {
    content: "−" !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-guidance > summary span,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history > summary span {
    margin-right: auto !important;
    font-weight: 900 !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-guidance > summary small,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history > summary small {
    color: #7c6c65 !important;
}

html body[data-page="work"] #workDetailVueApp .vue-work-guidance > section,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history > section {
    margin: 0 !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body[data-page="work"] #workDetailVueApp #workProfile .oc-detail-hero {
    display: none !important;
}

html body[data-page="work"] #workDetailVueApp #workProfile {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

/* IP pages put the relationship map and cast ahead of planning aids. */
html body[data-page="ip"] #ipDetailVueApp .vue-ip {
    display: flex !important;
    width: min(100% - 40px, 1420px) !important;
    flex-direction: column !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-ip-hero { order: 1; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-stats { order: 2; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-relations { order: 3; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-cast { order: 4; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-nextline { order: 5; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-section-grid { order: 6; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-production { order: 7; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-cocreate { order: 8; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-series { order: 9; }
html body[data-page="ip"] #ipDetailVueApp .vue-ip-history { order: 10; }

html body[data-page="ip"] #ipDetailVueApp .vue-relation-wrap {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr) !important;
    align-items: start !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-relation-map {
    height: 480px !important;
    min-height: 0 !important;
    border: 1px solid rgba(105, 73, 63, 0.16) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 50% 46%, rgba(223, 154, 137, 0.18), transparent 36%),
        linear-gradient(145deg, #fffaf7 0%, #f5e7e1 100%) !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-relation-lines {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-relation-lines article {
    min-height: 0 !important;
    border-color: rgba(105, 73, 63, 0.16) !important;
    background: #fffaf7 !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-ip-character-card,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-activity-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(105, 73, 63, 0.16) !important;
    border-radius: 15px !important;
    background: #fffaf7 !important;
    color: #332823 !important;
    text-align: left !important;
    text-decoration: none !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-ip-character-card:is(:hover, :focus-visible),
html body[data-page="ip"] #ipDetailVueApp .vue-ip-activity-card:is(:hover, :focus-visible) {
    border-color: rgba(189, 88, 70, 0.52) !important;
    box-shadow: 0 12px 30px rgba(78, 55, 47, 0.09) !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-ip-character-card img,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-activity-card img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
}

html body[data-page="ip"] #ipDetailVueApp .vue-ip-character-card > div,
html body[data-page="ip"] #ipDetailVueApp .vue-ip-activity-card > div {
    padding: 16px !important;
}

/* Export is a preview workstation: preview left, output controls right. */
html body[data-page="export"] #exportVueApp .vue-export {
    width: min(100% - 40px, 1420px) !important;
}

html body[data-page="export"] #exportVueApp .vue-export-ready {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

html body[data-page="export"] #exportVueApp .vue-export-hero {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
    gap: 28px !important;
    padding: 24px !important;
    color: #372b27 !important;
    border-color: rgba(105, 73, 63, 0.16) !important;
    background: #fffaf7 !important;
    box-shadow: 0 20px 52px rgba(78, 55, 47, 0.08) !important;
}

html body[data-page="export"] #exportVueApp .vue-export-package-rail,
html body[data-page="export"] #exportVueApp :is(.vue-export-achievement, .vue-export-readiness, .vue-export-launch) {
    display: none !important;
}

html body[data-page="export"] #exportVueApp .vue-export-cover {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 330px !important;
    align-self: start !important;
    border-radius: 16px !important;
}

html body[data-page="export"] #exportVueApp .vue-export-cover img {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body[data-page="export"] #exportVueApp .vue-export-summary {
    grid-column: 2 !important;
    padding: 4px 0 !important;
    color: #372b27 !important;
    background: transparent !important;
}

html body[data-page="export"] #exportVueApp .vue-export-summary h1 {
    margin: 8px 0 12px !important;
    color: #211a17 !important;
    font-size: clamp(42px, 5vw, 68px) !important;
    line-height: 1 !important;
}

html body[data-page="export"] #exportVueApp .vue-export-summary > p {
    color: #74635c !important;
}

html body[data-page="export"] #exportVueApp .vue-export-summary > .vue-export-status {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 2px 0 0 !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    border-left: 3px solid #c85a43 !important;
    border-radius: 0 6px 6px 0 !important;
    opacity: 1 !important;
    color: #7f3d31 !important;
    background: rgba(200, 90, 67, 0.08) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: unset !important;
}

html body[data-page="export"] #exportVueApp :is(.vue-export-pass span, .vue-export-pass small, .vue-export-ownership-strip span) {
    border-color: rgba(105, 73, 63, 0.15) !important;
    color: #4e3e38 !important;
    background: #f4e6e1 !important;
}

html body[data-page="export"] #exportVueApp .vue-export-pass strong {
    color: #8f3f32 !important;
    background: #f0d1c6 !important;
}

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

html body[data-page="export"] #exportVueApp .vue-export-social-preview,
html body[data-page="export"] #exportVueApp .vue-export-preview-grid {
    display: contents !important;
}

html body[data-page="export"] #exportVueApp .vue-export-preview-head {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 8px 0 0 !important;
}

html body[data-page="export"] #exportVueApp .vue-export-share-card {
    position: sticky !important;
    top: 92px !important;
    grid-column: 1 / span 7 !important;
    grid-row: 3 / span 2 !important;
    align-self: start !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

html body[data-page="export"] #exportVueApp .vue-export-planner {
    display: grid !important;
    grid-column: 8 / -1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-self: start !important;
}

html body[data-page="export"] #exportVueApp .vue-export-template-card {
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid rgba(105, 73, 63, 0.18) !important;
    border-radius: 14px !important;
    background: #fffaf7 !important;
    color: #372b27 !important;
    text-align: left !important;
}

html body[data-page="export"] #exportVueApp .vue-export-template-card.active {
    border-color: #bd5846 !important;
    background: #f8e8e2 !important;
    box-shadow: inset 4px 0 #bd5846 !important;
}

html body[data-page="export"] #exportVueApp .vue-export-checklist {
    grid-column: 1 / -1 !important;
}

html body[data-page="export"] #exportVueApp .vue-export-caption-card {
    grid-column: 8 / -1 !important;
    grid-row: 4 !important;
    min-width: 0 !important;
}

html body[data-page="export"] #exportVueApp .vue-export-sheet,
html body[data-page="export"] #exportVueApp .vue-export-copy-grid {
    grid-column: 1 / -1 !important;
}

/* Login keeps the form immediate and lets the OC studio image carry the atmosphere. */
html body[data-page="login"] #loginVueApp .auth-shell.vue-login-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px) !important;
    min-height: calc(100svh - 68px) !important;
    padding: clamp(28px, 5vw, 72px) !important;
    align-items: center !important;
    gap: clamp(28px, 5vw, 72px) !important;
}

html body[data-page="login"] #loginVueApp .vue-login-art {
    max-width: 640px !important;
    align-self: end !important;
    padding: 0 0 4vh !important;
}

html body[data-page="login"] #loginVueApp .vue-login-art h1 {
    max-width: 8ch !important;
    font-size: clamp(50px, 7vw, 92px) !important;
    line-height: 0.96 !important;
}

html body[data-page="login"] #loginVueApp .vue-login-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 28px !important;
    align-self: center !important;
}

html body[data-page="login"] #loginVueApp :is(.revealable, .vue-login-art, .vue-login-card) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

html body[data-page="login"] #loginVueApp .vue-login-skeleton .vue-login-card {
    min-height: 410px !important;
}

html body[data-page="login"] #loginVueApp .vue-login-skeleton input,
html body[data-page="login"] #loginVueApp .vue-login-skeleton button {
    pointer-events: none !important;
}

/* The admin console is an operations surface, so density outranks display-card drama. */
html body[data-page="admin"] #adminVueApp .vue-admin {
    width: min(100% - 40px, 1540px) !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 270px !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-hero > div:first-child {
    min-height: 132px !important;
    padding: 18px 20px !important;
    align-content: center !important;
    gap: 6px !important;
    border-color: rgba(105, 73, 63, 0.16) !important;
    background: #fffaf7 !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-hero h1 {
    margin: 4px 0 !important;
    font-size: clamp(30px, 4vw, 48px) !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-hero-card {
    min-width: 240px !important;
    min-height: 132px !important;
    padding: 12px 16px !important;
    align-content: center !important;
    border-color: rgba(105, 73, 63, 0.16) !important;
    color: #342824 !important;
    background: linear-gradient(145deg, #f6e4dd 0%, #fffaf7 100%) !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-hero-card :is(span, small) {
    color: #78665f !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-hero-card strong {
    color: #342824 !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-console {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-toolbar { order: 1; }
html body[data-page="admin"] #adminVueApp .vue-admin-metrics { order: 2; }
html body[data-page="admin"] #adminVueApp .vue-admin-workbench { order: 3; }
html body[data-page="admin"] #adminVueApp .vue-admin-ops { order: 4; }
html body[data-page="admin"] #adminVueApp .vue-admin-provider { order: 5; }
html body[data-page="admin"] #adminVueApp .vue-admin-config { order: 6; }
html body[data-page="admin"] #adminVueApp .vue-admin-migration { order: 7; }
html body[data-page="admin"] #adminVueApp .vue-admin-warning { order: 8; }

html body[data-page="admin"] #adminVueApp :is(.vue-admin-toolbar, .vue-admin-workbench, .vue-admin-ops, .vue-admin-provider, .vue-admin-config, .vue-admin-migration, .vue-admin-warning) {
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-metrics {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-metrics > article {
    min-height: 92px !important;
    padding: 12px !important;
    border-radius: 10px !important;
}

html body[data-page="admin"] #adminVueApp .vue-admin-row {
    display: grid !important;
    min-height: 72px !important;
    padding: 10px 12px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
}

@media (max-width: 980px) {
    html body[data-page="work"] #workDetailVueApp .vue-work-dock,
    html body[data-page="export"] #exportVueApp .vue-export-hero,
    html body[data-page="login"] #loginVueApp .auth-shell.vue-login-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="work"] #workDetailVueApp :is(.vue-work-cover, .vue-work-main, .vue-work-side),
    html body[data-page="export"] #exportVueApp :is(.vue-export-cover, .vue-export-summary) {
        grid-column: 1 !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-ready {
        display: block !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-ready > *,
    html body[data-page="export"] #exportVueApp .vue-export-preview-grid > * {
        margin-bottom: 18px !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-social-preview,
    html body[data-page="export"] #exportVueApp .vue-export-preview-grid {
        display: block !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-share-card {
        position: static !important;
    }

    html body[data-page="login"] #loginVueApp .vue-login-art {
        display: none !important;
    }

    html body[data-page="login"] #loginVueApp .vue-login-card {
        max-width: 460px !important;
        justify-self: center !important;
    }

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

    html body[data-page="ip"] #ipDetailVueApp .vue-relation-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-relation-lines {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html body[data-page="work"] #workDetailVueApp .vue-work,
    html body[data-page="ip"] #ipDetailVueApp .vue-ip,
    html body[data-page="export"] #exportVueApp .vue-export,
    html body[data-page="admin"] #adminVueApp .vue-admin {
        width: min(100% - 24px, 100%) !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-dock,
    html body[data-page="export"] #exportVueApp .vue-export-hero,
    html body[data-page="login"] #loginVueApp .auth-shell.vue-login-shell {
        padding: 16px !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-guidance > summary,
    html body[data-page="ip"] #ipDetailVueApp .vue-ip-history > summary {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-guidance > summary small,
    html body[data-page="ip"] #ipDetailVueApp .vue-ip-history > summary small {
        width: calc(100% - 54px) !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-planner,
    html body[data-page="admin"] #adminVueApp .vue-admin-metrics {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="admin"] #adminVueApp .vue-admin-hero {
        align-items: flex-start !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="admin"] #adminVueApp .vue-admin-hero-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-relation-map {
        height: 370px !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-relation-lines {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Theme classes in the legacy bundle carry extra specificity. Keep this final
   operational block stronger so first-screen hierarchy cannot drift by theme. */
html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="gallery"] #galleryVueApp .vue-gallery-hero {
    padding: 24px 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--archive-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="gallery"] #galleryVueApp .vue-gallery-discovery {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="gallery"] #galleryVueApp .vue-gallery-chip-row.is-category {
    padding: 6px !important;
    border-radius: 14px !important;
    background: rgba(255, 252, 249, 0.82) !important;
    box-shadow: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-workspace {
    gap: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-source-notice.is-hero {
    display: flex !important;
    min-height: 0 !important;
    margin-top: 2px !important;
    padding: 4px 0 0 12px !important;
    gap: 8px !important;
    align-items: center !important;
    border-left-width: 1px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-source-notice.is-hero :is(span, p) {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-empty {
    margin: 10px 0 0 !important;
    padding: 44px 24px !important;
    text-align: center !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-empty-actions {
    display: flex !important;
    margin-top: 18px !important;
    gap: 10px !important;
    justify-content: center !important;
}

@media (max-width: 760px) {
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="gallery"] #galleryVueApp .vue-gallery-hero {
        padding: 18px 0 16px !important;
    }

    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="gallery"] #galleryVueApp .vue-gallery-discovery {
        padding: 0 !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-source-notice.is-hero {
        display: none !important;
    }
}

/* Personal creator room: immediate work and owned assets before analytics. */
html body[data-page="me"] #meVueDashboard .vue-me-dashboard {
    display: flex !important;
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-hero {
    order: 1;
    display: grid !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 0 20px !important;
    grid-template-columns: 76px minmax(0, 1fr) minmax(230px, 280px) !important;
    gap: 22px !important;
    align-items: center !important;
    border: 0 !important;
    border-bottom: 1px solid var(--archive-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-avatar {
    width: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    align-self: start !important;
    border-radius: 18px !important;
    object-fit: cover !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-hero-copy {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-hero-copy > h1 {
    max-width: none !important;
    margin: 6px 0 8px !important;
    font-size: 36px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-hero-copy > p:not(.eyebrow) {
    max-width: 58em !important;
    margin: 0 !important;
    color: var(--archive-muted) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-ownership-strip {
    display: flex !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
    border: 0 !important;
    background: transparent !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-ownership-strip > span {
    min-height: 0 !important;
    padding: 2px 12px !important;
    border: 0 !important;
    border-left: 1px solid var(--archive-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--archive-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-ownership-strip > span:first-child {
    padding-left: 0 !important;
    border-left: 0 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-source-notice {
    display: flex !important;
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    padding: 4px 0 0 12px !important;
    gap: 8px !important;
    align-items: center !important;
    border-left-width: 1px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-source-notice :is(span, p) {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-actions {
    display: flex !important;
    margin: 14px 0 0 !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-actions > * {
    min-height: 42px !important;
    padding: 0 14px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-next {
    display: grid !important;
    min-height: 150px !important;
    margin: 0 !important;
    padding: 18px !important;
    align-content: center !important;
    gap: 5px !important;
    border: 1px solid var(--archive-line) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255, 253, 251, 0.95), rgba(245, 231, 225, 0.88)) !important;
    box-shadow: 0 16px 36px rgba(78, 55, 47, 0.1) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-next::before {
    display: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-next > span {
    color: var(--archive-coral-deep) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-next > strong {
    font-size: 22px !important;
    line-height: 1.2 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-next > p {
    margin: 0 !important;
    color: var(--archive-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory {
    order: 2;
    margin: 0 !important;
    padding: 22px 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-head {
    margin: 0 0 14px !important;
    padding: 0 !important;
    align-items: end !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-head h2 {
    margin: 4px 0 0 !important;
    font-size: 28px !important;
    letter-spacing: 0 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-grid {
    display: grid !important;
    margin: 0 !important;
    gap: 14px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel {
    min-width: 0 !important;
    border-radius: 16px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide {
    grid-column: 1 / -1 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide .vue-me-mini-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide .vue-me-mini-list > a {
    min-width: 0 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-triage {
    order: 3;
}

html body[data-page="me"] #meVueDashboard .vue-me-profile-editor {
    order: 4;
}

html body[data-page="me"] #meVueDashboard .vue-me-stats {
    order: 5;
}

html body[data-page="me"] #meVueDashboard .vue-me-ownership {
    order: 6;
}

html body[data-page="me"] #meVueDashboard .vue-me-more-section {
    order: 7;
}

html body[data-page="me"] #meVueDashboard .vue-me-pipeline {
    order: 8;
}

html body[data-page="me"] #meVueDashboard .vue-me-achievement {
    order: 9;
}

html body[data-page="me"] #meVueDashboard .vue-me-workflow {
    order: 10;
}

html body[data-page="me"] #meVueDashboard .vue-me-command-grid {
    order: 11;
}

html body[data-page="me"] #meVueDashboard .vue-me-section-nav {
    order: 12;
}

html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="me"] #meVueDashboard .vue-me-hero {
    padding: 24px 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--archive-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="me"] #meVueDashboard .vue-me-inventory {
    padding: 22px 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    html body[data-page="me"] #meVueDashboard .vue-me-dashboard {
        width: min(100% - 24px, 1180px) !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-hero,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="me"] #meVueDashboard .vue-me-hero {
        padding: 18px 0 16px !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-avatar {
        width: 52px !important;
        height: 52px !important;
        border-radius: 14px !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-hero-copy > h1 {
        margin-top: 4px !important;
        font-size: 30px !important;
        line-height: 1.08 !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-hero-copy > p:not(.eyebrow) {
        font-size: 14px !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-ownership-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 10px !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-ownership-strip > span {
        padding: 0 !important;
        border: 0 !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-source-notice,
    html body[data-page="me"] #meVueDashboard .vue-me-next,
    html body[data-page="me"] #meVueDashboard .vue-me-actions > a[href*="/gallery"] {
        display: none !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-actions {
        grid-column: 1 / -1 !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-inventory,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="me"] #meVueDashboard .vue-me-inventory {
        padding: 18px 0 16px !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-inventory-head {
        align-items: flex-start !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-inventory-head h2 {
        font-size: 25px !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-inventory-grid {
        grid-template-columns: 1fr !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide {
        grid-column: auto !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide .vue-me-mini-list {
        display: flex !important;
        padding-bottom: 4px !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide .vue-me-mini-list > a {
        min-width: 248px !important;
        scroll-snap-align: start !important;
    }
}

/* Templates and public archives: selection surfaces come before explanation. */
html body[data-page="templates"] #templatesVueApp .vue-templates,
html body[data-page="characters"] #charactersVueApp .vue-characters {
    display: flex !important;
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-templates-hero,
html body[data-page="characters"] #charactersVueApp .vue-characters-hero {
    order: 1;
    display: grid !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 0 20px !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) !important;
    gap: 28px !important;
    align-items: center !important;
    border: 0 !important;
    border-bottom: 1px solid var(--archive-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="templates"] #templatesVueApp .vue-templates-copy,
html body[data-page="characters"] #charactersVueApp .vue-characters-copy {
    display: flex !important;
    width: auto !important;
    max-width: 700px !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-templates-copy > h1,
html body[data-page="characters"] #charactersVueApp .vue-characters-copy > h1 {
    max-width: 14ch !important;
    margin: 8px 0 12px !important;
    font-size: 40px !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-templates-copy > p:not(.eyebrow),
html body[data-page="characters"] #charactersVueApp .vue-characters-copy > p:not(.eyebrow) {
    max-width: 46em !important;
    margin: 0 !important;
    color: var(--archive-muted) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-templates-actions,
html body[data-page="characters"] #charactersVueApp .vue-characters-actions {
    order: 1;
    display: flex !important;
    margin: 18px 0 0 !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart {
    order: 2;
    margin-top: 12px !important;
    border: 1px solid var(--archive-line) !important;
    border-radius: 14px !important;
    background: rgba(255, 252, 249, 0.78) !important;
    overflow: hidden !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart > summary,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart > summary {
    display: flex !important;
    min-height: 54px !important;
    padding: 10px 14px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    cursor: pointer !important;
    list-style: none !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart > summary::-webkit-details-marker,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart > summary::-webkit-details-marker {
    display: none !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart > summary > div,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart > summary > div {
    display: grid !important;
    gap: 2px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart > summary strong,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart > summary strong {
    color: var(--archive-ink) !important;
    font-size: 14px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart > summary small,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart > summary small {
    color: var(--archive-muted) !important;
    line-height: 1.4 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart > summary > span,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart > summary > span {
    color: var(--archive-coral-deep) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart[open] > summary,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart[open] > summary {
    border-bottom: 1px solid var(--archive-line) !important;
    background: var(--archive-coral-wash) !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart .vue-light-start,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart .vue-light-start {
    margin: 0 !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-quickstart .vue-ownership-strip,
html body[data-page="characters"] #charactersVueApp .vue-character-quickstart .vue-ownership-strip {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--archive-line) !important;
    border-radius: 0 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-source-notice.is-hero,
html body[data-page="characters"] #charactersVueApp .vue-archive-source-notice.is-hero {
    order: 3;
    display: flex !important;
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    padding: 4px 0 0 12px !important;
    gap: 8px !important;
    align-items: center !important;
    border-left-width: 1px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-source-notice.is-hero :is(span, p),
html body[data-page="characters"] #charactersVueApp .vue-archive-source-notice.is-hero :is(span, p) {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-command,
html body[data-page="characters"] #charactersVueApp .vue-character-command {
    display: block !important;
    width: 100% !important;
    height: 200px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(83, 62, 55, 0.16) !important;
    border-radius: 18px !important;
    background: #2c2726 !important;
    box-shadow: 0 18px 42px rgba(78, 55, 47, 0.14) !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-command .vue-command-anchor,
html body[data-page="characters"] #charactersVueApp .vue-character-command .vue-command-anchor {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

html body.animaker-theme-day[data-page="templates"] #templatesVueApp .vue-template-command .vue-command-anchor,
html body.animaker-theme-day[data-page="characters"] #charactersVueApp .vue-character-command .vue-command-anchor {
    height: 100% !important;
    min-height: 0 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-command .vue-command-anchor > img,
html body[data-page="characters"] #charactersVueApp .vue-character-command .vue-command-anchor > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-command .vue-command-anchor > div,
html body[data-page="characters"] #charactersVueApp .vue-character-command .vue-command-anchor > div {
    position: absolute !important;
    inset: auto 0 0 !important;
    padding: 34px 18px 16px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(28, 21, 20, 0.88) 74%) !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-command .vue-command-anchor :is(h2, .eyebrow),
html body[data-page="characters"] #charactersVueApp .vue-character-command .vue-command-anchor :is(h2, .eyebrow) {
    margin: 0 !important;
    color: #fff !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-command .vue-command-anchor h2,
html body[data-page="characters"] #charactersVueApp .vue-character-command .vue-command-anchor h2 {
    margin-top: 4px !important;
    font-size: 23px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-command .vue-command-anchor > div > p:last-child,
html body[data-page="characters"] #charactersVueApp .vue-character-command .vue-command-anchor > div > p:last-child,
html body[data-page="templates"] #templatesVueApp .vue-template-command > :not(.vue-command-anchor),
html body[data-page="characters"] #charactersVueApp .vue-character-command > :not(.vue-command-anchor) {
    display: none !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-library,
html body[data-page="characters"] #charactersVueApp .vue-character-library {
    order: 2;
    display: flex !important;
    margin: 0 !important;
    padding: 22px 0 18px !important;
    flex-direction: column !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="templates"] #templatesVueApp .vue-library-boundary,
html body[data-page="characters"] #charactersVueApp .vue-library-boundary {
    order: 3;
    margin: 24px 0 56px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-library-head,
html body[data-page="characters"] #charactersVueApp .vue-character-library-head {
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
    align-items: end !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-library-head h2,
html body[data-page="characters"] #charactersVueApp .vue-character-library-head h2 {
    margin: 4px 0 0 !important;
    font-size: 28px !important;
    letter-spacing: 0 !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-workspace {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-filter {
    order: 1;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
}

html body[data-page="templates"] #templatesVueApp .vue-template-grid,
html body[data-page="templates"] #templatesVueApp .vue-template-workspace > .empty-state {
    order: 2;
}

html body[data-page="templates"] #templatesVueApp .vue-template-workspace > :is(.vue-template-match, .vue-template-guide, .vue-template-social) {
    order: 4;
}

html body[data-page="templates"] #templatesVueApp .vue-template-rank {
    order: 3;
}

html body[data-page="templates"] #templatesVueApp :is(.vue-template-starter, .vue-template-pathfinder) {
    order: 4;
}

html body[data-page="templates"] #templatesVueApp .vue-templates-stats {
    order: 5;
}

html body[data-page="characters"] #charactersVueApp .vue-character-filter {
    order: 2;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-grid,
html body[data-page="characters"] #charactersVueApp .vue-character-library > .empty-state {
    order: 3;
}

html body[data-page="characters"] #charactersVueApp .vue-characters-stats {
    order: 4;
}

html body[data-page="characters"] #charactersVueApp .vue-character-insights {
    order: 5;
}

html body[data-page="characters"] #charactersVueApp .vue-character-library > .vue-archive-source-notice:not(.is-hero) {
    order: 2;
    margin: 0 !important;
}

/* Neutralize the old themed marketing shells with equal-or-higher specificity. */
html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="templates"] #templatesVueApp .vue-templates-hero,
html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-characters-hero {
    padding: 24px 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--archive-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="templates"] #templatesVueApp .vue-templates-hero > .vue-template-command,
html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-characters-hero > .vue-character-command {
    width: 100% !important;
    height: 200px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="templates"] #templatesVueApp .vue-template-filter,
html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-character-filter {
    border: 1px solid var(--archive-line) !important;
    border-radius: 14px !important;
    background: rgba(255, 252, 249, 0.82) !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    html body[data-page="templates"] #templatesVueApp .vue-templates,
    html body[data-page="characters"] #charactersVueApp .vue-characters {
        width: min(100% - 24px, 1180px) !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-templates-hero,
    html body[data-page="characters"] #charactersVueApp .vue-characters-hero,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="templates"] #templatesVueApp .vue-templates-hero,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-characters-hero {
        padding: 18px 0 16px !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-templates-copy > h1,
    html body[data-page="characters"] #charactersVueApp .vue-characters-copy > h1 {
        max-width: 12ch !important;
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-command,
    html body[data-page="characters"] #charactersVueApp .vue-character-command,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="templates"] #templatesVueApp .vue-templates-hero > .vue-template-command,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-characters-hero > .vue-character-command,
    html body[data-page="templates"] #templatesVueApp .vue-template-source-notice.is-hero,
    html body[data-page="characters"] #charactersVueApp .vue-archive-source-notice.is-hero {
        display: none !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-quickstart > summary small,
    html body[data-page="characters"] #charactersVueApp .vue-character-quickstart > summary small {
        display: none !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-library,
    html body[data-page="characters"] #charactersVueApp .vue-character-library {
        padding: 18px 0 16px !important;
        gap: 12px !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-library-head,
    html body[data-page="characters"] #charactersVueApp .vue-character-library-head {
        align-items: flex-start !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-library-head h2,
    html body[data-page="characters"] #charactersVueApp .vue-character-library-head h2 {
        font-size: 25px !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-filter,
    html body[data-page="characters"] #charactersVueApp .vue-character-filter {
        grid-template-columns: minmax(0, 1fr) 124px !important;
        gap: 8px !important;
    }

    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="templates"] #templatesVueApp .vue-template-filter > label,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-character-filter > label {
        display: block !important;
        min-width: 0 !important;
        height: 42px !important;
        font-size: 0 !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-filter > label :is(input, select),
    html body[data-page="characters"] #charactersVueApp .vue-character-filter > label :is(input, select) {
        display: block !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        font-size: 14px !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-filter-meta,
    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta {
        grid-column: 1 / -1 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    html body[data-page="templates"] #templatesVueApp .vue-template-filter-meta > *,
    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta > * {
        min-width: 0 !important;
        font-size: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* V2.2 relationship surfaces: activity first, then personal assets and creator identity. */
html body[data-page="feed"] #feedVueApp .vue-feed,
html body[data-page="user"] #userProfileVueApp .vue-user-profile {
    display: flex !important;
    width: min(var(--experience-width), calc(100% - (var(--experience-gutter) * 2))) !important;
    margin: 0 auto !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-hero,
html body[data-page="user"] #userProfileVueApp .vue-user-hero {
    order: 1;
    margin: 0 !important;
    padding: 26px 0 22px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.17) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 310px) !important;
    gap: 28px !important;
    align-items: center !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-hero h1,
html body[data-page="user"] #userProfileVueApp .vue-user-hero h1 {
    margin: 7px 0 10px !important;
    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-next {
    min-height: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(105, 73, 63, 0.17) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #fffaf7 0%, #f3e3dc 100%) !important;
    box-shadow: 0 14px 32px rgba(78, 55, 47, 0.08) !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-command {
    order: 2;
    margin: 0 !important;
    padding: 20px 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-command-head {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 24px !important;
    align-items: end !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-command-head h2 {
    margin: 4px 0 6px !important;
    font-size: 27px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-filter-row {
    display: flex !important;
    gap: 6px !important;
    justify-content: flex-end !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-filter-chip {
    min-width: 94px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(105, 73, 63, 0.17) !important;
    border-radius: 11px !important;
    background: #fffaf7 !important;
    color: #463a36 !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-filter-chip.is-active {
    border-color: #bd5846 !important;
    background: #bd5846 !important;
    color: #fff !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-priority-grid,
html body[data-page="feed"] #feedVueApp .vue-feed-following-strip {
    display: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-list,
html body[data-page="feed"] #feedVueApp .vue-feed-empty {
    order: 3;
    width: min(860px, 100%) !important;
    margin: 0 auto !important;
    padding: 24px 0 10px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-list {
    display: grid !important;
    gap: 14px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card {
    overflow: hidden !important;
    border: 1px solid rgba(105, 73, 63, 0.17) !important;
    border-radius: 16px !important;
    background: #fffaf7 !important;
    box-shadow: 0 10px 24px rgba(78, 55, 47, 0.06) !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card > .action-surface-primary {
    display: block !important;
    padding: 18px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 10px 18px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-main > :not(.feed-work) {
    grid-column: 1 !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-work {
    grid-column: 2 !important;
    grid-row: 1 / span 5 !important;
    display: grid !important;
    min-width: 0 !important;
    align-content: start !important;
    gap: 8px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-work > img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 11px !important;
    object-fit: cover !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-main h3 {
    margin: 5px 0 0 !important;
    font-size: 22px !important;
    line-height: 1.24 !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-main > p {
    margin: 2px 0 0 !important;
    color: #75655f !important;
    line-height: 1.62 !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card > .action-surface-actions {
    min-height: 60px !important;
    padding: 10px 14px !important;
    border-top: 1px solid rgba(105, 73, 63, 0.13) !important;
    background: rgba(247, 236, 231, 0.58) !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-avatar {
    display: inline-flex !important;
    width: 38px !important;
    min-height: 38px !important;
    align-items: center !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-avatar img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-actor-action {
    margin-right: auto !important;
    color: #4a3b36 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-recommend {
    order: 4;
    margin: 34px 0 0 !important;
    padding: 24px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(105, 73, 63, 0.15) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-stats { order: 5; }
html body[data-page="feed"] #feedVueApp .vue-feed-response { order: 6; }
html body[data-page="feed"] #feedVueApp .vue-feed-loop { order: 7; }

html body[data-page="feed"] #feedVueApp .vue-feed-player-card,
html body[data-page="feed"] #feedVueApp .vue-feed-popular-card,
html body[data-page="user"] #userProfileVueApp .vue-user-work-card {
    overflow: hidden !important;
    border: 1px solid rgba(105, 73, 63, 0.17) !important;
    border-radius: 15px !important;
    background: #fffaf7 !important;
    box-shadow: 0 9px 24px rgba(78, 55, 47, 0.06) !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-player-card > .action-surface-primary,
html body[data-page="feed"] #feedVueApp .vue-feed-popular-card > .action-surface-primary,
html body[data-page="user"] #userProfileVueApp .vue-user-work-card > .action-surface-primary {
    display: block !important;
}

html body[data-page="feed"] #feedVueApp :is(.vue-feed-player-card, .vue-feed-popular-card) > .action-surface-actions,
html body[data-page="user"] #userProfileVueApp .vue-user-work-card > .action-surface-actions {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-top: 1px solid rgba(105, 73, 63, 0.13) !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-popular-card > .action-surface-primary > img,
html body[data-page="user"] #userProfileVueApp .vue-user-work-card > .action-surface-primary > img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-popular-card .card-body,
html body[data-page="user"] #userProfileVueApp .vue-user-work-card .card-body {
    padding: 15px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-popular-card .creator-line {
    margin-right: auto !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-triage { order: 2; }
html body[data-page="me"] #meVueDashboard .vue-me-inventory { order: 3; }

html body[data-page="me"] #meVueDashboard .vue-me-asset-tabs {
    display: flex !important;
    margin: 0 0 14px !important;
    gap: 0 !important;
    overflow-x: auto !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.18) !important;
    scrollbar-width: none !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-asset-tabs > button {
    display: inline-flex !important;
    min-width: 132px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #786963 !important;
    cursor: pointer !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-asset-tabs > button.is-active {
    border-bottom-color: #bd5846 !important;
    color: #392d29 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-asset-tabs > button strong {
    display: inline-grid !important;
    min-width: 26px !important;
    height: 26px !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #f2e3dd !important;
    color: #9e4638 !important;
    font-size: 12px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel {
    grid-column: 1 !important;
    min-height: 240px !important;
}

html body[data-page="user"] #userProfileVueApp .vue-user-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) !important;
    gap: 30px !important;
    align-items: center !important;
}

html body[data-page="user"] #userProfileVueApp .vue-user-identity {
    min-width: 0 !important;
}

html body[data-page="user"] #userProfileVueApp .vue-user-feature {
    min-height: 210px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
}

html body[data-page="user"] #userProfileVueApp .vue-user-stats {
    order: 2;
    display: grid !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.14) !important;
}

html body[data-page="user"] #userProfileVueApp .vue-user-works-primary {
    order: 3;
    margin: 0 !important;
    padding: 24px 0 !important;
}

html body[data-page="user"] #userProfileVueApp .vue-user-work-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

html body[data-page="user"] #userProfileVueApp .vue-user-fit { order: 4; }
html body[data-page="user"] #userProfileVueApp .vue-user-about { order: 5; }
html body[data-page="user"] #userProfileVueApp .vue-user-route { order: 6; }
html body[data-page="user"] #userProfileVueApp .vue-user-cocreate { order: 7; }

@media (max-width: 900px) {
    html body[data-page="feed"] #feedVueApp .vue-feed-hero,
    html body[data-page="user"] #userProfileVueApp .vue-user-hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-command-head {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-filter-row {
        justify-content: flex-start !important;
    }

    html body[data-page="user"] #userProfileVueApp .vue-user-stats,
    html body[data-page="user"] #userProfileVueApp .vue-user-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html body[data-page="feed"] #feedVueApp .vue-feed,
    html body[data-page="user"] #userProfileVueApp .vue-user-profile {
        width: min(100% - 24px, var(--experience-width)) !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-main > :not(.feed-work),
    html body[data-page="feed"] #feedVueApp .vue-feed-activity-card .feed-work {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-activity-card > .action-surface-actions {
        align-items: stretch !important;
    }

    html body[data-page="user"] #userProfileVueApp .vue-user-stats,
    html body[data-page="user"] #userProfileVueApp .vue-user-work-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="me"] #meVueDashboard .vue-me-asset-tabs > button {
        min-width: 116px !important;
    }
}

/* V148: keep the compact asset lanes authoritative over the legacy minimum height. */
html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel,
html body[data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide {
    min-height: 0 !important;
}

/* V2.2 detail pass: action-looking controls share a dependable 44px hit area. */
html body[data-page] #sharedNavApp :is(
    .shared-nav-links > a,
    .shared-nav-actions > a,
    .shared-nav-actions > button
),
html body[data-page] main :is(
    #homeVueApp,
    #galleryVueApp,
    #charactersVueApp,
    #templatesVueApp,
    #feedVueApp,
    #meVueDashboard,
    #userProfileVueApp,
    #workDetailVueApp,
    #ipDetailVueApp,
    #exportVueApp,
    #loginVueApp,
    #adminVueApp,
    [id^="studioVue"]
) :is(
    a[data-ui-icon],
    button[data-ui-icon],
    .primary-link,
    .primary-btn,
    .secondary-btn,
    .link-button,
    .section-heading > a,
    .vue-section-title > a,
    .action-surface-actions a,
    .work-card h3 > a,
    summary
) {
    min-width: 44px !important;
    min-height: 44px !important;
}

html body[data-page] main :is(
    #homeVueApp,
    #galleryVueApp,
    #charactersVueApp,
    #templatesVueApp,
    #feedVueApp,
    #meVueDashboard,
    #userProfileVueApp,
    #workDetailVueApp,
    #ipDetailVueApp,
    #exportVueApp,
    #loginVueApp,
    #adminVueApp,
    [id^="studioVue"]
) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select
) {
    min-height: 44px !important;
}

html body[data-page] main :is(
    #workDetailVueApp,
    #galleryVueApp,
    #feedVueApp,
    #userProfileVueApp
) .work-card h3 > a {
    display: inline-flex !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
}

html body[data-page] main :is(#ipDetailVueApp, #exportVueApp) pre {
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
}

html body[data-page="ip"][data-page="ip"] #ipDetailVueApp .vue-ip-cocreate-brief > pre {
    max-height: none !important;
    overflow: visible !important;
}

html body[data-page="work"][data-page="work"] #workDetailVueApp .comment-item .row-between > a {
    display: inline-flex !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
}

/* The last-loaded surface layer owns final control geometry and page semantics. */
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready main #studioVueCore .vue-core-flow-mode > button,
html body[data-page="studio"].studio-focus-flow.studio-wizard-ready main #studioVueBoard .vue-board-next-action {
    min-height: 44px !important;
    height: 44px !important;
    min-block-size: 44px !important;
    block-size: 44px !important;
    max-height: none !important;
}

html body[data-page="gallery"] main #galleryVueApp .vue-gallery-discovery-tools .secondary-btn {
    min-height: 44px !important;
}

html body[data-page="login"] #loginVueApp .vue-login-art-title {
    max-width: 8ch !important;
    margin: 12px 0 16px !important;
    color: #241d1a !important;
    font-size: 92px !important;
    font-weight: 700 !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

html body[data-page="login"] #loginVueApp .vue-login-card-head h1 {
    margin: 0 0 6px !important;
    color: #2b211f !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 0 !important;
}

@media (max-width: 1100px) {
    html body[data-page="login"] #loginVueApp .vue-login-art-title {
        font-size: 64px !important;
    }
}

/* V2.2 route landing polish: reveal the next surface during gateway exit and keep discovery content in view. */
html body[data-page="home"] .vue-home-gateway.is-leaving {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-empty {
    padding: 16px 0 0 !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-empty > .empty-state {
    min-height: 132px !important;
    padding: 24px 22px !important;
}

html body[data-page="feed"] #feedVueApp .vue-feed-recommend {
    margin-top: 18px !important;
    padding-top: 18px !important;
}

@media (min-width: 761px) {
    html body[data-page="characters"] #charactersVueApp .vue-characters-hero,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-characters-hero {
        padding-top: 16px !important;
        padding-bottom: 14px !important;
        gap: 22px !important;
    }

    html body[data-page="characters"] #charactersVueApp .vue-character-command,
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-characters-hero > .vue-character-command {
        height: 168px !important;
    }

    html body[data-page="characters"] #charactersVueApp .vue-character-library {
        padding-top: 16px !important;
        gap: 10px !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="studio"].studio-wizard-ready :is(
        .page-title.studio-hero-title,
        .studio-advanced-start
    ) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        visibility: hidden !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-empty > .empty-state {
        min-height: 0 !important;
        padding: 22px 18px !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-recommend {
        margin-top: 12px !important;
        padding-top: 14px !important;
    }
}

/* Community stream: one continuous browsing surface with interaction attached to each work. */
html body[data-page="gallery"] #galleryVueApp .vue-gallery-more {
    display: none !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-workspace {
    margin-top: 24px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-creator-row {
    display: flex !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.1) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-creator-row > .creator-line {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-follow-button {
    display: inline-flex !important;
    min-width: 72px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    border: 1px solid rgba(184, 84, 72, 0.3) !important;
    border-radius: 12px !important;
    color: #a74736 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-follow-button:is(:hover, :focus-visible) {
    border-color: rgba(184, 84, 72, 0.58) !important;
    background: rgba(184, 84, 72, 0.07) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-follow-button.is-following {
    border-color: rgba(105, 73, 63, 0.16) !important;
    color: #74655f !important;
    background: rgba(105, 73, 63, 0.05) !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-stream-sentinel {
    display: flex !important;
    min-height: 64px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #85746d !important;
    font-size: 13px !important;
}

html body[data-page="gallery"] #galleryVueApp .vue-gallery-stream-sentinel span:first-child::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(184, 84, 72, 0.22);
    border-top-color: #b85448;
    border-radius: 50%;
    vertical-align: -2px;
    animation: gallery-stream-spin 0.8s linear infinite;
}

@keyframes gallery-stream-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    html body[data-page="gallery"] #galleryVueApp .vue-gallery-stream-sentinel span:first-child::before {
        animation: none !important;
    }
}

/* Public archive cards: cinematic imagery, one caption layer, one optional action. */
html body[data-page="characters"] #charactersVueApp .vue-character-library-head {
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.15) !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-library-head > strong {
    color: #8a746c !important;
    font-size: 14px !important;
    font-weight: 750 !important;
}

html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-character-filter {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px) auto !important;
    margin: 0 !important;
    padding: 10px 0 14px !important;
    align-items: end !important;
    gap: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(105, 73, 63, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-filter > label {
    color: #75645e !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-filter > label :is(input, select) {
    height: 46px !important;
    min-height: 46px !important;
    margin-top: 6px !important;
    border: 1px solid rgba(105, 73, 63, 0.18) !important;
    border-radius: 12px !important;
    color: #2c2321 !important;
    background: rgba(255, 252, 249, 0.76) !important;
    box-shadow: none !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta {
    min-width: 148px !important;
    padding: 0 0 10px !important;
    text-align: right !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta > small {
    display: none !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card.action-surface-entity {
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(105, 73, 63, 0.16) !important;
    border-radius: 16px !important;
    background: #fffaf7 !important;
    box-shadow: 0 10px 26px rgba(71, 50, 43, 0.07) !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card.oc-archive-card::after {
    z-index: 3 !important;
    width: 8px !important;
    opacity: 0.42 !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.52) 0 2px, transparent 2.5px) center 12px / 8px 20px repeat-y !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card > .action-surface-primary {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    overflow: hidden !important;
    aspect-ratio: 3 / 4 !important;
    background: #201a1c !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .oc-archive-cover {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #201a1c !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .oc-archive-cover::after {
    display: none !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .oc-archive-cover > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 30% !important;
    transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1) !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card:is(:hover, :focus-within) .oc-archive-cover > img {
    transform: scale(1.025) !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-body {
    position: absolute !important;
    z-index: 2 !important;
    inset: auto 0 0 !important;
    padding: 84px 20px 20px 22px !important;
    color: #fffaf7 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(24, 18, 20, 0.82) 48%, rgba(24, 18, 20, 0.96) 100%) !important;
    pointer-events: none !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-body > .pill {
    display: inline-block !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #f2b89e !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-body h3 {
    margin: 7px 0 7px !important;
    color: #fffaf7 !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-body > p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(255, 250, 247, 0.8) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-body > .oc-archive-quote {
    margin-top: 9px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 250, 247, 0.64) !important;
    font-size: 12px !important;
    -webkit-line-clamp: 1 !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card > .action-surface-actions {
    padding: 0 !important;
    border: 0 !important;
    background: #fffaf7 !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-foot {
    display: flex !important;
    min-height: 54px !important;
    padding: 5px 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-foot > * {
    flex: 0 1 auto !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-foot .secondary-btn {
    min-height: 44px !important;
    padding: 9px 13px !important;
    border: 0 !important;
    color: #a74736 !important;
    background: transparent !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .card-foot .secondary-btn:is(:hover, :focus-visible) {
    background: rgba(184, 84, 72, 0.07) !important;
}

html body[data-page="characters"] #charactersVueApp .vue-character-card .vue-card-license {
    margin-right: 8px !important;
    color: #8a746c !important;
    font-size: 13px !important;
}

@media (max-width: 980px) {
    html body[data-page="characters"] #charactersVueApp .vue-character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html body:is(.animaker-theme-day, .animaker-theme-night)[data-page="characters"] #charactersVueApp .vue-character-filter {
        grid-template-columns: minmax(0, 1fr) 124px !important;
    }

    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    html body[data-page="characters"] #charactersVueApp .vue-character-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="characters"] #charactersVueApp .vue-character-card > .action-surface-primary {
        aspect-ratio: 4 / 5 !important;
    }
}

/* V2.3 mobile studio audit: one header, one task, one refinement entry. */
@media (max-width: 760px) {
    html body[data-page="studio"] {
        padding-top: 58px !important;
    }

    html body[data-page="studio"] > header.topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
    }

    html body[data-page="studio"] > header.topbar > .brand {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: calc(100% - 92px) !important;
        font-size: 16px !important;
    }

    html body[data-page="studio"] > header.topbar > .shared-nav-root {
        position: static !important;
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 64px !important;
        width: 100% !important;
        height: 58px !important;
        margin: 0 !important;
    }

    html body[data-page="studio"] > header.topbar .shared-nav {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        width: 100% !important;
        min-height: 58px !important;
        padding: 0 !important;
    }

    html body[data-page="studio"] > header.topbar .shared-nav::after {
        content: none !important;
    }

    html body[data-page="studio"] > header.topbar .shared-nav::before {
        content: none !important;
    }

    html body[data-page="studio"] > header.topbar .shared-nav-access-status {
        position: static !important;
        grid-column: 2 !important;
        align-self: center !important;
        margin: 0 !important;
    }

    html body[data-page="studio"] > header.topbar .shared-nav-actions {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-head {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-head p,
    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-write-head > .primary-btn,
    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active :is(.vue-visual-toolbox, .vue-visual-manual) {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-field-drawer > summary {
        min-height: 64px !important;
        padding: 10px 12px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-field-drawer > summary p {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-field-drawer .vue-visual-write-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-runway,
    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-prompt-map {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-write-head p {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-image-write-now .vue-image-field {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-preview.avatar-preview .vue-board-tags:empty,
    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 #avatarPreview.studio-preview.avatar-preview {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-card-cover > div > span {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-publish-card-tags {
        display: none !important;
    }
}

/* V2.4 mobile studio parity: one memory dock, one task, one next action. */
@media (max-width: 760px) {
    html body[data-page="studio"][data-page="studio"].studio-wizard-ready {
        --mobile-studio-topbar: 58px;
        --mobile-studio-dock: 98px;
        --mobile-studio-nav: 66px;
        --mobile-studio-action: 72px;
        padding-top: var(--mobile-studio-topbar) !important;
        padding-bottom: calc(var(--mobile-studio-nav) + var(--mobile-studio-action) + 28px + env(safe-area-inset-bottom)) !important;
        scroll-padding-top: calc(var(--mobile-studio-topbar) + var(--mobile-studio-dock) + 12px) !important;
        scroll-padding-bottom: calc(var(--mobile-studio-nav) + var(--mobile-studio-action) + 28px + env(safe-area-inset-bottom)) !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-focus-flow.studio-wizard-ready > main {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 10px 24px !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-focus-flow.studio-wizard-ready > main > .vue-mobile-studio-shell {
        position: sticky !important;
        top: var(--mobile-studio-topbar) !important;
        z-index: 181 !important;
        display: block !important;
        width: calc(100% + 20px) !important;
        min-height: var(--mobile-studio-dock) !important;
        margin: 0 -10px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(111, 78, 68, 0.15) !important;
        color: #2d2421 !important;
        background: rgba(255, 251, 247, 0.96) !important;
        box-shadow: 0 8px 24px rgba(86, 58, 50, 0.08) !important;
        backdrop-filter: blur(18px) saturate(1.08) !important;
    }

    html body[data-page="studio"] .vue-mobile-studio {
        display: grid !important;
        gap: 5px !important;
        padding: 7px 10px 8px !important;
    }

    html body[data-page="studio"] .vue-mobile-character-trigger {
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        min-height: 40px !important;
        padding: 3px 8px 3px 3px !important;
        border: 0 !important;
        border-radius: 10px !important;
        color: #2d2421 !important;
        background: rgba(248, 235, 229, 0.72) !important;
        box-shadow: none !important;
    }

    html body[data-page="studio"] .vue-mobile-character-trigger > :is(img, span[data-ui-icon]) {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        color: #ad4c39 !important;
        background: #fff9f5 !important;
    }

    html body[data-page="studio"] .vue-mobile-character-trigger small {
        color: #88736c !important;
        font-size: 10px !important;
    }

    html body[data-page="studio"] .vue-mobile-character-trigger strong {
        color: #2d2421 !important;
        font-size: 13px !important;
    }

    html body[data-page="studio"] .vue-mobile-character-trigger em {
        color: #b84f39 !important;
        font-variant-numeric: tabular-nums !important;
    }

    html body[data-page="studio"] .vue-mobile-step-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    html body[data-page="studio"] .vue-mobile-step-tabs > button {
        min-height: 36px !important;
        padding: 4px 2px !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #8a7770 !important;
        background: transparent !important;
    }

    html body[data-page="studio"] .vue-mobile-step-tabs > button > span {
        color: inherit !important;
        font-size: 9px !important;
        font-variant-numeric: tabular-nums !important;
    }

    html body[data-page="studio"] .vue-mobile-step-tabs > button > strong {
        color: inherit !important;
        font-size: 12px !important;
    }

    html body[data-page="studio"] .vue-mobile-step-tabs > button.done {
        color: #8a6c63 !important;
    }

    html body[data-page="studio"] .vue-mobile-step-tabs > button.active {
        color: #9f3f30 !important;
        background: #f7dfd6 !important;
        box-shadow: inset 0 -2px 0 #bd573f !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready .studio-workbench,
    html body[data-page="studio"][data-page="studio"].studio-mode-advanced.studio-focus-flow.studio-wizard-ready .studio-workbench {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-workbench > .studio-rail,
    html body[data-page="studio"][data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-workbench > .studio-preview.avatar-preview {
        display: none !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-focus-flow.studio-wizard-ready .studio-workbench > .designer-form.studio-flow {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body[data-page="studio"].studio-wizard-ready .designer-form.studio-flow > .studio-panel.is-active {
        padding: 14px 0 22px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head {
        padding: 2px 2px 12px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-step-head h2 {
        font-size: clamp(25px, 8vw, 31px) !important;
        line-height: 1.12 !important;
    }

    html body[data-page="studio"].studio-wizard-ready :is(
        .studio-quick-presets,
        .studio-spark-strip,
        .vue-core-flow-steps,
        .vue-core-ai-brief-chips,
        .vue-core-launch-pack,
        .vue-core-command,
        .vue-core-mission,
        .vue-core-actions-drawer,
        .vue-core-inspiration-drawer,
        .vue-core-quick-panel,
        .vue-core-manual,
        .vue-step-task-chips
    ) {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-flow-console {
        margin: 0 0 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-write-now {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-write-head {
        margin-bottom: 8px !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-ai-brief {
        gap: 8px !important;
        margin: 0 0 12px !important;
        padding: 12px !important;
        border-radius: 14px !important;
        background: rgba(255, 252, 249, 0.82) !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-ai-brief textarea {
        min-height: 112px !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-write-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-field {
        min-height: 0 !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .studio-panel.is-active .vue-visual-actions {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-access-strip {
        min-height: 42px !important;
        margin-bottom: 10px !important;
        padding: 8px 11px !important;
        border: 1px solid rgba(196, 92, 63, 0.18) !important;
        border-radius: 12px !important;
        background: rgba(249, 228, 218, 0.62) !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-access-strip small {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-access-strip :is(strong, b) {
        color: #a84734 !important;
        font-size: 12px !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-readiness {
        margin-bottom: 12px !important;
        padding: 14px !important;
        border: 1px solid rgba(111, 78, 68, 0.14) !important;
        border-radius: 16px !important;
        background: rgba(255, 252, 249, 0.88) !important;
        box-shadow: 0 12px 30px rgba(86, 58, 50, 0.07) !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-readiness-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-readiness-head p,
    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-command-status small {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-command-status {
        min-height: 44px !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: #f6ece7 !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-action-feedback {
        min-height: 0 !important;
        margin: 8px 0 0 !important;
        font-size: 12px !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-decision {
        padding: 14px !important;
        border: 1px solid rgba(111, 78, 68, 0.14) !important;
        border-radius: 16px !important;
        background: rgba(255, 252, 249, 0.86) !important;
        box-shadow: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-decision-head {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-decision-head p,
    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-gap-row,
    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-decision > small {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-permission-strip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        margin-top: 12px !important;
        border-top: 1px solid rgba(111, 78, 68, 0.13) !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-permission-strip > :is(article, button) {
        min-height: 60px !important;
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(111, 78, 68, 0.12) !important;
        border-radius: 0 !important;
        text-align: left !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-permission-strip small {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-showcase {
        padding: 14px !important;
        border: 1px solid rgba(111, 78, 68, 0.14) !important;
        border-radius: 16px !important;
        background: rgba(255, 252, 249, 0.76) !important;
        box-shadow: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-showcase-head p,
    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-card-tags {
        display: none !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-showcase-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-mode-list {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    html body[data-page="studio"].studio-wizard-ready #studioVuePublish .vue-publish-mode-list > button {
        min-height: 64px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    html body[data-page="studio"].studio-wizard-ready .designer-form.studio-flow > .studio-wizard-nav {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(var(--mobile-studio-nav) + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        z-index: 190 !important;
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: var(--mobile-studio-action) !important;
        padding: 9px 12px !important;
        border: 0 !important;
        border-top: 1px solid rgba(111, 78, 68, 0.14) !important;
        border-radius: 0 !important;
        background: rgba(255, 251, 247, 0.97) !important;
        box-shadow: 0 -10px 28px rgba(86, 58, 50, 0.1) !important;
        backdrop-filter: blur(18px) !important;
    }

    html body[data-page="studio"] .vue-mobile-character-sheet > section {
        border-color: rgba(111, 78, 68, 0.16) !important;
        color: #2d2421 !important;
        background: #fffaf7 !important;
    }

    html body[data-page="studio"] .vue-mobile-sheet-preview {
        border-color: rgba(111, 78, 68, 0.14) !important;
        background: #fffdfb !important;
    }

    html body[data-page="studio"] .vue-mobile-sheet-progress i {
        background: #bd573f !important;
    }

    html body[data-page="studio"] .vue-mobile-character-sheet header span,
    html body[data-page="studio"] .vue-mobile-sheet-preview span {
        color: #a84734 !important;
    }
}

@media (max-width: 380px) {
    html body[data-page="studio"] .vue-mobile-character-trigger > span:nth-child(2) small {
        display: none !important;
    }

    html body[data-page="studio"] .vue-mobile-step-tabs > button {
        grid-template-columns: 1fr !important;
        gap: 1px !important;
    }
}

/* Mobile specificity seal: retire the desktop rail and keep navigation outside document flow. */
@media (max-width: 760px) {
    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready .studio-workbench > .studio-rail,
    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-advanced.studio-focus-flow.studio-wizard-ready .studio-workbench > .studio-rail {
        display: none !important;
    }

    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready .studio-workbench,
    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-advanced.studio-focus-flow.studio-wizard-ready .studio-workbench {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: var(--mobile-studio-dock) 0 0 !important;
    }

    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready .studio-workbench > .designer-form.studio-flow,
    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-advanced.studio-focus-flow.studio-wizard-ready .studio-workbench > .designer-form.studio-flow {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready .designer-form.studio-flow > .studio-wizard-nav,
    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-advanced.studio-focus-flow.studio-wizard-ready .designer-form.studio-flow > .studio-wizard-nav {
        position: fixed !important;
        inset: auto 0 calc(var(--mobile-studio-nav) + env(safe-area-inset-bottom)) 0 !important;
        z-index: 190 !important;
        width: 100% !important;
        min-height: var(--mobile-studio-action) !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        border-radius: 0 !important;
    }

    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-focus-flow.studio-wizard-ready .shared-ai-mini-dock {
        display: none !important;
    }

    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready.studio-step-publish .designer-form.studio-flow > .studio-wizard-nav,
    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-advanced.studio-focus-flow.studio-wizard-ready.studio-step-publish .designer-form.studio-flow > .studio-wizard-nav {
        display: none !important;
    }
}

/* V2.4 mobile wayfinding: five stable destinations, one primary action, no clipped controls. */
.shared-mobile-nav {
    display: none;
}

@media (max-width: 760px) {
    :root {
        --animaker-mobile-nav-height: 70px;
    }

    html body[data-page] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-bottom: calc(var(--animaker-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    }

    html body[data-page] > header.topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1100 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        padding: 0 12px !important;
        overflow: visible !important;
        border-bottom: 1px solid rgba(96, 67, 58, 0.12) !important;
        background: rgba(255, 252, 249, 0.96) !important;
        backdrop-filter: none !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready > header.topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: 58px !important;
        align-items: center !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready > header.topbar > .brand {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    html body[data-page] > header.topbar .brand {
        min-width: 0 !important;
        max-width: 230px !important;
        overflow: hidden !important;
        font-size: 17px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body[data-page][data-page] > header.topbar > #sharedNavApp.shared-nav-root {
        display: flex !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        align-self: center !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto !important;
    }

    html body[data-page][data-page] > header.topbar > #sharedNavApp .shared-nav {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        justify-content: flex-end !important;
    }

    html body[data-page] > header.topbar .shared-nav::before {
        content: none !important;
        display: none !important;
    }

    html body[data-page] > header.topbar .shared-nav::after {
        content: none !important;
        display: none !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-nav > .shared-nav-links,
    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-nav > .shared-nav-actions {
        display: none !important;
    }

    html body[data-page] > header.topbar > :is(nav.nav, a.primary-link) {
        display: none !important;
    }

    html body[data-page] > header.topbar .shared-nav-access-status {
        display: inline-flex !important;
        width: auto !important;
        min-height: 30px !important;
        padding: 0 9px !important;
        align-items: center !important;
        border: 1px solid rgba(190, 86, 62, 0.2) !important;
        border-radius: 8px !important;
        color: #9d402f !important;
        background: #fff4ef !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-nav > nav.shared-mobile-nav {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        z-index: 1300 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        height: calc(var(--animaker-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
        padding: 5px 6px env(safe-area-inset-bottom) !important;
        border-top: 1px solid rgba(92, 61, 53, 0.14) !important;
        background: rgba(255, 252, 250, 0.98) !important;
        box-shadow: 0 -10px 28px rgba(67, 42, 35, 0.1) !important;
        backdrop-filter: blur(18px) !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-nav > nav.shared-mobile-nav > a {
        position: relative !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 58px !important;
        padding: 6px 2px 4px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border: 0 !important;
        border-radius: 8px !important;
        color: #84736d !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 11px !important;
        font-weight: 760 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-mobile-nav .shared-mobile-nav-icon {
        display: grid !important;
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
        place-items: center !important;
        color: currentColor !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-mobile-nav .shared-mobile-nav-icon::before {
        content: "" !important;
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        background: currentColor !important;
        opacity: 0.74 !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][data-page] > header.topbar #sharedNavApp .shared-mobile-nav > a.active:not(.is-create) {
        color: #a8402f !important;
        background: #fff2ed !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-mobile-nav > a.is-create {
        padding: 6px 2px 4px !important;
        color: #a8402f !important;
        font-weight: 900 !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-mobile-nav > a.is-create .shared-mobile-nav-icon {
        position: static !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: currentColor !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-mobile-nav > a.is-create .shared-mobile-nav-icon::before {
        width: 20px !important;
        height: 20px !important;
        opacity: 0.86 !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-mobile-nav > a.is-create.active {
        color: #a8402f !important;
        background: #fff2ed !important;
    }

    html body[data-page] > main,
    html body[data-page] > main > [id$="App"],
    html body[data-page] > main > [id$="VueApp"] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-page] main :is(section, article, div, form, nav, label) {
        min-width: 0 !important;
    }

    html body[data-page] main :is(input, select, textarea, button, a) {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    html body[data-page] main :is(input, select, textarea) {
        width: 100% !important;
    }

    html body[data-page] main :is(
        .vue-gallery-actions,
        .vue-templates-actions,
        .vue-characters-actions,
        .vue-feed-actions,
        .vue-me-actions,
        .vue-user-actions,
        .vue-work-actions,
        .vue-export-actions
    ) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    html body[data-page] main :is(
        .vue-gallery-actions,
        .vue-templates-actions,
        .vue-characters-actions,
        .vue-feed-actions,
        .vue-me-actions,
        .vue-user-actions,
        .vue-work-actions,
        .vue-export-actions
    ) > :is(a, button) {
        width: 100% !important;
        min-height: 48px !important;
    }

    html body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
        .vue-gallery-copy,
        .vue-templates-copy,
        .vue-characters-copy
    ) > h1 {
        max-width: 13ch !important;
        margin-block: 8px 10px !important;
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    html body:is([data-page="gallery"], [data-page="templates"], [data-page="characters"]) :is(
        .vue-gallery-copy,
        .vue-templates-copy,
        .vue-characters-copy
    ) > p:not(.eyebrow) {
        display: -webkit-box !important;
        overflow: hidden !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery,
    html body[data-page="templates"] #templatesVueApp .vue-templates,
    html body[data-page="characters"] #charactersVueApp .vue-characters {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 12px !important;
        margin-inline: auto !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-hero,
    html body[data-page="templates"] #templatesVueApp .vue-templates-hero,
    html body[data-page="characters"] #charactersVueApp .vue-characters-hero {
        width: 100% !important;
        max-width: 100% !important;
        padding-block: 22px 18px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools,
    html body[data-page="templates"] #templatesVueApp .vue-template-filter,
    html body[data-page="characters"] #charactersVueApp .vue-character-filter {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    html body[data-page="gallery"][data-page="gallery"] #galleryVueApp .vue-gallery-copy > .vue-gallery-actions,
    html body[data-page="templates"][data-page="templates"] #templatesVueApp .vue-templates-copy > .vue-templates-actions,
    html body[data-page="characters"][data-page="characters"] #charactersVueApp .vue-characters-copy > .vue-characters-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    html body[data-page="gallery"][data-page="gallery"] #galleryVueApp .vue-gallery-copy > .vue-gallery-actions > :is(a, button),
    html body[data-page="templates"][data-page="templates"] #templatesVueApp .vue-templates-copy > .vue-templates-actions > :is(a, button),
    html body[data-page="characters"][data-page="characters"] #charactersVueApp .vue-characters-copy > .vue-characters-actions > :is(a, button) {
        width: 100% !important;
        min-height: 46px !important;
    }

    html body[data-page="characters"][data-page="characters"] #charactersVueApp .vue-character-library > .vue-character-filter {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    html body[data-page="templates"][data-page="templates"] #templatesVueApp .vue-template-quickstart,
    html body[data-page="characters"][data-page="characters"] #charactersVueApp .vue-character-quickstart,
    html body[data-page="templates"][data-page="templates"] #templatesVueApp .vue-templates-actions > .secondary-btn,
    html body[data-page="characters"][data-page="characters"] #charactersVueApp .vue-characters-actions > .secondary-btn {
        display: none !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-discovery-tools > :is(button, a),
    html body[data-page="templates"] #templatesVueApp .vue-template-filter-meta,
    html body[data-page="characters"] #charactersVueApp .vue-character-filter-meta {
        width: 100% !important;
        grid-column: 1 !important;
    }

    html body:is([data-page="templates"], [data-page="characters"]) :is(.vue-template-filter, .vue-character-filter) > label {
        width: 100% !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-chip-row.is-category {
        display: flex !important;
        width: 100% !important;
        padding: 5px !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-chip-row.is-category > button {
        flex: 0 0 112px !important;
        scroll-snap-align: start !important;
    }

    html body[data-page="gallery"] #galleryVueApp .vue-gallery-chip-row.is-category > span {
        display: none !important;
    }

    html body[data-page="studio"] .studio-panel.is-active,
    html body[data-page="studio"] .studio-panel.is-active :is(
        .vue-core-dock,
        .vue-core-write-now,
        .vue-core-ai-brief,
        .vue-core-ai-brief-actions,
        .vue-core-flow-mode,
        .vue-visual-dock,
        .vue-image-dock,
        .vue-publish-dock
    ) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready main #studioVueCore .vue-core-ai-brief-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 96px !important;
        gap: 8px !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready main #studioVueCore .vue-core-ai-brief-actions > :is(button, a) {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-page="studio"] .vue-core-flow-mode {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready {
        --mobile-studio-dock: 55px;
        --mobile-studio-nav: var(--animaker-mobile-nav-height);
        padding-top: 0 !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready > main > .vue-mobile-studio-shell {
        min-height: var(--mobile-studio-dock) !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready .vue-mobile-studio {
        gap: 0 !important;
        padding: 4px 10px 6px !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready .vue-mobile-character-trigger {
        display: none !important;
    }

    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-quick.studio-focus-flow.studio-wizard-ready .studio-workbench,
    html body[data-page="studio"][data-page="studio"][data-page="studio"].studio-mode-advanced.studio-focus-flow.studio-wizard-ready .studio-workbench {
        padding-top: var(--mobile-studio-dock) !important;
    }

    html body[data-page="me"] #meVueDashboard > :is(.empty-state, .vue-me-login-required) {
        box-sizing: border-box !important;
        width: calc(100% - 24px) !important;
        max-width: 520px !important;
        margin: 12px auto !important;
        padding: 24px 16px !important;
    }

    html body[data-page="me"] #meVueDashboard > :is(.empty-state, .vue-me-login-required) :is(a, button) {
        width: 100% !important;
    }

    html body[data-page="me"][data-page="me"] #meVueDashboard .vue-me-actions > .secondary-btn,
    html body[data-page="me"][data-page="me"] #meVueDashboard .vue-me-inventory-head > .primary-link,
    html body[data-page="feed"][data-page="feed"] #feedVueApp .vue-feed-actions > .secondary-btn {
        display: none !important;
    }

    html body[data-page="home"][data-page="home"] #homeVueApp .vue-home-brief {
        align-items: stretch !important;
    }

    html body[data-page="home"][data-page="home"] #homeVueApp .vue-home-brief > label,
    html body[data-page="home"][data-page="home"] #homeVueApp .vue-home-brief > .vue-home-brief-actions {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        align-self: stretch !important;
    }

    html body[data-page="home"].home-gateway-open {
        padding-bottom: 0 !important;
    }

    html body[data-page="home"].home-gateway-open #sharedNavApp .shared-mobile-nav {
        display: none !important;
    }
}

@media (max-width: 380px) {
    html body[data-page] > header.topbar .brand {
        max-width: 205px !important;
        font-size: 16px !important;
    }

    html body[data-page][data-page] > header.topbar #sharedNavApp .shared-mobile-nav > a {
        font-size: 10px !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready main #studioVueCore .vue-core-ai-brief-actions {
        grid-template-columns: minmax(0, 1fr) 86px !important;
    }
}

/* V2.4 mobile content priority: keep the next useful action above desktop-only depth. */
@media (max-width: 640px) {
    html body[data-page="studio"] .studio-wizard-nav [data-studio-step-prev] {
        width: 48px !important;
        min-width: 48px !important;
        padding-inline: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
    }

    html body[data-page="feed"] #feedVueApp .vue-feed-player-grid > :nth-child(n + 4),
    html body[data-page="feed"] #feedVueApp .vue-feed-work-grid > :nth-child(n + 4) {
        display: none !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-cover {
        width: 100% !important;
        max-height: none !important;
        aspect-ratio: 16 / 10 !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-main {
        padding: 0 !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-main h1 {
        margin-block: 8px 12px !important;
        font-size: 34px !important;
        line-height: 1.04 !important;
    }

    html body[data-page="work"] #workDetailVueApp :is(.vue-work-nav, .vue-work-cocreate, .vue-work-next) {
        display: none !important;
    }

    html body[data-page="work"] #workDetailVueApp :is(.vue-work-file-stamps, .vue-work-ownership-strip) {
        display: none !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-file-stamps > :nth-child(n + 3),
    html body[data-page="work"] #workDetailVueApp .vue-work-stats > :nth-child(n + 4),
    html body[data-page="work"] #workDetailVueApp .oc-lore-grid > :nth-child(n + 4),
    html body[data-page="work"] #workDetailVueApp .detail-recommend-grid > .work-card:nth-of-type(n + 2) {
        display: none !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        order: 3 !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-cover { order: 1 !important; }
    html body[data-page="work"] #workDetailVueApp .vue-work-main { order: 2 !important; }
    html body[data-page="work"] #workDetailVueApp .vue-work-side { display: contents !important; }
    html body[data-page="work"] #workDetailVueApp .vue-work-stats { order: 4 !important; }

    html body[data-page="work"] #workDetailVueApp .vue-work-actions > :is(a, button) {
        width: 100% !important;
        min-height: 44px !important;
        padding-inline: 8px !important;
        gap: 6px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-actions > :is(.primary-btn, .primary-link)::after {
        display: none !important;
    }

    html body[data-page="work"] #workDetailVueApp .vue-work-actions > .primary-link:last-child {
        grid-column: 1 / -1 !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-cover {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-copy h1 {
        margin-block: 8px 10px !important;
        font-size: 36px !important;
        line-height: 1.02 !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-copy > p:last-of-type {
        display: none !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-actions > .primary-link {
        order: -1 !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-actions > :first-child,
    html body[data-page="ip"] #ipDetailVueApp .vue-ip-actions > :nth-child(n + 4),
    html body[data-page="ip"] #ipDetailVueApp .vue-ip-stats > :nth-child(n + 3),
    html body[data-page="ip"] #ipDetailVueApp .vue-nextline-steps > :nth-child(n + 3),
    html body[data-page="ip"] #ipDetailVueApp .vue-relation-lines > :nth-child(n + 3),
    html body[data-page="ip"] #ipDetailVueApp .vue-ip-character-grid > :nth-child(n + 3) {
        display: none !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-ip-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="ip"] #ipDetailVueApp :is(
        .vue-ip-series,
        .vue-ip-section-grid,
        .vue-ip-production,
        .vue-ip-cocreate
    ) {
        display: none !important;
    }

    html body[data-page="ip"] #ipDetailVueApp .vue-relation-map {
        height: 280px !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-cover {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-summary {
        padding: 0 !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-summary h1 {
        margin-block: 7px 9px !important;
        font-size: 34px !important;
        line-height: 1.04 !important;
    }

    html body[data-page="export"] #exportVueApp :is(
        .vue-export-package-rail,
        .vue-export-pass,
        .vue-export-ownership-strip,
        .vue-export-source-notice,
        .vue-export-flow,
        .vue-export-achievement,
        .vue-export-readiness,
        .vue-export-launch,
        .vue-export-sheet,
        .vue-export-caption-card
    ) {
        display: none !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-actions > :nth-child(n + 3) {
        display: none !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-planner {
        display: grid !important;
        grid-auto-columns: minmax(220px, 78vw) !important;
        grid-auto-flow: column !important;
        grid-template-columns: none !important;
        padding-bottom: 4px !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-template-card {
        min-height: 124px !important;
        scroll-snap-align: start !important;
    }

    html body[data-page="export"] #exportVueApp .vue-export-copy-grid pre {
        max-height: 260px !important;
        overflow: auto !important;
    }
}

@media (max-width: 760px) {
    html body[data-page="work"][data-page="work"] #workDetailVueApp .vue-work-side > .vue-work-actions,
    html body[data-page="user"][data-page="user"] #userProfileVueApp .vue-user-hero .vue-user-actions,
    html body[data-page="ip"][data-page="ip"] #ipDetailVueApp .vue-ip-copy > .vue-ip-actions,
    html body[data-page="export"][data-page="export"] #exportVueApp .vue-export-summary > .vue-export-actions {
        display: none !important;
    }

    /* V2.5 wins over the legacy brand-first mobile header on every context page. */
    html body[data-page][data-page].animaker-mobile-context-page > header.topbar,
    html body[data-page="studio"][data-page="studio"].studio-wizard-ready.animaker-mobile-context-page > header.topbar {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        min-height: calc(var(--animaker-mobile-header-height) + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) 0 0 !important;
    }

    html body[data-page][data-page].animaker-mobile-context-page > header.topbar > .brand,
    html body[data-page="studio"][data-page="studio"].studio-wizard-ready.animaker-mobile-context-page > header.topbar > .brand {
        display: none !important;
    }

    html body[data-page][data-page].animaker-mobile-context-page > header.topbar > #sharedNavApp.shared-nav-root,
    html body[data-page][data-page].animaker-mobile-context-page > header.topbar > #sharedNavApp.shared-nav-root > .shared-nav {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: var(--animaker-mobile-header-height) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body[data-page][data-page].animaker-mobile-context-page .mobile-app-bar {
        display: grid !important;
    }
}

/* Phone landscape keeps one navigation layer instead of falling back to the desktop header stack. */
@media (min-width: 761px) and (max-width: 900px) and (max-height: 500px) {
    :root {
        --animaker-mobile-header-height: 54px;
        --animaker-mobile-nav-height: 54px;
    }

    html body[data-page] {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-bottom: calc(var(--animaker-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    }

    html body[data-page] > header.topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1100 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        width: 100% !important;
        min-height: var(--animaker-mobile-header-height) !important;
        padding: 0 14px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(96, 67, 58, 0.12) !important;
        background: rgba(255, 252, 249, 0.97) !important;
        backdrop-filter: none !important;
    }

    html body[data-page] > header.topbar > :is(nav.nav, a.primary-link),
    html body[data-page] > header.topbar #sharedNavApp .shared-nav > :is(.shared-nav-links, .shared-nav-actions) {
        display: none !important;
    }

    html body[data-page] > header.topbar > #sharedNavApp.shared-nav-root,
    html body[data-page] > header.topbar > #sharedNavApp .shared-nav {
        position: static !important;
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-end !important;
    }

    html body[data-page] > header.topbar .brand {
        display: inline-flex !important;
        max-width: 240px !important;
        overflow: hidden !important;
        font-size: 16px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body[data-page] > header.topbar #sharedNavApp nav.shared-mobile-nav {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        z-index: 1300 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        min-height: calc(var(--animaker-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
        padding: 4px 10px env(safe-area-inset-bottom) !important;
        border-top: 1px solid rgba(92, 61, 53, 0.14) !important;
        background: rgba(255, 252, 250, 0.98) !important;
        box-shadow: 0 -8px 24px rgba(67, 42, 35, 0.09) !important;
    }

    html body[data-page] > header.topbar #sharedNavApp nav.shared-mobile-nav > a {
        display: inline-flex !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 0 8px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #7d6b65 !important;
        background: transparent !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    html body[data-page] > header.topbar #sharedNavApp nav.shared-mobile-nav > a.active {
        color: #a8402f !important;
        background: #fff2ed !important;
    }

    html body[data-page].animaker-mobile-context-page {
        padding-top: 0 !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }

    html body[data-page].animaker-mobile-context-page > header.topbar {
        display: block !important;
        padding: 0 !important;
    }

    html body[data-page].animaker-mobile-context-page > header.topbar > .brand {
        display: none !important;
    }

    html body[data-page].animaker-mobile-context-page > header.topbar > #sharedNavApp.shared-nav-root,
    html body[data-page].animaker-mobile-context-page > header.topbar > #sharedNavApp.shared-nav-root > .shared-nav {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: var(--animaker-mobile-header-height) !important;
    }

    html body[data-page].animaker-mobile-context-page .mobile-app-bar {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        min-height: var(--animaker-mobile-header-height) !important;
        padding: 5px 12px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    html body[data-page].animaker-mobile-context-page .mobile-app-bar > strong {
        overflow: hidden !important;
        font-size: 16px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body[data-page].animaker-mobile-context-page .mobile-app-bar-back {
        display: grid !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        place-items: center !important;
        border: 1px solid rgba(112, 76, 66, 0.14) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.76) !important;
    }
}

/* Profile editing follows the same dialog/sheet interaction contract as mobile comments and filters. */
html body[data-page="me"] #meVueDashboard .vue-me-profile-settings-trigger {
    display: flex !important;
    width: 100% !important;
    min-height: 70px !important;
    padding: 14px 4px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #3d312d !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-profile-settings-trigger > div {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-profile-settings-trigger span {
    color: #a74b3d !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-profile-settings-trigger strong {
    font-size: 17px !important;
    line-height: 1.35 !important;
}

html body[data-page="me"] #meVueDashboard .vue-me-profile-settings-trigger::before {
    order: 2 !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-editor {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-editor {
    display: grid;
    gap: 20px;
    margin: 0;
    color: #2f2421;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-editor-head {
    display: grid;
    gap: 7px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(174, 92, 67, .2);
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-editor-head :is(h2, p) {
    margin: 0;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-form-grid label {
    display: grid;
    gap: 7px;
    min-width: 0;
    font-weight: 800;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-form-grid label.is-wide {
    grid-column: 1 / -1;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-form-grid :is(input, textarea) {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(174, 92, 67, .28);
    border-radius: 14px;
    background: #fffdfb;
    color: #2f2421;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-character-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(174, 92, 67, .2);
    border-radius: 18px;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-character-picker legend {
    padding-inline: 7px;
    font-weight: 900;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-character-picker button {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 62px;
    padding: 7px;
    border: 1px solid rgba(174, 92, 67, .22);
    border-radius: 14px;
    background: #fffaf7;
    color: #3a2a26;
    text-align: left;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-character-picker button.selected {
    border-color: #c95b40;
    background: #fff0e9;
    box-shadow: inset 0 0 0 1px rgba(201, 91, 64, .22);
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-character-picker img {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    object-fit: cover;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-editor-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-editor-actions small {
    color: #8a5b4e;
    font-weight: 750;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character {
    display: grid;
    gap: 22px;
    color: #302421;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-summary {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-summary img {
    width: 112px;
    height: 136px;
    border-radius: 14px;
    object-fit: cover;
    background: #f2e7e1;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-summary div {
    display: grid;
    gap: 7px;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-summary :is(span, h2, p) {
    margin: 0;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-summary span {
    color: #b34d3d;
    font-size: 12px;
    font-weight: 900;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-summary p {
    color: #79655f;
    line-height: 1.65;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-actions > button {
    min-height: 50px;
    justify-content: center;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-actions .danger-btn {
    border: 1px solid #b84d3e;
    border-radius: 12px;
    color: #fff;
    background: #b84d3e;
    font-weight: 900;
}

body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-status {
    margin: 0;
    color: #9d4337;
    font-weight: 800;
}

@media (max-width: 760px) {
    /* The mobile app shell already owns creation and account navigation. */
    html body[data-page] > header.topbar .shared-nav-actions {
        display: none !important;
    }

    html body[data-page].animaker-mobile-sheet-open .global-ai-task {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body[data-page][data-page].animaker-mobile-sheet-open > div.mobile-sheet-backdrop > section.mobile-sheet-panel {
        background: #fffaf7 !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-editor {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 0 !important;
        gap: 18px !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-form-grid,
    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-character-picker {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-ip-editor-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-summary {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-delete-character-summary img {
        width: 80px;
        height: 98px;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-preview {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-preview img {
        width: 72px !important;
        height: 72px !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-preview .secondary-btn {
        width: 100% !important;
        min-height: 46px !important;
        padding-inline: 12px !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-fields {
        display: grid !important;
        gap: 15px !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-fields > .row-between {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-fields > .row-between h2 {
        max-width: 13ch !important;
        margin: 2px 0 0 !important;
        font-size: 25px !important;
        line-height: 1.12 !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-fields > .row-between .eyebrow {
        display: inline-flex !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #a74b3d !important;
        background: transparent !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-fields > .row-between .secondary-btn {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-fields > label {
        display: grid !important;
        gap: 7px !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-profile-fields > label > span {
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body[data-page="me"] > .mobile-sheet-backdrop .vue-me-avatar-presets {
        gap: 8px !important;
    }
}

/* Login form header stays an identity cue, not a second workflow tracker. */
html body[data-page="login"][data-page="login"] #loginVueApp .vue-login-card-head {
    display: grid !important;
    padding: 0 0 18px !important;
    gap: 7px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(112, 76, 66, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body[data-page="login"][data-page="login"] #loginVueApp .vue-login-card-head h1 {
    margin: 0 !important;
    color: #2b211f !important;
    font-size: clamp(30px, 2.5vw, 38px) !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
}

html body[data-page="login"][data-page="login"] #loginVueApp .vue-login-card-head p {
    max-width: 30ch !important;
    margin: 0 !important;
    color: #77645d !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

html body[data-page="login"][data-page="login"] #loginVueApp .vue-login-art-title {
    display: grid !important;
    max-width: none !important;
    gap: 0 !important;
    font-size: clamp(64px, 5.8vw, 84px) !important;
    line-height: 0.96 !important;
}

html body[data-page="login"][data-page="login"] #loginVueApp .vue-login-art-title > span {
    display: block !important;
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    html body[data-page="login"][data-page="login"] #loginVueApp .vue-login-card-head {
        padding-bottom: 14px !important;
    }

    html body[data-page="login"][data-page="login"] #loginVueApp .vue-login-card-head h1 {
        font-size: 28px !important;
    }

    /* The owned-work inventory is a vertical mobile list, even inside the wide desktop panel. */
    html body[data-page="me"][data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide .vue-me-mini-list.vue-me-work-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    html body[data-page="me"][data-page="me"] #meVueDashboard .vue-me-inventory-panel.is-wide .vue-me-work-item {
        width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: none !important;
    }
}

/* Desktop login art uses a warm darkroom wash so the OC studio remains visible. */
@media (min-width: 981px) {
    html body.animaker-theme-day[data-page="login"][data-page="login"] #loginVueApp .auth-shell.vue-login-shell {
        background:
            linear-gradient(100deg,
                rgba(49, 29, 27, 0.72) 0%,
                rgba(82, 43, 36, 0.58) 27%,
                rgba(139, 75, 57, 0.3) 48%,
                rgba(245, 226, 216, 0.1) 68%,
                rgba(247, 232, 224, 0.18) 100%),
            radial-gradient(circle at 19% 31%, rgba(226, 151, 119, 0.22), transparent 37%),
            url("../img/generated/ux/home-oc-daylight-studio-v2100.webp") 61% center / cover no-repeat !important;
    }

    html body.animaker-theme-day[data-page="login"][data-page="login"] #loginVueApp .vue-login-art > .eyebrow {
        color: #ffc0a9 !important;
        text-shadow: 0 2px 16px rgba(34, 18, 17, 0.34) !important;
    }

    html body.animaker-theme-day[data-page="login"][data-page="login"] #loginVueApp .vue-login-art > .eyebrow::before {
        background: #ef8f70 !important;
        box-shadow: 0 0 18px rgba(239, 143, 112, 0.4) !important;
    }

    html body.animaker-theme-day[data-page="login"][data-page="login"] #loginVueApp .vue-login-art .vue-login-art-title {
        color: #fffaf7 !important;
        text-shadow: 0 4px 28px rgba(31, 17, 16, 0.42) !important;
    }

    html body.animaker-theme-day[data-page="login"][data-page="login"] #loginVueApp .vue-login-art > p:last-child {
        color: rgba(255, 247, 242, 0.88) !important;
        text-shadow: 0 2px 18px rgba(31, 17, 16, 0.34) !important;
    }
}

/* Limited-free access uses one gold signal across navigation, entry, login, and AI usage surfaces. */
html body[data-page] > header.topbar .shared-nav-access-status {
    border-color: #c28a24 !important;
    color: #7a5008 !important;
    background: linear-gradient(105deg, rgba(255, 244, 199, 0.94), rgba(248, 219, 137, 0.58)) !important;
    box-shadow: inset 0 0 0 1px rgba(194, 138, 36, 0.1) !important;
}

html body[data-page="home"] #homeVueApp .vue-home-access-note {
    border-color: #e4b54a !important;
    color: #ffe38a !important;
    text-shadow: 0 2px 12px rgba(42, 27, 12, 0.36) !important;
}

html body[data-page="home"] #homeVueApp .vue-home-access-note :is(strong, strong b, strong small, span) {
    color: #ffe38a !important;
    -webkit-text-fill-color: #ffe38a !important;
}

html body[data-page="home"] .vue-home-gateway .vue-home-access-note.is-gateway {
    border-color: rgba(255, 221, 126, 0.72) !important;
    color: #ffe6a0 !important;
    background: linear-gradient(100deg, rgba(112, 73, 17, 0.88), rgba(54, 39, 25, 0.76) 58%, rgba(31, 29, 33, 0.66)) !important;
    box-shadow: 0 18px 46px rgba(21, 12, 18, 0.24), 0 0 32px rgba(255, 202, 105, 0.16) !important;
}

html body[data-page="login"] #loginVueApp :is(.vue-login-access-note, .vue-login-access-skeleton) {
    border-color: rgba(194, 138, 36, 0.3) !important;
    color: #76551a !important;
}

html body[data-page="login"] #loginVueApp .vue-login-access-note :is(strong, span) {
    color: #855b0b !important;
}

html body[data-page="studio"] #studioVueImage .vue-image-access-strip {
    border-color: rgba(194, 138, 36, 0.34) !important;
    color: #644d1e !important;
    background: linear-gradient(105deg, rgba(255, 249, 226, 0.98), rgba(250, 232, 175, 0.72) 58%, rgba(255, 244, 205, 0.92)) !important;
}

html body[data-page="studio"] #studioVueImage .vue-image-access-strip :is(strong, small, b),
html body[data-page="studio"].studio-wizard-ready #studioVueImage .vue-image-access-strip :is(strong, small, b) {
    color: #7a5008 !important;
}

/* The art-style baseline is one persistent studio setting, not another inspiration-chip shelf. */
html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-ai-brief > .vue-core-art-style {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: max-content minmax(270px, 440px) minmax(180px, 1fr) !important;
    align-items: center !important;
    gap: 10px 14px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 13px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(126, 80, 67, 0.16) !important;
    background: transparent !important;
}

html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-art-style > legend {
    float: left !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #6f5e59 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-art-style-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(126, 80, 67, 0.18) !important;
    border-radius: 10px !important;
    background: rgba(242, 230, 224, 0.76) !important;
}

html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-art-style-options > button {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #655752 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    transform: none !important;
}

html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-art-style-options > button:is(:hover, :focus-visible) {
    color: #9f402d !important;
    background: rgba(255, 250, 246, 0.74) !important;
}

html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-art-style-options > button.active {
    color: #fffaf7 !important;
    background: linear-gradient(115deg, #b94731, #d56b4e) !important;
    box-shadow: 0 6px 16px rgba(154, 61, 43, 0.18) !important;
}

html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-art-style > small {
    min-width: 0 !important;
    color: #82716b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.55 !important;
}

@media (max-width: 760px) {
    html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-ai-brief > .vue-core-art-style {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding-bottom: 12px !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-art-style > legend {
        margin-bottom: 1px !important;
    }

    html body[data-page="studio"][data-page="studio"].studio-wizard-ready #studioVueCore .vue-core-art-style > small {
        white-space: normal !important;
    }
}