.mp-app {
    --mp-border: color-mix(in oklab, currentColor 11%, transparent);
    --mp-muted: color-mix(in oklab, currentColor 58%, transparent);
    --mp-soft: color-mix(in oklab, currentColor 4%, transparent);

    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
}

.mp-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 26px;
    padding: 10px 2px 4px;
}

.mp-hero h1 {
    margin: 7px 0 7px;
    max-width: 900px;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.05;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.mp-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--mp-muted);
    font-size: 15px;
    line-height: 1.6;
}

.mp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 750;
    color: var(--fallback-p, oklch(var(--p)));
}

.mp-eyebrow .material-symbols-outlined {
    font-size: 19px;
}

.mp-new-button {
    flex: 0 0 auto;
    border-radius: 14px;
}

.mp-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.mp-project-panel,
.mp-card,
.mp-empty {
    border: 1px solid var(--mp-border);
    background: var(--fallback-b1, oklch(var(--b1)));
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.03),
        0 10px 35px rgb(0 0 0 / 0.025);
}

.mp-project-panel {
    position: sticky;
    top: 4px;
    overflow: hidden;
}

.mp-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 17px 13px;
    border-bottom: 1px solid var(--mp-border);
}

.mp-panel-title {
    font-size: 15px;
    font-weight: 800;
}

.mp-muted {
    margin-top: 2px;
    color: var(--mp-muted);
    font-size: 12px;
}

.mp-project-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    max-height: calc(100vh - 230px);
    overflow-y: auto;
}

.mp-project-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    width: 100%;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease;
}

.mp-project-item:hover {
    background: var(--mp-soft);
}

.mp-project-item.active {
    border-color: color-mix(
        in oklab,
        var(--fallback-p, oklch(var(--p))) 32%,
        transparent
    );
    background: color-mix(
        in oklab,
        var(--fallback-p, oklch(var(--p))) 8%,
        transparent
    );
}

.mp-project-thumb {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 11px;
    background: var(--fallback-b2, oklch(var(--b2)));
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-project-thumb .material-symbols-outlined {
    opacity: .35;
}

.mp-project-name {
    min-width: 0;
    margin: 2px 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 750;
}

.mp-project-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mp-muted);
    font-size: 11px;
}

.mp-project-skeleton {
    height: 65px;
    border-radius: 14px;
    background:
        linear-gradient(
            90deg,
            var(--fallback-b2, oklch(var(--b2))) 20%,
            color-mix(in oklab, currentColor 7%, transparent) 40%,
            var(--fallback-b2, oklch(var(--b2))) 60%
        );
    background-size: 200% 100%;
    animation: mp-shimmer 1.4s infinite linear;
}

@keyframes mp-shimmer {
    to {
        background-position: -200% 0;
    }
}

.mp-workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mp-workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 5px 3px 7px;
}

.mp-workspace-head h2 {
    margin: 3px 0 8px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.mp-breadcrumb {
    color: var(--mp-muted);
    font-size: 12px;
}

.mp-status-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-status {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fallback-b2, oklch(var(--b2)));
    font-size: 11px;
    font-weight: 800;
}

.mp-status[data-status="ready"],
.mp-status[data-status="completed"] {
    background: color-mix(in oklab, #22c55e 14%, transparent);
    color: #16823d;
}

.mp-status[data-status="analyzing"],
.mp-status[data-status="processing"],
.mp-status[data-status="created"] {
    background: color-mix(in oklab, #3b82f6 14%, transparent);
    color: #2563eb;
}

.mp-status[data-status="error"],
.mp-status[data-status="failed"] {
    background: color-mix(in oklab, #ef4444 13%, transparent);
    color: #dc2626;
}

.mp-card {
    padding: 22px;
}

.mp-step-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 19px;
}

.mp-step-head-action {
    align-items: center;
    justify-content: space-between;
}

.mp-step-info {
    display: flex;
    gap: 13px;
}

.mp-step-head h3 {
    margin: 1px 0 3px;
    font-size: 17px;
    font-weight: 820;
}

.mp-step-head p {
    margin: 0;
    max-width: 760px;
    color: var(--mp-muted);
    font-size: 13px;
    line-height: 1.5;
}

.mp-step-number {
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(
        in oklab,
        var(--fallback-p, oklch(var(--p))) 12%,
        transparent
    );
    color: var(--fallback-p, oklch(var(--p)));
    font-size: 13px;
    font-weight: 850;
}

.mp-step-result .material-symbols-outlined {
    font-size: 18px;
}

.mp-dropzone {
    min-height: 135px;
    border: 1.5px dashed color-mix(in oklab, currentColor 20%, transparent);
    border-radius: 17px;
    background: var(--mp-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.mp-dropzone:hover,
.mp-dropzone.dragging {
    border-color: var(--fallback-p, oklch(var(--p)));
    background: color-mix(
        in oklab,
        var(--fallback-p, oklch(var(--p))) 6%,
        transparent
    );
}

.mp-dropzone .material-symbols-outlined {
    margin-bottom: 4px;
    font-size: 31px;
    color: var(--fallback-p, oklch(var(--p)));
}

.mp-dropzone strong {
    font-size: 13px;
}

.mp-dropzone small {
    color: var(--mp-muted);
    font-size: 11px;
}

.mp-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.mp-asset {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--fallback-b2, oklch(var(--b2)));
}

.mp-asset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-analysis-content {
    min-height: 78px;
}

.mp-placeholder {
    padding: 18px;
    border-radius: 14px;
    background: var(--mp-soft);
    color: var(--mp-muted);
    text-align: center;
    font-size: 12px;
}

.mp-analysis-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.mp-analysis-stat {
    padding: 13px;
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    background: var(--mp-soft);
}

.mp-analysis-stat-label {
    margin-bottom: 4px;
    color: var(--mp-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mp-analysis-stat-value {
    font-size: 13px;
    font-weight: 760;
    word-break: break-word;
}

.mp-analysis-section {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--mp-border);
}

.mp-analysis-section-title {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
}

.mp-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mp-chip {
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 9px;
    background: var(--fallback-b2, oklch(var(--b2)));
    font-size: 11px;
    line-height: 1.35;
    word-break: break-word;
}

.mp-scenes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mp-scene {
    position: relative;
    min-height: 112px;
    padding: 15px;
    border: 1px solid var(--mp-border);
    border-radius: 15px;
    background: var(--mp-soft);
    text-align: left;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.mp-scene:hover {
    transform: translateY(-1px);
}

.mp-scene.active {
    border-color: var(--fallback-p, oklch(var(--p)));
    background: color-mix(
        in oklab,
        var(--fallback-p, oklch(var(--p))) 7%,
        transparent
    );
}

.mp-scene-title {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 800;
}

.mp-scene-desc {
    color: var(--mp-muted);
    font-size: 11px;
    line-height: 1.45;
}

.mp-scene-badge {
    display: inline-flex;
    margin-top: 9px;
    padding: 3px 6px;
    border-radius: 7px;
    background: color-mix(in oklab, #22c55e 13%, transparent);
    color: #16823d;
    font-size: 9px;
    font-weight: 800;
}

.mp-generation-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mp-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mp-field > span {
    font-size: 12px;
    font-weight: 760;
}

.mp-field textarea,
.mp-field input {
    width: 100%;
}

.mp-aspects {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-aspect {
    min-width: 85px;
    height: 43px;
    padding: 0 12px;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    background: var(--fallback-b1, oklch(var(--b1)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 730;
}

.mp-aspect.active {
    border-color: var(--fallback-p, oklch(var(--p)));
    background: color-mix(
        in oklab,
        var(--fallback-p, oklch(var(--p))) 7%,
        transparent
    );
}

.mp-aspect-shape {
    display: inline-block;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    opacity: .65;
}

.mp-square {
    width: 14px;
    height: 14px;
}

.mp-portrait {
    width: 9px;
    height: 16px;
}

.mp-landscape {
    width: 17px;
    height: 10px;
}

.mp-generate-button {
    align-self: flex-start;
    min-width: 245px;
    border-radius: 14px;
}

.mp-price-note {
    margin-top: -9px;
    color: var(--mp-muted);
    font-size: 11px;
}

.mp-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.mp-result {
    overflow: hidden;
    border: 1px solid var(--mp-border);
    border-radius: 15px;
    background: var(--mp-soft);
}

.mp-result-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--fallback-b2, oklch(var(--b2)));
}

.mp-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.mp-result-image:hover img {
    transform: scale(1.015);
}

.mp-result-info {
    padding: 10px 11px 11px;
}

.mp-result-topline {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.mp-result-scene {
    font-size: 11px;
    font-weight: 800;
}

.mp-result-cost {
    color: var(--mp-muted);
    font-size: 10px;
}

.mp-result-failed {
    min-height: 135px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mp-result-failed .material-symbols-outlined {
    margin-bottom: 7px;
    color: #dc2626;
}

.mp-result-failed strong {
    font-size: 12px;
}

.mp-result-failed span:last-child {
    margin-top: 4px;
    color: var(--mp-muted);
    font-size: 10px;
    line-height: 1.4;
}

.mp-empty {
    grid-column: 2;
    min-height: 430px;
    padding: 50px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mp-empty-icon,
.mp-create-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 13px;
    border-radius: 18px;
    background: color-mix(
        in oklab,
        var(--fallback-p, oklch(var(--p))) 10%,
        transparent
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fallback-p, oklch(var(--p)));
}

.mp-empty-icon .material-symbols-outlined,
.mp-create-icon .material-symbols-outlined {
    font-size: 30px;
}

.mp-empty h2,
.mp-create-modal h3 {
    margin: 0 0 7px;
    font-size: 22px;
    font-weight: 850;
}

.mp-empty p,
.mp-create-modal > p {
    max-width: 460px;
    margin: 0 0 20px;
    color: var(--mp-muted);
    font-size: 13px;
    line-height: 1.55;
}

.mp-create-modal {
    max-width: 470px;
}

.mp-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    max-width: min(390px, calc(100vw - 32px));
    padding: 12px 15px;
    border-radius: 13px;
    background: #171717;
    color: white;
    box-shadow: 0 16px 48px rgb(0 0 0 / .25);
    font-size: 12px;
    line-height: 1.45;
}

.mp-toast.error {
    background: #b91c1c;
}

.mp-toast.success {
    background: #166534;
}

.mp-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: mp-spin .7s linear infinite;
}

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

@media (max-width: 1050px) {
    .mp-layout {
        grid-template-columns: 235px minmax(0, 1fr);
    }

    .mp-scenes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-analysis-main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .mp-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .mp-new-button {
        width: 100%;
    }

    .mp-layout {
        display: flex;
        flex-direction: column;
    }

    .mp-project-panel {
        position: static;
        width: 100%;
    }

    .mp-project-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 225px;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
    }

    .mp-workspace {
        width: 100%;
    }

    .mp-empty {
        width: 100%;
        min-height: 330px;
    }

    .mp-card {
        padding: 17px;
    }

    .mp-step-head-action {
        align-items: stretch;
        flex-direction: column;
    }

    .mp-analysis-main {
        grid-template-columns: 1fr;
    }

    .mp-scenes {
        grid-template-columns: 1fr;
    }

    .mp-generate-button {
        width: 100%;
    }
}

/* =========================================================
   Marketplace visibility / grid hotfix
   ========================================================= */

/*
 * Some Marketplace blocks define their own display mode.
 * Always make the HTML hidden state authoritative.
 */
.mp-app [hidden] {
    display: none !important;
}


/*
 * The project list must never expand horizontally because of
 * long project names.
 */
.mp-project-list {
    overflow-x: hidden;
}

.mp-project-item {
    min-width: 0;
    overflow: hidden;
}

.mp-project-item > span:last-child {
    min-width: 0;
    overflow: hidden;
}

.mp-project-name {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* =========================================================
   Marketplace UX V1.1
   ========================================================= */

.mp-workspace {
    gap: 12px;
}

.mp-card {
    padding: 20px;
}


/* Long project names should not dominate the workspace. */

.mp-workspace-head h2 {
    max-width: 900px;
    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* Once a product already has photos, uploading more becomes secondary. */

.mp-dropzone.compact {
    min-height: 72px;
    padding: 13px 18px;

    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

.mp-dropzone.compact .material-symbols-outlined {
    margin: 0;
    font-size: 23px;
}

.mp-dropzone.compact strong {
    font-size: 12px;
}

.mp-dropzone.compact small {
    display: none;
}


/* Price is already displayed directly on the primary CTA. */

.mp-price-note {
    display: none;
}


/* Give generated marketplace assets visual priority. */

.mp-results {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        );

    gap: 14px;
}

.mp-result {
    width: 100%;
    max-width: 360px;
}

.mp-result-image {
    background:
        var(
            --fallback-b2,
            oklch(var(--b2))
        );
}

.mp-result-image img {
    object-fit: contain;
}


/* Result actions. */

.mp-result-actions {
    display: flex;
    gap: 6px;

    margin-top: 10px;
    padding-top: 9px;

    border-top:
        1px solid
        var(--mp-border);
}

.mp-result-action {
    flex: 1;

    min-height: 34px;
    padding: 6px 8px;

    border: 1px solid var(--mp-border);
    border-radius: 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    background:
        var(
            --fallback-b1,
            oklch(var(--b1))
        );

    color: inherit;

    font-size: 10px;
    font-weight: 750;
    text-decoration: none;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease;
}

.mp-result-action:hover {
    border-color:
        var(
            --fallback-p,
            oklch(var(--p))
        );

    background:
        color-mix(
            in oklab,
            var(
                --fallback-p,
                oklch(var(--p))
            ) 6%,
            transparent
        );
}

.mp-result-action .material-symbols-outlined {
    font-size: 16px;
}


@media (max-width: 760px) {
    .mp-workspace-head h2 {
        max-width: 100%;
    }

    .mp-dropzone.compact {
        align-items: center;
    }

    .mp-results {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(220px, 1fr)
            );
    }

    .mp-result {
        max-width: none;
    }
}

/* =========================================================
   Marketplace generation workflow V1.2
   ========================================================= */

.mp-generate-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.mp-format-field {
    flex: 1 1 auto;
}

.mp-generate-button {
    flex: 0 0 auto;
    align-self: flex-end;

    min-width: 285px;
    min-height: 43px;
    height: 43px;

    padding-top: 0;
    padding-bottom: 0;

    border-radius: 12px;
}

.mp-asset,
.mp-result {
    position: relative;
}

.mp-remove-button {
    position: absolute;
    z-index: 5;

    width: 27px;
    height: 27px;

    border: 1px solid
        color-mix(
            in oklab,
            currentColor 13%,
            transparent
        );

    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        color-mix(
            in oklab,
            var(
                --fallback-b1,
                oklch(var(--b1))
            ) 94%,
            transparent
        );

    color: #dc2626;

    box-shadow:
        0 3px 12px
        rgb(0 0 0 / .12);

    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition:
        transform .14s ease,
        background .14s ease;
}

.mp-remove-button:hover {
    transform: scale(1.06);
    background: #fee2e2;
}

.mp-asset-remove {
    top: 7px;
    right: 7px;
}

.mp-result-remove {
    top: 8px;
    right: 8px;
}

.mp-result-refresh {
    width: fit-content;
    margin-top: 10px;
    padding: 5px 8px;

    border: 1px solid var(--mp-border);
    border-radius: 9px;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    background:
        var(
            --fallback-b1,
            oklch(var(--b1))
        );

    font-size: 10px;
    font-weight: 750;

    cursor: pointer;
}

.mp-result-refresh
.material-symbols-outlined {
    font-size: 15px;
}


@media (max-width: 900px) {
    .mp-generate-row {
        align-items: stretch;
        flex-direction: column;
    }

    .mp-generate-button {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   Marketplace V2 shell — Phase 1
   ========================================================= */

html[data-mp-theme="light"] {
    --mp-v2-bg: #f5f7fb;
    --mp-v2-panel: #ffffff;
    --mp-v2-panel-soft: #eef2f7;
    --mp-v2-border: #dfe5ed;
    --mp-v2-text: #111827;
    --mp-v2-muted: #667085;
    --mp-v2-accent: #2563eb;
    --mp-v2-accent-hover: #1d4ed8;

    color-scheme: light;
}


html[data-mp-theme="dark"] {
    --mp-v2-bg: #11141a;
    --mp-v2-panel: #191d25;
    --mp-v2-panel-soft: #20252e;
    --mp-v2-border: #303744;
    --mp-v2-text: #f4f6f8;
    --mp-v2-muted: #98a2b3;
    --mp-v2-accent: #4f7cff;
    --mp-v2-accent-hover: #648bff;

    color-scheme: dark;
}


.mp-marketplace-body {
    margin: 0;

    min-height: 100vh;

    background:
        var(--mp-v2-bg);

    color:
        var(--mp-v2-text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.mp-v2-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    border-bottom:
        1px solid
        var(--mp-v2-border);

    background:
        color-mix(
            in oklab,
            var(--mp-v2-panel) 94%,
            transparent
        );

    backdrop-filter:
        blur(14px);
}


.mp-v2-topbar-inner {
    min-height: 64px;

    padding:
        0 24px;

    display: grid;

    grid-template-columns:
        minmax(210px, auto)
        1fr
        auto;

    align-items: center;

    gap: 20px;
}


.mp-v2-brand {
    width: max-content;

    display: flex;
    align-items: center;

    gap: 9px;

    color:
        var(--mp-v2-text);

    text-decoration: none;

    font-size: 15px;
    font-weight: 800;
}


.mp-v2-brand img {
    width: 34px;
    height: 34px;

    object-fit: contain;
}


.mp-v2-brand strong {
    color:
        var(--mp-v2-accent);
}


.mp-v2-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;
}


.mp-v2-nav-button {
    position: relative;

    min-height: 38px;

    padding:
        0 12px;

    border:
        1px solid transparent;

    border-radius: 10px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    background:
        transparent;

    color:
        var(--mp-v2-muted);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.mp-v2-nav-button:hover {
    border-color:
        var(--mp-v2-border);

    background:
        var(--mp-v2-panel-soft);

    color:
        var(--mp-v2-text);
}


.mp-v2-nav-button
.material-symbols-outlined {
    font-size: 18px;
}


.mp-v2-nav-button small {
    position: absolute;

    top: -4px;
    right: 2px;

    padding:
        1px 4px;

    border-radius: 999px;

    background:
        var(--mp-v2-accent);

    color: #fff;

    font-size: 7px;
    font-weight: 800;
}


.mp-v2-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


.mp-v2-balance,
.mp-v2-icon-button,
.mp-v2-profile-button {
    min-height: 38px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 10px;

    background:
        var(--mp-v2-panel-soft);

    color:
        var(--mp-v2-text);
}


.mp-v2-balance {
    padding:
        0 13px;

    display: inline-flex;
    align-items: center;

    text-decoration: none;

    font-size: 12px;
    font-weight: 800;
}


.mp-v2-icon-button,
.mp-v2-profile-button {
    width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}


.mp-v2-profile {
    position: relative;
}


.mp-v2-profile summary {
    list-style: none;
}


.mp-v2-profile summary::-webkit-details-marker {
    display: none;
}


.mp-v2-profile-button img {
    width: 100%;
    height: 100%;

    border-radius: 9px;

    object-fit: cover;
}


.mp-v2-profile-menu {
    position: absolute;

    top: calc(100% + 9px);
    right: 0;

    width: 190px;

    padding: 7px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 12px;

    background:
        var(--mp-v2-panel);

    box-shadow:
        0 16px 45px
        rgb(0 0 0 / .18);
}


.mp-v2-profile-menu a {
    min-height: 36px;

    padding:
        0 10px;

    border-radius: 8px;

    display: flex;
    align-items: center;

    color:
        var(--mp-v2-text);

    text-decoration: none;

    font-size: 11px;
    font-weight: 650;
}


.mp-v2-profile-menu a:hover {
    background:
        var(--mp-v2-panel-soft);
}


.mp-v2-profile-divider {
    height: 1px;

    margin:
        5px 0;

    background:
        var(--mp-v2-border);
}


.mp-v2-profile-danger {
    color: #dc2626 !important;
}


.mp-v2-main {
    min-height:
        calc(
            100vh - 64px
        );

    background:
        var(--mp-v2-bg);
}


/*
 * Current Marketplace page remains untouched internally for now.
 * Only remove constraints inherited from the old Fauzer shell.
 */

.mp-v2-main .mp-page {
    width: 100%;

    max-width: none;

    margin: 0;

    padding:
        24px 28px 40px;
}


/* Replace old pink primary buttons inside Marketplace. */

.mp-v2-main .btn-primary,
.mp-v2-main .mp-generate-button {
    border-color:
        var(--mp-v2-accent)
        !important;

    background:
        var(--mp-v2-accent)
        !important;

    color:
        #fff
        !important;

    box-shadow:
        none
        !important;
}


.mp-v2-main .btn-primary:hover,
.mp-v2-main .mp-generate-button:hover {
    border-color:
        var(--mp-v2-accent-hover)
        !important;

    background:
        var(--mp-v2-accent-hover)
        !important;
}


.mp-shell-toast {
    position: fixed;

    left: 50%;
    bottom: 24px;
    z-index: 5000;

    transform:
        translateX(-50%);

    max-width:
        min(
            520px,
            calc(100vw - 32px)
        );

    padding:
        11px 15px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 11px;

    background:
        var(--mp-v2-panel);

    color:
        var(--mp-v2-text);

    box-shadow:
        0 14px 50px
        rgb(0 0 0 / .2);

    font-size: 11px;
    font-weight: 650;
}


@media (max-width: 1050px) {
    .mp-v2-topbar-inner {
        grid-template-columns:
            auto 1fr auto;

        padding:
            0 14px;
    }

    .mp-v2-brand span {
        display: none;
    }

    .mp-v2-nav-button {
        padding:
            0 8px;
    }
}


@media (max-width: 760px) {
    .mp-v2-nav {
        justify-content:
            flex-start;

        overflow-x:
            auto;
    }

    .mp-v2-nav-button {
        font-size: 0;
    }

    .mp-v2-nav-button
    .material-symbols-outlined {
        font-size: 20px;
    }

    .mp-v2-nav-button small {
        display: none;
    }

    .mp-v2-balance {
        display: none;
    }

    .mp-v2-main .mp-page {
        padding:
            14px 12px 30px;
    }
}

/* =========================================================
   Marketplace V2 workspace — Phase 1B
   ========================================================= */


/* ---------------------------------------------------------
   Remove the old V1 landing hero.
   Create-project remains available from the V2 topbar.
   --------------------------------------------------------- */

.mp-v2-main .mp-hero {
    display: none !important;
}


/* ---------------------------------------------------------
   Main application canvas
   --------------------------------------------------------- */

.mp-v2-main .mp-app {
    width: 100%;
    max-width: none;

    margin: 0;
}


.mp-v2-main .mp-layout {
    display: block;

    width: 100%;
}


/* ---------------------------------------------------------
   PROJECTS DRAWER

   Existing project list is preserved, but it no longer
   permanently consumes the left side of the workspace.
   --------------------------------------------------------- */

.mp-v2-main .mp-project-panel {
    position: fixed;

    top: 78px;
    left: 18px;
    z-index: 1400;

    width: 320px;
    max-width:
        calc(
            100vw - 36px
        );

    max-height:
        calc(
            100vh - 98px
        );

    overflow: hidden;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 14px;

    background:
        var(--mp-v2-panel);

    box-shadow:
        0 20px 70px
        rgb(0 0 0 / .24);

    opacity: 0;

    pointer-events: none;

    transform:
        translateX(
            calc(
                -100% - 32px
            )
        );

    transition:
        transform .18s ease,
        opacity .18s ease;
}


.mp-v2-main
.mp-project-panel.mp-v2-project-panel-open {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateX(0);
}


.mp-v2-main
.mp-project-panel
.mp-project-list {
    max-height:
        calc(
            100vh - 170px
        );
}


.mp-v2-nav-button.active {
    border-color:
        var(--mp-v2-accent);

    background:
        color-mix(
            in oklab,
            var(--mp-v2-accent) 12%,
            var(--mp-v2-panel)
        );

    color:
        var(--mp-v2-accent);
}


/* ---------------------------------------------------------
   EMPTY PROJECT STATE
   --------------------------------------------------------- */

.mp-v2-main .mp-empty {
    width:
        min(
            720px,
            calc(
                100% - 40px
            )
        );

    margin:
        80px auto;

    border-color:
        var(--mp-v2-border);

    background:
        var(--mp-v2-panel);
}


/* ---------------------------------------------------------
   PRODUCT WORKSPACE

   LEFT  = product + controls
   RIGHT = generated results
   --------------------------------------------------------- */

.mp-v2-main .mp-workspace {
    width: 100%;
    min-width: 0;

    display: grid !important;

    grid-template-columns:
        360px
        minmax(0, 1fr);

    grid-auto-flow: row;

    gap:
        12px 18px;

    align-items: start;
}


/* Product heading belongs to the left control rail. */

.mp-v2-main .mp-workspace-head {
    grid-column: 1;
    grid-row: auto;

    min-width: 0;

    margin: 0;
    padding:
        15px 16px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 14px;

    background:
        var(--mp-v2-panel);

    box-shadow:
        0 4px 18px
        rgb(0 0 0 / .035);
}


.mp-v2-main
.mp-workspace-head h2 {
    margin:
        1px 0 7px;

    font-size: 21px;
    line-height: 1.1;

    letter-spacing:
        -.025em;
}


.mp-v2-main .mp-breadcrumb {
    display: none;
}


.mp-v2-main
.mp-workspace-head
#mp-refresh-project {
    min-width: 34px;

    padding:
        0 7px;

    font-size: 0;
}


.mp-v2-main
.mp-workspace-head
#mp-refresh-project
.material-symbols-outlined {
    font-size: 19px;
}


/* Steps 1–4 stay in the narrow control rail. */

.mp-v2-main
.mp-workspace
> section:nth-of-type(1),

.mp-v2-main
.mp-workspace
> section:nth-of-type(2),

.mp-v2-main
.mp-workspace
> section:nth-of-type(3),

.mp-v2-main
.mp-workspace
> section:nth-of-type(4) {
    grid-column: 1;

    width: 100%;
    min-width: 0;
}


/* Step 5 = Results. It becomes the large right canvas. */

.mp-v2-main
.mp-workspace
> section:nth-of-type(5) {
    grid-column: 2;

    grid-row:
        1 / span 6;

    width: 100%;
    min-width: 0;

    min-height:
        calc(
            100vh - 112px
        );

    position: sticky;

    top: 82px;

    align-self: start;
}


/* ---------------------------------------------------------
   Compact control cards
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4) {
    padding: 16px;

    border-color:
        var(--mp-v2-border);

    border-radius: 14px;

    background:
        var(--mp-v2-panel);

    box-shadow:
        0 4px 18px
        rgb(0 0 0 / .03);
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4)
.mp-step-head {
    gap: 10px;

    margin-bottom: 13px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4)
.mp-step-number {
    flex:
        0 0 27px;

    width: 27px;
    height: 27px;

    border-radius: 8px;

    background:
        var(--mp-v2-accent-soft);

    color:
        var(--mp-v2-accent);
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4)
.mp-step-head h3 {
    font-size: 14px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4)
.mp-step-head p {
    margin-top: 2px;

    font-size: 11px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   Product upload becomes compact.
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(1)
.mp-dropzone {
    min-height: 82px;

    padding:
        14px 12px;

    gap: 5px;

    border-radius: 11px;

    background:
        var(--mp-v2-panel-soft);
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(1)
.mp-dropzone
.material-symbols-outlined {
    font-size: 23px;

    color:
        var(--mp-v2-accent);
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(1)
.mp-dropzone small {
    font-size: 10px;
}


/* Uploaded source images stay compact in the rail. */

.mp-v2-main
.mp-workspace
> section:nth-of-type(1)
.mp-assets-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 7px;

    margin-top: 10px;
}


/* ---------------------------------------------------------
   Analysis card
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(2)
.mp-step-head-action {
    align-items: flex-start;

    gap: 8px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(2)
#mp-analyze-button {
    min-height: 34px;

    height: 34px;

    padding:
        0 9px;

    border-radius: 9px;

    font-size: 10px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(2)
.mp-analysis-content {
    font-size: 11px;
}


/* Analysis summary cards fit the rail. */

.mp-v2-main
.mp-workspace
> section:nth-of-type(2)
.mp-analysis-main {
    grid-template-columns:
        1fr;

    gap: 7px;
}


/* ---------------------------------------------------------
   Scene selector
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(3)
.mp-scenes {
    grid-template-columns:
        1fr;

    gap: 7px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(3)
.mp-scene {
    min-height: 0;

    padding:
        11px;

    border-radius: 10px;
}


/* ---------------------------------------------------------
   Generation controls
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
.mp-generation-form {
    gap: 12px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
#mp-instruction {
    min-height: 82px;

    font-size: 11px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
.mp-generate-row {
    flex-direction: column;

    align-items: stretch;

    gap: 10px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
.mp-aspects {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 6px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
.mp-aspect {
    width: 100%;
    min-width: 0;

    min-height: 38px;

    padding:
        0 7px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
.mp-generate-button {
    width: 100%;

    min-width: 0;

    min-height: 42px;
    height: 42px;

    border-radius: 10px;

    font-size: 12px;
}


/* ---------------------------------------------------------
   Results canvas
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(5) {
    padding: 18px;

    border-color:
        var(--mp-v2-border);

    border-radius: 14px;

    background:
        var(--mp-v2-panel);

    box-shadow:
        0 5px 24px
        rgb(0 0 0 / .035);
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(5)
.mp-step-head {
    margin-bottom: 16px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(5)
.mp-step-number {
    background:
        var(--mp-v2-accent-soft);

    color:
        var(--mp-v2-accent);
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(5)
.mp-results {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                260px,
                1fr
            )
        );

    gap: 14px;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(5)
.mp-result {
    border-radius: 12px;

    border-color:
        var(--mp-v2-border);

    background:
        var(--mp-v2-panel-soft);
}


/* Empty results area should feel like a canvas, not another tiny card. */

.mp-v2-main
.mp-workspace
> section:nth-of-type(5)
.mp-placeholder {
    min-height: 340px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px dashed
        var(--mp-v2-border);

    border-radius: 12px;

    color:
        var(--mp-v2-muted);

    text-align: center;
}


/* ---------------------------------------------------------
   Remove remaining neon-pink application accents.
   --------------------------------------------------------- */

.mp-v2-main
.mp-step-number {
    background:
        var(--mp-v2-accent-soft)
        !important;

    color:
        var(--mp-v2-accent)
        !important;
}


.mp-v2-main
.mp-eyebrow {
    color:
        var(--mp-v2-accent)
        !important;
}


.mp-v2-main
.mp-project-item.active {
    border-color:
        color-mix(
            in oklab,
            var(--mp-v2-accent) 46%,
            transparent
        )
        !important;

    background:
        var(--mp-v2-accent-soft)
        !important;
}


.mp-v2-main
.mp-scene.active,
.mp-v2-main
.mp-aspect.active {
    border-color:
        var(--mp-v2-accent)
        !important;

    background:
        var(--mp-v2-accent-soft)
        !important;
}


/* ---------------------------------------------------------
   Responsive fallback
   --------------------------------------------------------- */

@media (max-width: 980px) {
    .mp-v2-main .mp-workspace {
        grid-template-columns:
            320px
            minmax(0, 1fr);
    }
}


@media (max-width: 760px) {
    .mp-v2-main .mp-workspace {
        display: flex
        !important;

        flex-direction: column;
    }

    .mp-v2-main
    .mp-workspace
    > section:nth-of-type(5) {
        position: static;

        min-height: 420px;

        order: 6;
    }

    .mp-v2-main
    .mp-project-panel {
        top: 68px;
        left: 10px;

        width:
            calc(
                100vw - 20px
            );

        max-width: none;
    }
}

/* =========================================================
   Marketplace V2 workspace — Phase 1C
   Roomy controls + sticky results
   ========================================================= */


/*
 * Do not force all controls into one viewport.
 *
 * The left workspace flows naturally with the page.
 * The result canvas remains visible while the user
 * scrolls through product and generation controls.
 */

.mp-v2-main .mp-workspace {
    grid-template-columns:
        470px
        minmax(0, 1fr)
        !important;

    gap:
        16px 20px
        !important;

    align-items: start;
}


/* ---------------------------------------------------------
   Left rail — restore comfortable spacing.
   --------------------------------------------------------- */

.mp-v2-main .mp-workspace-head {
    padding:
        20px
        !important;

    border-radius:
        15px
        !important;
}


.mp-v2-main
.mp-workspace-head h2 {
    font-size:
        24px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4) {
    padding:
        20px
        !important;

    border-radius:
        15px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4)
.mp-step-head {
    margin-bottom:
        17px
        !important;

    gap:
        12px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4)
.mp-step-head h3 {
    font-size:
        16px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(-n+4)
.mp-step-head p {
    margin-top:
        4px
        !important;

    font-size:
        12px
        !important;

    line-height:
        1.5
        !important;
}


/* ---------------------------------------------------------
   Product upload
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(1)
.mp-dropzone {
    min-height:
        108px
        !important;

    padding:
        18px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(1)
.mp-assets-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        9px
        !important;
}


/* ---------------------------------------------------------
   Analysis

   Keep full functionality visible.
   We will make detailed facts collapsible later,
   not delete them.
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(2)
.mp-analysis-main {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        )
        !important;

    gap:
        9px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(2)
.mp-analysis-content {
    font-size:
        12px
        !important;
}


/* ---------------------------------------------------------
   Scenes — comfortable cards, no artificial squeezing.
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(3)
.mp-scenes {
    grid-template-columns:
        1fr
        !important;

    gap:
        9px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(3)
.mp-scene {
    padding:
        14px
        !important;

    min-height:
        72px
        !important;

    border-radius:
        11px
        !important;
}


/* ---------------------------------------------------------
   Generation controls
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
#mp-instruction {
    min-height:
        112px
        !important;

    font-size:
        12px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
.mp-generation-form {
    gap:
        15px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
.mp-aspect {
    min-height:
        44px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(4)
.mp-generate-button {
    min-height:
        48px
        !important;

    height:
        48px
        !important;

    font-size:
        13px
        !important;
}


/* ---------------------------------------------------------
   Results stay on screen while the left side/page scrolls.
   --------------------------------------------------------- */

.mp-v2-main
.mp-workspace
> section:nth-of-type(5) {
    position:
        sticky
        !important;

    top:
        84px
        !important;

    grid-column:
        2
        !important;

    grid-row:
        1 / span 10
        !important;

    align-self:
        start
        !important;

    width:
        100%
        !important;

    min-height:
        calc(
            100vh - 104px
        )
        !important;

    max-height:
        calc(
            100vh - 104px
        );

    overflow-y:
        auto;

    padding:
        20px
        !important;
}


/*
 * Results gallery can grow inside its sticky canvas.
 */

.mp-v2-main
.mp-workspace
> section:nth-of-type(5)
.mp-results {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                290px,
                1fr
            )
        )
        !important;

    gap:
        16px
        !important;
}


.mp-v2-main
.mp-workspace
> section:nth-of-type(5)
.mp-placeholder {
    min-height:
        calc(
            100vh - 220px
        )
        !important;
}


/* ---------------------------------------------------------
   Medium desktop
   --------------------------------------------------------- */

@media (max-width: 1250px) {
    .mp-v2-main .mp-workspace {
        grid-template-columns:
            420px
            minmax(0, 1fr)
            !important;
    }

    .mp-v2-main
    .mp-workspace
    > section:nth-of-type(5)
    .mp-results {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(
                    240px,
                    1fr
                )
            )
            !important;
    }
}


/* ---------------------------------------------------------
   Tablet / mobile fallback:
   normal vertical document flow.
   --------------------------------------------------------- */

@media (max-width: 860px) {
    .mp-v2-main .mp-workspace {
        display:
            flex
            !important;

        flex-direction:
            column
            !important;
    }

    .mp-v2-main
    .mp-workspace
    > section:nth-of-type(5) {
        position:
            static
            !important;

        max-height:
            none
            !important;

        min-height:
            440px
            !important;

        overflow:
            visible
            !important;
    }
}

/* =========================================================
   Marketplace V2 top alignment — Phase 1D
   ========================================================= */

/*
 * Results already have comfortable space under the topbar.
 * Give the first card in the left control rail the same
 * visual breathing room so both columns start on one line.
 */

.mp-v2-main .mp-workspace-head {
    margin-top:
        20px
        !important;
}

/* =========================================================
   Marketplace V2 exact column alignment — Phase 1D fix
   ========================================================= */

/* Previous selector did not affect the actual first grid item. */
.mp-v2-main .mp-workspace-head {
    margin-top: 0 !important;
}

/*
 * Align the first item of the left column with
 * the top edge of the sticky Results panel.
 */
.mp-v2-main .mp-workspace > :first-child {
    margin-top: 24px !important;
}

/* =========================================================
   Marketplace V2 spacing refinement — Phase 1E
   ========================================================= */

/* Exact visual alignment with the Results panel. */
.mp-v2-main .mp-workspace > :first-child {
    margin-top: 18px !important;
}


/* Equal breathing room from both viewport edges. */
.mp-v2-main .mp-page {
    width: 100% !important;
    max-width: none !important;

    padding-left: 24px !important;
    padding-right: 24px !important;

    box-sizing: border-box !important;
}


/* Keep the workspace inside those side gutters. */
.mp-v2-main .mp-app,
.mp-v2-main .mp-layout,
.mp-v2-main .mp-workspace {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* Slightly smaller gutters on narrow screens. */
@media (max-width: 860px) {
    .mp-v2-main .mp-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   Marketplace V2 real outer gutters — Phase 1F
   ========================================================= */

/*
 * .mp-v2-main is the real viewport-level wrapper.
 * Put the side breathing room here.
 */
.mp-v2-main {
    box-sizing: border-box !important;

    padding-left: 24px !important;
    padding-right: 24px !important;
}


/*
 * Do not double the spacing on the old inner wrapper.
 */
.mp-v2-main .mp-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/*
 * Everything inside must respect the available width.
 */
.mp-v2-main .mp-app,
.mp-v2-main .mp-layout,
.mp-v2-main .mp-workspace {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* Mobile gets a smaller gutter. */
@media (max-width: 860px) {
    .mp-v2-main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   Marketplace V2 automatic analysis — Phase 2A
   ========================================================= */

#mp-analyze-button[hidden] {
    display: none !important;
}

/* =========================================================
   Marketplace V2 unified product card — Phase 2B
   ========================================================= */

.mp-v2-main .mp-analysis-compat {
    display: none !important;
}


/* ---------- Unified product card ---------- */

.mp-v2-main .mp-product-card {
    padding: 20px !important;
}


.mp-v2-main .mp-product-card-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 18px;
}


.mp-v2-main .mp-product-card-title {
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -.02em;
}


.mp-v2-main .mp-product-project-line {
    margin-top: 6px;

    color: var(--mp-v2-muted);

    font-size: 11px;
    line-height: 1.4;
}


.mp-v2-main .mp-product-project-line strong {
    color: var(--mp-v2-text);

    font-weight: 650;
}


.mp-v2-main .mp-product-refresh {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;

    padding: 0;

    border-radius: 10px;
}


.mp-v2-main .mp-product-refresh .material-symbols-outlined {
    font-size: 20px;
}


.mp-v2-main .mp-product-upload-copy {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-bottom: 11px;
}


.mp-v2-main .mp-product-upload-copy strong {
    font-size: 13px;
}


.mp-v2-main .mp-product-upload-copy span {
    color: var(--mp-v2-muted);

    font-size: 11px;
    line-height: 1.45;
}


/* ---------- AI identity ---------- */

.mp-v2-main .mp-product-analysis-shell {
    margin-top: 16px;

    padding-top: 16px;

    border-top:
        1px solid
        var(--mp-v2-border);
}


.mp-v2-main .mp-product-analysis-waiting {
    color: var(--mp-v2-muted);

    font-size: 11px;
    line-height: 1.5;
}


.mp-v2-main .mp-product-ai-state {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 11px;

    background:
        var(--mp-v2-panel-soft);
}


.mp-v2-main .mp-product-ai-state .material-symbols-outlined {
    flex: 0 0 auto;

    color: var(--mp-v2-accent);
}


.mp-v2-main .mp-product-ai-state > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.mp-v2-main .mp-product-ai-state strong {
    font-size: 12px;
}


.mp-v2-main
.mp-product-ai-state
span:not(.material-symbols-outlined) {
    color: var(--mp-v2-muted);

    font-size: 10px;
    line-height: 1.4;
}


.mp-v2-main
.mp-product-ai-state.is-error
.material-symbols-outlined {
    color: #ef4444;
}


.mp-v2-main .mp-product-ai-result {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


.mp-v2-main .mp-product-ai-status {
    display: inline-flex;

    align-items: center;
    align-self: flex-start;

    gap: 5px;

    padding:
        5px 8px;

    border-radius: 999px;

    background:
        rgb(16 185 129 / .12);

    color: #22c55e;

    font-size: 10px;
    font-weight: 750;
}


.mp-v2-main
.mp-product-ai-status
.material-symbols-outlined {
    font-size: 15px;
}


.mp-v2-main .mp-product-identity-name {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;

    letter-spacing: -.015em;
}


.mp-v2-main .mp-product-identity-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 7px;
}


.mp-v2-main .mp-product-identity-meta span {
    display: inline-flex;

    align-items: center;

    min-height: 26px;

    padding:
        4px 8px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 8px;

    background:
        var(--mp-v2-panel-soft);

    color:
        var(--mp-v2-muted);

    font-size: 10px;
    font-weight: 600;
}


/* ---------- Expandable analysis ---------- */

.mp-v2-main .mp-analysis-details {
    overflow: hidden;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 10px;

    background:
        var(--mp-v2-panel-soft);
}


.mp-v2-main .mp-analysis-details > summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    min-height: 42px;

    padding:
        0 12px;

    cursor: pointer;

    list-style: none;

    color:
        var(--mp-v2-text);

    font-size: 11px;
    font-weight: 700;

    user-select: none;
}


.mp-v2-main
.mp-analysis-details
> summary::-webkit-details-marker {
    display: none;
}


.mp-v2-main
.mp-analysis-details
> summary
.material-symbols-outlined {
    font-size: 18px;

    color:
        var(--mp-v2-muted);

    transition:
        transform .16s ease;
}


.mp-v2-main
.mp-analysis-details[open]
> summary
.material-symbols-outlined {
    transform: rotate(180deg);
}


.mp-v2-main .mp-analysis-details-body {
    padding:
        0 12px 12px;

    border-top:
        1px solid
        var(--mp-v2-border);
}


.mp-v2-main
.mp-analysis-details-body
.mp-analysis-section {
    margin-top: 12px;
}


.mp-v2-main .mp-product-analysis-action {
    width: 100%;

    margin-top: 10px;

    min-height: 40px;
}


.mp-v2-main
.mp-product-card
.mp-analysis-content {
    margin: 0;
}


@media (max-width: 860px) {
    .mp-v2-main .mp-product-card {
        padding: 16px !important;
    }
}

/* =========================================================
   Marketplace V2 centered overlays - Phase 2C
   ========================================================= */


/* ---------------------------------------------------------
   1. REAL DIALOGS

   All full Marketplace dialogs are centered in viewport.
   --------------------------------------------------------- */

dialog.modal[open] {
    position: fixed !important;

    inset: 0 !important;

    display: grid !important;
    place-items: center !important;

    width: 100vw !important;
    max-width: none !important;

    height: 100dvh !important;
    max-height: none !important;

    margin: 0 !important;

    padding: 24px !important;

    border: 0 !important;

    background: transparent !important;

    overflow: auto !important;
}


dialog.modal::backdrop {
    background:
        rgb(2 6 23 / .68) !important;

    backdrop-filter:
        blur(4px);
}


dialog.modal[open] .modal-box {
    position: relative !important;

    inset: auto !important;

    width:
        min(
            560px,
            calc(100vw - 48px)
        ) !important;

    max-width:
        min(
            560px,
            calc(100vw - 48px)
        ) !important;

    max-height:
        calc(100dvh - 48px) !important;

    margin: 0 !important;

    transform: none !important;

    overflow-y: auto !important;

    border:
        1px solid
        var(--mp-v2-border) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 30px 100px
        rgb(0 0 0 / .48) !important;
}


/* ---------------------------------------------------------
   2. "ВСЕ ПРОЕКТЫ"

   This is historically an aside/drawer.
   In Marketplace V2 the OPEN state is a centered modal.
   --------------------------------------------------------- */

body:has(
    .mp-project-panel.mp-v2-project-panel-open
)::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 1190;

    background:
        rgb(2 6 23 / .68);

    backdrop-filter:
        blur(4px);
}


.mp-project-panel.mp-v2-project-panel-open {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;
    bottom: auto !important;

    z-index: 1200 !important;

    display: block !important;

    width:
        min(
            520px,
            calc(100vw - 48px)
        ) !important;

    max-width:
        min(
            520px,
            calc(100vw - 48px)
        ) !important;

    max-height:
        calc(100dvh - 48px) !important;

    margin: 0 !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    overflow: hidden !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    border:
        1px solid
        var(--mp-v2-border) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 30px 100px
        rgb(0 0 0 / .48) !important;
}


.mp-project-panel.mp-v2-project-panel-open
.mp-project-list {
    max-height:
        calc(100dvh - 180px) !important;

    overflow-y: auto !important;
}


/* ---------------------------------------------------------
   3. MARKETPLACE TOASTS

   Large readable notification in viewport center.
   --------------------------------------------------------- */

#mp-toast {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;
    bottom: auto !important;

    z-index: 2500 !important;

    width:
        min(
            620px,
            calc(100vw - 48px)
        ) !important;

    min-width:
        min(
            420px,
            calc(100vw - 48px)
        ) !important;

    max-width:
        min(
            620px,
            calc(100vw - 48px)
        ) !important;

    min-height: 76px !important;

    margin: 0 !important;

    padding:
        20px 26px !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius:
        18px !important;

    font-size:
        18px !important;

    line-height:
        1.45 !important;

    font-weight:
        700 !important;

    text-align:
        center !important;

    white-space:
        normal !important;

    overflow-wrap:
        anywhere !important;

    box-shadow:
        0 28px 80px
        rgb(0 0 0 / .46) !important;
}


#mp-toast[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 640px) {

    dialog.modal[open] {
        padding:
            12px !important;
    }


    dialog.modal[open] .modal-box {
        width:
            calc(100vw - 24px) !important;

        max-width:
            calc(100vw - 24px) !important;

        max-height:
            calc(100dvh - 24px) !important;

        border-radius:
            16px !important;
    }


    .mp-project-panel.mp-v2-project-panel-open {
        width:
            calc(100vw - 24px) !important;

        max-width:
            calc(100vw - 24px) !important;

        max-height:
            calc(100dvh - 24px) !important;

        border-radius:
            16px !important;
    }


    #mp-toast {
        width:
            calc(100vw - 24px) !important;

        min-width: 0 !important;

        max-width:
            calc(100vw - 24px) !important;

        min-height:
            68px !important;

        padding:
            17px 20px !important;

        border-radius:
            16px !important;

        font-size:
            16px !important;

        line-height:
            1.4 !important;
    }
}

/* =========================================================
   Marketplace generation modes: Photo / Card
   ========================================================= */

.mp-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mp-mode-tab {
    min-height: 46px;
    padding: 0 14px;

    border: 1px solid var(--mp-border);
    border-radius: 12px;

    background: var(--mp-soft);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    cursor: pointer;

    font-size: 13px;
    font-weight: 800;

    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease;
}

.mp-mode-tab:hover {
    transform: translateY(-1px);
}

.mp-mode-tab.active {
    border-color:
        var(--fallback-p, oklch(var(--p)));

    background:
        color-mix(
            in oklab,
            var(--fallback-p, oklch(var(--p))) 9%,
            transparent
        );
}

.mp-mode-tab .material-symbols-outlined {
    font-size: 19px;
}

.mp-mode-panel {
    margin-top: 14px;
}

.mp-option-caption {
    margin-bottom: 8px;

    color: var(--mp-muted);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

.mp-card-types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1050px) {
    .mp-card-types {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .mp-card-types {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Marketplace card design reference
   ========================================================= */

.mp-card-design {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--mp-border);
}

.mp-card-design-copy {
    margin: 6px 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mp-muted);
}

.mp-design-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mp-design-action {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    background: var(--mp-surface);
    color: var(--mp-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.mp-design-action:hover {
    transform: translateY(-1px);
    border-color: var(--mp-primary);
}

.mp-design-action.active {
    border-color: var(--mp-primary);
    background: var(--mp-primary-soft);
}

.mp-design-references {
    margin-top: 12px;
}

@media (max-width: 760px) {
    .mp-design-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Marketplace design reference preview cards
   ========================================================= */

.mp-design-empty {
    padding: 12px 14px;
    border: 1px dashed var(--mp-border);
    border-radius: 12px;
    color: var(--mp-muted);
    font-size: 13px;
    line-height: 1.45;
}

.mp-design-references {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(118px, 1fr)
        );
    gap: 10px;
}

.mp-design-reference-item {
    position: relative;
    min-width: 0;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mp-surface);
}

.mp-design-reference-item.active {
    border-color: var(--mp-primary);
    box-shadow:
        0 0 0 1px var(--mp-primary);
}

.mp-design-reference-preview {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mp-text);
    cursor: pointer;
    text-align: left;
}

.mp-design-reference-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--mp-surface);
}

.mp-design-reference-preview span {
    display: block;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
}

.mp-design-reference-remove {
    position: absolute;
    top: 7px;
    right: 7px;
}

/* =========================================================
   Marketplace design reference branding permission
   ========================================================= */

.mp-design-branding {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--mp-surface);
    cursor: pointer;
}

.mp-design-branding[hidden] {
    display: none !important;
}

.mp-design-branding input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--mp-primary);
}

.mp-design-branding-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mp-design-branding-content strong {
    font-size: 13px;
    line-height: 1.35;
    color: var(--mp-text);
}

.mp-design-branding-content small {
    font-size: 12px;
    line-height: 1.45;
    color: var(--mp-muted);
}


/* =========================================================
   Marketplace photo categories — Phase 1
   ========================================================= */

.mp-v2-main .mp-product-summary {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mp-v2-border);
    border-radius: 11px;
    background: var(--mp-v2-panel-soft);
}

.mp-v2-main .mp-product-summary-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    min-height: 46px;
}

.mp-v2-main .mp-product-summary-row + .mp-product-summary-row {
    border-top: 1px solid var(--mp-v2-border);
}

.mp-v2-main .mp-product-summary-label {
    padding-left: 12px;
    color: var(--mp-v2-muted);
    font-size: 11px;
    font-weight: 700;
}

.mp-v2-main .mp-product-summary-value {
    min-width: 0;
    padding: 10px 12px;
    color: var(--mp-v2-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.mp-v2-main .mp-product-category-select {
    width: 100%;
    height: 45px;
    padding: 0 34px 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mp-v2-text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.mp-v2-main .mp-product-category-select option {
    background: #1d2027;
    color: #fff;
}

.mp-v2-main
.mp-workspace
> section:nth-of-type(3)
.mp-scene {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px !important;
}

.mp-v2-main .mp-scene-preview {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    overflow: hidden;
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in oklab,
                var(--mp-v2-accent) 17%,
                var(--mp-v2-panel)
            ),
            var(--mp-v2-panel-soft)
        );
    color: var(--mp-v2-accent);
}

.mp-v2-main .mp-scene-preview .material-symbols-outlined {
    font-size: 28px;
}

.mp-v2-main .mp-scene-copy {
    min-width: 0;
}

.mp-v2-main .mp-scene-title {
    margin-bottom: 3px;
    font-size: 13px;
    line-height: 1.25;
}

.mp-v2-main .mp-scene-desc {
    font-size: 11px;
    line-height: 1.35;
}

.mp-v2-main .mp-scene-badge {
    margin-top: 5px;
}

/* MARKETPLACE SCENE PREVIEW IMAGES */

.mp-scene-preview {
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
}

.mp-scene-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.mp-scene-copy {
    min-width: 0;
}

/* MARKETPLACE MULTI SCENE SELECTION */

.mp-scene-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 10px;
}

.mp-scene-selection-count {
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.78;
}

.mp-scene-toggle-all {
    appearance: none;
    border: 0;
    padding: 3px 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: #7892ff;
}

.mp-scene-toggle-all:hover {
    text-decoration: underline;
}

.mp-scene {
    position: relative;
}

.mp-scene[data-scene].active::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    background: #5d78ff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.mp-scene[data-scene] .mp-scene-copy {
    padding-right: 30px;
}

@media (max-width: 640px) {
    .mp-scene-toolbar {
        gap: 8px;
    }

    .mp-scene-selection-count,
    .mp-scene-toggle-all {
        font-size: 12px;
    }
}


/* MARKETPLACE CARD ATTRIBUTE EDITOR */

.mp-card-attributes {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--mp-border);
}

.mp-card-attributes-head {
    margin-bottom: 11px;
}

.mp-card-attributes-head p {
    margin: 5px 0 0;
    color: var(--mp-muted);
    font-size: 11px;
    line-height: 1.45;
}

.mp-card-attribute-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-card-attributes-empty {
    padding: 11px 12px;
    border: 1px dashed var(--mp-border);
    border-radius: 10px;
    color: var(--mp-muted);
    font-size: 11px;
}

.mp-card-attribute-row {
    display: grid;
    align-items: center;
    gap: 8px;
}

.mp-card-attribute-row.is-standard {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr)
        36px;
}

.mp-card-attribute-row.is-custom {
    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        36px;
}

.mp-card-attribute-select,
.mp-card-attribute-custom,
.mp-card-attribute-value {
    width: 100%;
    min-width: 0;
    height: 39px;
    min-height: 39px;
    font-size: 11px;
}

.mp-card-attribute-remove {
    width: 36px;
    height: 36px;
    border: 1px solid var(--mp-border);
    border-radius: 9px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mp-muted);
}

.mp-card-attribute-remove:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.mp-card-attribute-remove
.material-symbols-outlined {
    font-size: 18px;
}

.mp-add-card-attribute {
    margin-top: 10px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px dashed var(--mp-border);
    border-radius: 10px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.mp-add-card-attribute:hover {
    border-color:
        var(--fallback-p, oklch(var(--p)));
}

.mp-add-card-attribute:disabled {
    opacity: .45;
    cursor: default;
}

.mp-add-card-attribute
.material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 760px) {
    .mp-card-attribute-row.is-standard,
    .mp-card-attribute-row.is-custom {
        grid-template-columns:
            minmax(0, 1fr)
            36px;
    }

    .mp-card-attribute-row
    .mp-card-attribute-select,
    .mp-card-attribute-row
    .mp-card-attribute-custom,
    .mp-card-attribute-row
    .mp-card-attribute-value {
        grid-column: 1;
    }

    .mp-card-attribute-row
    .mp-card-attribute-remove {
        grid-column: 2;
        grid-row: 1;
    }
}

/* MARKETPLACE CARD TYPE LAYOUT FIX */

.mp-card-types {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
    min-width: 0;
}

.mp-card-type {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 112px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    overflow: hidden !important;

    text-align: left !important;
}

.mp-card-type .mp-scene-title {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    line-height: 1.15 !important;
}

.mp-card-type .mp-scene-desc {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    line-height: 1.4 !important;
}

@media (max-width: 640px) {
    .mp-card-types {
        grid-template-columns:
            1fr !important;
    }

    .mp-card-type {
        min-height: 0 !important;
    }
}

/* MARKETPLACE CARD TYPE VERTICAL CONTENT */

.mp-v2-main
.mp-workspace
#mp-card-types
> .mp-card-type {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 118px !important;

    padding: 13px !important;

    text-align: left !important;
}

.mp-v2-main
.mp-workspace
#mp-card-types
> .mp-card-type
> .mp-scene-title {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    line-height: 1.2 !important;
}

.mp-v2-main
.mp-workspace
#mp-card-types
> .mp-card-type
> .mp-scene-desc {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    line-height: 1.45 !important;
}


/* =========================================================
   MARKETPLACE PRODUCT ANALYSIS BLOCKING OVERLAY
   ========================================================= */

.mp-analysis-lock {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgb(7 10 18 / .76);
    backdrop-filter: blur(5px);

    overscroll-behavior: contain;
}

.mp-analysis-lock[hidden] {
    display: none !important;
}

.mp-analysis-lock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 300px;
    max-width: 430px;

    padding: 34px 40px;

    border: 1px solid rgb(255 255 255 / .10);
    border-radius: 20px;

    background: #171c26;
    box-shadow: 0 24px 80px rgb(0 0 0 / .45);

    text-align: center;
}

.mp-analysis-lock-spinner {
    width: 54px;
    height: 54px;

    margin-bottom: 22px;

    border: 5px solid rgb(255 255 255 / .15);
    border-top-color: currentColor;
    border-radius: 50%;

    animation:
        mp-analysis-lock-spin
        .8s
        linear
        infinite;
}

.mp-analysis-lock-card strong {
    display: block;

    margin-bottom: 8px;

    font-size: 21px;
    line-height: 1.25;
}

.mp-analysis-lock-card span {
    display: block;

    opacity: .72;

    font-size: 14px;
    line-height: 1.45;
}

body.mp-analysis-is-locked {
    overflow: hidden !important;
}

@keyframes mp-analysis-lock-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   Marketplace pending result spinner
   ========================================================= */

.mp-result-pending {
    min-height: 340px;
    padding: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.mp-result-generation-spinner {
    width: 48px;
    height: 48px;

    margin-bottom: 18px;

    border: 4px solid
        color-mix(
            in oklab,
            var(--mp-v2-muted) 25%,
            transparent
        );

    border-top-color:
        var(--mp-v2-accent);

    border-radius: 50%;

    animation:
        mp-result-generation-spin
        .8s
        linear
        infinite;
}

.mp-result-pending strong {
    font-size: 15px;
    font-weight: 800;
}

.mp-result-pending > span {
    margin-top: 7px;

    color:
        var(--mp-v2-muted);

    font-size: 12px;
    line-height: 1.45;
}

@keyframes mp-result-generation-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   Marketplace card content editors
   ========================================================= */

.mp-card-content-editor {
    margin-top: 18px;
    padding-top: 18px;

    border-top:
        1px solid
        var(--mp-border);
}

.mp-card-content-field {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-top: 10px;
}

.mp-card-content-field > span {
    color:
        var(--mp-muted);

    font-size: 11px;
    font-weight: 700;
}

.mp-card-content-field input {
    width: 100%;
    min-width: 0;
    min-height: 39px;

    font-size: 12px;
}

.mp-card-benefit-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-card-benefit-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        36px;

    align-items: center;
    gap: 8px;
}

.mp-card-benefit-input {
    width: 100%;
    min-width: 0;
    height: 39px;
    min-height: 39px;

    font-size: 11px;
}

@media (max-width: 760px) {
    .mp-card-benefit-row {
        grid-template-columns:
            minmax(0, 1fr)
            36px;
    }
}

/* =========================================================
   Marketplace card multi-select
   ========================================================= */

.mp-card-selection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin: 8px 0 10px;
}

.mp-card-type {
    position: relative !important;
}

.mp-card-generation-toggle {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--mp-border);
    border-radius: 7px;

    background: var(--mp-panel);
    color: transparent;

    cursor: pointer;

    z-index: 3;
}

.mp-card-generation-toggle.active {
    border-color:
        var(--fallback-p, oklch(var(--p)));

    background:
        var(--fallback-p, oklch(var(--p)));

    color: white;
}

.mp-card-generation-toggle
.material-symbols-outlined {
    font-size: 17px;
}

.mp-card-type
.mp-scene-title,
.mp-card-type
.mp-scene-desc {
    padding-right: 28px !important;
}

@media (max-width: 640px) {
    .mp-card-selection-toolbar {
        align-items: flex-start;
    }
}


/* =========================================================
   Marketplace Product Replacement — UI V1
   ========================================================= */

.mp-replacement-workspace {
    width: min(1440px, calc(100% - 56px));
    margin: 0 auto;
    padding: 34px 0 56px;
}


.mp-replacement-head {
    margin-bottom: 28px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;
}


.mp-replacement-head h2 {
    margin: 7px 0 8px;

    color: var(--mp-v2-text);

    font-size: clamp(28px, 3vw, 40px);
    font-weight: 850;
    line-height: 1.05;
}


.mp-replacement-head p {
    max-width: 720px;
    margin: 0;

    color: var(--mp-v2-muted);

    font-size: 13px;
    line-height: 1.6;
}


.mp-replacement-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--mp-v2-accent);

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .05em;
}


.mp-replacement-eyebrow .material-symbols-outlined {
    font-size: 18px;
}


.mp-replacement-back {
    min-height: 40px;

    padding: 0 14px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 10px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    background: var(--mp-v2-panel);

    color: var(--mp-v2-text);

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;
}


.mp-replacement-back:hover {
    border-color: var(--mp-v2-accent);
}


.mp-replacement-back .material-symbols-outlined {
    font-size: 18px;
}


.mp-replacement-steps {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        44px
        minmax(0, 1fr)
        44px
        minmax(0, 1fr);

    align-items: center;
}


.mp-replacement-column {
    min-width: 0;
}


.mp-replacement-step-title {
    min-height: 58px;
    margin-bottom: 10px;

    display: flex;
    align-items: flex-start;

    gap: 10px;
}


.mp-replacement-step-title > span {
    width: 27px;
    height: 27px;

    flex: 0 0 auto;

    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--mp-v2-text);

    color: var(--mp-v2-bg);

    font-size: 12px;
    font-weight: 850;
}


.mp-replacement-step-title strong,
.mp-replacement-step-title small {
    display: block;
}


.mp-replacement-step-title strong {
    margin-bottom: 2px;

    color: var(--mp-v2-text);

    font-size: 13px;
    font-weight: 800;
}


.mp-replacement-step-title small {
    color: var(--mp-v2-muted);

    font-size: 10px;
    line-height: 1.35;
}


.mp-replacement-upload,
.mp-replacement-result {
    position: relative;

    height: min(440px, 45vw);
    min-height: 330px;
    max-height: 470px;

    overflow: hidden;

    border:
        1px dashed
        color-mix(
            in oklab,
            var(--mp-v2-border) 80%,
            var(--mp-v2-muted)
        );

    border-radius: 16px;

    background:
        color-mix(
            in oklab,
            var(--mp-v2-panel) 88%,
            var(--mp-v2-bg)
        );
}


.mp-replacement-upload {
    display: block;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}


.mp-replacement-upload:hover {
    border-color: var(--mp-v2-accent);

    background:
        color-mix(
            in oklab,
            var(--mp-v2-panel) 92%,
            var(--mp-v2-accent) 8%
        );
}


.mp-replacement-upload-empty,
.mp-replacement-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.mp-replacement-upload-empty {
    width: 100%;
    height: 100%;

    padding: 24px;

    gap: 5px;
}


.mp-replacement-upload-empty
.material-symbols-outlined,
.mp-replacement-result
.material-symbols-outlined {
    margin-bottom: 10px;

    color: var(--mp-v2-muted);

    font-size: 38px;
}


.mp-replacement-upload-empty strong,
.mp-replacement-result strong {
    color: var(--mp-v2-text);

    font-size: 14px;
    font-weight: 800;
}


.mp-replacement-upload-empty small {
    color: var(--mp-v2-muted);

    font-size: 11px;
}


.mp-replacement-result {
    color: var(--mp-v2-muted);
}


.mp-replacement-preview {
    width: 100%;
    height: 100%;

    object-fit: contain;

    background: var(--mp-v2-panel-soft);
}


.mp-replacement-remove {
    position: absolute;

    top: 10px;
    right: 10px;
    z-index: 3;

    width: 32px;
    height: 32px;

    border:
        1px solid
        rgb(255 255 255 / .16);

    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgb(14 17 24 / .88);

    color: #ff6262;

    font-size: 21px;
    font-weight: 700;

    cursor: pointer;
}


.mp-replacement-arrow {
    padding-top: 62px;

    display: flex;
    justify-content: center;

    color: var(--mp-v2-muted);
}


.mp-replacement-arrow .material-symbols-outlined {
    font-size: 22px;
}


.mp-replacement-controls {
    margin-top: 18px;
}


.mp-replacement-wish {
    display: block;
}


.mp-replacement-wish > span {
    display: block;

    margin-bottom: 7px;

    color: var(--mp-v2-text);

    font-size: 11px;
    font-weight: 800;
}


.mp-replacement-wish textarea {
    width: 100%;
    min-height: 76px;

    padding: 12px 14px;

    resize: vertical;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 12px;

    outline: none;

    background: var(--mp-v2-panel);

    color: var(--mp-v2-text);

    font: inherit;
    font-size: 12px;
    line-height: 1.5;
}


.mp-replacement-wish textarea:focus {
    border-color: var(--mp-v2-accent);
}


.mp-replacement-settings {
    margin-top: 14px;

    padding: 16px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 14px;

    display: grid;

    grid-template-columns:
        minmax(180px, .7fr)
        minmax(320px, 1.3fr)
        minmax(260px, 1fr);

    gap: 18px;

    background: var(--mp-v2-panel);
}


.mp-replacement-setting + .mp-replacement-setting {
    border-left:
        1px solid
        var(--mp-v2-border);

    padding-left: 18px;
}


.mp-replacement-setting-label {
    margin-bottom: 9px;

    color: var(--mp-v2-text);

    font-size: 11px;
    font-weight: 800;
}


.mp-replacement-options {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.mp-replacement-option {
    min-height: 38px;

    padding: 0 14px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 10px;

    background: transparent;

    color: var(--mp-v2-muted);

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}


.mp-replacement-option:hover:not(:disabled) {
    border-color: var(--mp-v2-accent);

    color: var(--mp-v2-text);
}


.mp-replacement-option.active {
    border-color:
        color-mix(
            in oklab,
            var(--mp-v2-accent) 65%,
            var(--mp-v2-border)
        );

    background: var(--mp-v2-text);

    color: var(--mp-v2-bg);
}


.mp-replacement-option:disabled {
    opacity: .42;
    cursor: not-allowed;
}


.mp-replacement-option small {
    margin-left: 3px;

    color: var(--mp-v2-accent);

    font-size: 8px;
}


.mp-replacement-design-help {
    margin-top: 8px;

    color: var(--mp-v2-muted);

    font-size: 10px;
    line-height: 1.45;
}


.mp-replacement-generate {
    width: 100%;
    min-height: 50px;

    margin-top: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    font-size: 13px;
    font-weight: 800;
}


.mp-replacement-generate strong {
    font-weight: 850;
}


.mp-replacement-dev-note {
    margin-top: 7px;

    color: var(--mp-v2-muted);

    text-align: center;

    font-size: 9px;
}


@media (max-width: 960px) {
    .mp-replacement-workspace {
        width: calc(100% - 28px);
    }

    .mp-replacement-steps {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .mp-replacement-arrow {
        padding: 0;

        transform: rotate(90deg);
    }

    .mp-replacement-upload,
    .mp-replacement-result {
        height: 380px;
        min-height: 300px;
    }

    .mp-replacement-settings {
        grid-template-columns: 1fr;
    }

    .mp-replacement-setting + .mp-replacement-setting {
        border-left: 0;

        border-top:
            1px solid
            var(--mp-v2-border);

        padding-left: 0;
        padding-top: 15px;
    }
}


@media (max-width: 620px) {
    .mp-replacement-head {
        flex-direction: column;
    }

    .mp-replacement-upload,
    .mp-replacement-result {
        height: 330px;
    }

    .mp-replacement-design-options {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Marketplace Product Replacement — Compact Desktop Layout
   ========================================================= */

.mp-replacement-workspace {
    width:
        min(
            1460px,
            calc(100% - 48px)
        );

    padding:
        20px 0 24px;
}


.mp-replacement-head {
    margin-bottom: 18px;

    align-items: center;
}


.mp-replacement-head h2 {
    margin: 4px 0 5px;

    font-size:
        clamp(
            27px,
            2.5vw,
            36px
        );
}


.mp-replacement-head p {
    max-width: 760px;

    font-size: 12px;
    line-height: 1.45;
}


.mp-replacement-eyebrow {
    font-size: 10px;
}


.mp-replacement-back {
    min-height: 38px;
}


.mp-replacement-step-title {
    min-height: 43px;

    margin-bottom: 7px;
}


.mp-replacement-step-title > span {
    width: 24px;
    height: 24px;

    font-size: 11px;
}


.mp-replacement-step-title strong {
    font-size: 12px;
}


.mp-replacement-step-title small {
    font-size: 9px;
}


.mp-replacement-steps {
    grid-template-columns:
        minmax(0, 1fr)
        34px
        minmax(0, 1fr)
        34px
        minmax(0, 1fr);
}


.mp-replacement-arrow {
    padding-top: 46px;
}


.mp-replacement-upload,
.mp-replacement-result {
    height:
        clamp(
            250px,
            31vh,
            315px
        );

    min-height: 250px;
    max-height: 315px;

    border-radius: 14px;
}


.mp-replacement-upload-empty {
    padding: 18px;
}


.mp-replacement-upload-empty
.material-symbols-outlined,
.mp-replacement-result
.material-symbols-outlined {
    margin-bottom: 7px;

    font-size: 31px;
}


.mp-replacement-upload-empty strong,
.mp-replacement-result strong {
    font-size: 13px;
}


.mp-replacement-upload-empty small {
    font-size: 10px;
}


.mp-replacement-controls {
    margin-top: 11px;
}


.mp-replacement-wish > span {
    margin-bottom: 5px;

    font-size: 10px;
}


.mp-replacement-wish textarea {
    min-height: 54px;
    height: 54px;

    padding: 9px 12px;

    border-radius: 10px;

    font-size: 11px;
    line-height: 1.35;
}


.mp-replacement-settings {
    margin-top: 10px;

    padding: 12px 14px;

    grid-template-columns:
        minmax(350px, 1.25fr)
        minmax(250px, .85fr)
        minmax(270px, .8fr);

    align-items: center;

    gap: 14px;

    border-radius: 12px;
}


.mp-replacement-setting {
    min-width: 0;
}


.mp-replacement-setting + .mp-replacement-setting {
    padding-left: 14px;
}


.mp-replacement-setting-label {
    margin-bottom: 6px;

    font-size: 10px;
}


.mp-replacement-options {
    gap: 5px;
}


.mp-replacement-option {
    min-height: 34px;

    padding:
        0 12px;

    border-radius: 8px;

    font-size: 10px;
}


.mp-replacement-design-options {
    flex-wrap: nowrap;

    width: max-content;
    max-width: 100%;
}


.mp-replacement-design-help {
    max-width: 430px;

    margin-top: 5px;

    font-size: 9px;
    line-height: 1.35;
}


.mp-replacement-action-setting {
    min-width: 0;

    padding-left: 14px;

    border-left:
        1px solid
        var(--mp-v2-border);
}


.mp-replacement-generate {
    width: 100%;
    min-height: 42px;

    margin-top: 0;

    padding:
        0 18px;

    border-radius: 10px;

    white-space: nowrap;

    font-size: 11px;
}


.mp-replacement-generate
.material-symbols-outlined {
    font-size: 18px;
}


.mp-replacement-generate strong {
    margin-left: 2px;

    white-space: nowrap;
}


/*
 * The old full-width development note is intentionally
 * removed from the production-facing layout.
 */

.mp-replacement-dev-note {
    display: none !important;
}


@media (min-width: 961px) and (max-height: 900px) {
    .mp-replacement-workspace {
        padding-top: 14px;
    }

    .mp-replacement-head {
        margin-bottom: 12px;
    }

    .mp-replacement-head h2 {
        font-size: 30px;
    }

    .mp-replacement-upload,
    .mp-replacement-result {
        height: 255px;
        min-height: 255px;
    }

    .mp-replacement-wish textarea {
        height: 48px;
        min-height: 48px;
    }

    .mp-replacement-settings {
        padding-top: 9px;
        padding-bottom: 9px;
    }
}


@media (max-width: 1100px) {
    .mp-replacement-settings {
        grid-template-columns:
            minmax(300px, 1fr)
            minmax(220px, .8fr)
            minmax(240px, .8fr);
    }

    .mp-replacement-option {
        padding:
            0 9px;
    }
}


@media (max-width: 960px) {
    .mp-replacement-workspace {
        width:
            calc(
                100% - 28px
            );

        padding:
            18px 0 30px;
    }

    .mp-replacement-steps {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .mp-replacement-upload,
    .mp-replacement-result {
        height: 320px;
        min-height: 280px;
        max-height: none;
    }

    .mp-replacement-settings {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .mp-replacement-setting + .mp-replacement-setting,
    .mp-replacement-action-setting {
        padding-left: 0;

        border-left: 0;

        border-top:
            1px solid
            var(--mp-v2-border);

        padding-top: 12px;
    }

    .mp-replacement-design-options {
        width: 100%;
    }

    .mp-replacement-design-options
    .mp-replacement-option {
        flex: 1;
    }
}


/* Marketplace Product Replacement — live generation */

.mp-replacement-result-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--mp-v2-panel-soft);
}

.mp-replacement-pending,
.mp-replacement-result-error {
    width: 100%;
    height: 100%;
    padding: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 9px;
    text-align: center;
}

.mp-replacement-pending strong,
.mp-replacement-result-error strong {
    color: var(--mp-v2-text);
    font-size: 13px;
    font-weight: 800;
}

.mp-replacement-pending small,
.mp-replacement-result-error small {
    max-width: 300px;
    color: var(--mp-v2-muted);
    font-size: 10px;
    line-height: 1.45;
}

.mp-replacement-result-error
.material-symbols-outlined {
    margin: 0;
    color: #ff6262;
    font-size: 30px;
}

.mp-replacement-button-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
}


/* ==========================================================
   Marketplace V2 — project delete + centered project modal
   ========================================================== */

/*
 * The legacy project panel is a sliding drawer.
 * V2 reuses it as a centered modal, so transform must not
 * animate between the old drawer position and the modal.
 */
.mp-v2-main .mp-project-panel {
    transition:
        opacity .12s ease !important;
}

.mp-project-panel.mp-v2-project-panel-open {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    transition:
        opacity .12s ease !important;

    animation:
        none !important;
}


.mp-project-row {
    position: relative;

    width: 100%;

    display: flex;
    align-items: stretch;

    min-width: 0;
}


.mp-project-row
.mp-project-item {
    width: 100%;

    padding-right:
        48px;
}


.mp-project-delete {
    position: absolute;

    top: 50%;
    right: 10px;

    transform:
        translateY(-50%);

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid transparent;

    border-radius:
        9px;

    background:
        transparent;

    color:
        var(--mp-v2-muted);

    cursor: pointer;

    z-index: 5;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.mp-project-delete
.material-symbols-outlined {
    font-size: 18px;
}


.mp-project-delete:hover {
    color:
        #f87171;

    background:
        rgb(220 38 38 / .12);

    border-color:
        rgb(248 113 113 / .24);
}


.mp-project-delete:disabled {
    opacity: .45;

    cursor: wait;
}


/* ==========================================================
   Marketplace Replacement Media Picker
   ========================================================== */

.mp-replacement-media-picker {
    position: fixed;
    inset: 0;
    z-index: 1700;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.mp-replacement-media-picker.is-open {
    display: flex;
}

.mp-replacement-media-picker-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(4, 7, 14, .78);

    backdrop-filter: blur(10px);
}

.mp-replacement-media-picker-dialog {
    position: relative;
    z-index: 1;

    width: min(920px, 100%);
    max-height: min(760px, 90vh);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 24px;

    background: #111622;

    box-shadow:
        0 28px 90px rgba(0, 0, 0, .55);
}

.mp-replacement-media-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 24px 18px;
}

.mp-replacement-media-picker-head > div {
    display: grid;
    gap: 4px;
}

.mp-replacement-media-picker-head strong {
    font-size: 19px;
}

.mp-replacement-media-picker-head small {
    opacity: .58;
}

.mp-replacement-media-picker-close {
    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 12px;

    background: rgba(255, 255, 255, .07);

    color: inherit;

    font-size: 25px;

    cursor: pointer;
}

.mp-replacement-media-picker-tabs {
    display: flex;

    gap: 8px;

    padding: 0 24px 18px;

    border-bottom:
        1px solid rgba(255, 255, 255, .08);
}

.mp-replacement-media-picker-tabs button {
    min-height: 42px;

    padding: 0 15px;

    border:
        1px solid rgba(255, 255, 255, .09);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .035);

    color: inherit;

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.mp-replacement-media-picker-tabs button.active {
    border-color:
        rgba(123, 92, 255, .7);

    background:
        rgba(123, 92, 255, .16);
}

.mp-replacement-media-picker-body {
    min-height: 330px;

    overflow-y: auto;

    padding: 22px 24px 26px;
}

.mp-replacement-media-picker-upload {
    width: 100%;
    min-height: 285px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border:
        1px dashed rgba(255, 255, 255, .2);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .025);

    color: inherit;

    cursor: pointer;
}

.mp-replacement-media-picker-upload
.material-symbols-outlined {
    font-size: 44px;
}

.mp-replacement-media-picker-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(150px, 1fr)
        );

    gap: 12px;
}

.mp-replacement-media-picker-card {
    aspect-ratio: 1 / 1;

    overflow: hidden;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, .08);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .035);

    cursor: pointer;
}

.mp-replacement-media-picker-card:hover {
    border-color:
        rgba(123, 92, 255, .75);
}

.mp-replacement-media-picker-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.mp-replacement-media-picker-state {
    min-height: 285px;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: .6;
}

@media (max-width: 640px) {
    .mp-replacement-media-picker {
        padding: 10px;
    }

    .mp-replacement-media-picker-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mp-replacement-media-picker-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   REPLACEMENT RESULTS HISTORY
   ========================================================= */

.mp-replacement-results-panel {
    margin-top: 30px;
    padding: 30px;
    border: 1px solid var(
        --mp-border,
        rgba(148, 163, 184, 0.18)
    );
    border-radius: 26px;
    background: var(
        --mp-surface,
        rgba(17, 24, 39, 0.72)
    );
}

.mp-replacement-results-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.mp-replacement-results-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(37, 99, 235, 0.12);
    color: #3b82f6;
}

.mp-replacement-results-icon
.material-symbols-outlined {
    font-size: 27px;
}

.mp-replacement-results-head h2 {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 800;
}

.mp-replacement-results-head p {
    margin: 0;
    opacity: 0.7;
    font-size: 14px;
}

.mp-replacement-results-history {
    min-height: 220px;
    border: 1px dashed rgba(
        148,
        163,
        184,
        0.24
    );
    border-radius: 20px;
    padding: 20px;
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 18px;
}

.mp-replacement-results-placeholder {
    grid-column: 1 / -1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    opacity: 0.72;
}

.mp-replacement-results-placeholder
.material-symbols-outlined {
    font-size: 38px;
    color: #7c3aed;
}

.mp-replacement-results-placeholder strong {
    font-size: 15px;
}

.mp-replacement-results-placeholder small {
    font-size: 13px;
    opacity: 0.78;
}

.mp-replacement-history-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(
        148,
        163,
        184,
        0.18
    );
    border-radius: 18px;
    background: rgba(
        15,
        23,
        42,
        0.42
    );
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.mp-replacement-history-card:hover {
    transform: translateY(-2px);
    border-color: rgba(
        124,
        58,
        237,
        0.55
    );
}

.mp-replacement-history-preview {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(
        2,
        6,
        23,
        0.35
    );
}

.mp-replacement-history-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.mp-replacement-history-delete {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(
        255,
        255,
        255,
        0.14
    );
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #ffffff;
    background: rgba(
        15,
        23,
        42,
        0.82
    );
    backdrop-filter: blur(8px);
}

.mp-replacement-history-delete:hover {
    background: rgba(
        220,
        38,
        38,
        0.92
    );
}

.mp-replacement-history-delete:disabled {
    opacity: 0.45;
    cursor: wait;
}

.mp-replacement-history-delete
.material-symbols-outlined {
    font-size: 19px;
}

.mp-replacement-history-footer {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.mp-replacement-history-footer
> .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 18px;
    color: #22c55e;
}

.mp-replacement-history-footer strong {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}

.mp-replacement-history-footer a {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
}

.mp-replacement-history-footer a:hover {
    background: rgba(
        124,
        58,
        237,
        0.15
    );
    color: #8b5cf6;
}

.mp-replacement-history-footer
.material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 1100px) {
    .mp-replacement-results-history {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 760px) {
    .mp-replacement-results-panel {
        padding: 20px;
        border-radius: 22px;
    }

    .mp-replacement-results-history {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 12px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .mp-replacement-results-history {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   MARKETPLACE SEO CONTENT
   ============================================================ */

.mp-marketplace-seo-content {
    width: 100%;
    margin-top: 34px;
    padding: 30px 32px;

    border:
        1px solid
        var(--mp-v2-border);

    border-radius: 20px;

    background:
        var(--mp-v2-panel);

    color:
        var(--mp-v2-text);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.mp-marketplace-seo-inner {
    max-width: 1100px;

    color:
        var(--mp-v2-muted);

    font-size: 14px;
    line-height: 1.72;
}


.mp-marketplace-seo-inner h1,
.mp-marketplace-seo-inner h2,
.mp-marketplace-seo-inner h3 {
    color:
        var(--mp-v2-text);

    line-height: 1.3;
}


.mp-marketplace-seo-inner h2 {
    margin:
        30px 0
        12px;

    font-size: 22px;
    font-weight: 800;
}


.mp-marketplace-seo-inner h3 {
    margin:
        24px 0
        10px;

    font-size: 17px;
    font-weight: 800;
}


.mp-marketplace-seo-inner p {
    margin:
        0 0
        14px;
}


.mp-marketplace-seo-inner ul,
.mp-marketplace-seo-inner ol {
    margin:
        12px 0
        18px;

    padding-left: 24px;
}


.mp-marketplace-seo-inner li {
    margin-bottom: 7px;
}


.mp-marketplace-seo-inner a {
    color:
        var(--mp-v2-accent);

    text-decoration: underline;
    text-underline-offset: 3px;
}


.mp-marketplace-seo-inner img {
    max-width: 100%;
    height: auto;

    border-radius: 14px;
}


.mp-marketplace-seo-inner strong {
    color:
        var(--mp-v2-text);
}


@media (max-width: 760px) {
    .mp-marketplace-seo-content {
        margin-top: 24px;

        padding: 22px 18px;

        border-radius: 16px;
    }

    .mp-marketplace-seo-inner {
        font-size: 13px;
    }

    .mp-marketplace-seo-inner h2 {
        font-size: 19px;
    }
}


/* ======================================================
   MARKETPLACE SEO — CENTER CONTENT
====================================================== */

.mp-marketplace-seo-inner {
    width: calc(100% - 56px);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .mp-marketplace-seo-inner {
        width: calc(100% - 28px);
    }
}

/* ============================================================
   Marketplace main — Fauzer example catalog
   ============================================================ */

.mp-design-actions {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.mp-design-example-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.mp-design-example-modal.is-open {
    display: flex;
}

.mp-design-example-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 18, .72);
    backdrop-filter: blur(8px);
}

.mp-design-example-dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    max-height: min(780px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mp-border);
    border-radius: 20px;
    background: var(--mp-surface);
    color: var(--mp-text);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, .32);
}

.mp-design-example-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--mp-border);
}

.mp-design-example-head > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mp-design-example-head strong {
    font-size: 20px;
    line-height: 1.2;
}

.mp-design-example-head small {
    color: var(--mp-muted);
    font-size: 13px;
}

.mp-design-example-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    background: var(--mp-surface);
    color: var(--mp-text);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.mp-design-example-body {
    min-height: 240px;
    overflow-y: auto;
    padding: 22px 24px 26px;
}

.mp-design-example-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.mp-design-example-categories button {
    appearance: none;
    border: 1px solid var(--mp-border);
    border-radius: 999px;
    background: var(--mp-surface);
    color: var(--mp-text);
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}

.mp-design-example-categories button:hover {
    border-color: var(--mp-primary);
}

.mp-design-example-categories button.active {
    border-color: var(--mp-primary);
    background: var(--mp-primary-soft);
}

.mp-design-example-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.mp-design-example-card {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    background: var(--mp-surface);
    color: var(--mp-text);
    cursor: pointer;
    text-align: left;
    transition:
        border-color .16s ease,
        transform .16s ease;
}

.mp-design-example-card:hover {
    transform: translateY(-2px);
    border-color: var(--mp-primary);
}

.mp-design-example-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--mp-surface);
}

.mp-design-example-card span {
    display: block;
    padding: 9px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 700;
}

.mp-design-example-state {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--mp-muted);
}

.mp-design-example-state .material-symbols-outlined {
    font-size: 34px;
}

.mp-design-example-state strong {
    color: var(--mp-text);
}

.mp-design-example-spinner {
    animation: mp-design-example-spin .8s linear infinite;
}

@keyframes mp-design-example-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .mp-design-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .mp-design-example-modal {
        padding: 12px;
    }

    .mp-design-example-dialog {
        max-height: calc(100vh - 24px);
        border-radius: 16px;
    }

    .mp-design-example-head {
        padding: 18px;
    }

    .mp-design-example-body {
        padding: 16px 18px 20px;
    }

    .mp-design-example-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .mp-design-example-categories button {
        flex: 0 0 auto;
    }

    .mp-design-example-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}


/* Global Fauzer examples inside Marketplace media picker */
.mp-funnel-example-catalog {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mp-funnel-example-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-funnel-example-categories button {
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .025);
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mp-funnel-example-categories button:hover {
    border-color: rgba(99, 102, 241, .75);
}

.mp-funnel-example-categories button.active {
    border-color: rgb(99, 102, 241);
    background: rgba(99, 102, 241, .14);
    color: rgb(165, 180, 252);
}

/* === GLOBAL FAUZER EXAMPLES CATALOG === */
.fauzer-examples-page {
    min-height: calc(100vh - 4rem);
    padding: 2rem 1rem 4rem;
}
.fauzer-examples-shell {
    width: min(1500px, 100%);
    margin: 0 auto;
}
.fauzer-examples-head {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}
.fauzer-examples-head h1 {
    margin: .3rem 0 .45rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
    font-weight: 900;
}
.fauzer-examples-head p {
    max-width: 850px;
    opacity: .7;
    font-size: 1rem;
}
.fauzer-examples-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: oklch(var(--p));
}
.fauzer-examples-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1.25rem;
}
.fauzer-examples-category {
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 999px;
    padding: .55rem .9rem;
    font-size: .9rem;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 3%, transparent);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.fauzer-examples-category:hover {
    transform: translateY(-1px);
    border-color: oklch(var(--p));
}
.fauzer-examples-category.active {
    color: oklch(var(--pc));
    background: oklch(var(--p));
    border-color: oklch(var(--p));
}
.fauzer-examples-state {
    min-height: 280px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .8rem;
    opacity: .7;
}
.fauzer-examples-state[hidden] {
    display: none;
}
.fauzer-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.fauzer-example-card {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    background: oklch(var(--b1));
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.fauzer-example-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, oklch(var(--p)) 65%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}
.fauzer-example-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: oklch(var(--b2));
}
.fauzer-example-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fauzer-example-card-action {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(15, 18, 28, .86);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}
.fauzer-example-card-title {
    padding: .85rem .9rem 1rem;
    font-weight: 800;
    line-height: 1.25;
}
.fauzer-example-action-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 1.5rem;
    align-items: start;
}
.fauzer-example-action-preview {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 1rem;
    background: oklch(var(--b2));
}
.fauzer-example-action-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fauzer-example-action-content {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.fauzer-example-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin: .35rem 0 .25rem;
}
.fauzer-example-action {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .7rem;
    row-gap: .1rem;
    align-items: center;
    min-height: 78px;
    padding: .8rem;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, currentColor 3%, transparent);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.fauzer-example-action:hover {
    transform: translateY(-1px);
    border-color: oklch(var(--p));
    background: color-mix(in srgb, oklch(var(--p)) 9%, transparent);
}
.fauzer-example-action .material-symbols-outlined {
    grid-row: span 2;
    color: oklch(var(--p));
}
.fauzer-example-action strong {
    font-size: .9rem;
}
.fauzer-example-action small {
    opacity: .62;
    font-size: .74rem;
}
@media (max-width: 760px) {
    .fauzer-examples-page {
        padding: 1.2rem .7rem 3rem;
    }
    .fauzer-examples-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
    }
    .fauzer-example-action-layout {
        grid-template-columns: 1fr;
    }
    .fauzer-example-action-preview {
        max-width: 260px;
    }
    .fauzer-example-actions-grid {
        grid-template-columns: 1fr;
    }
}