:root {
    --orange: #f1641e;
    --orange-soft: rgba(241,100,30,.10);
    --orange-line: rgba(241,100,30,.28);

    --ink: #17181b;
    --ink-2: #2c2d31;

    --sand: #f4f0ea;
    --sand-2: #ebe5dc;

    --white: #fff;
    --muted: #77736d;

    --green: #2f8a63;
    --red: #b84235;
    --yellow: #b97824;

    --border: rgba(23,24,27,.08);

    --shadow:
        0 15px 45px rgba(23,24,27,.07);

    --radius: 20px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        #f5f2ed;

    color:
        var(--ink);
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}


/* LOGIN */

.login-screen {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 30px;

    background:
        radial-gradient(
            circle at 75% 10%,
            rgba(241,100,30,.16),
            transparent 36rem
        ),
        linear-gradient(
            135deg,
            #f7f4ef,
            #eee8df
        );
}

.login-card {
    width: min(460px, 100%);

    background:
        rgba(255,255,255,.94);

    border:
        1px solid rgba(23,24,27,.07);

    border-radius:
        30px;

    padding:
        46px;

    box-shadow:
        0 30px 90px
        rgba(23,24,27,.12);

    backdrop-filter:
        blur(20px);
}

.login-logo {
    width: 220px;
    max-height: 70px;
    object-fit: contain;
    object-position: left center;

    margin-bottom: 40px;
}

.eyebrow,
.top-kicker {
    color:
        var(--orange);

    font-size:
        12px;

    font-weight:
        750;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}

.login-card h1 {
    margin:
        8px 0 12px;

    font-size:
        36px;

    letter-spacing:
        -.045em;
}

.login-card p {
    color:
        var(--muted);

    line-height:
        1.65;

    margin-bottom:
        28px;
}

.login-card input {
    width: 100%;

    height: 52px;

    padding:
        0 16px;

    border:
        1px solid rgba(23,24,27,.12);

    border-radius:
        12px;

    background:
        #faf9f7;

    outline:
        none;

    margin-bottom:
        12px;
}

.login-card input:focus {
    border-color:
        var(--orange);

    box-shadow:
        0 0 0 4px
        var(--orange-soft);
}

.login-error {
    min-height:
        20px;

    margin-top:
        12px;

    color:
        var(--red);

    font-size:
        13px;
}


/* APP LAYOUT */

.app-shell {
    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        260px 1fr;
}

.sidebar {
    position:
        fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width:
        260px;

    display:
        flex;

    flex-direction:
        column;

    background:
        #fbfaf8;

    border-right:
        1px solid var(--border);

    z-index:
        10;
}

.brand {
    padding:
        26px 24px 22px;

    border-bottom:
        1px solid var(--border);
}

.brand-logo {
    width:
        178px;

    height:
        50px;

    object-fit:
        contain;

    object-position:
        left center;
}

.brand-sub {
    margin-top:
        6px;

    color:
        var(--orange);

    font-size:
        11px;

    letter-spacing:
        .18em;

    font-weight:
        800;
}

.nav-scroll {
    flex:
        1;

    overflow-y:
        auto;

    padding:
        18px 14px;
}

.nav-label {
    margin:
        24px 12px 8px;

    color:
        #f1641e;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .16em;
}

.nav-item {
    width:
        100%;

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        0 12px;

    border:
        0;

    border-radius:
        11px;

    color:
        #66625d;

    background:
        transparent;

    text-align:
        left;

    transition:
        .16s ease;
}

.nav-item:hover {
    color:
        var(--ink);

    background:
        #f1ede7;
}

.nav-item.active {
    color:
        var(--orange);

    background:
        var(--orange-soft);

    font-weight:
        680;
}

.nav-icon {
    width:
        20px;

    display:
        inline-grid;

    place-items:
        center;

    color:
        inherit;

    font-size:
        18px;
}

.sidebar-bottom {
    padding:
        14px;

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

.hermes-link,
.logout-button {
    width:
        100%;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 12px;

    border-radius:
        10px;

    color:
        #77736d;

    text-decoration:
        none;

    font-size:
        13px;
}

.hermes-link:hover {
    background:
        #f1ede7;

    color:
        var(--ink);
}

.logout-button {
    margin-top:
        4px;

    border:
        0;

    background:
        transparent;

    justify-content:
        flex-start;
}

.logout-button:hover {
    color:
        var(--red);

    background:
        rgba(184,66,53,.06);
}

.main {
    grid-column:
        2;

    min-width:
        0;
}

.topbar {
    height:
        92px;

    position:
        sticky;

    top: 0;

    z-index:
        8;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 40px;

    background:
        rgba(245,242,237,.88);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid var(--border);
}

.topbar h1 {
    margin:
        3px 0 0;

    font-size:
        25px;

    letter-spacing:
        -.035em;
}

.top-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.system-pill,
.user-pill {
    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0 14px;

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

    border-radius:
        999px;

    background:
        rgba(255,255,255,.65);

    font-size:
        12px;

    font-weight:
        650;
}

.status-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #39a36f;

    box-shadow:
        0 0 0 4px
        rgba(57,163,111,.10);
}

.content {
    padding:
        36px 40px 70px;

    max-width:
        1600px;
}


/* HERO */

.hero {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(300px,.5fr);

    gap:
        20px;

    margin-bottom:
        24px;
}

.hero-main {
    min-height:
        240px;

    position:
        relative;

    overflow:
        hidden;

    padding:
        38px;

    border-radius:
        28px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #17181b,
            #292a2f
        );

    box-shadow:
        var(--shadow);
}

.hero-main:after {
    content:
        "";

    position:
        absolute;

    width:
        340px;

    height:
        340px;

    right:
        -100px;

    top:
        -130px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(241,100,30,.55),
            transparent 68%
        );
}

.hero-main h2 {
    position:
        relative;

    z-index:
        1;

    max-width:
        650px;

    margin:
        12px 0 14px;

    font-size:
        clamp(34px,4vw,54px);

    line-height:
        1.03;

    letter-spacing:
        -.055em;
}

.hero-main p {
    position:
        relative;

    z-index:
        1;

    max-width:
        650px;

    margin:
        0;

    color:
        rgba(255,255,255,.68);

    font-size:
        15px;

    line-height:
        1.65;
}

.hero-side {
    padding:
        30px;

    border-radius:
        28px;

    background:
        var(--orange);

    color:
        white;

    box-shadow:
        var(--shadow);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}

.hero-side .big-number {
    font-size:
        64px;

    font-weight:
        770;

    letter-spacing:
        -.07em;
}

.hero-side p {
    margin:
        0;

    color:
        rgba(255,255,255,.82);

    line-height:
        1.5;
}


/* METRICS */

.metrics {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:
        16px;

    margin-bottom:
        34px;
}

.metric {
    padding:
        22px;

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

    border-radius:
        18px;

    background:
        rgba(255,255,255,.78);

    box-shadow:
        0 8px 25px
        rgba(23,24,27,.035);
}

.metric-label {
    color:
        var(--muted);

    font-size:
        12px;

    margin-bottom:
        10px;
}

.metric-value {
    font-size:
        30px;

    font-weight:
        760;

    letter-spacing:
        -.05em;
}

.metric-sub {
    margin-top:
        6px;

    color:
        #aaa59e;

    font-size:
        11px;
}


/* SECTION */

.section-head {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    margin:
        28px 0 16px;
}

.section-head h2 {
    margin:
        0;

    font-size:
        21px;

    letter-spacing:
        -.035em;
}

.section-head p {
    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        13px;
}


/* PROJECTS */

.project-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        18px;
}

.project-card {
    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        rgba(255,255,255,.90);

    box-shadow:
        0 12px 35px
        rgba(23,24,27,.045);

    transition:
        transform .18s ease,
        box-shadow .18s ease;

    cursor:
        pointer;
}

.project-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 50px
        rgba(23,24,27,.09);
}

.preview-strip {
    height:
        170px;

    display:
        grid;

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

    gap:
        2px;

    background:
        #e9e4dc;
}

.preview-strip img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.preview-empty {
    grid-column:
        1/-1;

    display:
        grid;

    place-items:
        center;

    color:
        #aaa49b;

    font-size:
        13px;
}

.project-body {
    padding:
        20px;
}

.project-topline {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        start;

    gap:
        20px;
}

.project-title {
    margin:
        0;

    font-size:
        18px;

    letter-spacing:
        -.025em;
}

.project-key {
    margin-top:
        4px;

    color:
        #aaa59e;

    font-size:
        11px;
}

.badge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        0 9px;

    border-radius:
        999px;

    background:
        #f0ece6;

    color:
        #6e6962;

    font-size:
        10px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}

.badge.test {
    color:
        #a35b18;

    background:
        rgba(241,100,30,.10);
}

.progress-row {
    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        20px;

    color:
        var(--muted);

    font-size:
        11px;
}

.progress-track {
    height:
        7px;

    margin-top:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #eee9e2;
}

.progress-fill {
    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #f1641e,
            #ff915e
        );
}

.project-stats {
    margin-top:
        16px;

    display:
        flex;

    gap:
        18px;

    color:
        var(--muted);

    font-size:
        11px;
}


/* PROJECT DETAIL */

.back-button {
    border:
        0;

    padding:
        0;

    margin-bottom:
        18px;

    color:
        var(--muted);

    background:
        transparent;
}

.back-button:hover {
    color:
        var(--orange);
}

.project-header {
    padding:
        30px;

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

    border-radius:
        24px;

    background:
        white;

    box-shadow:
        var(--shadow);
}

.project-header-row {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    align-items:
        flex-start;
}

.project-header h2 {
    margin:
        4px 0 6px;

    font-size:
        31px;

    letter-spacing:
        -.045em;
}

.project-meta {
    color:
        var(--muted);

    font-size:
        12px;
}

.project-metrics {
    margin-top:
        24px;

    display:
        grid;

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

    gap:
        10px;
}

.small-metric {
    padding:
        14px;

    border-radius:
        13px;

    background:
        #f7f4ef;
}

.small-metric strong {
    display:
        block;

    font-size:
        21px;
}

.small-metric span {
    color:
        var(--muted);

    font-size:
        10px;
}


/* FILTERS */

.gallery-toolbar {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin:
        28px 0 14px;
}

.filters {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}

.filter {
    min-height:
        35px;

    padding:
        0 12px;

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

    border-radius:
        999px;

    background:
        rgba(255,255,255,.72);

    color:
        var(--muted);

    font-size:
        11px;
}

.filter.active {
    color:
        white;

    background:
        var(--ink);

    border-color:
        var(--ink);
}


/* IMAGE GALLERY */

.gallery {
    display:
        grid;

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

    gap:
        14px;
}

.image-card {
    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        white;

    box-shadow:
        0 8px 25px
        rgba(23,24,27,.04);
}

.image-thumb {
    position:
        relative;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #e8e3dc;

    cursor:
        zoom-in;
}

.image-thumb img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .25s ease;
}

.image-card:hover img {
    transform:
        scale(1.025);
}

.image-actions {
    position:
        absolute;

    top:
        8px;

    right:
        8px;

    display:
        flex;

    gap:
        5px;

    opacity:
        0;

    transform:
        translateY(-3px);

    transition:
        .15s ease;
}

.image-card:hover
.image-actions {
    opacity:
        1;

    transform:
        translateY(0);
}

.icon-button {
    width:
        32px;

    height:
        32px;

    border:
        0;

    border-radius:
        9px;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(23,24,27,.82);

    color:
        white;

    backdrop-filter:
        blur(8px);
}

.icon-button.danger:hover {
    background:
        var(--red);
}

.icon-button.restore:hover {
    background:
        var(--green);
}

.image-caption {
    padding:
        12px 13px 13px;
}

.image-title {
    min-height:
        34px;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.4;
}

.image-meta {
    margin-top:
        8px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    color:
        #99948d;

    font-size:
        10px;
}

.status {
    padding:
        4px 7px;

    border-radius:
        999px;

    background:
        #eeeae4;

    color:
        #716c65;
}

.status.approved {
    color:
        var(--green);

    background:
        rgba(47,138,99,.09);
}

.status.rejected {
    color:
        var(--red);

    background:
        rgba(184,66,53,.08);
}

.status.needs_review {
    color:
        var(--yellow);

    background:
        rgba(185,120,36,.09);
}


/* PLACEHOLDERS */

.placeholder-page {
    min-height:
        580px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        22px;
}

.placeholder-main {
    padding:
        42px;

    border-radius:
        28px;

    background:
        var(--ink);

    color:
        white;
}

.placeholder-main
.placeholder-number {
    color:
        var(--orange);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .16em;
}

.placeholder-main h2 {
    margin:
        16px 0;

    font-size:
        42px;

    line-height:
        1.05;

    letter-spacing:
        -.055em;
}

.placeholder-main p {
    max-width:
        650px;

    color:
        rgba(255,255,255,.62);

    line-height:
        1.7;
}

.placeholder-side {
    padding:
        34px;

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

    border-radius:
        28px;

    background:
        white;
}

.feature-line {
    display:
        flex;

    gap:
        14px;

    padding:
        15px 0;

    border-bottom:
        1px solid var(--border);
}

.feature-check {
    color:
        var(--orange);

    font-weight:
        800;
}


/* BUTTONS */

.primary-button {
    min-height:
        43px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        11px;

    color:
        white;

    background:
        var(--orange);

    font-weight:
        700;
}

.primary-button:hover {
    background:
        #db5717;
}

.full {
    width:
        100%;
}


/* MODAL */

.modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        100;
}

.modal-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(18,19,21,.74);

    backdrop-filter:
        blur(8px);
}

.modal-card {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

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

    width:
        min(1280px,94vw);

    max-height:
        92vh;

    overflow:
        hidden;

    border-radius:
        22px;

    background:
        white;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.35);
}

.modal-close {
    position:
        absolute;

    right:
        14px;

    top:
        12px;

    z-index:
        3;

    width:
        38px;

    height:
        38px;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(23,24,27,.85);

    color:
        white;

    font-size:
        22px;
}

.image-modal-layout {
    min-height:
        620px;

    display:
        grid;

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

.image-stage {
    min-width:
        0;

    display:
        grid;

    place-items:
        center;

    padding:
        35px;

    background:
        #17181b;
}

.image-stage img {
    max-width:
        100%;

    max-height:
        80vh;

    object-fit:
        contain;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.35);
}

.modal-info {
    padding:
        40px 26px;

    overflow-y:
        auto;
}


/* EMPTY */

.empty {
    grid-column:
        1/-1;

    min-height:
        220px;

    display:
        grid;

    place-items:
        center;

    border:
        1px dashed
        rgba(23,24,27,.16);

    border-radius:
        18px;

    color:
        var(--muted);

    background:
        rgba(255,255,255,.4);
}


/* TOAST */

.toast {
    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        200;

    max-width:
        380px;

    padding:
        14px 18px;

    border-radius:
        12px;

    color:
        white;

    background:
        #17181b;

    box-shadow:
        var(--shadow);

    transform:
        translateY(100px);

    opacity:
        0;

    transition:
        .2s ease;
}

.toast.show {
    transform:
        translateY(0);

    opacity:
        1;
}


/* RESPONSIVE */

@media (
    max-width: 1100px
) {

    .metrics {
        grid-template-columns:
            repeat(2,1fr);
    }

    .project-grid {
        grid-template-columns:
            1fr;
    }

    .project-metrics {
        grid-template-columns:
            repeat(3,1fr);
    }
}

@media (
    max-width: 760px
) {

    .app-shell {
        display:
            block;
    }

    .sidebar {
        display:
            none;
    }

    .main {
        grid-column:
            auto;
    }

    .topbar {
        padding:
            0 20px;
    }

    .content {
        padding:
            24px 18px 50px;
    }

    .hero,
    .placeholder-page {
        grid-template-columns:
            1fr;
    }

    .metrics {
        grid-template-columns:
            1fr 1fr;
    }

    .image-modal-layout {
        grid-template-columns:
            1fr;
    }

    .modal-info {
        display:
            none;
    }
}


/* =====================================================
   FRAME AI PROJECT WIZARDS V1
   ===================================================== */

.wizard-layout {
    display:
        grid;

    grid-template-columns:
        minmax(360px,.82fr)
        minmax(480px,1.18fr);

    gap:
        22px;

    align-items:
        start;
}


.wizard-hero {
    min-height:
        650px;

    position:
        sticky;

    top:
        128px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    overflow:
        hidden;

    padding:
        42px;

    border-radius:
        28px;

    color:
        white;

    background:
        linear-gradient(
            145deg,
            #17181b 0%,
            #24252a 68%,
            #301b12 100%
        );

    box-shadow:
        var(--shadow);
}


.wizard-hero:before {
    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    right:
        -210px;

    top:
        -130px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(241,100,30,.48),
            transparent 68%
        );

    pointer-events:
        none;
}


.wizard-hero h2 {
    position:
        relative;

    z-index:
        1;

    margin:
        18px 0;

    max-width:
        600px;

    font-size:
        clamp(
            38px,
            4vw,
            60px
        );

    line-height:
        .99;

    letter-spacing:
        -.06em;
}


.wizard-hero p {
    position:
        relative;

    z-index:
        1;

    max-width:
        570px;

    color:
        rgba(
            255,
            255,
            255,
            .62
        );

    line-height:
        1.7;
}


.wizard-flow {
    position:
        relative;

    z-index:
        1;

    margin-top:
        50px;
}


.wizard-flow-step {
    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    color:
        rgba(
            255,
            255,
            255,
            .55
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );
}


.wizard-flow-step span {
    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .14
        );

    border-radius:
        50%;

    font-size:
        10px;
}


.wizard-flow-step.active {
    color:
        rgba(
            255,
            255,
            255,
            .88
        );
}


.wizard-flow-step.active span {
    border-color:
        rgba(
            241,
            100,
            30,
            .7
        );

    color:
        #ff9865;

    background:
        rgba(
            241,
            100,
            30,
            .08
        );
}


.wizard-mode-badge {
    position:
        relative;

    z-index:
        1;

    align-self:
        flex-start;

    margin-top:
        35px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(
            241,
            100,
            30,
            .4
        );

    border-radius:
        999px;

    color:
        #ff9560;

    background:
        rgba(
            241,
            100,
            30,
            .07
        );

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .14em;
}


.wizard-panel {
    padding:
        38px;

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

    border-radius:
        28px;

    background:
        rgba(
            255,
            255,
            255,
            .92
        );

    box-shadow:
        var(--shadow);
}


.wizard-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        30px;
}


.field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.field label {
    color:
        var(--ink);

    font-size:
        13px;

    font-weight:
        720;
}


.field small {
    color:
        #a09b94;

    font-size:
        11px;

    line-height:
        1.5;
}


.field input[type="text"],
.field input[type="number"] {
    width:
        100%;

    min-height:
        52px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(
            23,
            24,
            27,
            .11
        );

    border-radius:
        13px;

    outline:
        none;

    color:
        var(--ink);

    background:
        #faf8f5;

    transition:
        .15s ease;
}


.field input:focus {
    border-color:
        var(--orange);

    box-shadow:
        0 0 0 4px
        var(--orange-soft);

    background:
        white;
}


.target-control {
    display:
        grid;

    grid-template-columns:
        130px 1fr;

    gap:
        10px;
}


.target-presets {
    display:
        grid;

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

    gap:
        7px;
}


.target-presets button {
    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    color:
        var(--muted);

    background:
        #f7f4ef;

    font-size:
        11px;

    font-weight:
        680;
}


.target-presets button:hover,
.target-presets button.active {
    border-color:
        rgba(
            241,
            100,
            30,
            .30
        );

    color:
        var(--orange);

    background:
        var(--orange-soft);
}


.reference-drop {
    position:
        relative;

    min-height:
        220px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    overflow:
        hidden;

    border:
        1.5px dashed
        rgba(
            23,
            24,
            27,
            .17
        );

    border-radius:
        18px;

    color:
        var(--muted);

    background:
        #f8f5f1;

    transition:
        .18s ease;
}


.reference-drop:hover,
.reference-drop.dragging {
    border-color:
        var(--orange);

    background:
        var(--orange-soft);

    transform:
        translateY(
            -1px
        );
}


.reference-drop input {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    opacity:
        0;

    cursor:
        pointer;
}


.reference-drop strong {
    color:
        var(--ink);

    font-size:
        14px;
}


.reference-drop span {
    font-size:
        12px;
}


.reference-drop small {
    margin-top:
        7px;
}


.upload-symbol {
    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        7px;

    border-radius:
        14px;

    color:
        var(--orange);

    background:
        rgba(
            241,
            100,
            30,
            .10
        );

    font-size:
        26px;
}


.reference-preview {
    display:
        grid;

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

    gap:
        8px;

    margin-top:
        8px;
}


.reference-preview-card {
    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        1 / 1;

    border-radius:
        11px;

    background:
        #ece7e0;
}


.reference-preview-card img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.reference-preview-card span {
    position:
        absolute;

    left:
        6px;

    bottom:
        6px;

    min-width:
        22px;

    height:
        22px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        999px;

    color:
        white;

    background:
        rgba(
            23,
            24,
            27,
            .76
        );

    font-size:
        9px;

    backdrop-filter:
        blur(6px);
}


.analysis-option {
    display:
        grid;

    grid-template-columns:
        22px 1fr;

    gap:
        13px;

    padding:
        17px;

    border:
        1px solid
        var(--orange-line);

    border-radius:
        15px;

    background:
        var(--orange-soft);

    cursor:
        pointer;
}


.analysis-option input {
    width:
        18px;

    height:
        18px;

    accent-color:
        var(--orange);
}


.analysis-option strong {
    display:
        block;

    font-size:
        12px;
}


.analysis-option small {
    display:
        block;

    margin-top:
        4px;

    color:
        #8e796e;

    font-size:
        10px;

    line-height:
        1.5;
}


.wizard-summary {
    display:
        grid;

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

    overflow:
        hidden;

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

    border-radius:
        15px;
}


.wizard-summary > div {
    padding:
        14px;

    border-right:
        1px solid
        var(--border);
}


.wizard-summary > div:last-child {
    border-right:
        0;
}


.wizard-summary span,
.wizard-summary strong {
    display:
        block;
}


.wizard-summary span {
    margin-bottom:
        5px;

    color:
        #99948d;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .09em;
}


.wizard-summary strong {
    font-size:
        10px;
}


.wizard-submit {
    width:
        100%;

    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    font-size:
        13px;
}


.wizard-submit:disabled {
    opacity:
        .68;

    cursor:
        wait;
}


.spinner {
    width:
        17px;

    height:
        17px;

    display:
        inline-block;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            .35
        );

    border-top-color:
        white;

    border-radius:
        50%;

    animation:
        frame-spin
        .8s linear
        infinite;
}


@keyframes frame-spin {

    to {
        transform:
            rotate(
                360deg
            );
    }
}


.wizard-status:empty {
    display:
        none;
}


.wizard-running,
.wizard-success,
.wizard-error {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        14px 16px;

    border-radius:
        13px;

    font-size:
        11px;
}


.wizard-running {
    color:
        #72593e;

    background:
        #f7efe4;
}


.wizard-success {
    color:
        #276d50;

    background:
        rgba(
            47,
            138,
            99,
            .09
        );
}


.wizard-error {
    color:
        #9e3d33;

    background:
        rgba(
            184,
            66,
            53,
            .08
        );
}


@media (
    max-width: 1050px
) {

    .wizard-layout {
        grid-template-columns:
            1fr;
    }


    .wizard-hero {
        min-height:
            auto;

        position:
            relative;

        top:
            auto;
    }
}


@media (
    max-width: 650px
) {

    .wizard-panel,
    .wizard-hero {
        padding:
            24px;
    }


    .target-control {
        grid-template-columns:
            1fr;
    }


    .wizard-summary {
        grid-template-columns:
            1fr;
    }


    .wizard-summary > div {
        border-right:
            0;

        border-bottom:
            1px solid
            var(--border);
    }
}


/* =====================================================
   FRAME AI MARKET + RESEARCH ARCHIVE V1
   ===================================================== */

.wizard-market-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.wizard-market-grid select {
    width: 100%;
}

.wizard-market-note {
    margin: -2px 0 22px;
    padding: 16px 18px;
    border: 1px solid rgba(23,24,27,.08);
    border-radius: 16px;
    background: rgba(241,100,30,.055);
    font-size: 13px;
    line-height: 1.55;
    color: rgba(23,24,27,.68);
}

.wizard-market-note strong {
    display: block;
    margin-bottom: 4px;
    color: #17181b;
}


.archive-shell {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.archive-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    padding: 28px 30px;
    border: 1px solid rgba(23,24,27,.08);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(247,242,236,.96)
        );
}

.archive-hero h2 {
    margin: 8px 0 8px;
    max-width: 720px;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -.04em;
}

.archive-hero p {
    margin: 0;
    max-width: 720px;
    color: rgba(23,24,27,.58);
    line-height: 1.6;
}

.archive-total {
    min-width: 115px;
    text-align: right;
    color: rgba(23,24,27,.5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.archive-total strong {
    display: block;
    color: #17181b;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.04em;
}

.archive-filter-panel {
    padding: 20px;
    border: 1px solid rgba(23,24,27,.08);
    border-radius: 22px;
    background: rgba(255,255,255,.72);
}

.archive-search input {
    width: 100%;
    min-height: 52px;
    padding: 0 17px;
    border: 1px solid rgba(23,24,27,.10);
    border-radius: 14px;
    background: #fff;
    font-size: 15px;
    outline: none;
}

.archive-search input:focus {
    border-color: rgba(241,100,30,.55);
    box-shadow: 0 0 0 4px rgba(241,100,30,.08);
}

.archive-filter-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.archive-filter-grid select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(23,24,27,.09);
    border-radius: 12px;
    background: #fff;
    color: #17181b;
}

.archive-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.archive-results {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.archive-card {
    padding: 20px;
    border: 1px solid rgba(23,24,27,.075);
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 8px 30px rgba(23,24,27,.035);
}

.archive-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.archive-topic {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(241,100,30,.10);
    color: #c94c11;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.archive-date {
    color: rgba(23,24,27,.38);
    font-size: 11px;
}

.archive-content {
    font-size: 16px;
    line-height: 1.55;
    color: #17181b;
    white-space: pre-wrap;
}

.archive-meta,
.archive-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.archive-meta span,
.archive-tags span {
    padding: 6px 9px;
    border-radius: 9px;
    background: #f5f2ee;
    color: rgba(23,24,27,.62);
    font-size: 11px;
}

.archive-tags span {
    background: rgba(23,24,27,.045);
}

.archive-empty,
.archive-loading {
    grid-column: 1 / -1;
    padding: 55px 25px;
    border: 1px dashed rgba(23,24,27,.13);
    border-radius: 20px;
    text-align: center;
    color: rgba(23,24,27,.48);
}

@media (max-width: 950px) {

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

    .archive-results {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .wizard-market-grid,
    .archive-filter-grid {
        grid-template-columns: 1fr;
    }

    .archive-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .archive-total {
        text-align: left;
    }
}



/* =====================================================
   RESEARCH ARCHIVE UX V2
   ===================================================== */

.archive-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.archive-apply-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #f1641e;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .15s ease,
        opacity .15s ease;
}

.archive-apply-btn:hover {
    transform: translateY(-1px);
}

.archive-apply-btn:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}



/* =====================================================
   ARCHIVE SECONDARY BUTTON V3
   ===================================================== */

#archive-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(23,24,27,.11);

    border-radius:
        12px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f4f0
        );

    color:
        #343434;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        650;

    box-shadow:
        0 2px 8px
        rgba(23,24,27,.035);

    cursor:
        pointer;

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


#archive-reset::before {
    content:
        "↺";

    display:
        inline-block;

    font-size:
        16px;

    line-height:
        1;

    color:
        #f1641e;
}


#archive-reset:hover {
    border-color:
        rgba(241,100,30,.28);

    background:
        #fff;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 16px
        rgba(23,24,27,.055);
}


#archive-reset:active {
    transform:
        translateY(0);
}




/* =====================================================
   RECHERCHEARCHIV COMPACT VIEW V4
   ===================================================== */

.archive-results {
    display: block;
}


.archive-table {
    overflow: hidden;

    border:
        1px solid
        rgba(23,24,27,.075);

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        0 8px 30px
        rgba(23,24,27,.025);
}


.archive-table-head {
    display: grid;

    grid-template-columns:
        minmax(340px, 2.6fr)
        minmax(170px, 1fr)
        minmax(180px, 1fr)
        80px;

    gap:
        18px;

    align-items:
        center;

    min-height:
        42px;

    padding:
        0 18px;

    border-bottom:
        1px solid
        rgba(23,24,27,.075);

    background:
        #f8f6f3;

    color:
        rgba(23,24,27,.42);

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.archive-row {
    display: grid;

    grid-template-columns:
        minmax(340px, 2.6fr)
        minmax(170px, 1fr)
        minmax(180px, 1fr)
        80px;

    gap:
        18px;

    align-items:
        center;

    min-height:
        58px;

    padding:
        9px 18px;

    border-bottom:
        1px solid
        rgba(23,24,27,.055);

    transition:
        background .12s ease;
}


.archive-row:last-child {
    border-bottom:
        0;
}


.archive-row:hover {
    background:
        rgba(241,100,30,.025);
}


.archive-row-content {
    display: grid;

    grid-template-columns:
        28px 1fr;

    gap:
        8px;

    align-items:
        start;

    min-width:
        0;
}


.archive-row-number {
    display: inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        24px;

    height:
        24px;

    margin-top:
        1px;

    border-radius:
        7px;

    background:
        #f3f0ec;

    color:
        rgba(23,24,27,.46);

    font-size:
        10px;

    font-weight:
        750;
}


.archive-row-text {
    color:
        #17181b;

    font-size:
        14px;

    font-weight:
        560;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;
}


.archive-row-classification,
.archive-row-product {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        5px 6px;

    min-width:
        0;
}


.archive-row-classification strong {
    width:
        100%;

    color:
        #17181b;

    font-size:
        12px;

    font-weight:
        700;
}


.archive-row-classification span,
.archive-row-product span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        22px;

    padding:
        0 7px;

    border-radius:
        7px;

    background:
        #f5f2ee;

    color:
        rgba(23,24,27,.64);

    font-size:
        10px;
}


.archive-row-classification small {
    width:
        100%;

    color:
        rgba(23,24,27,.43);

    font-size:
        10px;

    line-height:
        1.3;
}


.archive-row-product span {
    background:
        rgba(241,100,30,.065);

    color:
        #a84314;
}


.archive-row-date {
    color:
        rgba(23,24,27,.38);

    font-size:
        10px;

    text-align:
        right;
}


.archive-row-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        4px;

    margin-top:
        5px;
}


.archive-row-tags span {
    color:
        rgba(23,24,27,.36);

    font-size:
        9px;
}


.archive-row-tags span:not(:last-child)::after {
    content:
        " ·";

    margin-left:
        2px;
}


.archive-muted {
    background:
        transparent !important;

    color:
        rgba(23,24,27,.25)
        !important;
}


/*
 * Die alten großen Karten werden für das Archiv
 * nicht mehr benötigt.
 */
.archive-card {
    box-shadow:
        none;
}


/* TABLET */

@media (
    max-width: 1050px
) {

    .archive-table-head,
    .archive-row {

        grid-template-columns:
            minmax(280px, 2fr)
            minmax(150px, 1fr)
            minmax(150px, 1fr);
    }


    .archive-table-head > div:last-child,
    .archive-row-date {

        display:
            none;
    }
}


/* MOBILE */

@media (
    max-width: 720px
) {

    .archive-table-head {
        display:
            none;
    }


    .archive-row {

        display:
            block;

        padding:
            14px 15px;
    }


    .archive-row-content {

        margin-bottom:
            9px;
    }


    .archive-row-classification,
    .archive-row-product {

        padding-left:
            36px;

        margin-top:
            5px;
    }


    .archive-row-classification strong {

        width:
            auto;

        margin-right:
            4px;
    }
}



/* =====================================================
   FRAME AI WORKING MVP V1
   ===================================================== */

.mvp-page {
    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}


.mvp-hero {
    padding:
        27px 30px;

    border:
        1px solid
        rgba(23,24,27,.075);

    border-radius:
        23px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f8f4ef
        );
}


.mvp-hero h2 {
    margin:
        7px 0 8px;

    font-size:
        clamp(
            29px,
            3vw,
            43px
        );

    letter-spacing:
        -.04em;
}


.mvp-hero p {
    margin:
        0;

    max-width:
        760px;

    color:
        rgba(23,24,27,.57);

    line-height:
        1.6;
}


.mvp-panel {
    padding:
        22px;

    border:
        1px solid
        rgba(23,24,27,.075);

    border-radius:
        20px;

    background:
        rgba(255,255,255,.82);
}


.mvp-panel h3 {
    margin:
        0 0 18px;
}


.mvp-form textarea,
.mvp-form input,
.mvp-form select,
.keyword-filter-grid input,
.keyword-filter-grid select {

    width:
        100%;

    box-sizing:
        border-box;
}


.mvp-form textarea {
    resize:
        vertical;

    min-height:
        110px;
}


.mvp-two-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        16px;
}


.mvp-three-grid {
    display:
        grid;

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

    gap:
        16px;
}


.mvp-note {
    margin:
        4px 0 18px;

    padding:
        13px 15px;

    border-radius:
        12px;

    background:
        rgba(241,100,30,.055);

    color:
        rgba(23,24,27,.62);

    font-size:
        12px;

    line-height:
        1.5;
}


.mvp-note strong {
    color:
        #17181b;
}


.mvp-actions {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        15px;
}


.mvp-primary,
.mvp-secondary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        0 17px;

    border-radius:
        11px;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;
}


.mvp-primary {
    border:
        0;

    background:
        #f1641e;

    color:
        #fff;
}


.mvp-secondary {
    border:
        1px solid
        rgba(23,24,27,.1);

    background:
        #fff;

    color:
        #333;
}


.mvp-primary:disabled,
.mvp-secondary:disabled {
    opacity:
        .5;

    cursor:
        wait;
}


.mvp-success,
.mvp-error {
    margin-top:
        14px;

    padding:
        12px 14px;

    border-radius:
        11px;

    font-size:
        12px;
}


.mvp-success {
    background:
        rgba(43,145,81,.08);

    color:
        #216f40;
}


.mvp-error {
    background:
        rgba(188,54,54,.075);

    color:
        #a02e2e;
}


.mvp-section-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.mvp-section-head h3 {
    margin:
        0 0 3px;
}


.mvp-section-head p {
    margin:
        0;

    color:
        rgba(23,24,27,.48);

    font-size:
        12px;
}


.mvp-job-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.mvp-job {
    padding:
        16px 18px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        15px;

    background:
        #fff;
}


.mvp-job-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.mvp-job-top > div:first-child {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.mvp-status {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        23px;

    padding:
        0 8px;

    border-radius:
        999px;

    background:
        #f1efec;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}


.mvp-status.completed {
    background:
        rgba(43,145,81,.1);

    color:
        #277245;
}


.mvp-status.pending,
.mvp-status.running {
    background:
        rgba(241,100,30,.09);

    color:
        #b24c19;
}


.mvp-status.failed {
    background:
        rgba(188,54,54,.09);

    color:
        #9d3131;
}


.mvp-status.prepared {
    background:
        rgba(59,92,148,.09);

    color:
        #345a94;
}


.mvp-job-meta {
    color:
        rgba(23,24,27,.42);

    font-size:
        10px;
}


.mvp-job-task {
    margin-top:
        11px;

    color:
        rgba(23,24,27,.72);

    font-size:
        13px;

    line-height:
        1.5;

    white-space:
        pre-wrap;
}


.mvp-result {
    margin-top:
        13px;

    border-top:
        1px solid
        rgba(23,24,27,.06);

    padding-top:
        10px;
}


.mvp-result summary {
    cursor:
        pointer;

    color:
        #d65418;

    font-size:
        12px;

    font-weight:
        700;
}


.mvp-result > div {
    margin-top:
        12px;

    padding:
        15px;

    border-radius:
        11px;

    background:
        #f8f6f3;

    white-space:
        pre-wrap;

    font-size:
        12px;

    line-height:
        1.55;
}


.mvp-empty {
    padding:
        35px 22px;

    border:
        1px dashed
        rgba(23,24,27,.12);

    border-radius:
        15px;

    text-align:
        center;

    color:
        rgba(23,24,27,.43);
}



/* =====================================================
   KEYWORDS
   ===================================================== */

.keyword-filter-grid {
    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr auto auto;

    gap:
        9px;

    align-items:
        center;
}


.keyword-table {
    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.075);

    border-radius:
        17px;

    background:
        #fff;
}


.keyword-head,
.keyword-row {
    display:
        grid;

    grid-template-columns:
        minmax(260px,2fr)
        110px
        minmax(140px,1fr)
        110px
        minmax(120px,1fr);

    gap:
        15px;

    align-items:
        center;

    padding:
        0 17px;
}


.keyword-head {
    min-height:
        40px;

    background:
        #f8f6f3;

    border-bottom:
        1px solid
        rgba(23,24,27,.07);

    color:
        rgba(23,24,27,.42);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.keyword-row {
    min-height:
        46px;

    border-bottom:
        1px solid
        rgba(23,24,27,.05);

    font-size:
        11px;

    color:
        rgba(23,24,27,.6);
}


.keyword-row:last-child {
    border-bottom:
        0;
}


.keyword-row:hover {
    background:
        rgba(241,100,30,.025);
}


.keyword-name {
    color:
        #17181b;

    font-size:
        13px;

    font-weight:
        620;
}


.keyword-volume {
    color:
        #17181b;

    font-size:
        13px;

    font-weight:
        720;
}



/* =====================================================
   MOCKUPS
   ===================================================== */

.mockup-summary {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        11px;
}


.mockup-summary span {
    padding:
        5px 8px;

    border-radius:
        7px;

    background:
        #f5f2ee;

    color:
        rgba(23,24,27,.62);

    font-size:
        10px;
}



/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (
    max-width: 1000px
) {

    .mvp-three-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .keyword-filter-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .keyword-head,
    .keyword-row {

        grid-template-columns:
            2fr
            90px
            1fr
            90px;
    }


    .keyword-head > div:last-child,
    .keyword-row > div:last-child {
        display:
            none;
    }
}


@media (
    max-width: 680px
) {

    .mvp-two-grid,
    .mvp-three-grid,
    .keyword-filter-grid {

        grid-template-columns:
            1fr;
    }


    .mvp-job-top {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .keyword-head {
        display:
            none;
    }


    .keyword-row {
        display:
            grid;

        grid-template-columns:
            1fr auto;

        padding:
            11px 14px;
    }


    .keyword-row > div:nth-child(3),
    .keyword-row > div:nth-child(4),
    .keyword-row > div:nth-child(5) {
        display:
            none;
    }
}



/* =====================================================
   FRAME AI SELECT SYSTEM V1
   ===================================================== */

.wizard-form select,
.mvp-form select,
.frame-select,
.archive-filter-grid select,
.keyword-filter-grid select {

    -webkit-appearance:
        none;

    appearance:
        none;

    min-height:
        48px;

    padding:
        0 44px 0 14px;

    border:
        1px solid
        rgba(23,24,27,.11);

    border-radius:
        13px;

    background-color:
        #fff;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #79736d 50%
        ),
        linear-gradient(
            135deg,
            #79736d 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 19px)
        calc(50% - 2px),

        calc(100% - 14px)
        calc(50% - 2px);

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;

    color:
        #17181b;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        560;

    line-height:
        1;

    cursor:
        pointer;

    outline:
        none;

    box-shadow:
        0 1px 2px
        rgba(23,24,27,.02);

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


.wizard-form select:hover,
.mvp-form select:hover,
.frame-select:hover,
.archive-filter-grid select:hover,
.keyword-filter-grid select:hover {

    border-color:
        rgba(241,100,30,.34);
}


.wizard-form select:focus,
.mvp-form select:focus,
.frame-select:focus,
.archive-filter-grid select:focus,
.keyword-filter-grid select:focus {

    border-color:
        rgba(241,100,30,.65);

    box-shadow:
        0 0 0 4px
        rgba(241,100,30,.08);
}


.wizard-form select:disabled,
.mvp-form select:disabled,
.frame-select:disabled {

    background-color:
        #f5f2ee;

    color:
        rgba(23,24,27,.55);

    cursor:
        not-allowed;

    opacity:
        1;
}


.wizard-form textarea {
    width:
        100%;

    box-sizing:
        border-box;

    padding:
        14px 15px;

    border:
        1px solid
        rgba(23,24,27,.11);

    border-radius:
        13px;

    background:
        #fff;

    color:
        #17181b;

    font:
        inherit;

    font-size:
        14px;

    line-height:
        1.55;

    resize:
        vertical;

    outline:
        none;

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


.wizard-form textarea:focus {

    border-color:
        rgba(241,100,30,.65);

    box-shadow:
        0 0 0 4px
        rgba(241,100,30,.08);
}


.field-optional {

    display:
        inline-flex;

    margin-left:
        7px;

    padding:
        3px 7px;

    border-radius:
        999px;

    background:
        #f4f1ed;

    color:
        rgba(23,24,27,.45);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;

    vertical-align:
        middle;
}


/* =====================================================
   PROJECT RESEARCH LINK
   ===================================================== */

.project-link-info {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        -5px 0 18px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(241,100,30,.13);

    border-radius:
        13px;

    background:
        rgba(241,100,30,.045);
}


.project-link-info.hidden {

    display:
        none;
}


.project-link-info > div {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.project-link-info span {

    color:
        rgba(23,24,27,.5);

    font-size:
        11px;
}


.project-link-info strong {

    color:
        #17181b;

    font-size:
        12px;
}


.project-link-info > small {

    color:
        #b34c19;

    font-size:
        10px;

    font-weight:
        700;
}


.project-context-warning {

    display:
        block !important;

    max-width:
        360px;

    color:
        #9b531d
        !important;

    font-weight:
        500
        !important;

    line-height:
        1.4;
}




/* =====================================================
   RESEARCH APPROVAL CENTER V1
   ===================================================== */

.ra-page,
.ra-review-page {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


.ra-hard-gate,
.ra-production-lock {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        16px 18px;

    border:
        1px solid
        rgba(241,100,30,.18);

    border-radius:
        14px;

    background:
        rgba(241,100,30,.055);
}


.ra-hard-gate > span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    flex:
        0 0 auto;

    border-radius:
        8px;

    background:
        #f1641e;

    color:
        #fff;

    font-weight:
        800;
}


.ra-hard-gate p,
.ra-production-lock p {

    margin:
        4px 0 0;

    color:
        rgba(23,24,27,.58);

    font-size:
        11px;

    line-height:
        1.5;
}


.ra-research-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        14px;

    background:
        #fff;
}


.ra-row-main {

    min-width:
        0;

    flex:
        1;
}


.ra-row-top {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.ra-task {

    margin:
        8px 0 5px;

    color:
        rgba(23,24,27,.67);

    font-size:
        12px;

    line-height:
        1.45;
}


.ra-row-main small {

    color:
        rgba(23,24,27,.38);

    font-size:
        9px;
}


.ra-status {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        #f2efeb;

    color:
        #666;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.ra-status.pending {

    background:
        rgba(241,100,30,.10);

    color:
        #b64b18;
}


.ra-status.approved {

    background:
        rgba(43,145,81,.1);

    color:
        #277044;
}


.ra-status.revision_requested {

    background:
        rgba(179,121,27,.1);

    color:
        #855c1d;
}


.ra-open {

    min-height:
        35px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(241,100,30,.18);

    border-radius:
        9px;

    background:
        rgba(241,100,30,.055);

    color:
        #b94b18;

    font:
        inherit;

    font-size:
        10px;

    font-weight:
        750;

    cursor:
        pointer;
}


.ra-running {

    color:
        rgba(23,24,27,.36);

    font-size:
        10px;
}


.ra-review-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        25px 28px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f8f5f1
        );
}


.ra-review-header h2 {

    margin:
        5px 0 3px;

    font-size:
        34px;

    letter-spacing:
        -.035em;
}


.ra-review-header p {

    margin:
        0;

    color:
        rgba(23,24,27,.45);
}


.ra-context-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        9px;
}


.ra-context-grid > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        12px;

    background:
        #fff;
}


.ra-context-grid span {

    color:
        rgba(23,24,27,.4);

    font-size:
        9px;

    text-transform:
        uppercase;
}


.ra-context-grid strong {

    font-size:
        12px;
}


.ra-review-panel,
.ra-decision {

    padding:
        19px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        16px;

    background:
        #fff;
}


.ra-original-task {

    margin:
        8px 0 0;

    color:
        rgba(23,24,27,.68);

    font-size:
        12px;

    line-height:
        1.55;
}


.ra-panel-title {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;
}


.ra-panel-title h3 {

    margin:
        4px 0 0;
}


.ra-panel-title > strong {

    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        #f4f1ed;

    font-size:
        10px;
}


.ra-groups {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        14px;
}


.ra-groups > div {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px 11px;

    border-radius:
        9px;

    background:
        #f7f4f0;
}


.ra-groups strong {

    color:
        #f1641e;
}


.ra-groups span {

    color:
        rgba(23,24,27,.58);

    font-size:
        10px;
}


.ra-items {

    margin-top:
        12px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.06);

    border-radius:
        11px;
}


.ra-item {

    display:
        grid;

    grid-template-columns:
        28px 1fr;

    gap:
        8px;

    padding:
        9px 11px;

    border-bottom:
        1px solid
        rgba(23,24,27,.05);
}


.ra-item:last-child {

    border-bottom:
        0;
}


.ra-item > span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        23px;

    height:
        23px;

    border-radius:
        6px;

    background:
        #f2efeb;

    font-size:
        9px;
}


.ra-item strong {

    display:
        block;

    font-size:
        12px;

    font-weight:
        570;

    line-height:
        1.45;
}


.ra-item small {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(23,24,27,.38);

    font-size:
        9px;
}


.ra-full-report summary {

    cursor:
        pointer;

    color:
        #bc4b17;

    font-size:
        11px;

    font-weight:
        750;
}


.ra-full-report > div {

    margin-top:
        13px;

    padding:
        14px;

    border-radius:
        10px;

    background:
        #f8f6f3;

    white-space:
        pre-wrap;

    color:
        rgba(23,24,27,.65);

    font-size:
        11px;

    line-height:
        1.55;
}


.ra-decision {

    border-color:
        rgba(241,100,30,.18);

    background:
        rgba(241,100,30,.03);
}


.ra-decision h3 {

    margin:
        5px 0 12px;
}


.ra-decision textarea {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        12px 13px;

    border:
        1px solid
        rgba(23,24,27,.10);

    border-radius:
        11px;

    background:
        #fff;

    font:
        inherit;

    font-size:
        12px;

    resize:
        vertical;

    outline:
        none;
}


.ra-decision-buttons {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        9px;

    margin-top:
        12px;
}


.ra-muted {

    color:
        rgba(23,24,27,.45);

    font-size:
        11px;

    line-height:
        1.5;
}


@media (
    max-width: 760px
) {

    .ra-context-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .ra-review-header,
    .ra-research-row {

        align-items:
            flex-start;

        flex-direction:
            column;
    }
}



/* =====================================================
   FRAME AI - COMPLETE UI POLISH V1
   ===================================================== */

:root {
    --frame-orange:
        #f1641e;

    --frame-ink:
        #17181b;

    --frame-muted:
        #77736f;

    --frame-line:
        rgba(23,24,27,.09);

    --frame-soft-line:
        rgba(23,24,27,.055);

    --frame-paper:
        #ffffff;

    --frame-sand:
        #f8f6f2;

    --frame-soft:
        #f4f1ed;

    --frame-focus:
        rgba(241,100,30,.16);

    --frame-shadow:
        0 12px 38px
        rgba(23,24,27,.055);
}


/* -----------------------------------------------------
   GENERIC FORM TYPOGRAPHY
   ----------------------------------------------------- */

input,
textarea,
select,
button {
    font-family:
        inherit;
}


.frame-input,
.frame-textarea,
.wizard-form input[type="text"],
.wizard-form input[type="number"],
.mvp-form input:not([type="file"]),
.mvp-form textarea,
.keyword-filter-grid input,
.archive-search input {

    width:
        100%;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--frame-line);

    border-radius:
        12px;

    background:
        #fff;

    color:
        var(--frame-ink);

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.45;

    outline:
        none;

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


.frame-input,
.wizard-form input[type="text"],
.wizard-form input[type="number"],
.mvp-form input:not([type="file"]),
.keyword-filter-grid input,
.archive-search input {

    min-height:
        47px;

    padding:
        0 14px;
}


.frame-textarea,
.mvp-form textarea,
.wizard-form textarea {

    min-height:
        130px;

    padding:
        13px 14px;

    resize:
        vertical;
}


#ra-task {

    min-height:
        190px;

    padding:
        16px 17px;

    font-size:
        14px;

    line-height:
        1.6;

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fdfcfb
        );
}


#ra-task::placeholder {

    color:
        rgba(23,24,27,.35);

    font-weight:
        450;

    line-height:
        1.55;
}


.frame-input:hover,
.frame-textarea:hover,
.wizard-form input:hover,
.mvp-form input:hover,
.mvp-form textarea:hover,
.keyword-filter-grid input:hover,
.archive-search input:hover {

    border-color:
        rgba(23,24,27,.16);
}


.frame-input:focus,
.frame-textarea:focus,
.wizard-form input:focus,
.mvp-form input:focus,
.mvp-form textarea:focus,
.keyword-filter-grid input:focus,
.archive-search input:focus {

    border-color:
        rgba(241,100,30,.58);

    box-shadow:
        0 0 0 4px
        var(--frame-focus);

    background:
        #fff;
}


.frame-input::placeholder,
.frame-textarea::placeholder,
input::placeholder,
textarea::placeholder {

    color:
        rgba(23,24,27,.32);
}


/* -----------------------------------------------------
   CUSTOM SELECT
   ----------------------------------------------------- */

.frame-select-shell {

    position:
        relative;

    width:
        100%;

    min-width:
        0;
}


.frame-native-select {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;

    overflow:
        hidden !important;
}


.frame-select-control {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    width:
        100%;

    min-height:
        47px;

    padding:
        0 13px 0 14px;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--frame-line);

    border-radius:
        12px;

    background:
        #fff;

    color:
        var(--frame-ink);

    text-align:
        left;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        550;

    line-height:
        1.25;

    cursor:
        pointer;

    outline:
        none;

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


.frame-select-control:hover {

    border-color:
        rgba(23,24,27,.17);

    background:
        #fdfcfa;
}


.frame-select-shell.open
.frame-select-control {

    border-color:
        rgba(241,100,30,.58);

    box-shadow:
        0 0 0 4px
        var(--frame-focus);

    background:
        #fff;
}


.frame-select-label {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.frame-select-chevron {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        24px;

    height:
        24px;

    color:
        rgba(23,24,27,.48);

    font-size:
        17px;

    font-weight:
        700;

    transition:
        transform .16s ease;
}


.frame-select-shell.open
.frame-select-chevron {

    transform:
        rotate(180deg);
}


.frame-select-menu {

    display:
        none;

    position:
        absolute;

    z-index:
        9999;

    left:
        0;

    right:
        0;

    top:
        calc(100% + 7px);

    max-height:
        285px;

    padding:
        6px;

    overflow-y:
        auto;

    border:
        1px solid
        rgba(23,24,27,.09);

    border-radius:
        13px;

    background:
        rgba(255,255,255,.985);

    box-shadow:
        0 18px 48px
        rgba(23,24,27,.13);

    backdrop-filter:
        blur(14px);
}


.frame-select-shell.open
.frame-select-menu {

    display:
        block;
}


.frame-select-option {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    width:
        100%;

    min-height:
        38px;

    padding:
        8px 10px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #3b3a38;

    text-align:
        left;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        520;

    line-height:
        1.35;

    cursor:
        pointer;
}


.frame-select-option:hover {

    background:
        #f6f2ee;

    color:
        #17181b;
}


.frame-select-option.selected {

    background:
        rgba(241,100,30,.075);

    color:
        #a84113;

    font-weight:
        680;
}


.frame-select-option b {

    color:
        var(--frame-orange);

    font-size:
        12px;
}


.frame-select-option:disabled {

    opacity:
        .38;

    cursor:
        default;
}


.frame-select-shell.disabled
.frame-select-control {

    background:
        #f3f1ee;

    color:
        rgba(23,24,27,.42);

    cursor:
        default;
}


/* -----------------------------------------------------
   FILE INPUTS
   ----------------------------------------------------- */

.frame-file-input {

    display:
        block;

    width:
        100%;

    min-height:
        54px;

    box-sizing:
        border-box;

    padding:
        7px;

    border:
        1px dashed
        rgba(23,24,27,.16);

    border-radius:
        13px;

    background:
        #fbfaf8;

    color:
        rgba(23,24,27,.55);

    font-family:
        inherit;

    font-size:
        11px;

    cursor:
        pointer;

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


.frame-file-input:hover {

    border-color:
        rgba(241,100,30,.5);

    background:
        rgba(241,100,30,.025);
}


.frame-file-input.has-files {

    border-style:
        solid;

    border-color:
        rgba(241,100,30,.28);

    background:
        rgba(241,100,30,.035);
}


.frame-file-input::file-selector-button {

    height:
        38px;

    margin-right:
        11px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(241,100,30,.18);

    border-radius:
        9px;

    background:
        #fff;

    color:
        #b94b18;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        720;

    cursor:
        pointer;

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


.frame-file-input::file-selector-button:hover {

    background:
        rgba(241,100,30,.07);

    border-color:
        rgba(241,100,30,.34);
}


.frame-file-info {

    margin-top:
        6px;

    color:
        rgba(23,24,27,.40);

    font-size:
        9px;

    line-height:
        1.35;
}


/* -----------------------------------------------------
   PANELS / CARDS
   ----------------------------------------------------- */

.mvp-panel,
.wizard-panel,
.ra-review-panel,
.ra-decision {

    border-color:
        var(--frame-soft-line);

    box-shadow:
        var(--frame-shadow);
}


.mvp-panel {

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fdfcfb
        );
}


.field label {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin-bottom:
        7px;

    color:
        rgba(23,24,27,.76);

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .025em;
}


.field label small,
.field small {

    color:
        rgba(23,24,27,.34);

    font-weight:
        500;
}


/* -----------------------------------------------------
   BUTTONS
   ----------------------------------------------------- */

.mvp-primary,
.wizard-submit {

    border:
        1px solid
        #e95d19;

    border-radius:
        10px;

    box-shadow:
        0 5px 14px
        rgba(241,100,30,.13);

    font-family:
        inherit;

    font-weight:
        720;

    transition:
        transform .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}


.mvp-primary:hover,
.wizard-submit:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(241,100,30,.18);
}


.mvp-secondary,
.back-button,
.ra-open {

    font-family:
        inherit;

    font-weight:
        680;
}


/* -----------------------------------------------------
   RESEARCH CENTER
   ----------------------------------------------------- */

.ra-page
.mvp-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;
}


.ra-hard-gate {

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(241,100,30,.065),
            rgba(241,100,30,.025)
        );
}


.ra-research-row {

    border-color:
        var(--frame-soft-line);

    box-shadow:
        0 5px 18px
        rgba(23,24,27,.025);

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


.ra-research-row:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(241,100,30,.12);

    box-shadow:
        0 9px 24px
        rgba(23,24,27,.045);
}


/* -----------------------------------------------------
   KEYWORD DATABASE
   ----------------------------------------------------- */

#keyword-import-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;
}


#keyword-file {

    margin-top:
        3px;
}


.keyword-filter-grid {

    gap:
        9px;
}


.keyword-table {

    overflow:
        hidden;

    border:
        1px solid
        var(--frame-soft-line);

    border-radius:
        13px;

    background:
        #fff;
}


.keyword-head {

    background:
        #f7f4f0;

    color:
        rgba(23,24,27,.52);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .045em;

    text-transform:
        uppercase;
}


.keyword-row {

    transition:
        background .13s ease;
}


.keyword-row:hover {

    background:
        rgba(241,100,30,.026);
}


.keyword-name {

    font-weight:
        620;
}


/* -----------------------------------------------------
   MOCKUP STUDIO
   ----------------------------------------------------- */

#mockup-scene {

    min-height:
        125px;
}


#mockup-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;
}


.mockup-summary {

    border-radius:
        11px;

    background:
        #f8f6f2;
}


/* -----------------------------------------------------
   ARCHIVE
   ----------------------------------------------------- */

.archive-filter-grid {

    gap:
        9px;
}


.archive-filter-grid
.frame-select-shell,
.keyword-filter-grid
.frame-select-shell {

    min-width:
        0;
}


/* -----------------------------------------------------
   PROJECT WIZARD
   ----------------------------------------------------- */

.wizard-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;
}


.wizard-panel {

    background:
        linear-gradient(
            180deg,
            #fff,
            #fdfcfb
        );
}


.reference-drop {

    border-radius:
        15px;
}


/* -----------------------------------------------------
   FRIENDLY ERROR
   ----------------------------------------------------- */

.frame-friendly-error {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    max-width:
        680px;

    padding:
        20px;

    border:
        1px solid
        rgba(241,100,30,.14);

    border-radius:
        15px;

    background:
        #fff;

    box-shadow:
        var(--frame-shadow);
}


.frame-friendly-error-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        32px;

    height:
        32px;

    border-radius:
        9px;

    background:
        rgba(241,100,30,.09);

    color:
        #c34f18;

    font-weight:
        850;
}


.frame-friendly-error strong {

    display:
        block;

    margin-bottom:
        5px;
}


.frame-friendly-error p {

    margin:
        0 0 13px;

    color:
        rgba(23,24,27,.5);

    font-size:
        11px;
}


/* -----------------------------------------------------
   SCROLLBAR DER CUSTOM DROPDOWNS
   ----------------------------------------------------- */

.frame-select-menu::-webkit-scrollbar {

    width:
        7px;
}


.frame-select-menu::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        rgba(23,24,27,.15);
}


.frame-select-menu::-webkit-scrollbar-track {

    background:
        transparent;
}


/* -----------------------------------------------------
   MOBILE
   ----------------------------------------------------- */

@media (
    max-width: 760px
) {

    .frame-select-menu {

        max-height:
            230px;
    }


    .frame-select-control,
    .frame-input {

        min-height:
            45px;
    }


    #ra-task {

        min-height:
            160px;
    }


    .frame-friendly-error {

        flex-direction:
            column;
    }
}



/* =====================================================
   FRAME EXISTING PROJECT PICKER V1
   ===================================================== */

.frame-project-picker {

    padding:
        14px;

    border:
        1px solid
        rgba(241,100,30,.12);

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            rgba(241,100,30,.045),
            rgba(255,255,255,.7)
        );
}


.frame-project-picker > label {

    color:
        #a94417;
}


.frame-project-picker-info {

    margin-top:
        9px;
}


.frame-existing-project-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        10px 12px;

    border-radius:
        10px;

    background:
        #fff;

    border:
        1px solid
        rgba(23,24,27,.06);
}


.frame-existing-project-card > div:first-child {

    min-width:
        0;
}


.frame-existing-project-card span {

    display:
        block;

    color:
        rgba(23,24,27,.38);

    font-size:
        9px;
}


.frame-existing-project-card strong {

    display:
        block;

    margin-top:
        2px;

    overflow:
        hidden;

    color:
        #17181b;

    font-size:
        11px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.frame-existing-project-meta {

    display:
        flex;

    flex:
        0 0 auto;

    gap:
        5px;
}


.frame-existing-project-meta span {

    padding:
        5px 7px;

    border-radius:
        999px;

    background:
        #f4f1ed;

    color:
        rgba(23,24,27,.58);

    font-size:
        8px;

    font-weight:
        700;
}


.frame-hidden-field {

    display:
        none !important;
}


.frame-project-picker-error {

    color:
        #a13e28;

    font-size:
        10px;
}


.frame-existing-success {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        7px;
}


.frame-open-existing-project {

    margin-top:
        5px;
}


@media (
    max-width: 700px
) {

    .frame-existing-project-card {

        align-items:
            flex-start;

        flex-direction:
            column;
    }
}



/* =====================================================
   FRAME DESIGN CENTER V1
   ===================================================== */

.frame-design-page {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


.frame-design-intro {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        24px 26px;

    border:
        1px solid
        rgba(23,24,27,.06);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f8f5f1
        );

    box-shadow:
        var(--frame-shadow);
}


.frame-design-intro h2 {

    margin:
        6px 0 8px;

    max-width:
        700px;

    font-size:
        26px;

    line-height:
        1.14;
}


.frame-design-intro p {

    margin:
        0;

    max-width:
        680px;

    color:
        rgba(23,24,27,.52);

    font-size:
        12px;

    line-height:
        1.6;
}


.frame-design-gate {

    flex:
        0 0 225px;

    padding:
        12px 14px;

    border-radius:
        12px;

    background:
        rgba(241,100,30,.07);

    color:
        #a94417;
}


.frame-design-gate strong,
.frame-design-gate span {

    display:
        block;
}


.frame-design-gate strong {

    margin-bottom:
        4px;

    font-size:
        10px;
}


.frame-design-gate span {

    color:
        rgba(23,24,27,.50);

    font-size:
        9px;

    line-height:
        1.45;
}


.frame-design-layout {

    display:
        grid;

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

    gap:
        16px;

    align-items:
        start;
}


.frame-design-form-panel {

    padding:
        21px;
}


.frame-design-summary {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(23,24,27,.06);

    border-radius:
        12px;

    background:
        #f8f6f2;
}


.frame-design-summary-empty {

    color:
        rgba(23,24,27,.38);

    font-size:
        10px;
}


.frame-design-summary > div > span {

    display:
        block;

    color:
        rgba(23,24,27,.38);

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.frame-design-summary > div > strong {

    display:
        block;

    margin-top:
        2px;

    font-size:
        12px;
}


.frame-design-summary-stats {

    display:
        flex;

    gap:
        6px;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;
}


.frame-design-summary-stats span {

    padding:
        6px 8px;

    border-radius:
        8px;

    background:
        #fff;

    color:
        rgba(23,24,27,.56);

    font-size:
        9px;
}


.frame-design-summary-stats b {

    color:
        #17181b;
}


.frame-design-modes {

    display:
        grid;

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

    gap:
        8px;
}


.frame-design-mode {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    min-height:
        88px;

    padding:
        12px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(23,24,27,.08);

    border-radius:
        12px;

    background:
        #fff;

    cursor:
        pointer;

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


.frame-design-mode:hover {

    border-color:
        rgba(241,100,30,.25);
}


.frame-design-mode.selected {

    border-color:
        rgba(241,100,30,.44);

    background:
        rgba(241,100,30,.045);

    box-shadow:
        0 0 0 3px
        rgba(241,100,30,.07);
}


.frame-design-mode input {

    margin-top:
        2px;

    accent-color:
        #f1641e;
}


.frame-design-mode strong {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        10px;
}


.frame-design-mode small {

    display:
        block;

    color:
        rgba(23,24,27,.45);

    font-size:
        9px;

    line-height:
        1.45;
}


#frame-design-instruction {

    min-height:
        155px;
}


.frame-design-two-columns {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}


.frame-design-reference-area {

    padding:
        13px;

    border:
        1px dashed
        rgba(241,100,30,.22);

    border-radius:
        13px;

    background:
        rgba(241,100,30,.025);
}


.frame-design-reference-area[hidden] {

    display:
        none !important;
}


.frame-design-help {

    position:
        sticky;

    top:
        18px;

    padding:
        18px;
}


.frame-design-help h3 {

    margin:
        7px 0 13px;

    font-size:
        16px;

    line-height:
        1.25;
}


.frame-design-example {

    margin-top:
        8px;

    padding:
        11px 12px;

    border-radius:
        10px;

    background:
        #f8f6f2;

    color:
        rgba(23,24,27,.62);

    font-size:
        10px;

    line-height:
        1.5;
}


.frame-design-running {

    margin-top:
        10px;
}


.frame-gallery-reference {

    overflow:
        hidden;

    border:
        1px solid
        rgba(241,100,30,.18);

    border-radius:
        12px;

    background:
        #fff;
}


.frame-gallery-reference-image {

    position:
        relative;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        #f4f1ed;
}


.frame-gallery-reference-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


.frame-gallery-reference-image span {

    position:
        absolute;

    top:
        8px;

    left:
        8px;

    padding:
        4px 6px;

    border-radius:
        6px;

    background:
        rgba(23,24,27,.82);

    color:
        #fff;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .07em;
}


.frame-gallery-reference-name {

    padding:
        8px 9px;

    overflow:
        hidden;

    color:
        rgba(23,24,27,.62);

    font-size:
        9px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


@media (
    max-width: 980px
) {

    .frame-design-layout {

        grid-template-columns:
            1fr;
    }


    .frame-design-help {

        position:
            static;
    }
}


@media (
    max-width: 720px
) {

    .frame-design-intro {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .frame-design-gate {

        flex:
            none;

        width:
            100%;

        box-sizing:
            border-box;
    }


    .frame-design-modes {

        grid-template-columns:
            1fr;
    }


    .frame-design-two-columns {

        grid-template-columns:
            1fr;
    }


    .frame-design-summary {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .frame-design-summary-stats {

        justify-content:
            flex-start;
    }
}



/* =====================================================
   FRAME PROJECT APPROVAL CENTER V1
   ===================================================== */

.frame-approval-center {

    margin:
        18px 0 22px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        var(--frame-shadow);
}


.frame-approval-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px 22px;

    border-bottom:
        1px solid
        rgba(23,24,27,.055);

    background:
        linear-gradient(
            135deg,
            #fff,
            #fbf8f4
        );
}


.frame-approval-head h3 {

    margin:
        5px 0 5px;

    font-size:
        18px;
}


.frame-approval-head p {

    margin:
        0;

    color:
        rgba(23,24,27,.48);

    font-size:
        10px;

    line-height:
        1.5;
}


.frame-approval-overview {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap:
        1px;

    background:
        rgba(23,24,27,.055);
}


.frame-approval-stat {

    min-width:
        0;

    padding:
        14px 16px;

    background:
        #fff;
}


.frame-approval-stat.approved {

    background:
        rgba(71,143,92,.045);
}


.frame-approval-stat span,
.frame-approval-stat small {

    display:
        block;
}


.frame-approval-stat span {

    color:
        rgba(23,24,27,.42);

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.frame-approval-stat strong {

    display:
        block;

    margin:
        5px 0 3px;

    color:
        #17181b;

    font-size:
        21px;

    line-height:
        1;
}


.frame-approval-stat small {

    overflow:
        hidden;

    color:
        rgba(23,24,27,.42);

    font-size:
        8px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.frame-approval-tabs {

    display:
        flex;

    gap:
        5px;

    padding:
        12px 14px;

    border-top:
        1px solid
        rgba(23,24,27,.04);

    border-bottom:
        1px solid
        rgba(23,24,27,.055);

    background:
        #faf9f7;
}


.frame-approval-tab {

    min-height:
        34px;

    padding:
        0 12px;

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    background:
        transparent;

    color:
        rgba(23,24,27,.54);

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        750;

    cursor:
        pointer;
}


.frame-approval-tab:hover {

    background:
        #fff;
}


.frame-approval-tab.active {

    border-color:
        rgba(241,100,30,.16);

    background:
        #fff;

    color:
        #c85019;

    box-shadow:
        0 2px 8px
        rgba(23,24,27,.04);
}


.frame-approval-body {

    padding:
        16px;
}


.frame-approval-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        13px;
}


.frame-approval-toolbar p {

    margin:
        4px 0 0;

    color:
        rgba(23,24,27,.46);

    font-size:
        9px;
}


.frame-approval-searches {

    display:
        grid;

    grid-template-columns:
        minmax(220px,1fr)
        160px;

    gap:
        8px;

    flex:
        1;
}


.frame-approval-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.frame-content-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.frame-content-approval-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        12px 13px;

    border:
        1px solid
        rgba(23,24,27,.065);

    border-radius:
        12px;

    background:
        #fff;

    cursor:
        pointer;

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


.frame-content-approval-card:hover {

    border-color:
        rgba(241,100,30,.20);
}


.frame-content-approval-card.selected {

    border-color:
        rgba(241,100,30,.42);

    background:
        rgba(241,100,30,.035);

    box-shadow:
        0 0 0 3px
        rgba(241,100,30,.055);
}


.frame-content-approval-card.status-approved {

    border-left:
        3px solid
        rgba(70,145,91,.60);
}


.frame-content-approval-card.status-rejected {

    border-left:
        3px solid
        rgba(174,66,54,.52);
}


.frame-content-approval-card > input,
.frame-topic-approval-card > input,
.frame-image-approval-card > input {

    flex:
        0 0 auto;

    width:
        17px;

    height:
        17px;

    margin:
        2px 0 0;

    accent-color:
        #f1641e;
}


.frame-content-approval-main {

    min-width:
        0;

    flex:
        1;
}


.frame-content-approval-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        6px;
}


.frame-approval-type {

    color:
        rgba(23,24,27,.38);

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.frame-approval-status {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        21px;

    padding:
        0 7px;

    border-radius:
        999px;

    background:
        #f1efec;

    color:
        rgba(23,24,27,.55);

    font-size:
        7px;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}


.frame-approval-status.approved {

    background:
        rgba(68,145,91,.10);

    color:
        #39774a;
}


.frame-approval-status.rejected {

    background:
        rgba(176,63,49,.09);

    color:
        #9b4135;
}


.frame-approval-status.pending {

    background:
        rgba(241,100,30,.08);

    color:
        #aa4d21;
}


.frame-content-text {

    color:
        #17181b;

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.5;
}


.frame-content-meta {

    display:
        flex;

    gap:
        12px;

    margin-top:
        7px;

    color:
        rgba(23,24,27,.37);

    font-size:
        8px;
}


.frame-topic-approval-grid {

    display:
        grid;

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

    gap:
        8px;
}


.frame-topic-approval-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    min-height:
        112px;

    padding:
        12px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        12px;

    background:
        #fff;

    cursor:
        pointer;
}


.frame-topic-approval-card.selected {

    border-color:
        rgba(241,100,30,.42);

    background:
        rgba(241,100,30,.035);

    box-shadow:
        0 0 0 3px
        rgba(241,100,30,.055);
}


.frame-topic-card-head {

    display:
        flex;

    justify-content:
        flex-end;

    margin-bottom:
        8px;
}


.frame-topic-approval-card strong {

    display:
        block;

    font-size:
        11px;

    line-height:
        1.35;
}


.frame-topic-counts {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        10px;
}


.frame-topic-counts span {

    padding:
        4px 6px;

    border-radius:
        6px;

    background:
        #f6f4f1;

    color:
        rgba(23,24,27,.48);

    font-size:
        8px;
}


.frame-batch-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.frame-batch-card {

    display:
        grid;

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

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        14px;

    background:
        #fff;
}


.frame-batch-preview {

    display:
        grid;

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

    grid-template-rows:
        repeat(2,1fr);

    min-height:
        170px;

    gap:
        1px;

    background:
        #e8e4df;
}


.frame-batch-preview img {

    width:
        100%;

    height:
        100%;

    min-height:
        84px;

    object-fit:
        cover;

    display:
        block;
}


.frame-batch-no-preview {

    grid-column:
        1 / -1;

    grid-row:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(23,24,27,.35);

    font-size:
        9px;
}


.frame-batch-main {

    padding:
        15px;
}


.frame-batch-title-row {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;
}


.frame-batch-title-row span {

    display:
        block;

    color:
        rgba(23,24,27,.36);

    font-size:
        7px;

    font-weight:
        850;

    letter-spacing:
        .06em;
}


.frame-batch-title-row strong {

    display:
        block;

    margin-top:
        4px;

    font-size:
        11px;
}


.frame-batch-mode {

    padding:
        5px 7px;

    border-radius:
        7px;

    background:
        #f6f3ef;
}


.frame-batch-stats {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin:
        13px 0;
}


.frame-batch-stats span {

    padding:
        6px 8px;

    border-radius:
        8px;

    background:
        #f7f5f2;

    color:
        rgba(23,24,27,.48);

    font-size:
        8px;
}


.frame-batch-stats b {

    color:
        #17181b;
}


.frame-batch-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.frame-batch-images-slot {

    margin-top:
        14px;
}


.frame-image-selection-toolbar {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-bottom:
        10px;

    padding-top:
        12px;

    border-top:
        1px solid
        rgba(23,24,27,.06);
}


.frame-image-approval-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        8px;
}


.frame-image-approval-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.08);

    border-radius:
        11px;

    background:
        #fff;

    cursor:
        pointer;
}


.frame-image-approval-card.selected {

    border-color:
        rgba(241,100,30,.55);

    box-shadow:
        0 0 0 3px
        rgba(241,100,30,.08);
}


.frame-image-approval-card > input {

    position:
        absolute;

    z-index:
        4;

    top:
        8px;

    left:
        8px;

    margin:
        0;
}


.frame-image-approval-preview {

    position:
        relative;

    aspect-ratio:
        1 / 1;

    background:
        #f4f1ed;
}


.frame-image-approval-preview img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


.frame-image-approval-preview
.frame-approval-status {

    position:
        absolute;

    z-index:
        3;

    top:
        7px;

    right:
        7px;

    backdrop-filter:
        blur(5px);
}


.frame-image-approval-info {

    padding:
        8px 9px;
}


.frame-image-approval-info strong,
.frame-image-approval-info span {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.frame-image-approval-info strong {

    font-size:
        9px;
}


.frame-image-approval-info span {

    margin-top:
        3px;

    color:
        rgba(23,24,27,.4);

    font-size:
        7px;
}


.frame-approval-empty {

    padding:
        28px;

    border:
        1px dashed
        rgba(23,24,27,.11);

    border-radius:
        13px;

    color:
        rgba(23,24,27,.40);

    font-size:
        10px;

    text-align:
        center;

    background:
        #faf9f7;
}


@media (
    max-width: 1050px
) {

    .frame-approval-overview {

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


    .frame-topic-approval-grid {

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


    .frame-image-approval-grid {

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


@media (
    max-width: 760px
) {

    .frame-approval-head {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .frame-approval-overview {

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


    .frame-approval-tabs {

        overflow-x:
            auto;
    }


    .frame-approval-tab {

        flex:
            0 0 auto;
    }


    .frame-approval-toolbar {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .frame-approval-searches {

        grid-template-columns:
            1fr;
    }


    .frame-approval-actions {

        justify-content:
            flex-start;
    }


    .frame-topic-approval-grid {

        grid-template-columns:
            1fr;
    }


    .frame-batch-card {

        grid-template-columns:
            1fr;
    }


    .frame-batch-preview {

        min-height:
            210px;
    }


    .frame-image-approval-grid {

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



/* =====================================================
   FRAME LISTING CENTER V1
   ===================================================== */

.frame-hidden {
    display:
        none !important;
}


.frame-photo-project-action {

    margin-bottom:
        14px;
}


.frame-listing-shell {

    max-width:
        1240px;

    margin:
        0 auto;
}


.frame-listing-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        17px;

    padding:
        19px 21px;

    border:
        1px solid
        rgba(23,24,27,.065);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #fbf7f2
        );
}


.frame-listing-head h2 {

    margin:
        5px 0;
}


.frame-listing-head p {

    margin:
        0;

    color:
        rgba(23,24,27,.48);

    font-size:
        10px;
}


.frame-listing-type-grid {

    display:
        grid;

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

    gap:
        9px;

    margin-bottom:
        13px;
}


.frame-listing-type {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    min-height:
        100px;

    padding:
        14px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        13px;

    background:
        #fff;

    cursor:
        pointer;

    transition:
        .15s ease;
}


.frame-listing-type input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.frame-listing-type:hover,
.frame-listing-type.active {

    border-color:
        rgba(241,100,30,.35);

    background:
        rgba(241,100,30,.035);

    box-shadow:
        0 0 0 3px
        rgba(241,100,30,.05);
}


.frame-listing-type strong {

    font-size:
        11px;
}


.frame-listing-type span {

    color:
        rgba(23,24,27,.46);

    font-size:
        9px;

    line-height:
        1.45;
}


.frame-listing-panel {

    padding:
        16px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        15px;

    background:
        #fff;
}


.frame-listing-form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        10px;

    margin-bottom:
        13px;
}


.frame-listing-panel label {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    color:
        rgba(23,24,27,.7);

    font-size:
        9px;

    font-weight:
        700;
}


.frame-listing-assets {

    margin:
        14px 0;
}


.frame-listing-assets-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        9px;
}


.frame-listing-assets-head span {

    display:
        block;

    margin-top:
        2px;

    color:
        rgba(23,24,27,.42);

    font-size:
        8px;
}


.frame-listing-assets-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap:
        8px;
}


.frame-listing-asset {

    position:
        relative;

    overflow:
        hidden;

    display:
        block !important;

    border:
        1px solid
        rgba(23,24,27,.075);

    border-radius:
        11px;

    background:
        #fff;

    cursor:
        pointer;
}


.frame-listing-asset input {

    position:
        absolute;

    z-index:
        3;

    top:
        8px;

    left:
        8px;

    width:
        17px;

    height:
        17px;

    accent-color:
        #f1641e;
}


.frame-listing-asset img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    background:
        #f3f0ec;
}


.frame-listing-asset span {

    display:
        block;

    overflow:
        hidden;

    padding:
        8px;

    color:
        #17181b;

    font-size:
        8px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.frame-listing-asset:has(
    input:checked
) {

    border-color:
        rgba(241,100,30,.55);

    box-shadow:
        0 0 0 3px
        rgba(241,100,30,.07);
}


.frame-listing-question {

    margin:
        13px 0;

    padding:
        13px;

    border:
        1px solid
        rgba(241,100,30,.13);

    border-radius:
        12px;

    background:
        rgba(241,100,30,.035);
}


.frame-listing-question > p {

    margin:
        4px 0 10px;

    color:
        rgba(23,24,27,.45);

    font-size:
        9px;
}


.frame-listing-question > label {

    display:
        flex;

    align-items:
        center;

    flex-direction:
        row;

    gap:
        7px;

    margin:
        7px 0;

    cursor:
        pointer;
}


.frame-listing-question
input[type="radio"] {

    width:
        16px;

    height:
        16px;

    accent-color:
        #f1641e;
}


.frame-listing-success {

    margin-top:
        10px;

    padding:
        10px 12px;

    border-radius:
        10px;

    background:
        rgba(70,145,91,.08);

    color:
        #39774a;

    font-size:
        9px;
}


.frame-listing-empty {

    padding:
        30px;

    border:
        1px dashed
        rgba(23,24,27,.12);

    border-radius:
        13px;

    background:
        #faf9f7;

    color:
        rgba(23,24,27,.43);

    font-size:
        10px;

    text-align:
        center;
}


.frame-listing-review-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;
}


.frame-listing-review-card {

    display:
        grid;

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

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        15px;

    background:
        #fff;
}


.frame-listing-review-images {

    display:
        grid;

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

    align-content:
        start;

    gap:
        1px;

    padding:
        1px;

    background:
        #e8e4df;
}


.frame-listing-review-images img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;
}


.frame-listing-review-copy {

    padding:
        16px;
}


.frame-listing-review-top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;
}


.frame-listing-review-top > div > span {

    color:
        rgba(23,24,27,.37);

    font-size:
        8px;
}


.frame-listing-review-top h3 {

    margin:
        4px 0 0;

    font-size:
        15px;

    line-height:
        1.35;
}


.frame-listing-status-pill {

    flex:
        0 0 auto;

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        #f4f1ed;

    color:
        rgba(23,24,27,.55);

    font-size:
        7px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.frame-listing-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin:
        10px 0;
}


.frame-listing-meta span,
.frame-listing-tags span {

    padding:
        5px 7px;

    border-radius:
        7px;

    background:
        #f6f3ef;

    color:
        rgba(23,24,27,.5);

    font-size:
        8px;
}


.frame-listing-description {

    color:
        rgba(23,24,27,.65);

    font-size:
        10px;

    line-height:
        1.6;
}


.frame-listing-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        10px;
}


.frame-listing-review-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        14px;
}


.frame-listing-review-actions a {

    text-decoration:
        none;
}


@media (
    max-width: 1000px
) {

    .frame-listing-assets-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }


    .frame-listing-review-card {

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


@media (
    max-width: 760px
) {

    .frame-listing-type-grid,
    .frame-listing-form-grid {

        grid-template-columns:
            1fr;
    }


    .frame-listing-assets-grid {

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


    .frame-listing-review-card {

        grid-template-columns:
            1fr;
    }


    .frame-listing-review-images {

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



/* =====================================================
   FRAME DIGITAL EXPORT V11
   ===================================================== */


.frame-digital-checkbox-label {

    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center;

    gap:
        10px !important;

    min-height:
        50px;

    padding:
        10px 12px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(23,24,27,.08);

    border-radius:
        10px;

    background:
        #fff;

    cursor:
        pointer;
}


.frame-digital-checkbox-label input {

    width:
        18px;

    height:
        18px;

    flex:
        0 0 auto;

    accent-color:
        #f1641e;
}


.frame-digital-checkbox-label span {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.frame-digital-checkbox-label strong {

    color:
        #17181b;

    font-size:
        9px;
}


.frame-digital-checkbox-label small {

    color:
        rgba(23,24,27,.44);

    font-size:
        8px;

    font-weight:
        500;
}


.frame-digital-info {

    margin-top:
        8px;

    padding:
        8px 10px;

    border-radius:
        8px;

    background:
        rgba(70,145,91,.065);

    color:
        rgba(38,95,54,.8);

    font-size:
        8px;
}


.frame-listing-asset-progress-v11 {

    width:
        min(
            360px,
            100%
        );

    margin-right:
        auto;

    padding:
        8px 10px;

    border-radius:
        9px;

    background:
        rgba(241,100,30,.045);
}


.frame-listing-asset-progress-head-v11 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        6px;

    color:
        rgba(23,24,27,.57);

    font-size:
        8px;
}


.frame-listing-asset-progress-v11
.progress-track {

    height:
        5px;
}


.frame-listing-asset-progress-v11 small {

    display:
        block;

    margin-top:
        5px;

    color:
        rgba(23,24,27,.4);

    font-size:
        7px;
}


.frame-digital-error-v11 {

    margin-top:
        10px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(176,52,52,.11);

    border-radius:
        9px;

    background:
        rgba(176,52,52,.045);

    color:
        rgba(135,39,39,.82);

    font-size:
        8px;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}




/* =====================================================
   FRAME DIGITAL OUTPUT MODE V2
   ===================================================== */


.frame-digital-mode-grid-v2 {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        9px;

    margin:
        11px 0 13px;
}


.frame-digital-mode-card-v2 {

    position:
        relative;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    gap:
        5px !important;

    min-height:
        92px;

    padding:
        13px 14px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(23,24,27,.08);

    border-radius:
        12px;

    background:
        #fff;

    cursor:
        pointer;

    transition:
        .15s ease;
}


.frame-digital-mode-card-v2:hover,
.frame-digital-mode-card-v2.active {

    border-color:
        rgba(241,100,30,.42);

    background:
        rgba(241,100,30,.04);

    box-shadow:
        0 0 0 3px
        rgba(241,100,30,.055);
}


.frame-digital-mode-card-v2 input {

    position:
        absolute;

    top:
        12px;

    right:
        12px;

    width:
        17px;

    height:
        17px;

    accent-color:
        #f1641e;
}


.frame-digital-mode-card-v2 strong {

    padding-right:
        26px;

    color:
        #17181b;

    font-size:
        10px;
}


.frame-digital-mode-card-v2 span {

    padding-right:
        20px;

    color:
        rgba(23,24,27,.48);

    font-size:
        8px;

    line-height:
        1.5;
}


@media (
    max-width: 760px
) {

    .frame-digital-mode-grid-v2 {

        grid-template-columns:
            1fr;
    }
}




/* =====================================================
   FRAME PROJECT IMAGE BULK APPROVAL V1
   ===================================================== */


.frame-project-image-approval-v1 {

    margin-top:
        18px;

    padding:
        17px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        15px;

    background:
        #fff;
}


.frame-project-image-head-v1 {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        14px;
}


.frame-project-image-head-v1 h3 {

    margin:
        4px 0 4px;

    font-size:
        16px;
}


.frame-project-image-head-v1 p {

    margin:
        0;

    color:
        rgba(23,24,27,.46);

    font-size:
        9px;

    line-height:
        1.5;
}


.frame-project-image-stats-v1 {

    display:
        flex;

    gap:
        7px;

    flex-wrap:
        wrap;
}


.frame-project-image-stats-v1 span {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        68px;

    padding:
        8px 10px;

    border-radius:
        9px;

    background:
        #f7f4f0;

    color:
        rgba(23,24,27,.43);

    font-size:
        7px;
}


.frame-project-image-stats-v1 strong {

    color:
        #17181b;

    font-size:
        13px;
}


.frame-project-image-toolbar-v1 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        11px;

    padding:
        9px;

    border-radius:
        10px;

    background:
        #faf8f5;
}


.frame-project-image-toolbar-left-v1 {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;
}


#frame-project-images-selected-v1 {

    color:
        rgba(23,24,27,.45);

    font-size:
        8px;
}


.frame-project-image-grid-v1 {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap:
        9px;
}


.frame-project-image-card-v1 {

    position:
        relative;

    overflow:
        hidden;

    display:
        block !important;

    border:
        1px solid
        rgba(23,24,27,.075);

    border-radius:
        12px;

    background:
        #fff;

    cursor:
        pointer;

    transition:
        .15s ease;
}


.frame-project-image-card-v1:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(241,100,30,.28);

    box-shadow:
        0 6px 18px
        rgba(23,24,27,.055);
}


.frame-project-image-card-v1.approved {

    border-color:
        rgba(65,137,84,.27);

    background:
        rgba(65,137,84,.025);
}


.frame-project-image-card-v1.rejected {

    border-color:
        rgba(165,60,60,.18);
}


.frame-project-image-check-wrap-v1 {

    position:
        absolute;

    z-index:
        4;

    top:
        8px;

    left:
        8px;
}


.frame-project-image-check-v1 {

    width:
        20px;

    height:
        20px;

    margin:
        0;

    accent-color:
        #f1641e;

    cursor:
        pointer;
}


.frame-project-image-check-v1:disabled {

    accent-color:
        #438c59;

    cursor:
        default;
}


.frame-project-image-preview-v1 {

    overflow:
        hidden;

    aspect-ratio:
        1 / 1;

    background:
        #f2efeb;
}


.frame-project-image-preview-v1 img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.frame-project-image-info-v1 {

    padding:
        9px;
}


.frame-project-image-info-v1 > strong {

    display:
        block;

    overflow:
        hidden;

    color:
        #17181b;

    font-size:
        9px;

    line-height:
        1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.frame-project-image-meta-v1 {

    display:
        flex;

    gap:
        5px;

    margin-top:
        4px;

    color:
        rgba(23,24,27,.38);

    font-size:
        7px;
}


.frame-project-image-status-v1 {

    display:
        inline-flex;

    align-items:
        center;

    margin-top:
        7px;

    padding:
        4px 6px;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        800;
}


.frame-project-image-status-v1.pending {

    background:
        rgba(160,121,55,.08);

    color:
        #8d6b2e;
}


.frame-project-image-status-v1.approved {

    background:
        rgba(65,137,84,.09);

    color:
        #39784a;
}


.frame-project-image-status-v1.rejected {

    background:
        rgba(165,60,60,.07);

    color:
        #984747;
}


.frame-project-image-loading-v1,
.frame-project-image-empty-v1,
.frame-project-image-error-v1 {

    padding:
        25px;

    border:
        1px dashed
        rgba(23,24,27,.1);

    border-radius:
        10px;

    color:
        rgba(23,24,27,.44);

    font-size:
        9px;

    text-align:
        center;
}


.frame-project-image-error-v1 {

    color:
        #954747;
}


@media (
    max-width: 1100px
) {

    .frame-project-image-grid-v1 {

        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }
}


@media (
    max-width: 760px
) {

    .frame-project-image-head-v1,
    .frame-project-image-toolbar-v1 {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .frame-project-image-grid-v1 {

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




/* =====================================================
   FRAME DELETE + LATE VIDEO V2
   ===================================================== */


.frame-danger-button-v2 {

    border-color:
        rgba(164,48,48,.22) !important;

    color:
        #963d3d !important;

    background:
        rgba(164,48,48,.045) !important;
}


.frame-danger-button-v2:hover:not(:disabled) {

    border-color:
        rgba(164,48,48,.38) !important;

    background:
        rgba(164,48,48,.08) !important;
}


.frame-danger-button-v2:disabled {

    opacity:
        .42;

    cursor:
        default;
}


.frame-late-video-panel-v2 {

    margin-top:
        14px;

    padding:
        13px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        11px;

    background:
        #faf8f5;
}


.frame-late-video-head-v2 {

    margin-bottom:
        10px;
}


.frame-late-video-head-v2 strong,
.frame-late-video-waiting-v2 strong {

    display:
        block;

    color:
        #17181b;

    font-size:
        10px;
}


.frame-late-video-head-v2 span,
.frame-late-video-waiting-v2 span {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(23,24,27,.47);

    font-size:
        8px;

    line-height:
        1.5;
}


.frame-late-video-waiting-v2 {

    padding:
        4px;
}


.frame-late-video-preview-grid-v2 {

    display:
        flex;

    gap:
        7px;

    overflow-x:
        auto;

    margin-bottom:
        11px;

    padding-bottom:
        4px;
}


.frame-late-video-preview-v2 {

    flex:
        0 0 92px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        8px;

    background:
        #fff;
}


.frame-late-video-preview-v2 img {

    display:
        block;

    width:
        92px;

    height:
        92px;

    object-fit:
        cover;
}


.frame-late-video-preview-v2 span {

    display:
        block;

    overflow:
        hidden;

    padding:
        6px;

    color:
        rgba(23,24,27,.55);

    font-size:
        7px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}




/* =====================================================
   FRAME LISTING MOCKUP RESULTS V3
   ===================================================== */


.frame-listing-mockup-results-v3 {

    margin-top:
        14px;

    padding:
        13px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        12px;

    background:
        #fff;
}


.frame-listing-mockup-results-head-v3 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        10px;
}


.frame-listing-mockup-results-head-v3 strong {

    display:
        block;

    font-size:
        10px;
}


.frame-listing-mockup-results-head-v3 span {

    display:
        block;

    margin-top:
        2px;

    color:
        rgba(23,24,27,.42);

    font-size:
        8px;
}


.frame-listing-mockup-grid-v3 {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        8px;
}


.frame-listing-mockup-card-v3 {

    overflow:
        hidden;

    margin:
        0;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        10px;

    background:
        #faf8f5;
}


.frame-listing-mockup-card-v3 img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    background:
        #f1eeea;
}


.frame-listing-mockup-card-v3 figcaption {

    padding:
        7px;
}


.frame-listing-mockup-card-v3 strong {

    display:
        block;

    color:
        #17181b;

    font-size:
        8px;
}


.frame-listing-mockup-card-v3 span {

    display:
        block;

    overflow:
        hidden;

    margin-top:
        2px;

    color:
        rgba(23,24,27,.4);

    font-size:
        7px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


@media (
    max-width: 850px
) {

    .frame-listing-mockup-grid-v3 {

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




/* =====================================================
   FRAME LISTING PHOTO REVIEW V7
   ===================================================== */


.frame-listing-photo-review-v7 {

    margin-top:
        15px;
}


.frame-listing-photo-review-head-v7 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        11px;
}


.frame-listing-photo-review-head-v7 strong {

    display:
        block;

    font-size:
        11px;
}


.frame-listing-photo-review-head-v7 span {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(23,24,27,.48);

    font-size:
        8px;
}


.frame-listing-photo-toolbar-v7 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        12px;

    padding:
        8px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        10px;

    background:
        #faf8f5;
}


.frame-listing-photo-selection-tools-v7,
.frame-listing-photo-actions-v7 {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    flex-wrap:
        wrap;
}


.frame-listing-photo-selected-count-v7 {

    margin-left:
        3px;

    color:
        rgba(23,24,27,.45);

    font-size:
        8px;
}


.frame-danger-button-v7 {

    border-color:
        rgba(172,55,43,.24)
        !important;

    color:
        #a43a31
        !important;
}


.frame-danger-button-v7:not(:disabled):hover {

    background:
        rgba(172,55,43,.07)
        !important;
}


.frame-listing-photo-card-v7 {

    position:
        relative;
}


.frame-listing-photo-card-v7.is-approved {

    border-color:
        rgba(48,129,76,.28);

    box-shadow:
        0 0 0 1px
        rgba(48,129,76,.05);
}


.frame-listing-photo-check-wrap-v7 {

    position:
        absolute;

    z-index:
        4;

    top:
        8px;

    left:
        8px;

    display:
        grid;

    width:
        26px;

    height:
        26px;

    place-items:
        center;

    border-radius:
        8px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.13);

    cursor:
        pointer;
}


.frame-listing-photo-check-wrap-v7 input {

    width:
        15px;

    height:
        15px;

    margin:
        0;

    accent-color:
        #f1641e;

    cursor:
        pointer;
}


.frame-listing-photo-approved-v7 {

    position:
        absolute;

    z-index:
        4;

    top:
        8px;

    right:
        8px;

    padding:
        5px 7px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.94);

    color:
        #287045;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.11);

    font-size:
        7px;

    font-weight:
        800;
}


.frame-listing-photo-zoom-v7 {

    position:
        relative;

    display:
        block;

    width:
        100%;

    padding:
        0;

    overflow:
        hidden;

    border:
        0;

    background:
        #f1eeea;

    cursor:
        zoom-in;
}


.frame-listing-photo-zoom-v7 img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    transition:
        transform .18s ease;
}


.frame-listing-photo-zoom-v7:hover img {

    transform:
        scale(1.018);
}


.frame-listing-photo-zoom-icon-v7 {

    position:
        absolute;

    right:
        8px;

    bottom:
        8px;

    display:
        grid;

    width:
        27px;

    height:
        27px;

    place-items:
        center;

    border-radius:
        8px;

    background:
        rgba(255,255,255,.9);

    color:
        #17181b;

    font-size:
        12px;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.11);
}


.frame-lightbox-open-v7 {

    overflow:
        hidden;
}


.frame-listing-lightbox-v7 {

    position:
        fixed;

    z-index:
        100000;

    inset:
        0;

    display:
        grid;

    padding:
        28px;

    place-items:
        center;

    background:
        rgba(14,15,17,.88);

    backdrop-filter:
        blur(8px);
}


.frame-listing-lightbox-dialog-v7 {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    max-width:
        min(
            92vw,
            1100px
        );

    max-height:
        92vh;

    overflow:
        hidden;

    border-radius:
        14px;

    background:
        #17181b;

    box-shadow:
        0 24px 80px
        rgba(0,0,0,.42);
}


.frame-listing-lightbox-dialog-v7 img {

    display:
        block;

    max-width:
        92vw;

    max-height:
        calc(
            92vh - 42px
        );

    object-fit:
        contain;
}


.frame-listing-lightbox-close-v7 {

    position:
        absolute;

    z-index:
        3;

    top:
        10px;

    right:
        10px;

    display:
        grid;

    width:
        34px;

    height:
        34px;

    padding:
        0;

    place-items:
        center;

    border:
        0;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.94);

    color:
        #17181b;

    font-size:
        22px;

    line-height:
        1;

    cursor:
        pointer;
}


.frame-listing-lightbox-caption-v7 {

    padding:
        10px 14px;

    overflow:
        hidden;

    color:
        rgba(255,255,255,.72);

    font-size:
        9px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


@media (
    max-width: 800px
) {

    .frame-listing-photo-review-head-v7,
    .frame-listing-photo-toolbar-v7 {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .frame-listing-photo-actions-v7 {

        width:
            100%;
    }


    .frame-listing-lightbox-v7 {

        padding:
            12px;
    }
}




/* =====================================================
   FRAME CONTENT TOOLKIT V9
   ===================================================== */


.frame-project-content-toolkit-v9,
.frame-global-mockup-rules-v9 {

    margin:
        20px 0;

    padding:
        18px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        15px;

    background:
        #fff;

    box-shadow:
        0 8px 28px
        rgba(23,24,27,.035);
}


.frame-content-toolkit-head-v9,
.frame-global-rules-head-v9 {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        16px;
}


.frame-content-toolkit-head-v9 h3,
.frame-global-rules-head-v9 h3 {

    margin:
        3px 0 4px;
}


.frame-content-toolkit-head-v9 p,
.frame-global-rules-head-v9 p {

    margin:
        0;

    color:
        rgba(23,24,27,.52);

    font-size:
        10px;
}


.frame-content-toolkit-count-v9,
.frame-global-rules-badge-v9 {

    flex:
        0 0 auto;

    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        rgba(241,100,30,.08);

    color:
        #b94c18;

    font-size:
        8px;

    font-weight:
        800;
}


.frame-content-add-v9 {

    display:
        grid;

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

    gap:
        8px;

    margin-bottom:
        12px;
}


.frame-content-add-v9 input,
.frame-content-new-project-name-v9,
.frame-global-rules-text-v9 {

    width:
        100%;

    border:
        1px solid
        rgba(23,24,27,.11);

    border-radius:
        10px;

    outline:
        none;

    background:
        #fcfbfa;

    color:
        #17181b;

    font:
        inherit;
}


.frame-content-add-v9 input,
.frame-content-new-project-name-v9 {

    min-height:
        42px;

    padding:
        0 12px;
}


.frame-global-rules-text-v9 {

    min-height:
        250px;

    padding:
        13px;

    resize:
        vertical;

    line-height:
        1.55;
}


.frame-content-add-v9 input:focus,
.frame-content-new-project-name-v9:focus,
.frame-global-rules-text-v9:focus {

    border-color:
        rgba(241,100,30,.45);

    box-shadow:
        0 0 0 3px
        rgba(241,100,30,.06);
}


.frame-content-toolbar-v9 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        12px;
}


.frame-content-toolbar-left-v9 {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    flex-wrap:
        wrap;
}


.frame-content-selected-v9 {

    margin-left:
        4px;

    color:
        rgba(23,24,27,.43);

    font-size:
        8px;
}


.frame-content-grid-v9 {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        8px;
}


.frame-content-card-v9 {

    display:
        grid;

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

    gap:
        10px;

    padding:
        11px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        11px;

    background:
        #fcfbfa;

    cursor:
        pointer;
}


.frame-content-card-v9:hover {

    border-color:
        rgba(241,100,30,.2);

    background:
        #fff;
}


.frame-content-card-v9 input {

    margin-top:
        3px;

    accent-color:
        #f1641e;
}


.frame-content-card-v9 strong {

    display:
        block;

    font-size:
        10px;

    line-height:
        1.45;
}


.frame-content-card-meta-v9 {

    display:
        flex;

    gap:
        5px;

    flex-wrap:
        wrap;

    margin-top:
        7px;
}


.frame-content-card-meta-v9 span {

    padding:
        4px 6px;

    border-radius:
        999px;

    background:
        #f2efeb;

    color:
        rgba(23,24,27,.55);

    font-size:
        7px;
}


.frame-content-card-v9.status-approved {

    border-color:
        rgba(47,132,77,.2);

    background:
        rgba(47,132,77,.025);
}


.frame-content-subproject-v9 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-top:
        16px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(23,24,27,.07);
}


.frame-content-subproject-v9 > div:first-child {

    max-width:
        360px;
}


.frame-content-subproject-v9 strong {

    display:
        block;

    font-size:
        10px;
}


.frame-content-subproject-v9 span {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(23,24,27,.47);

    font-size:
        8px;

    line-height:
        1.4;
}


.frame-content-subproject-actions-v9 {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    flex:
        1;

    justify-content:
        flex-end;
}


.frame-content-new-project-name-v9 {

    max-width:
        240px;
}


.frame-content-empty-v9 {

    padding:
        18px;

    border-radius:
        10px;

    background:
        #f8f6f3;

    color:
        rgba(23,24,27,.45);

    font-size:
        9px;

    text-align:
        center;
}


.frame-global-mockup-rules-v9 {

    border-color:
        rgba(241,100,30,.13);

    background:
        linear-gradient(
            180deg,
            #fff,
            #fffaf7
        );
}


.frame-global-rules-footer-v9 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        10px;
}


.frame-global-rules-footer-v9 span {

    max-width:
        600px;

    color:
        rgba(23,24,27,.46);

    font-size:
        8px;

    line-height:
        1.45;
}


@media (
    max-width: 800px
) {

    .frame-content-grid-v9 {

        grid-template-columns:
            1fr;
    }


    .frame-content-toolkit-head-v9,
    .frame-global-rules-head-v9,
    .frame-content-toolbar-v9,
    .frame-content-subproject-v9,
    .frame-global-rules-footer-v9 {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .frame-content-add-v9 {

        grid-template-columns:
            1fr;
    }


    .frame-content-subproject-actions-v9 {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .frame-content-new-project-name-v9 {

        max-width:
            none;
    }
}




/* =====================================================
   FRAME MASTER DATA V10.1
   ===================================================== */


.frame-md-panel-v101 {

    margin-bottom:
        18px;
}


.frame-md-head-v101 {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        16px;
}


.frame-md-head-v101 h3 {

    margin:
        4px 0;
}


.frame-md-head-v101 p {

    margin:
        0;

    color:
        rgba(23,24,27,.5);

    font-size:
        9px;
}


.frame-md-head-v101 select {

    min-width:
        180px;
}


.frame-md-grid-v101 {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        12px;
}


.frame-md-grid-v101 label,
.frame-md-full-v101,
.frame-md-variants-v101 {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.frame-md-grid-v101 label > span,
.frame-md-full-v101 > span,
.frame-md-variants-v101 > span {

    font-size:
        8px;

    font-weight:
        800;
}


.frame-md-grid-v101 input,
.frame-md-grid-v101 textarea,
.frame-md-full-v101 textarea,
.frame-md-variants-v101 textarea,
.frame-md-product-form-v101 input,
.frame-md-product-form-v101 select {

    width:
        100%;

    border:
        1px solid
        rgba(23,24,27,.11);

    border-radius:
        10px;

    background:
        #fcfbfa;

    color:
        #17181b;

    font:
        inherit;

    outline:
        none;
}


.frame-md-grid-v101 input,
.frame-md-product-form-v101 input,
.frame-md-product-form-v101 select {

    min-height:
        42px;

    padding:
        0 11px;
}


.frame-md-grid-v101 textarea,
.frame-md-full-v101 textarea,
.frame-md-variants-v101 textarea {

    padding:
        11px;

    resize:
        vertical;

    line-height:
        1.45;
}


.frame-md-full-v101 {

    margin-top:
        12px;
}


.frame-md-product-form-v101 {

    display:
        grid;

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

    gap:
        9px;
}


.frame-md-product-form-v101 button {

    min-height:
        42px;
}


.frame-md-products-v101 {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;
}


.frame-md-product-card-v101 {

    padding:
        15px;

    border:
        1px solid
        rgba(23,24,27,.08);

    border-radius:
        13px;

    background:
        #fdfcfb;
}


.frame-md-product-title-v101 {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        14px;
}


.frame-md-product-title-v101 strong {

    display:
        block;

    font-size:
        12px;
}


.frame-md-product-title-v101 span {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(23,24,27,.48);

    font-size:
        8px;
}


.frame-md-product-key-v101 {

    white-space:
        nowrap;
}


.frame-md-market-box-v101 {

    margin:
        13px 0;

    padding:
        11px;

    border-radius:
        10px;

    background:
        rgba(241,100,30,.045);
}


.frame-md-market-box-v101 > strong {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        8px;
}


.frame-md-market-box-v101 > div {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;
}


.frame-md-market-box-v101 label {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    font-size:
        9px;
}


.frame-md-market-box-v101 input {

    accent-color:
        #f1641e;
}


.frame-md-variants-v101 small {

    color:
        rgba(23,24,27,.45);

    font-size:
        8px;
}


.frame-md-card-actions-v101 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        12px;
}


.frame-md-card-actions-v101 > span {

    color:
        rgba(23,24,27,.46);

    font-size:
        8px;
}


@media (
    max-width: 900px
) {

    .frame-md-grid-v101,
    .frame-md-product-form-v101 {

        grid-template-columns:
            1fr;
    }


    .frame-md-head-v101,
    .frame-md-product-title-v101,
    .frame-md-card-actions-v101 {

        align-items:
            stretch;

        flex-direction:
            column;
    }
}




/* =====================================================
   FRAME_MOCKUP_STUDIO_DESIGN_V5
   ===================================================== */


/* Gesamtkarte */

#mockup-form-shop-v4 {
    width: 100%;
    max-width: 1180px;

    margin:
        8px 0 34px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.08);

    border-radius:
        26px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 18px 55px
        rgba(23,24,27,.07);
}


/* Kopfbereich */

#mockup-form-shop-v4
.mockup-config-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        28px 30px;

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

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf7f3 100%
        );
}


.mockup-config-title {
    min-width: 0;
}


.mockup-config-kicker {
    margin-bottom:
        7px;

    color:
        var(--orange);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


.mockup-config-title h2 {
    margin:
        0;

    color:
        var(--ink);

    font-size:
        24px;

    font-weight:
        760;

    letter-spacing:
        -.04em;
}


.mockup-config-title p {
    max-width:
        650px;

    margin:
        7px 0 0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.55;
}


.mockup-live-pill {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        36px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(47,138,99,.18);

    border-radius:
        999px;

    background:
        rgba(47,138,99,.07);

    color:
        var(--green);

    font-size:
        12px;

    font-weight:
        700;
}


.mockup-live-pill:before {
    content:
        "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 4px
        rgba(47,138,99,.10);
}


/* Hauptgrid */

#mockup-form-shop-v4
.form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        18px;

    padding:
        28px 30px 30px;
}


/* Felder */

#mockup-form-shop-v4
.mockup-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    min-width:
        0;

    margin:
        0;

    color:
        #55514c;

    font-size:
        12px;

    font-weight:
        720;

    letter-spacing:
        .01em;
}


#mockup-form-shop-v4
.mockup-span-2 {

    grid-column:
        1 / -1;
}


/* Projekttitel besonders groß */

#mockup-form-shop-v4
.mockup-project-title {

    padding-bottom:
        4px;
}


#mockup-form-shop-v4
.mockup-project-title input {

    height:
        58px;

    font-size:
        16px;

    font-weight:
        650;
}


/* Shop + Produktionsart hervorheben */

#mockup-form-shop-v4
.mockup-core-field {

    padding:
        17px;

    border:
        1px solid
        rgba(23,24,27,.07);

    border-radius:
        16px;

    background:
        #faf8f5;
}


#mockup-form-shop-v4
.mockup-core-field:focus-within {

    border-color:
        var(--orange-line);

    background:
        #fff;
}


/* Inputs */

#mockup-form-shop-v4
input[type="text"],

#mockup-form-shop-v4
input[type="number"],

#mockup-form-shop-v4
textarea,

#mockup-form-shop-v4
select {

    width:
        100%;

    min-width:
        0;

    border:
        1px solid
        rgba(23,24,27,.12);

    border-radius:
        12px;

    background-color:
        #fff;

    color:
        var(--ink);

    outline:
        none;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        520;

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


#mockup-form-shop-v4
input[type="text"],

#mockup-form-shop-v4
input[type="number"],

#mockup-form-shop-v4
select {

    height:
        52px;

    padding:
        0 15px;
}


#mockup-form-shop-v4
textarea {

    min-height:
        118px;

    resize:
        vertical;

    padding:
        14px 15px;

    line-height:
        1.55;
}


/* Dropdown Pfeil */

#mockup-form-shop-v4
select {

    appearance:
        none;

    -webkit-appearance:
        none;

    padding-right:
        44px;

    cursor:
        pointer;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #858079 50%
        ),
        linear-gradient(
            135deg,
            #858079 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px)
        22px,

        calc(100% - 15px)
        22px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;
}


#mockup-form-shop-v4
select:hover:not(:disabled),

#mockup-form-shop-v4
input:hover,

#mockup-form-shop-v4
textarea:hover {

    border-color:
        rgba(23,24,27,.22);
}


#mockup-form-shop-v4
select:focus,

#mockup-form-shop-v4
input:focus,

#mockup-form-shop-v4
textarea:focus {

    border-color:
        var(--orange);

    box-shadow:
        0 0 0 4px
        var(--orange-soft);

    background-color:
        #fff;
}


#mockup-form-shop-v4
select:disabled {

    cursor:
        not-allowed;

    color:
        #aaa59e;

    background-color:
        #f4f1ed;

    opacity:
        .78;
}


/* POD Bereich */

#mockup-pod-v4 {

    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        17px;

    margin:
        4px 0 2px;

    padding:
        22px;

    border:
        1px solid
        var(--orange-line);

    border-radius:
        19px;

    background:
        linear-gradient(
            135deg,
            rgba(241,100,30,.055),
            rgba(255,255,255,.90)
        );
}


#mockup-pod-v4
.mockup-pod-head {

    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        3px;

    padding-bottom:
        15px;

    border-bottom:
        1px solid
        rgba(241,100,30,.13);
}


.mockup-pod-head-left strong {

    display:
        block;

    color:
        var(--ink);

    font-size:
        15px;

    font-weight:
        750;
}


.mockup-pod-head-left span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        500;
}


.mockup-printify-badge {

    flex:
        0 0 auto;

    padding:
        7px 10px;

    border-radius:
        8px;

    background:
        var(--orange);

    color:
        #fff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


/* Abschnittsüberschrift Briefing */

.mockup-section-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        6px;

    padding-top:
        22px;

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


.mockup-section-number {

    display:
        inline-grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

    flex:
        0 0 30px;

    border-radius:
        9px;

    background:
        var(--ink);

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        800;
}


.mockup-section-heading strong {

    display:
        block;

    font-size:
        14px;

    color:
        var(--ink);
}


.mockup-section-heading span {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        11px;
}


/* Datei Upload */

#mockup-form-shop-v4
input[type="file"] {

    width:
        100%;

    min-height:
        58px;

    padding:
        8px;

    border:
        1px dashed
        rgba(23,24,27,.18);

    border-radius:
        12px;

    background:
        #faf9f7;

    color:
        var(--muted);

    font-size:
        12px;
}


#mockup-form-shop-v4
input[type="file"]::file-selector-button {

    height:
        40px;

    margin-right:
        12px;

    padding:
        0 15px;

    border:
        0;

    border-radius:
        9px;

    background:
        var(--ink);

    color:
        #fff;

    font-weight:
        700;

    cursor:
        pointer;
}


/* Footer */

.mockup-form-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    min-height:
        82px;

    padding:
        18px 30px;

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

    background:
        #faf8f5;
}


#mockup-note-v4 {

    flex:
        1;

    min-width:
        0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.45;
}


#mockup-submit-v4 {

    flex:
        0 0 auto;

    min-width:
        220px;

    height:
        48px;

    padding:
        0 22px;

    border:
        0;

    border-radius:
        12px;

    background:
        var(--orange);

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        760;

    box-shadow:
        0 8px 20px
        rgba(241,100,30,.20);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease;
}


#mockup-submit-v4:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 28px
        rgba(241,100,30,.28);
}


#mockup-submit-v4:disabled {

    cursor:
        not-allowed;

    background:
        #d7d2cb;

    color:
        #918c85;

    box-shadow:
        none;

    opacity:
        1;
}


/* Responsive */

@media (
    max-width: 900px
) {

    #mockup-form-shop-v4
    .form-grid {

        grid-template-columns:
            1fr;
    }


    #mockup-form-shop-v4
    .mockup-span-2 {

        grid-column:
            auto;
    }


    #mockup-pod-v4 {

        grid-column:
            auto;

        grid-template-columns:
            1fr;
    }


    #mockup-pod-v4
    .mockup-pod-head {

        grid-column:
            auto;
    }
}


@media (
    max-width: 650px
) {

    #mockup-form-shop-v4
    .mockup-config-head {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            22px;
    }


    #mockup-form-shop-v4
    .form-grid {

        padding:
            22px;

        gap:
            15px;
    }


    #mockup-pod-v4 {

        padding:
            17px;
    }


    .mockup-form-footer {

        align-items:
            stretch;

        flex-direction:
            column;

        padding:
            18px 22px;
    }


    #mockup-submit-v4 {

        width:
            100%;

        min-width:
            0;
    }
}


/* =====================================================
   END FRAME_MOCKUP_STUDIO_DESIGN_V5
   ===================================================== */



/* =====================================================
   FRAME_VARIANT_SELECTION_STYLE_V6
   ===================================================== */

.mockup-variants-v6 {

    grid-column:
        1 / -1;

    margin-top:
        5px;

    padding:
        20px;

    border:
        1px solid
        rgba(23,24,27,.08);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.80);
}


.mockup-variant-head-v6 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        15px;

    margin-bottom:
        16px;

    border-bottom:
        1px solid
        var(--border);
}


.mockup-variant-head-v6 strong {

    display:
        block;

    color:
        var(--ink);

    font-size:
        14px;
}


.mockup-variant-head-v6 span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        11px;
}


.mockup-variant-live-v6 {

    padding:
        6px 9px;

    border-radius:
        7px;

    background:
        rgba(47,138,99,.09);

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .12em;
}


.mockup-variant-group-v6 {

    padding:
        16px 0;

    border-bottom:
        1px solid
        rgba(23,24,27,.06);
}


.mockup-variant-group-v6:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;
}


.mockup-variant-group-head-v6 {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        12px;
}


.mockup-variant-group-head-v6 strong {

    color:
        var(--ink);

    font-size:
        13px;
}


.mockup-variant-group-head-v6 span {

    display:
        block;

    max-width:
        650px;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.45;
}


.mockup-variant-actions-v6 {

    display:
        flex;

    gap:
        5px;
}


.mockup-variant-actions-v6 button {

    height:
        28px;

    padding:
        0 9px;

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

    border-radius:
        7px;

    background:
        #fff;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        700;
}


.mockup-variant-actions-v6 button:hover {

    color:
        var(--orange);

    border-color:
        var(--orange-line);

    background:
        var(--orange-soft);
}


.mockup-variant-values-v6 {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.mockup-variant-chip-v6 {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    margin:
        0;

    cursor:
        pointer;
}


.mockup-variant-chip-v6 input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.mockup-variant-chip-v6 span {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        37px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(23,24,27,.11);

    border-radius:
        9px;

    background:
        #fff;

    color:
        #5f5a54;

    font-size:
        11px;

    font-weight:
        650;

    transition:
        .15s ease;
}


.mockup-variant-chip-v6:hover span {

    border-color:
        var(--orange-line);

    background:
        #fffaf7;
}


.mockup-variant-chip-v6
input:checked + span {

    border-color:
        var(--orange);

    background:
        var(--orange);

    color:
        #fff;

    box-shadow:
        0 5px 14px
        rgba(241,100,30,.16);
}


@media (
    max-width: 650px
) {

    .mockup-variant-group-head-v6 {

        flex-direction:
            column;
    }
}


/* =====================================================
   END FRAME_VARIANT_SELECTION_STYLE_V6
   ===================================================== */



/* =====================================================
   FRAME_AVAILABILITY_DASHBOARD_STYLE_V7
   ===================================================== */

.availability-card-v7 {

    margin:
        0 0 30px;

    overflow:
        hidden;

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

    border-radius:
        20px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 10px 30px
        rgba(23,24,27,.045);
}


.availability-main-v7 {

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        18px;

    padding:
        22px 24px;
}


.availability-state-icon-v7 {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    font-size:
        21px;

    font-weight:
        850;

    background:
        #f1eee9;

    color:
        var(--muted);
}


.availability-card-v7.ok
.availability-state-icon-v7 {

    background:
        rgba(47,138,99,.10);

    color:
        var(--green);
}


.availability-card-v7.warning
.availability-state-icon-v7 {

    background:
        rgba(185,120,36,.12);

    color:
        var(--yellow);
}


.availability-card-v7.error
.availability-state-icon-v7 {

    background:
        rgba(184,66,53,.10);

    color:
        var(--red);
}


.availability-kicker-v7 {

    color:
        var(--orange);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .15em;

    margin-bottom:
        5px;
}


.availability-copy-v7 h3 {

    margin:
        0;

    color:
        var(--ink);

    font-size:
        17px;

    letter-spacing:
        -.025em;
}


.availability-copy-v7 p {

    margin:
        6px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;
}


.availability-actions-v7 {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        6px;
}


.availability-actions-v7 button {

    height:
        38px;

    padding:
        0 14px;

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

    border-radius:
        10px;

    background:
        #fff;

    color:
        var(--ink);

    font-size:
        11px;

    font-weight:
        750;
}


.availability-actions-v7 button:hover {

    border-color:
        var(--orange-line);

    color:
        var(--orange);

    background:
        var(--orange-soft);
}


.availability-actions-v7 button:disabled {

    cursor:
        wait;

    opacity:
        .55;
}


.availability-actions-v7 small {

    color:
        #aaa59e;

    font-size:
        9px;
}


.availability-issues-v7 {

    padding:
        0 24px 18px;
}


.availability-issue-v7 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        11px 13px;

    margin-top:
        7px;

    border-radius:
        10px;

    background:
        #faf8f5;
}


.availability-issue-v7 strong {

    display:
        block;

    color:
        var(--ink);

    font-size:
        12px;
}


.availability-issue-v7 span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        10px;
}


.availability-issue-v7 b {

    flex:
        0 0 auto;

    font-size:
        10px;
}


.availability-issue-v7.warning b {

    color:
        var(--yellow);
}


.availability-issue-v7.error b {

    color:
        var(--red);
}


.availability-more-v7 {

    margin:
        10px 3px 0;

    color:
        var(--muted);

    font-size:
        10px;
}


.availability-footer-v7 {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        12px 24px;

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

    background:
        #faf8f5;

    color:
        var(--muted);

    font-size:
        10px;
}


.availability-footer-v7 strong {

    color:
        var(--ink);
}


.availability-loading-v7 {

    padding:
        22px 24px;

    color:
        var(--muted);

    font-size:
        12px;
}


@media (
    max-width: 750px
) {

    .availability-main-v7 {

        grid-template-columns:
            auto 1fr;
    }


    .availability-actions-v7 {

        grid-column:
            1 / -1;

        align-items:
            flex-start;

        padding-left:
            64px;
    }


    .availability-footer-v7 {

        flex-direction:
            column;
    }
}


/* =====================================================
   END FRAME_AVAILABILITY_DASHBOARD_STYLE_V7
   ===================================================== */



/* =====================================================
   FRAME_VARIANT_MATRIX_STYLE_V8
   ===================================================== */


.mockup-variant-matrix-v8 {

    grid-column:
        1 / -1;

    margin-top:
        6px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,24,27,.09);

    border-radius:
        17px;

    background:
        rgba(255,255,255,.88);
}


.mockup-matrix-head-v8 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        17px 19px;

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

    background:
        #faf8f5;
}


.mockup-matrix-head-v8 strong {

    display:
        block;

    color:
        var(--ink);

    font-size:
        14px;
}


.mockup-matrix-head-v8 span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        10px;
}


.mockup-matrix-locale-v8 {

    flex:
        0 0 auto;

    padding:
        7px 9px;

    border-radius:
        7px;

    background:
        rgba(47,138,99,.09);

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .09em;
}


.mockup-matrix-group-v8 {

    padding:
        18px 19px;

    border-bottom:
        1px solid
        rgba(23,24,27,.06);
}


.mockup-matrix-group-head-v8 {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        13px;
}


.mockup-matrix-group-head-v8 strong {

    color:
        var(--ink);

    font-size:
        13px;
}


.mockup-matrix-group-head-v8 span {

    display:
        block;

    margin-top:
        3px;

    max-width:
        650px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.45;
}


.mockup-matrix-actions-v8 {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        6px;
}


.mockup-matrix-actions-v8 button {

    min-height:
        29px;

    padding:
        0 10px;

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

    border-radius:
        7px;

    background:
        #fff;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        750;
}


.mockup-matrix-actions-v8 button:hover {

    border-color:
        var(--orange-line);

    color:
        var(--orange);

    background:
        var(--orange-soft);
}


.mockup-matrix-values-v8 {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.mockup-matrix-chip-v8 {

    position:
        relative;

    margin:
        0;

    cursor:
        pointer;
}


.mockup-matrix-chip-v8 input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.mockup-matrix-chip-body-v8 {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        40px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(23,24,27,.11);

    border-radius:
        10px;

    background:
        #fff;

    color:
        #5d5953;

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


.mockup-matrix-chip-body-v8 b {

    font-size:
        11px;

    font-weight:
        680;
}


.mockup-color-swatch-v8 {

    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    border:
        1px solid
        rgba(23,24,27,.18);

    border-radius:
        50%;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.20);
}


.mockup-matrix-chip-v8:hover
.mockup-matrix-chip-body-v8 {

    border-color:
        var(--orange-line);

    transform:
        translateY(-1px);
}


.mockup-matrix-chip-v8
input:checked
+
.mockup-matrix-chip-body-v8 {

    border-color:
        var(--orange);

    background:
        rgba(241,100,30,.075);

    color:
        var(--ink);

    box-shadow:
        0 0 0 2px
        rgba(241,100,30,.08);
}


.mockup-matrix-chip-v8
input:checked
+
.mockup-matrix-chip-body-v8:after {

    content:
        "✓";

    display:
        inline-grid;

    place-items:
        center;

    width:
        16px;

    height:
        16px;

    margin-left:
        2px;

    border-radius:
        50%;

    background:
        var(--orange);

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        900;
}


.mockup-matrix-chip-v8.unavailable {

    cursor:
        not-allowed;
}


.mockup-matrix-chip-v8.unavailable
.mockup-matrix-chip-body-v8 {

    opacity:
        .30;

    background:
        #f1efec;

    border-style:
        dashed;

    transform:
        none;
}


.mockup-matrix-footer-v8 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        13px 19px;

    background:
        #faf8f5;

    color:
        var(--muted);

    font-size:
        9px;
}


#mockup-matrix-summary-v8 {

    color:
        var(--ink);

    font-size:
        10px;
}


#mockup-matrix-summary-v8 strong {

    color:
        var(--orange);

    font-size:
        13px;
}


@media (
    max-width: 680px
) {

    .mockup-matrix-head-v8,
    .mockup-matrix-group-head-v8,
    .mockup-matrix-footer-v8 {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .mockup-matrix-actions-v8 {

        justify-content:
            flex-start;
    }
}


/* =====================================================
   END FRAME_VARIANT_MATRIX_STYLE_V8
   ===================================================== */



/* =====================================================
   FRAME_MOCKUP_FULLWIDTH_V9
   ===================================================== */

/* Mockup Studio nicht mehr künstlich schmal halten */
#mockup-form-shop-v4 {
    width: 100%;
    max-width: none !important;
}

/* Etwas großzügiger in die Fläche */
#mockup-form-shop-v4 .form-grid {
    width: 100%;
}

/* Der obere Kopfbereich darf ebenfalls komplett ziehen */
#mockup-form-shop-v4 .mockup-config-head {
    width: 100%;
}

/* Submenu unter Mockup Studio */
.mockup-submenu-v9 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0 2px;
}

.mockup-submenu-v9 button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

.mockup-submenu-v9 button:hover {
    border-color: var(--orange-line);
    background: var(--orange-soft);
    color: var(--orange);
    transform: translateY(-1px);
}

.mockup-submenu-v9 button.active {
    border-color: var(--orange);
    background: rgba(241,100,30,.08);
    color: var(--orange);
}

.mockup-submenu-label-v9 {
    color: #aaa59e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* optional: etwas luftiger bei großen Screens */
@media (min-width: 1200px) {
    #mockup-form-shop-v4 .form-grid {
        gap: 20px;
    }
}

/* =====================================================
   END FRAME_MOCKUP_FULLWIDTH_V9
   ===================================================== */



/* =====================================================
   FRAME_MOCKUP_RULEBOOK_TABS_STYLE_V10
   ===================================================== */

.frame-mockup-tabs-v10 {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin:
        0 0 18px;

    padding:
        5px;

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

    border-radius:
        12px;

    background:
        #ece8e2;
}


.frame-mockup-tabs-v10 button {

    min-height:
        38px;

    padding:
        0 16px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #77736d;

    font-size:
        12px;

    font-weight:
        720;

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


.frame-mockup-tabs-v10 button:hover {

    color:
        var(--ink);
}


.frame-mockup-tabs-v10 button.active {

    background:
        #fff;

    color:
        var(--orange);

    box-shadow:
        0 2px 10px
        rgba(23,24,27,.08);
}


/* Regelwerk bekommt in seiner eigenen Ansicht
   ebenfalls die volle Breite */

.frame-global-mockup-rules-v9 {

    width:
        100%;

    max-width:
        none !important;

    margin:
        0 !important;
}


/* =====================================================
   END FRAME_MOCKUP_RULEBOOK_TABS_STYLE_V10
   ===================================================== */



/* =====================================================
   FRAME_RULEBOOK_SIDEBAR_STYLE_V10_1
   ===================================================== */


/* Regelwerk wirklich aus der normalen Studioansicht weg */

.frame-mockup-hidden-v10-1 {
    display:
        none !important;
}


/* Eingeklappter Unterpunkt unter Mockup Studio */

.frame-rulebook-nav-v10-1 {

    width:
        calc(100% - 24px);

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        2px 12px 4px 12px;

    padding:
        0 12px 0 24px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #8b8781;

    text-align:
        left;

    font-size:
        12px;

    font-weight:
        620;

    cursor:
        pointer;

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


.frame-rulebook-nav-v10-1:hover {

    background:
        #f1ede7;

    color:
        var(--ink);
}


.frame-rulebook-nav-v10-1.active {

    background:
        var(--orange-soft);

    color:
        var(--orange);

    font-weight:
        700;
}


.frame-rulebook-branch-v10-1 {

    width:
        14px;

    color:
        #bbb5ad;

    font-size:
        13px;

    line-height:
        1;
}


/* Eigenständige Regelwerk-Ansicht */

.frame-global-mockup-rules-v9.frame-rulebook-visible-v10-1 {

    display:
        block !important;

    width:
        100%;

    max-width:
        none !important;

    margin:
        0 !important;
}


/* =====================================================
   END FRAME_RULEBOOK_SIDEBAR_STYLE_V10_1
   ===================================================== */



/* =====================================================
   FRAME_LISTING_ORDER_REVIEW_V17
   ===================================================== */


.frame-rulebook-back-v17 {
    margin: 0 0 18px 0;
}


.frame-model-view { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.frame-font-color-controls { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#content .frame-font-color-controls input[type="color"] { width: 58px; height: 46px; flex: 0 0 58px; padding: 4px; cursor: pointer; }
.frame-font-color-controls input[data-field="color"] { min-width: 0; flex: 1; font-family: monospace; }
.frame-model-view legend { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.frame-model-view > div { display: flex; flex-wrap: wrap; gap: 10px; }
.frame-model-view label { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid #ddd2c5; border-radius: 10px; background: #fff; }
.frame-model-view label:has(input:checked) { border-color: var(--orange); background: #fff2e9; }
.frame-model-view label:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
.frame-model-view input { accent-color: var(--orange); }
.frame-model-view p { margin: 12px 0 0; }

.frame-listing-order-review-v17 {
    margin: 24px 0 0;
    padding: clamp(18px, 3vw, 28px);
    background: #fff;
    border: 1px solid #eadfd3;
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(45, 31, 15, .04);
    grid-column: 1 / -1;
    min-width: 0;
}

.frame-listing-order-review-v17[hidden] { display: none; }
#content #frame-create-listing { width: fit-content; justify-self: start; padding: 12px 22px; }
#content .frame-order-review-grid-v17 strong { color: #242424; overflow-wrap: anywhere; }
#content .frame-order-review-grid-v17 span { font-size: 14px; opacity: 1; color: #68615a; }
#content .frame-order-review-actions-v17 button { width: auto; min-height: 46px; padding: 12px 22px; font-size: 16px; line-height: 1.4; border-radius: 10px; }
.frame-order-review-actions-v17 { flex-wrap: wrap; padding-top: 20px; border-top: 1px solid #eee5db; }
.frame-order-review-warning-v17 { background: #faf7f2; line-height: 1.6; }
@media (max-width: 600px) {
    #content .frame-order-review-actions-v17 button { width: 100%; }
    .frame-order-review-grid-v17 { grid-template-columns: minmax(0, 1fr); }
}


.frame-order-review-head-v17 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}


.frame-order-review-head-v17 h3 {
    margin: 5px 0 0 0;
}


.frame-order-review-count-v17 {
    white-space: nowrap;
    padding: 8px 12px;
    border: 1px solid rgba(128, 128, 128, 0.30);
    border-radius: 999px;
    font-weight: 700;
}


.frame-order-review-grid-v17 {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );
    gap: 12px;
}


.frame-order-review-grid-v17 > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px;
    border: 1px solid rgba(128, 128, 128, 0.18);
    border-radius: 12px;
}


.frame-order-review-grid-v17 span,
.frame-order-review-motives-v17 > span {
    font-size: 0.78rem;
    opacity: 0.68;
}


.frame-order-review-motives-v17 {
    margin-top: 18px;
}


.frame-order-review-motives-v17 > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}


.frame-order-review-motives-v17 > div > span {
    padding: 6px 9px;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: 999px;
}


.frame-order-review-warning-v17 {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 12px;
    font-weight: 600;
}


.frame-order-review-actions-v17 {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}


@media (max-width: 760px) {

    .frame-order-review-head-v17 {
        flex-direction: column;
    }


    .frame-order-review-actions-v17 {
        flex-direction: column;
    }
}


/* =====================================================
   FRAME SHOP ADMIN V26.1
   ===================================================== */

.frame-admin-toolbar-v261 {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}

.frame-admin-toolbar-v261 h3 {
    margin:0 0 6px;
}

.frame-admin-toolbar-v261 p {
    margin:0;
    opacity:.72;
}

.frame-admin-add-v261 {
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid rgba(0,0,0,.08);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,.5fr) auto;
    align-items:end;
    gap:18px;
}

.frame-admin-grid-v261 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:22px;
}

.frame-admin-card-v261 {
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
    padding:24px;
    box-shadow:0 12px 35px rgba(0,0,0,.05);
}

.frame-admin-card-head-v261 {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.frame-admin-card-head-v261 h3 {
    margin:4px 0 0;
}

.frame-admin-badge-v261 {
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.055);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.frame-admin-fields-v261,
.frame-admin-secret-grid-v261 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.frame-admin-integration-v261 {
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(0,0,0,.08);
}

.frame-admin-integration-v261 summary {
    cursor:pointer;
    font-weight:700;
    margin-bottom:16px;
}

@media (max-width:850px) {

    .frame-admin-toolbar-v261 {
        flex-direction:column;
    }

    .frame-admin-add-v261,
    .frame-admin-fields-v261,
    .frame-admin-secret-grid-v261 {
        grid-template-columns:1fr;
    }

    .frame-admin-grid-v261 {
        grid-template-columns:1fr;
    }
}

/* =====================================================
   END FRAME SHOP ADMIN V26.1
   ===================================================== */

/* FRAME readability and personalization preview, V30 */
#content { color: #111; font-size: 16px; line-height: 1.55; }
#content :is(h1, h2, h3, h4, strong, b) { color: var(--orange); }
#content :is(label, .field-help, .help-text, .form-help, .hint, small) {
    font-size: 16px; line-height: 1.5; color: #111;
}
#content :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
    font: inherit; font-size: 17px; color: #111;
    min-height: 46px; border-radius: 10px;
}
#content select { padding: 10px 36px 10px 12px; max-width: 100%; }
#content :is(input, textarea)::placeholder { color: #515151; opacity: 1; }
#content :is(select, input, textarea, button):focus-visible {
    outline: 3px solid var(--orange); outline-offset: 3px;
}
#content .project-card { border-radius: 18px; overflow: hidden; }
#content .project-body { padding: 22px; }
#content .project-title { font-size: 23px; line-height: 1.3; color: var(--orange); }
#content .project-card :is(.project-key, .project-stats, .progress-row, .badge, .preview-empty) {
    font-size: 16px; color: #111; line-height: 1.5;
}
#content .project-stats { flex-wrap: wrap; gap: 10px 16px; }
#content .project-card .progress-row strong { color: var(--orange); font-size: 18px; }
#content :is(.frame-listing-panel, .frame-listing-layout, .frame-listing-form-grid) button,
#content :is(#frame-create-listing, .frame-listing-type) {
    font-size: 17px; min-height: 46px; border-radius: 12px;
}
#content .frame-listing-type { padding: 20px; gap: 8px; }
#content .frame-listing-type strong { font-size: 19px; color: var(--orange); }
#content .frame-listing-type span { font-size: 16px; color: #111; line-height: 1.5; }
#content :is(button, .primary-button, .mvp-primary) :is(strong, b) { color: inherit; }
#frame-personalization-editor { border: 1px solid var(--orange-line); padding: 24px; border-radius: 18px; }
#frame-personalization-editor [hidden] { display: none !important; }
#content .frame-personalization-switch {
    display: inline-flex; align-items: center; gap: 12px; position: relative;
    cursor: pointer; padding: 12px 0; font-size: 18px; font-weight: 700; color: var(--orange);
}
.frame-personalization-switch input {
    position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0;
    cursor: pointer; margin: 0;
}
.frame-switch-track {
    display: inline-flex; align-items: center; width: 62px; height: 34px;
    padding: 4px; box-sizing: border-box; border-radius: 999px;
    background: #666; transition: background .18s ease;
}
.frame-switch-track > span {
    width: 26px; height: 26px; border-radius: 50%; background: white;
    box-shadow: 0 1px 4px #0003; transition: transform .18s ease;
}
.frame-personalization-switch input:checked + .frame-switch-track { background: var(--orange); }
.frame-personalization-switch input:checked + .frame-switch-track > span { transform: translateX(28px); }
.frame-personalization-switch input:focus-visible + .frame-switch-track {
    outline: 3px solid var(--orange); outline-offset: 4px;
}
#frame-personalization-controls { margin-top: 20px; }
#frame-personalization-controls .frame-listing-form-grid { gap: 18px 22px; }
#frame-personalization-controls label { display: flex; flex-direction: column; gap: 7px; }
#frame-personalization-controls button { margin: 8px 8px 8px 0; padding: 12px 18px; }
#frame-personalization-controls [data-status] { font-size: 16px; color: #111; }
.frame-flatlay-stage {
    margin-top: 16px; display: grid; place-items: center; min-height: 260px;
    border-radius: 18px; background: #f8f6f2; border: 1px solid #dedad3; padding: 16px;
}
.frame-flatlay-stage img { display: block; max-width: 100%; max-height: 700px; object-fit: contain; }
.frame-flatlay-stage p { max-width: 420px; text-align: center; font-size: 17px; color: #111; }
@media (max-width: 640px) {
    #frame-personalization-editor { padding: 16px; }
    #frame-personalization-controls .frame-listing-form-grid { grid-template-columns: 1fr; }
    #content .project-body { padding: 18px; }
    #frame-personalization-controls button { width: 100%; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .frame-switch-track, .frame-switch-track > span { transition: none; }
}
@media (min-width: 1100px) {
    #frame-personalization-controls { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.15fr); gap: 12px 24px; align-items: start; }
    #frame-personalization-controls > .frame-listing-form-grid { grid-column: 1; }
    #frame-personalization-controls > button { grid-column: 1; }
    #frame-personalization-controls > [data-status] { grid-column: 2; grid-row: 5; }
    #frame-personalization-controls > .frame-flatlay-stage { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 20px; margin-top: 0; }
}
#content :is(.frame-select-control, .frame-select-label, .frame-select-option) { font-size: 17px; color: #111; line-height: 1.5; }
#content .frame-listing-shell :is(button, .mvp-note, .empty, .frame-listing-head p) { font-size: 16px; }
#content .frame-listing-shell :is(.field-help, .mvp-note, .empty, .frame-listing-head p) { color: #111; }
#content .frame-listing-shell :is(button, label) strong { color: var(--orange); }
#content .frame-personalization-switch { flex-direction: row; flex-wrap: nowrap; }
#frame-personalization-controls :is(input, select, .frame-select-shell, label) { min-width: 0; max-width: 100%; box-sizing: border-box; }
#frame-personalization-controls > button {
    background: #fff; border: 1px solid var(--orange-line); color: #111;
    font-weight: 600; box-shadow: 0 2px 6px #00000006; cursor: pointer;
}
#frame-personalization-controls > button:hover { background: var(--orange-soft); }
#frame-personalization-controls > [data-render] { background: var(--orange); color: #fff; border-color: var(--orange); }
#frame-personalization-controls .frame-select-shell.disabled .frame-select-control { color: #111; opacity: 1; }
@media (max-width: 1099px) {
    #frame-personalization-controls { display: flex; flex-direction: column; align-items: stretch; }
    #frame-personalization-controls > .frame-flatlay-stage { order: -2; }
    #frame-personalization-controls > [data-status] { order: -1; }
}
#content :is(.metric-label, .metric-sub, .section-head p) { font-size: 16px; color: #111; line-height: 1.5; }
#content .frame-listing-shell :is(p, small, .frame-digital-mode-card-v2 span, .frame-digital-mode-info-v2) { font-size: 16px; color: #111; line-height: 1.5; }
#content .frame-listing-shell label { color: var(--orange); }
#content .frame-listing-shell :is(.frame-listing-form-grid, .frame-listing-form-grid > *, .frame-select-shell, .frame-select-control) { min-width: 0; max-width: 100%; box-sizing: border-box; }
#content .frame-listing-shell .frame-select-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#content .frame-listing-shell .frame-digital-info { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 640px) {
    #content .frame-listing-shell .frame-listing-form-grid { grid-template-columns: minmax(0, 1fr); }
    #content .frame-listing-shell .frame-select-control { padding: 12px; }
}

/* V31: consistent form rhythm, choice cards and motif/color matrix. */
#content :is(.field, .frame-listing-form-grid > label) { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
#content :is(.mvp-form, .frame-design-form-panel form) { display: flex; flex-direction: column; gap: 24px; }
#content :is(.mvp-form, .frame-design-form-panel form) > .field { margin: 0; }
#content :is(.frame-design-two-columns, .frame-listing-form-grid) { gap: 22px 24px; }
#content :is(h2, h3, h4) { margin-bottom: 16px; }
#content :is(.field, fieldset) + :is(h2, h3, h4) { margin-top: 28px; }
#content .field > :is(label, small, p) { margin: 0; }
#content :is(.mvp-panel, .frame-listing-panel) > button { margin-top: 20px; }
#content #frame-design-submit { margin-top: 12px; align-self: flex-start; min-height: 48px; padding: 12px 24px; font-size: 17px; }
#content .frame-design-modes { gap: 14px; }
#content .frame-design-mode { position: relative; padding: 18px; gap: 12px; border-radius: 14px; min-height: 112px; cursor: pointer; }
#content .frame-design-mode input { width: 18px; height: 18px; min-height: 0; margin: 4px 0 0; flex: 0 0 18px; }
#content .frame-design-mode input:focus { outline: none; box-shadow: none; }
#content .frame-design-mode:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
#content .frame-design-mode strong { font-size: 17px; line-height: 1.4; margin-bottom: 8px; }
#content .frame-design-mode small { font-size: 15px; line-height: 1.5; }
#frame-pod-color-matrix { margin: 24px 0; padding: 24px; border: 1px solid var(--orange-line); border-radius: 18px; }
#frame-pod-color-matrix[hidden] { display: none !important; }
#frame-pod-color-matrix fieldset { margin: 20px 0; padding: 16px; border: 1px solid #e0dcd6; border-radius: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
#frame-pod-color-matrix legend { padding: 0 8px; color: var(--orange); font-weight: 700; font-size: 18px; }
#content #frame-pod-color-matrix .frame-pod-color-option { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px 16px; color: #111; background: #f8f6f2; border-radius: 10px; cursor: pointer; }
#frame-pod-color-matrix input { width: 19px; height: 19px; accent-color: var(--orange); }
#frame-pod-color-matrix label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--orange); }
.frame-combination-review { padding: 20px; margin: 20px 0; background: #f8f6f2; border-radius: 12px; }
@media (max-width: 640px) {
    #content :is(.frame-design-two-columns, .frame-design-modes) { grid-template-columns: minmax(0,1fr); }
    #frame-pod-color-matrix { padding: 16px; }
    #content #frame-design-submit { width: 100%; }
}
#content [hidden] { display: none !important; }
.frame-product-readiness { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--orange-line); background: #fffaf6; border-radius: 14px; }
.frame-product-readiness p { margin: 8px 0 0; font-size: 16px; color: #111; }
.frame-layer-canvas { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.frame-layer-canvas [data-layer] { cursor: move; outline: none; }
.frame-layer-canvas [data-handle="resize"] { cursor: nwse-resize; }
.frame-layer-canvas [data-handle="rotate"] { cursor: grab; }
#frame-personalization-controls .frame-flatlay-stage { position: relative; display: block; aspect-ratio: 1; min-height: 0; padding: 0; overflow: hidden; align-self: start; }
#frame-personalization-controls [data-layer-host] { width: 100%; }
#frame-personalization-controls [data-status] { min-height: 3em; margin: 0; color: #a32316; overflow-wrap: anywhere; }
#frame-personalization-controls [data-preview-placeholder] { padding: 20px; margin: auto; }
#frame-personalization-controls .frame-output-controls { grid-column: 1; min-width: 0; }
#frame-personalization-controls [data-export-links] { min-height: 80px; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
#frame-personalization-controls [data-export-links] a { color: #b83f05; font-weight: 600; }
#frame-personalization-controls .frame-output-controls > button { border: 1px solid var(--orange-line); background: #fff; padding: 12px 18px; color: #111; cursor: pointer; font-weight: 600; }
#frame-personalization-controls .frame-output-controls > [data-print-export] { background: var(--orange); color: white; }
.frame-font-page { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.frame-font-page label { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.frame-font-page :is(input,textarea,select) { width: 100%; box-sizing: border-box; min-width: 0; }
.frame-font-page textarea { min-height: 120px; }
.frame-font-preview { display: grid; place-items: center; height: 180px; background: #faf8f4; border: 1px solid #dedad3; border-radius: 14px; margin-top: 20px; }
.frame-font-preview img { width: 100%; max-height: 180px; object-fit: contain; }
.frame-font-page .frame-font-license { display: flex; flex-direction: row; align-items: start; }
.frame-font-license input { width: 22px; height: 22px; flex: 0 0 22px; }
.frame-font-page [role="status"] { min-height: 3em; overflow-wrap: anywhere; }
.frame-font-page [data-font-details] { overflow-wrap: anywhere; }
@media (max-width: 900px) { .frame-font-page { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) {
    .topbar { height: auto; min-height: 92px; flex-wrap: wrap; gap: 12px; padding: 16px 20px; }
    .topbar > * { min-width: 0; max-width: 100%; }
    .topbar h1 { overflow-wrap: anywhere; }
}

/* Help markers scroll with their fields; only the tooltip uses a fixed layer. */
.frame-help-slot { display: inline-block; width: 22px; height: 22px; margin-left: 5px; vertical-align: middle; flex: 0 0 22px; }
.frame-help-heading { min-width: 0; }
.frame-help-below { margin-bottom: calc(var(--frame-help-original-margin, 0px) + 24px) !important; }
.sidebar .frame-help-side { width: calc(100% - 27px); }
#frame-help-layer {
    position: fixed;
    inset: 0;
    z-index: 2147480000;
    pointer-events: none;
}
.frame-help-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent;
    color: #706657;
    box-shadow: none;
    pointer-events: auto;
    cursor: help;
    touch-action: manipulation;
}
.frame-help-badge > svg { display: block; width: 18px; height: 18px; overflow: visible; }
.frame-help-badge:hover,
.frame-help-badge:focus-visible { background: #fff0e5; }
.frame-help-badge:focus-visible { outline: 2px solid #f1641e; outline-offset: 1px; }
#frame-help-layer [hidden] { display: none !important; }
#frame-help-tooltip {
    position: absolute;
    padding: 10px 12px;
    border: 1px solid #d5c5a9;
    border-radius: 9px;
    background: #fffaf0;
    color: #302a21;
    box-shadow: 0 5px 20px rgba(40, 30, 10, .16);
    font: 400 13px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left;
    overflow-wrap: anywhere;
    pointer-events: auto;
    z-index: 1;
}
@media (forced-colors: active) {
    #frame-help-tooltip { background: Canvas; color: CanvasText; border-color: CanvasText; }
}
/* Keep the extra help space within narrow wizard grids. */
.wizard-panel, .wizard-hero, .target-control, .target-presets { min-width: 0; }
.target-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1050px) {
    .wizard-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Project research: compact pairs, with a single column on small screens. */
.frame-content-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.frame-content-approval-card { min-width:0; height:100%; box-sizing:border-box; }
.frame-content-approval-card[hidden] { display:none; }
.frame-content-approval-main { min-width:0; overflow-wrap:anywhere; }
.frame-research-subproject { margin-top:18px; }
.frame-subproject-name { display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.frame-research-selection-count { color:var(--muted,#666); font-size:12px; }
@media(max-width:700px) { .frame-content-list { grid-template-columns:minmax(0,1fr); } }
.frame-research-subproject .frame-help-slot { display:inline-block; margin-top:0; }
/* Country-specific keyword pressure: never hide country or rating on mobile. */
.keyword-table .keyword-head,.keyword-table .keyword-row { grid-template-columns:minmax(180px,2fr) 85px 100px 125px minmax(180px,1.3fr); }
.keyword-table .keyword-head > div:last-child,.keyword-table .keyword-row > div:last-child { display:flex; }
.keyword-pressure { display:flex; align-items:center; gap:9px; min-width:0; }
.keyword-country { font-size:20px; line-height:1; flex:none; }
.keyword-pressure-bar { position:relative; display:block; width:65px; height:8px; border-radius:8px; background:linear-gradient(90deg,#238443,#83bd48,#edc44b,#ee8735,#cf4145); flex:none; }
.keyword-pressure-bar > span { position:absolute; top:-3px; height:14px; width:3px; border-radius:2px; background:#202421; box-shadow:0 0 0 1px white; transform:translateX(-50%); }
.keyword-pressure-label { font-size:10px; font-weight:650; }
.keyword-pressure[data-level="unknown"] .keyword-pressure-bar { background:#d6d6d6; }
.keyword-pressure[data-level="unknown"] .keyword-pressure-bar > span { display:none; }
.keyword-pressure-explanation { font-size:11px; line-height:1.6; color:#68635d; margin:0 0 14px; max-width:950px; }
@media(max-width:1150px) {
 .keyword-table .keyword-head,.keyword-table .keyword-row { grid-template-columns:minmax(130px,2fr) 65px 65px 90px minmax(165px,1.5fr); gap:10px; }
}
@media(max-width:800px) {
 .keyword-table .keyword-head { display:none; }
 .keyword-table .keyword-row { grid-template-columns:1fr 1fr; gap:9px; padding:14px; }
 .keyword-table .keyword-row > div { display:block; }
 .keyword-table .keyword-name { grid-column:1/-1; font-size:13px; }
 .keyword-table .keyword-row > div:nth-child(2)::before { content:'Suchvolumen: '; }
 .keyword-table .keyword-row > div:nth-child(4)::before { content:'Listings: '; }
 .keyword-table .keyword-row > .keyword-pressure { display:flex; grid-column:1/-1; }
}
.keyword-country { position:relative; display:inline-flex; width:24px; height:16px; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px #0002; }
.keyword-country svg { width:100%; height:100%; }
.keyword-country-emoji { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.keyword-pressure { --pressure-color:#27833e; }
.keyword-pressure[data-level="low"] { --pressure-color:#8ab84b; }
.keyword-pressure[data-level="medium"] { --pressure-color:#e9bf37; }
.keyword-pressure[data-level="high"] { --pressure-color:#e88335; }
.keyword-pressure[data-level="very-high"] { --pressure-color:#d04848; }
.keyword-pressure .keyword-pressure-bar { width:32px; background:var(--pressure-color); }
.keyword-pressure .keyword-pressure-bar > span { display:none; }

/* Project cards: distinct, real content and image approval counts. */
.project-card-counts { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border, #e5e7eb); }
.project-card-counts-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 13px; }
.project-card-counts-title > span { color: var(--muted); }
#content .project-card-counts .project-stats { margin-top: 8px; flex-wrap: wrap; gap: 6px 14px; }

.frame-listing-photo-start { flex-basis: 100%; width: 100%; }
.frame-listing-photo-start p { max-width: 760px; margin: 10px 0; line-height: 1.5; color: var(--muted); }

/* Workflow: clear actions, stable cards, responsive overview. */
.workflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}
.workflow-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border,#e5e7eb)}
.workflow-row span{min-width:0;overflow-wrap:anywhere}.workflow-row small{display:block;color:var(--muted,#697386);margin-top:5px}
.workflow-row button{flex-shrink:0}.workflow-tabs,.workflow-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.workflow-contract{padding:16px 20px;margin-bottom:18px;border-left:3px solid #ef8b22;background:rgba(239,139,34,.07);line-height:1.6}
.workflow-project{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.workflow-empty:empty{display:none}.workflow-empty{color:var(--muted,#697386)}
@media(max-width:800px){.workflow-grid{grid-template-columns:1fr}.workflow-row,.workflow-project{align-items:flex-start;flex-direction:column}}

.workflow-photo-plan{width:100%;border-collapse:collapse;margin-top:12px}.workflow-photo-plan th,.workflow-photo-plan td{text-align:left;padding:9px;border-bottom:1px solid #e5e7eb}

/* Help anchors scroll with the actual field, not a delayed viewport overlay. */
.frame-help-slot{position:relative}
.frame-help-inline-anchor{position:absolute;display:block;width:0;height:0}
.frame-help-badge{transition:none!important;z-index:2}
.frame-help-badge[hidden]{display:none!important}

.frame-deletion-toolbar{margin-bottom:20px}.frame-deletion-toolbar>div{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.frame-delete-action{color:#aa2626;border:1px solid #aa2626;background:#fff5f5}.frame-delete-selection{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:12px;cursor:pointer}.frame-delete-selection input{width:16px;height:16px}

/* Selection and supplementary panels must not shift the listing's two main columns. */
.frame-listing-review-card > .frame-delete-selection,
.frame-listing-review-card > details.frame-listing-panel { grid-column: 1 / -1; }
.frame-listing-review-card > .frame-listing-review-images { grid-column: 1; min-width: 0; }
.frame-listing-review-card > .frame-listing-review-copy { grid-column: 2; min-width: 0; }
label .frame-help-heading { display: inline-flex; align-items: center; vertical-align: middle; }
label .frame-help-heading > .frame-help-slot { align-self: center; margin-top: 0; margin-bottom: 0; }
@media (max-width: 760px) {
    .frame-listing-review-card > .frame-listing-review-copy { grid-column: 1; }
}

/* Business dashboard: two rows of four metrics, then full-width reports. */
.business-dashboard{display:flex;flex-direction:column;gap:20px}
.business-dashboard .business-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;gap:16px}
.business-dashboard .metric{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.business-dashboard .metric-label{font-weight:650;color:var(--orange)!important;margin:0}
.business-dashboard .metric-value{font-size:clamp(23px,2.2vw,32px);letter-spacing:-.025em;overflow-wrap:anywhere}
.business-dashboard .metric-sub{margin:0}
.business-net-line{display:flex;flex-direction:column;gap:3px;font-size:13px}.business-net-line strong{font-size:21px}
.business-dashboard>.frame-listing-panel,.business-dashboard>.availability-card-v7{width:100%;box-sizing:border-box;margin:0}
.business-ai,.business-bestsellers{padding:24px}
.business-table-scroll{overflow-x:auto}.business-dashboard table{width:100%;border-collapse:collapse;text-align:left;font-size:15px}
.business-dashboard th,.business-dashboard td{padding:15px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.business-dashboard thead th{font-size:13px;color:var(--muted);font-weight:600}
.business-dashboard tbody th{font-weight:600}.business-note{font-size:13px;color:var(--muted);line-height:1.5;margin:16px 0 0}
.business-periods{display:flex;flex-wrap:wrap;gap:8px}.business-periods button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.business-empty{text-align:center;padding:30px 12px!important;color:var(--muted)}
@media(max-width:1100px){.business-dashboard .business-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.business-dashboard .business-metrics{gap:10px}.business-dashboard .metric{padding:15px}.business-ai,.business-bestsellers{padding:18px}.business-dashboard .metric-label,.business-dashboard .metric-sub{font-size:13px!important}.business-net-line strong{font-size:18px}.business-dashboard th,.business-dashboard td{padding:12px 8px}.business-ai table{min-width:430px}.business-bestsellers table{min-width:500px}}

.business-ai table{min-width:760px}.business-ai-missing{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:5px;line-height:1.4}.business-ai-averages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px;padding:20px;background:var(--orange-soft);border-radius:12px}.business-ai-averages span{display:block;font-size:14px;margin-bottom:8px}.business-ai-averages strong{font-size:25px}@media(max-width:560px){.business-ai-averages{grid-template-columns:1fr}.business-ai table{min-width:760px}}

/* V48: readable design previews and prepared listing presentation. */
.image-thumb, .image-thumb img { background: #fff; }
.image-thumb img { object-fit: contain; }
.frame-listing-review-card { grid-template-columns: minmax(0,1fr); padding: 28px; gap: 24px; }
.frame-listing-review-card > .frame-listing-review-images,
.frame-listing-review-card > .frame-listing-review-copy { grid-column: 1 / -1; }
.frame-listing-review-images { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; background: #fff; border: 1px solid #eee5d9; border-radius: 16px; }
.frame-listing-motif { margin: 0; display: flex; align-items: center; gap: 24px; flex: 1; min-width: 220px; }
.frame-listing-review-images .frame-listing-motif img { width: 180px; height: 180px; object-fit: contain; background: white; border-radius: 10px; }
.frame-listing-motif figcaption { display: grid; gap: 8px; overflow-wrap: anywhere; }
.frame-listing-motif figcaption span { color: #975315; font-size: 14px; font-weight: 700; }
.frame-listing-motif figcaption strong { font-size: 20px; line-height: 1.4; }
.frame-listing-review-top h3 { font-size: 24px; line-height: 1.4; }
.frame-listing-review-card .frame-listing-meta,
.frame-listing-review-card .frame-listing-description,
.frame-listing-review-card button { font-size: 16px; line-height: 1.5; }
.frame-listing-asset-progress-v11 { width: 100%; box-sizing: border-box; padding: 24px; background: #fff7eb; border: 1px solid #efc78e; border-radius: 16px; }
.frame-listing-asset-progress-head-v11 { font-size: 20px; line-height: 1.5; gap: 18px; }
.frame-listing-asset-progress-v11 .progress-track { height: 18px; margin: 16px 0 12px; border-radius: 20px; overflow: hidden; background: #f0e3cf; }
.frame-listing-asset-progress-v11 .progress-fill { height: 100%; background: #ee8d27; transition: width 1s linear; }
.frame-listing-asset-progress-v11 small { font-size: 15px; line-height: 1.5; }
@media(max-width:600px){.frame-listing-motif{flex-direction:column;align-items:flex-start}.frame-listing-review-card{padding:16px}.frame-listing-asset-progress-head-v11{font-size:17px}}

.frame-project-image-preview-v1, .frame-project-image-preview-v1 img {background:white;object-fit:contain;}
.workflow-design-status p{font-size:16px;line-height:1.5;}

.frame-listing-review-top > div > span, .frame-listing-review-card .frame-listing-meta span, .frame-listing-review-card .frame-listing-tags span {font-size:13px;line-height:1.5;}
.frame-listing-review-card .frame-listing-status-pill{font-size:12px;padding:7px 12px;}
.frame-listing-review-card h4,.frame-listing-review-card .frame-listing-mockup-results-v3 strong{font-size:17px;line-height:1.5;}
.frame-listing-review-card small{font-size:13px;line-height:1.5;}

.frame-listing-asset-progress-v11.is-preparing .progress-fill{width:35%!important;animation:frame-print-wait 1.5s ease-in-out infinite;}
@keyframes frame-print-wait{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@media(prefers-reduced-motion:reduce){.frame-listing-asset-progress-v11.is-preparing .progress-fill{animation:none;transform:none;}}

/* SEO rules and prepared listing copy */
.seo-rules {max-width:1100px;margin:0 auto;}
.seo-options {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0;}
.seo-options label,.seo-rule-field {display:flex;flex-direction:column;gap:8px;font-weight:600;}
.seo-options select,.seo-rule-field textarea {width:100%;box-sizing:border-box;}
.seo-rule-field {margin:28px 0;}
.seo-rule-field>span {font-size:19px;color:var(--accent,#f49a38);}
.seo-rule-field textarea {font:inherit;font-weight:400;line-height:1.6;padding:14px;resize:vertical;min-height:130px;}
.seo-rules small {font-weight:400;opacity:.8;}
.seo-actions,.seo-copy-heading {display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;}
.seo-listing-copy {grid-column:1/-1;min-width:0;padding:24px;margin:12px 0 24px;border:1px solid #b67c354d;border-radius:14px;background:rgba(220,150,60,.045);}
.seo-copy-heading h3 {font-size:24px;margin:0;}
.seo-listing-copy h4 {font-size:18px;margin:22px 0 10px;}
.seo-listing-copy h4 small {font-size:13px;font-weight:400;opacity:.75;margin-left:8px;}
.seo-copy-title p {font-size:20px;line-height:1.5;overflow-wrap:anywhere;}
.seo-description {white-space:pre-wrap;font-size:16px;line-height:1.75;overflow-wrap:anywhere;}
.seo-tags {display:flex;flex-wrap:wrap;gap:9px;}
.seo-tags>span {padding:8px 12px;border:1px solid #b67c3555;border-radius:9px;overflow-wrap:anywhere;}
.seo-tags small {opacity:.55;margin-left:5px;}
.seo-notes {margin-top:22px;padding:16px;border-left:3px solid #ec9b37;background:#ec9b3710;}
.seo-listing-copy progress {display:block;width:100%;height:20px;accent-color:#ec9b37;}
@media(max-width:650px){.seo-options{grid-template-columns:1fr}.seo-listing-copy{padding:16px}.seo-copy-title p{font-size:18px}}

.has-seo-copy .frame-listing-description,.has-seo-copy .frame-listing-tags {display:none;}

.frame-delete-dialog {width:min(620px,90vw);border:1px solid #596171;border-radius:14px;padding:28px;background:#19212c;color:#f5f5f5;}
.frame-delete-dialog::backdrop {background:#0009;}
.frame-delete-dialog p {line-height:1.6;overflow-wrap:anywhere;}

.listing-info-review {display:grid;grid-template-columns:2fr 2fr 1fr 90px;gap:12px;margin-bottom:18px;}
.listing-info-colors {display:flex;gap:24px;margin:20px 0;}
.listing-info-previews {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.listing-info-previews img {width:100%;border:1px solid #555;}
#listing-info-editor textarea,#listing-info-editor input:not([type=checkbox]):not([type=color]),#listing-info-shop {width:100%;}
@media(max-width:800px){.listing-info-review{grid-template-columns:1fr;}}

/* Shop information: clear sections and comfortable form spacing. */
.listing-info-page{max-width:1180px;margin:0 auto;padding-bottom:28px}
.listing-info-page>h2{font-size:28px;margin:0 0 10px}
.listing-info-page>p{color:var(--muted);line-height:1.65;max-width:850px}
.listing-info-page label{display:flex;flex-direction:column;gap:9px;font-size:14px;font-weight:600;min-width:0}
.listing-info-shop-field{max-width:440px;margin:26px 0}
#listing-info-form{display:grid;gap:24px}
.listing-info-card{min-width:0;margin:0;padding:28px;border:1px solid var(--border);border-radius:18px;background:var(--white);box-shadow:0 4px 20px rgba(23,24,27,.025)}
.listing-info-card h3,.listing-info-card legend{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 22px;padding:0}
.listing-info-card legend{padding:0 10px;margin:0 0 0 -10px}
.listing-info-card p{font-size:14px;line-height:1.65;color:var(--muted)}
.listing-info-page input:not([type=checkbox]):not([type=color]),.listing-info-page textarea,.listing-info-page select{min-height:46px;border:1px solid #dedbd6;border-radius:10px;background:#fdfcfb;padding:12px 14px;color:var(--ink);font:inherit;font-weight:400;line-height:1.5;box-sizing:border-box}
.listing-info-page textarea{resize:vertical;min-height:140px}
.listing-info-page :is(input,textarea,select):focus-visible{outline:3px solid var(--orange-soft);border-color:var(--orange)}
.listing-info-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.listing-info-content-grid>.field:last-child{grid-column:1/-1}
.listing-info-card .field{margin:0}
.listing-info-colors{display:flex;flex-wrap:wrap;gap:16px;margin:22px 0}
.listing-info-colors label{flex-direction:row;align-items:center;justify-content:space-between;min-width:170px;padding:12px 14px;background:var(--sand);border-radius:12px}
.listing-info-colors input{width:44px;height:34px;padding:2px;border:1px solid #dedbd6;border-radius:7px;cursor:pointer}
.listing-info-reviews{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.listing-info-review{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:16px;margin:0;padding:20px;background:#f8f6f2;border-radius:14px}
.listing-info-review>label:first-child{grid-column:1/-1}
.listing-info-review textarea{min-height:110px}
.listing-info-page .listing-info-consent{flex-direction:row;align-items:flex-start;font-weight:400;line-height:1.6;gap:12px}
.listing-info-consent input{flex-shrink:0;margin-top:4px;accent-color:var(--orange)}
.listing-info-output .mvp-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.listing-info-previews figure{margin:10px 0}.listing-info-previews img{border:1px solid var(--border);border-radius:12px}.listing-info-previews figcaption{padding:10px 0;font-size:14px}
#listing-info-status:not(:empty){padding:16px 20px;border-radius:12px;background:var(--orange-soft);color:var(--ink)}
@media(max-width:700px){.listing-info-card{padding:20px}.listing-info-content-grid,.listing-info-reviews{grid-template-columns:1fr}.listing-info-output button{width:100%}.listing-info-review{padding:16px}}
.listing-info-page label{text-align:left;align-items:stretch}.listing-info-colors label{align-items:center}.listing-info-output .mvp-actions{justify-content:flex-start}
.listing-info-title-field{margin-bottom:16px}.listing-info-logo-position{max-width:360px;margin-top:20px}
.info-images-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:24px 0}.info-images-toolbar a{text-decoration:none}
.info-images-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.info-image-card{padding:20px;background:var(--white);border:1px solid var(--border);border-radius:18px;min-width:0}
.listing-info-page .info-image-choice{flex-direction:row;align-items:center;gap:10px;margin-bottom:16px;font-size:17px}
.info-image-choice input{accent-color:var(--orange);width:18px;height:18px}
.info-image-card img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:var(--sand)}
.info-image-placeholder{aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:24px;background:var(--sand);border-radius:10px;color:var(--muted)}
.info-image-placeholder[aria-busy=true]{background:linear-gradient(110deg,var(--sand),var(--orange-soft),var(--sand));background-size:200% 100%;animation:info-image-working 3s infinite}
.info-image-card p,.info-image-card small,[data-image-status]{line-height:1.6}.info-image-card small{color:var(--muted)}.info-image-card.has-error{border-color:#d7907e}.info-image-error{color:var(--red)}
@keyframes info-image-working{to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){.info-image-placeholder[aria-busy=true]{animation:none}}
@media(max-width:700px){.info-images-grid{grid-template-columns:1fr}.info-images-toolbar button{width:100%}}
.info-image-approval{padding:10px 12px;background:var(--sand);border-radius:9px;font-size:14px}.info-image-approval.is-approved{color:var(--green);background:#edf6f0}

.listing-info-color{padding:14px;background:var(--sand);border-radius:12px;width:230px;max-width:100%}
.listing-info-colors .listing-info-color>label{display:block;min-width:0;background:none;padding:0;margin:0 0 10px}
.listing-info-color-inputs{display:flex;align-items:center;gap:12px}
.listing-info-color-inputs input[type=color]{width:44px;height:44px;flex-shrink:0}
#listing-info-editor [data-color-hex]{width:0;flex:1;min-width:0;font-family:monospace;font-size:15px;padding:10px}

/* Curated product catalog */
.frame-catalog{max-width:1440px;margin:0 auto;padding:12px 4px 40px}.frame-catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0}.frame-catalog-heading h2{font-size:30px;margin:8px 0}.frame-catalog-heading p,.frame-catalog-caption{color:#64748b;line-height:1.6}.frame-catalog-eyebrow{font-size:11px;font-weight:750;letter-spacing:.09em;color:#64748b;text-transform:uppercase}.frame-catalog-pill{background:#e8f3ef;color:#246653;border-radius:24px;padding:10px 16px;white-space:nowrap}.frame-catalog-filters{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin:20px 0 28px}.frame-catalog-filters label{display:grid;gap:7px;font-size:13px;font-weight:650;min-width:180px;flex:1}.frame-catalog-filters input,.frame-catalog-filters select{width:100%;padding:11px 13px;border:1px solid #dbe3ec;border-radius:10px;background:#fff;color:#1e293b;font:inherit;box-sizing:border-box}.frame-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}.frame-catalog-card{border:1px solid #e0e7ef;border-radius:16px;background:white;padding:24px;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s;color:#1e293b}.frame-catalog-card:hover{border-color:#8ab9ab;box-shadow:0 6px 24px #193e2810}.frame-catalog-card h3{margin:12px 0;font-size:19px}.frame-catalog-card p{font-size:13px;color:#64748b;min-height:36px}.frame-catalog-link{color:#256955;font-size:13px;font-weight:650}.frame-catalog-summary{display:flex;gap:16px;flex-wrap:wrap;margin:22px 0}.frame-catalog-summary>div{background:#f5f8fb;border-radius:12px;padding:18px 24px;display:grid;gap:6px;flex:1}.frame-catalog-summary strong{font-size:22px}.frame-catalog-summary span{font-size:12px;color:#64748b}.frame-catalog-note{background:#eff6f3;border-left:3px solid #82ad9c;padding:15px 18px;border-radius:8px;line-height:1.6;font-size:14px}.frame-catalog-table-wrap{overflow:auto;border:1px solid #e2e8f0;border-radius:12px}.frame-catalog-table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}.frame-catalog-table th{text-align:left;background:#f5f8fb;padding:15px;white-space:nowrap}.frame-catalog-table td{padding:14px 15px;border-top:1px solid #edf1f5;vertical-align:top;white-space:nowrap}.frame-catalog-table small{display:block;color:#64748b;margin-top:4px;font-size:11px}.frame-catalog-table summary{font-size:11px;color:#256955;cursor:pointer;margin-top:8px}.frame-catalog-metadata{margin-top:30px;padding:20px;border:1px solid #e2e8f0;border-radius:12px}.frame-catalog-metadata summary{font-weight:650;cursor:pointer}.frame-catalog-metadata p{line-height:1.7;font-size:14px}.frame-catalog-caption{font-size:12px}

.frame-catalog-filters label{min-width:230px}.frame-catalog-table td>small{font-size:11px!important;line-height:1.5!important}.frame-catalog-filters input,.frame-catalog-filters select{font-size:14px!important}
.frame-catalog-heading{flex-wrap:wrap}.frame-catalog-heading>div{min-width:0;flex:1 1 240px}
.frame-catalog-preview{display:block;width:100%;height:235px;object-fit:contain;border-radius:10px;background:#fafafa;margin:0 0 18px}.frame-catalog-card .frame-catalog-price{min-height:0;color:#155f51;font-size:15px;font-weight:700;line-height:1.6}.frame-catalog-card{display:flex;flex-direction:column;align-items:stretch}.frame-catalog-card .frame-catalog-link{margin-top:auto}.frame-catalog-table td{white-space:normal;min-width:120px}.frame-catalog-table td:first-child{min-width:150px}

.frame-catalog-detail-preview{display:block;width:220px;height:240px;object-fit:contain;flex:none;background:#fafafa;border:1px solid #e2e8f0;border-radius:14px}.frame-catalog-detail-heading{justify-content:flex-start}@media(max-width:600px){.frame-catalog-detail-preview{width:100%;height:240px}.frame-catalog-detail-heading{gap:16px}}

/* Catalog delivery overview and stock status */
.frame-catalog-detail-heading{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:36px;background:#fff;border:1px solid #e3e8ed;border-radius:22px;padding:28px;align-items:center;box-shadow:0 8px 28px #172b3a05}.frame-catalog-photo{padding:14px;background:#f6f7f8;border-radius:16px;min-width:0}.frame-catalog-detail-preview{width:100%;height:320px;border:0;background:transparent;border-radius:10px;object-fit:contain}.frame-catalog-detail-heading .frame-catalog-detail-copy{min-width:0}.frame-catalog-detail-heading h2{font-size:32px;line-height:1.2;margin:9px 0}.frame-catalog-detail-intro{font-size:14px;margin:10px 0 18px}.frame-catalog-provider-name{font-weight:700;color:#243e37!important;margin:12px 0}.frame-catalog-delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.frame-catalog-delivery-grid>div{display:flex;flex-direction:column;gap:7px;background:#f2f7f5;border:1px solid #e2ede7;border-radius:12px;padding:16px}.frame-catalog-delivery-grid span{font-size:12px;color:#52675f}.frame-catalog-delivery-grid strong{font-size:22px;color:#1e4e3d}.frame-catalog-delivery-grid small{font-size:11px;color:#64748b}.frame-catalog-stock-summary{font-size:13px;color:#28634f!important;font-weight:650}.frame-catalog-stock-summary.has-issues{color:#b42318!important}.frame-catalog-stock-cell{text-align:center!important;min-width:100px!important}.frame-catalog-stock-alert{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:34px;line-height:1;font-weight:900;color:#d41920;background:#fff0f0;border:2px solid #f7b4b6;border-radius:50%}.frame-catalog-stock-ok{color:#28634f;font-size:12px}.frame-catalog-availability-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.frame-catalog-availability-heading h3{margin:8px 0}.frame-catalog-availability-heading p{color:#64748b;font-size:13px}.frame-catalog-availability-list details{padding:16px 0;border-top:1px solid #e2e8f0}.frame-catalog-availability-list summary{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;cursor:pointer}.frame-catalog-availability-list summary span{font-size:13px;color:#64748b}.frame-catalog-availability-list summary b{font-size:12px;color:#b42318;margin-left:auto}.frame-catalog-availability-variants{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.frame-catalog-availability-variants span{font-size:12px;background:#fff1f0;color:#9a302a;padding:6px 10px;border-radius:6px}@media(max-width:760px){.frame-catalog-detail-heading{grid-template-columns:1fr;padding:18px;gap:18px}.frame-catalog-detail-preview{height:260px}.frame-catalog-delivery-grid strong{font-size:19px}.frame-catalog-detail-heading h2{font-size:27px}.frame-catalog-availability-list summary b{margin-left:0}}
.frame-catalog .frame-catalog-stock-alert{color:#d41920!important;font-size:34px!important;font-weight:900!important}.frame-catalog-delivery-grid small{font-size:12px!important;line-height:1.5!important;color:#64748b!important}.frame-catalog-filters label:has(#catalog-provider){min-width:min(100%,300px);flex:1.5 1 300px}.frame-catalog-filters .frame-select-label{font-size:14px!important}
.frame-catalog-availability{padding:24px}.frame-catalog-availability-heading{margin-bottom:20px}.frame-catalog-availability-list summary::before{content:'›';font-size:22px;color:#64748b;transition:transform .15s}.frame-catalog-availability-list details[open]>summary::before{transform:rotate(90deg)}.frame-catalog-availability-list summary b{color:#b42318!important}@media(max-width:600px){.frame-catalog-availability{padding:18px}.frame-catalog-availability-list summary{align-items:flex-start}}

/* Multi-field personalization */
.frame-custom-add,.frame-custom-heading {display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;align-items:center}
.frame-custom-heading {justify-content:space-between;margin-top:0}
.frame-custom-question {border:1px solid #dbe3ee;border-radius:16px;padding:20px;margin:16px 0;background:#fff}
.frame-custom-question.is-active {border-color:#eb8b52;box-shadow:0 3px 14px #24334a08}
.frame-custom-option {display:grid;grid-template-columns:minmax(130px,1fr) minmax(220px,2fr) auto auto;gap:12px;align-items:end;padding:14px;margin:10px 0;border:1px solid #dbe3ee;border-radius:12px;background:#f8fafc}
.frame-custom-option.is-active {border-color:#ed8c50;background:#fff8f2}
.frame-custom-option label {display:flex;flex-direction:column;gap:6px}
.frame-custom-question input[type=checkbox] {width:20px;height:20px}
.frame-custom-question textarea {width:100%;min-height:70px;resize:vertical}
.frame-custom-photo {max-width:100px;max-height:80px;object-fit:contain}
@media(max-width:900px){.frame-custom-option{grid-template-columns:1fr 1fr}.frame-custom-question{padding:12px}}
#frame-personalization-editor button:not(.frame-select-control):not(.frame-select-option) {border:1px solid #eadbcc;border-radius:10px;background:#fff;padding:10px 14px;font:inherit;font-size:14px;font-weight:600;color:#43352c;cursor:pointer;transition:background .15s,border-color .15s}
#frame-personalization-editor button:not(.frame-select-control):not(.frame-select-option):hover {background:#fff4eb;border-color:#f1641e}
#frame-personalization-editor button:disabled {opacity:.45;cursor:not-allowed}
#frame-personalization-editor [data-save-template],#frame-personalization-editor [data-print-export] {background:#f1641e!important;color:#fff!important;border-color:#f1641e!important}
#frame-personalization-editor [data-template-status] {color:#267c53;font-size:14px}
#frame-personalization-editor .frame-flatlay-stage {margin:20px 0}
.frame-custom-workbench {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin:16px 0}
.frame-custom-preview-panel {position:sticky;top:108px;min-width:0}
#frame-personalization-editor [data-layer-host] {width:100%}
#frame-personalization-editor .frame-flatlay-stage {display:block;aspect-ratio:1;min-height:0;padding:0;overflow:hidden}
#frame-personalization-editor .frame-custom-option {grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
#frame-personalization-editor .frame-custom-option label {grid-column:1/-1}
#frame-personalization-editor .frame-custom-check {display:flex;flex-direction:row;gap:10px;align-items:center}
#frame-personalization-editor .frame-custom-preview-panel [data-status] {min-height:24px;color:#a32316;overflow-wrap:anywhere}
#frame-personalization-editor [data-export-links] {display:flex;flex-direction:column;gap:8px;margin:12px 0}
#frame-personalization-editor [data-controls] {margin-top:20px}
#frame-personalization-editor .frame-output-controls button {margin:8px 8px 0 0}
@media(max-width:1150px){.frame-custom-workbench{grid-template-columns:1fr}.frame-custom-preview-panel{position:static;order:-1}.frame-custom-preview-panel .frame-flatlay-stage{max-width:560px;margin:0 auto}}
@media(max-width:640px){#frame-personalization-editor .frame-listing-form-grid{grid-template-columns:1fr}.frame-custom-workbench{gap:12px}}
/* Model settings flow with the page, without nested scroll containers. */
#frame-model-settings { min-width:0; max-width:100%; grid-column:1 / -1; width:100%; box-sizing:border-box; }
#frame-model-settings fieldset { min-width:0; border:1px solid var(--orange-line); border-radius:12px; padding:20px; margin:20px 0; }
#frame-model-settings legend { color:var(--orange); font-weight:700; padding:0 8px; }
.frame-model-global, .frame-model-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:20px; align-items:start; }
.frame-model-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:24px 0; }
.frame-model-table { display:grid; gap:24px; min-width:0; }
.frame-model-row { padding:20px; border:1px solid var(--orange-line); border-radius:12px; background:#fff; }
.frame-model-row > strong { grid-column:1 / -1; color:var(--orange); font-size:20px; }
.frame-model-row > button { align-self:end; min-height:46px; }
#frame-model-settings label { display:flex; min-width:0; flex-direction:column; gap:10px; font-size:16px; color:#111; }
#frame-model-settings select, #frame-model-settings input { box-sizing:border-box; width:100%; min-height:46px; font-size:16px; color:#111; padding:10px; }
#frame-model-settings input[hidden] { display:none; }
#frame-model-settings .frame-select { min-width:0; max-width:100%; }
#frame-model-settings .frame-select-label { white-space:normal; overflow-wrap:anywhere; min-width:0; font-size:16px; line-height:1.3; }
#frame-model-settings .frame-select-control { min-height:46px; padding:10px; gap:6px; }
#frame-model-settings .frame-help-heading { flex-wrap:wrap; overflow-wrap:anywhere; }
#mockup-list .mvp-job-task { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:640px) { .mockup-pod-head { flex-wrap:wrap; } }
/* V80: saved model settings remain readable without nested scrolling. */
.frame-mockup-overview {min-width:0; margin-top:20px; color:#111; white-space:normal; overflow-wrap:anywhere;}
.frame-mockup-brief {white-space:pre-wrap; font-size:17px; line-height:1.55; margin:0 0 20px;}
.frame-mockup-shared,.frame-mockup-model {min-width:0; padding:22px; border:1px solid #f1ded1; border-radius:14px; background:#fff;}
.frame-mockup-shared {background:#fff8f2; margin:18px 0;}
.frame-mockup-overview h4 {color:var(--orange); font-size:20px; margin:0 0 18px;}
.frame-mockup-models {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:18px;}
.frame-mockup-settings {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:18px 22px; margin:0;}
.frame-mockup-settings > div {min-width:0;}
.frame-mockup-settings dt {font-size:16px; line-height:1.4; color:#111; margin:0 0 5px;}
.frame-mockup-settings dd {font-size:17px; font-weight:600; line-height:1.45; margin:0; color:#111;}
.frame-model-fit {margin-top:24px; padding-top:20px; border-top:1px solid var(--orange-line);}
.frame-model-fit > button {display:flex; align-items:center; flex-wrap:wrap; gap:12px; border:0; padding:8px 0; background:transparent; color:#111; font-size:18px;}
.frame-model-fit > button strong {color:var(--orange); font-size:16px;}
.frame-fit-track {display:inline-flex; align-items:center; width:52px; height:30px; padding:3px; box-sizing:border-box; background:#777; border-radius:20px;}
.frame-fit-track > span {width:24px; height:24px; background:#fff; border-radius:50%; transition:transform .18s;}
.frame-model-fit [aria-checked=true] .frame-fit-track {background:var(--orange);}
.frame-model-fit [aria-checked=true] .frame-fit-track > span {transform:translateX(22px);}
.frame-model-fit > p {margin:8px 0 0; font-size:16px; line-height:1.5;}

button.frame-model-random {background:var(--orange); color:#fff; border:1px solid var(--orange); border-radius:12px; padding:12px 18px; font-size:17px; font-weight:700; cursor:pointer; box-shadow:0 3px 9px #ed6c1822;}
button.frame-model-random:hover {filter:brightness(.94);}
button.frame-model-random:focus-visible {outline:3px solid #111; outline-offset:3px;}
button.frame-model-random:disabled {opacity:.5; cursor:default;}

.seo-markets {display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 16px;}
.seo-markets button {padding:14px 20px; border:1px solid var(--orange); border-radius:12px; background:#fff; color:#111; font-size:18px; font-weight:700;}
.seo-markets button[aria-pressed=true] {background:var(--orange); color:#fff;}

.keyword-suggestions {color:#111;}
.keyword-suggestions h2,.keyword-suggestions h3 {color:var(--orange);}
.keyword-suggestions form {margin:28px 0; padding:24px; background:#fff8f2; border-radius:14px;}
.keyword-suggestions form label {display:block; margin:18px 0;}
.keyword-suggestions input[type=file] {max-width:100%;}
.keyword-suggestion {margin:18px 0; overflow-wrap:anywhere;}
.keyword-suggestion button {margin:8px 10px 0 0; font-size:17px;}

/* V84: compact saved color briefs; column widths remain unchanged. */
.frame-mockup-model {padding:14px 16px;}
#content .frame-mockup-model h4 {text-align:center; color:#414141; margin:0 0 12px; font-size:17px; line-height:1.25;}
.frame-mockup-model .frame-mockup-settings {gap:7px 16px;}
.frame-mockup-model .frame-mockup-settings dt {display:inline; color:var(--orange); font-size:14px; font-weight:700; line-height:1.4; margin:0;}
.frame-mockup-model .frame-mockup-settings dt::after {content:': ';}
.frame-mockup-model .frame-mockup-settings dd {display:inline; color:#414141; font-size:14px; font-weight:400; line-height:1.4; margin:0;}
.frame-product-facts {margin:24px 0; padding:22px; background:#fff; border:1px solid #f1ded1; border-radius:16px; color:#333;}
.frame-product-facts h3,.frame-product-facts h4 {color:var(--orange); margin:0 0 12px;}
.frame-product-facts p {line-height:1.55;}
.frame-product-facts-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:18px;}
.frame-product-facts-grid article {padding:16px; background:#faf8f6; border-radius:12px; min-width:0;}
.frame-product-facts dl {margin:0;}
.frame-product-facts dl div {display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; padding:6px 0; border-bottom:1px solid #eee;}
.frame-product-facts dt {font-weight:500;}
.frame-product-facts dd {margin:0;}
.frame-product-facts details {margin:16px 0;}
.frame-product-facts summary {cursor:pointer; font-weight:700; color:var(--orange);}

/* Dashboard availability starts collapsed; native details supports keyboard use. */
.frame-catalog-availability-toggle > summary {cursor:pointer; list-style:none; margin-bottom:0;}
.frame-catalog-availability-toggle > summary::-webkit-details-marker {display:none;}
.frame-catalog-availability-toggle > summary::after {content:'›'; color:var(--orange); font-size:30px; transition:transform .15s;}
.frame-catalog-availability-toggle[open] > summary {margin-bottom:20px;}
.frame-catalog-availability-toggle[open] > summary::after {transform:rotate(90deg);}

/* Standalone SEO text studio: flowing form, no nested scroll frames. */
.seo-text-studio {max-width:1140px;margin:0 auto;color:#333;}
.seo-text-studio h2,.seo-text-studio h3,.seo-text-studio h4 {color:var(--accent,#f49a38);}
.seo-text-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:24px 0 40px;}
.seo-text-form label {display:flex;flex-direction:column;gap:10px;font-size:17px;font-weight:600;min-width:0;}
.seo-text-form input:not([type=checkbox]),.seo-text-form textarea,.seo-text-form select {box-sizing:border-box;width:100%;padding:12px;font-family:inherit;font-size:17px;font-weight:400;line-height:1.5;color:#333;}
.seo-text-form textarea {resize:vertical;}
.seo-text-form small {font-size:15px;font-weight:400;line-height:1.5;}
.seo-text-wide {grid-column:1/-1;}
.seo-text-form .seo-personal {flex-direction:row;align-items:center;gap:12px;}
.seo-personal input {width:22px;height:22px;accent-color:var(--accent,#f49a38);}
.seo-photo-label img {max-width:240px;max-height:200px;object-fit:contain;border-radius:12px;}
.seo-text-draft {margin:24px 0;padding:24px;overflow-wrap:anywhere;}
.seo-draft-heading {display:flex;gap:20px;align-items:center;margin-bottom:24px;}
.seo-draft-heading img {width:100px;height:100px;object-fit:contain;border-radius:12px;}
.seo-draft-copy {margin:24px 0;}
.seo-draft-copy p {white-space:pre-wrap;font-size:17px;line-height:1.65;}
.seo-review-warning {padding:18px;border:1px solid var(--accent,#f49a38);border-radius:12px;margin:18px 0;background:#fff8f0;color:#333;}
.seo-text-draft details {margin:18px 0;}
.seo-text-draft summary {cursor:pointer;font-weight:600;}
.nav-item.seo-text-nav {padding-left:44px;font-size:15px;}
@media(max-width:650px){.seo-text-form{grid-template-columns:1fr;gap:20px;}.seo-draft-heading{align-items:flex-start;}.seo-draft-heading img{width:68px;height:68px;}.seo-text-draft{padding:16px;}}
/* Editable mockup projects: document scrolling only, no nested scroll frames. */
.mockup-edit {color:#303030;max-width:1280px;margin:auto}
.mockup-edit h2,.mockup-edit legend {color:var(--orange);font-weight:750}
.mockup-edit form {margin-top:24px}
.mockup-edit fieldset {min-width:0;margin:22px 0;padding:18px;border:1px solid var(--border);border-radius:14px}
.mockup-edit-fields {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px}
.mockup-edit-fields label {display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:650;color:var(--orange)}
.mockup-edit input,.mockup-edit select,.mockup-edit textarea {max-width:100%;min-width:0;color:#303030;font-size:16px}
.mockup-edit-choices {display:flex;flex-wrap:wrap;gap:12px 22px}
.mockup-edit-choices label,.mockup-edit-consent {display:flex;align-items:center;gap:8px;font-size:16px}
.mockup-edit input[type=checkbox] {width:18px;height:18px;flex:0 0 18px;accent-color:var(--orange)}
.mockup-edit-models {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.mockup-edit-models fieldset {margin:0}
.mockup-edit [hidden] {display:none!important}

.mockup-matrix-chip-v8.partially-available {cursor:pointer}
.mockup-matrix-chip-v8.partially-available input:checked + .mockup-matrix-chip-body-v8 {outline:2px solid var(--orange,#f47721);opacity:.65}
.mockup-availability-warnings p {color:#444;font-size:15px;margin:8px 0;padding:10px 14px;background:#fff4e7;border-radius:8px}
.mockup-edit .mockup-option-partial {color:#777;background:#f1efec;border-radius:8px;border:1px dashed #bbb;padding:4px;cursor:pointer}

/* V97: consistent editing sections and listing actions; natural page scrolling. */
.mockup-edit {padding:clamp(18px,3vw,36px);border-radius:20px;background:#fff}
.mockup-edit-heading {margin:26px 0 16px}
.mockup-edit-eyebrow {font-size:12px;font-weight:800;letter-spacing:.12em;color:#777}
.mockup-edit-heading h2 {margin:6px 0 8px;font-size:clamp(25px,3vw,34px)}
.mockup-edit-heading p,.mockup-edit-section>p {margin:8px 0 22px;line-height:1.6;color:#444}
.mockup-edit-note {padding:16px 20px;background:#fff6ed;border-left:3px solid var(--orange,#f47721);border-radius:10px;line-height:1.6}
.mockup-edit-section {margin:28px 0;padding:24px;background:#fafafa;border:1px solid #ece8e3;border-radius:16px}
.mockup-edit-section h3 {margin:0 0 12px;color:var(--orange,#f47721);font-size:21px}
.mockup-edit .mockup-edit-fields {gap:20px;align-items:start}
.mockup-edit .mockup-edit-fields>label {display:flex;flex-direction:column;gap:8px;color:#333;font-weight:600;font-size:15px}
.mockup-edit .mockup-edit-fields :is(input,select,textarea) {width:100%;box-sizing:border-box;border:1px solid #dcd8d2;border-radius:10px;background:#fff;padding:12px 14px;min-height:46px;font-size:16px;font-weight:400;color:#303030}
.mockup-edit .mockup-edit-fields :is(input,select,textarea):focus {outline:2px solid #f58a38;outline-offset:2px}
.mockup-edit-wide {grid-column:1/-1}
.mockup-edit fieldset {background:#fff;padding:20px;margin:18px 0 0}
.mockup-edit legend {padding:0 8px;font-size:16px}
.mockup-edit .mockup-edit-choices {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,145px),1fr));gap:10px}
.mockup-edit .mockup-edit-choice {display:flex;align-items:center;gap:9px;padding:12px 10px;border:1px solid #e4dfd9;border-radius:10px;min-height:44px;box-sizing:border-box;font-size:14px;cursor:pointer;background:#fff;color:#333}
.mockup-edit .mockup-edit-choice:has(input:checked) {border-color:#f47721;box-shadow:inset 0 0 0 1px #f47721;background:#fff7ef}
.mockup-edit .mockup-option-partial {background:#f0efed;color:#777;border-style:dashed}
.mockup-edit-swatch {width:16px;height:16px;border-radius:50%;border:1px solid #bbb;flex-shrink:0}
.mockup-edit-selection-actions {display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.mockup-edit-selection-actions .mvp-secondary {padding:8px 12px;font-size:13px;min-height:36px}
.mockup-edit .mockup-edit-models {margin-top:16px;gap:18px}
.mockup-edit .mockup-edit-models legend {color:#383838;text-align:center;font-weight:700}
.mockup-edit-save {justify-content:flex-start;margin-top:26px;padding-top:22px;border-top:1px solid #eee}
.mockup-edit-save p:empty {display:none}
.seo-listing-actions {display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin:20px 0 10px}
.seo-listing-actions>button {flex:1 1 250px;margin:0;min-height:48px;padding:12px 18px;border-radius:12px;font-size:16px;line-height:1.4;white-space:normal;text-align:center}
.frame-listing-review-actions,.frame-listing-photo-review-head-v7,.frame-listing-photo-toolbar-v7 {gap:14px;align-items:center;flex-wrap:wrap}
.frame-listing-review-actions :is(button,a),.frame-listing-photo-review-v7 button:not(.frame-listing-photo-zoom-v7),.frame-save-video-sources-v2 {min-height:44px;border-radius:11px;font-size:15px;line-height:1.4;padding:11px 16px;white-space:normal}
.frame-listing-review-actions {padding-top:20px;margin-top:20px;border-top:1px solid #eee;justify-content:flex-end}
.frame-listing-photo-actions-v7:empty {display:none}
@media(max-width:600px){.mockup-edit-section{padding:16px}.mockup-edit fieldset{padding:14px}.seo-listing-actions>button,.frame-listing-review-actions :is(button,a){width:100%;flex-basis:100%}.mockup-edit .mockup-edit-fields{grid-template-columns:1fr}.mockup-edit .mockup-edit-models{grid-template-columns:1fr}}

/* Separate shop/category style examples; no inner scrolling. */
.listing-reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.listing-reference-card{min-width:0;background:#faf8f5;border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px}
.listing-reference-card h4{color:var(--orange);font-size:21px;margin:0}
.listing-reference-card .listing-info-title-field{margin:8px 0 0}
.listing-reference-card>button{align-self:flex-start}
.listing-reference-card [data-reference-gallery]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.listing-reference-card figure{margin:0;min-width:0}
.listing-reference-card figure img{width:100%;aspect-ratio:1;object-fit:contain;background:white;border-radius:10px;border:1px solid var(--border)}
.listing-reference-card figcaption{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;padding-top:8px}
.listing-reference-card figcaption button{border:0;background:none;color:#93410c;text-decoration:underline;padding:4px;cursor:pointer;font-size:14px}
.listing-reference-card .listing-reference-empty{grid-column:1/-1;background:white;border:1px dashed #c9c1b7;border-radius:10px;padding:22px;text-align:center;margin:0;color:#454545}
.listing-reference-card .listing-reference-note{font-size:14px;line-height:1.5;color:#454545;margin:0}
.listing-reference-card [data-reference-selection]:empty{display:none}
.listing-reference-upload input{max-width:100%;font-size:15px}
.listing-reference-upload input::file-selector-button{border:0;border-radius:8px;background:var(--orange);color:white;padding:10px 12px;margin-right:10px;cursor:pointer}
@media(max-width:850px){.listing-reference-grid{grid-template-columns:1fr}.listing-reference-card{padding:18px}}

.listing-info-use{border:1px solid #ddd4cb;border-radius:12px;padding:14px;margin:0;min-width:0}
.listing-info-use legend{font-weight:700;color:var(--orange);padding:0 6px;font-size:16px}
.listing-info-page .listing-info-use label{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-size:16px;line-height:1.5;font-weight:400;margin:8px 0}
.listing-info-use input[type=radio]{accent-color:var(--orange);flex:0 0 18px;width:18px;height:18px;margin-top:3px}
.info-image-target{line-height:1.5;color:#333}.info-image-target strong{color:var(--orange)}

/* V105: inline checks; no nested scroll region. */
.info-check-panel { grid-column:1 / -1; margin-top:24px; }
.info-check-heading,.info-check-actions {display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;}
.info-check-actions {justify-content:flex-start;margin-top:20px;}
.info-check-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin:18px 0;}
.info-check-list article {border:1px solid #eadfd6;border-radius:14px;padding:16px;background:#fff;}
.info-check-list strong,.info-check-list span,.info-check-list b {display:block;line-height:1.5;}
.info-check-list strong {color:var(--frame-orange,#f47721);}
.info-check-list span {font-size:14px;color:#333;}
.info-check-panel button {white-space:normal;}

/* Square, optional listing video editor V118. No nested scrolling. */
.listing-video-editor{padding:24px;border:1px solid #eadfd7;border-radius:18px;background:#fffaf7;margin:24px 0;color:#292929}
.listing-video-editor h3,.listing-video-editor h4{color:var(--accent,#f47721);margin:0 0 14px}.listing-video-editor h3 small{font-size:15px;color:#555;font-weight:400}
.listing-video-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:22px}
.listing-video-card{padding:20px;background:white;border:1px solid #e6ded8;border-radius:14px;min-width:0}
.listing-video-card fieldset{padding:0;border:0;margin:20px 0;min-width:0}.listing-video-card legend{font-weight:700;margin-bottom:12px}.listing-video-card label{display:flex;flex-direction:column;gap:8px;margin:16px 0;font-size:16px;color:#292929}
.listing-video-card input:not([type=checkbox]),.listing-video-card select{width:100%;box-sizing:border-box;padding:11px;border:1px solid #ccc;border-radius:8px;font-size:16px;background:#fff;color:#222}
.video-photo-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.video-photo-choices label{position:relative;display:block;margin:0;padding:6px;border:2px solid #eee;border-radius:10px;cursor:pointer}.video-photo-choices label:has(input:checked){border-color:#f47721;background:#fff5ed}.video-photo-choices img{width:100%;aspect-ratio:1;object-fit:contain;display:block}.video-photo-choices input{position:absolute;top:9px;left:9px;width:19px;height:19px;accent-color:#f47721}.video-photo-choices span{display:block;text-align:center;margin-top:5px;font-size:14px}
.video-photo-order{margin:14px 0}.video-order-row{display:flex;gap:8px;align-items:center;margin:8px 0}.video-order-row span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}.video-order-row button{padding:7px 11px;border:1px solid #ddd;background:#fff7f0;border-radius:7px;color:#b95000;cursor:pointer}.video-order-row button:disabled{opacity:.4}
.video-options{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.video-options>label{flex:1;min-width:150px}.video-options .video-logo-option{flex-direction:row;align-items:center}.video-logo-option input{accent-color:#f47721;width:20px;height:20px}.listing-video-card [data-logo-info]{font-size:14px;color:#555}.listing-video-card video{display:block;width:100%;aspect-ratio:1;border-radius:10px;background:#fafafa;margin-bottom:12px}.listing-video-card progress{width:100%;accent-color:#f47721}.listing-video-card [data-render]{width:100%;margin-top:8px}.video-state{font-size:15px;min-height:22px}
@media(max-width:950px){.listing-video-cards{grid-template-columns:1fr}.listing-video-editor{padding:16px}.listing-video-card{padding:16px}}

.video-order-row {flex-wrap:wrap}.video-photo-caption {flex:0 0 100%;display:grid;gap:6px}.video-photo-caption input {width:100%;box-sizing:border-box}
.listing-image-order-editor{padding:22px;background:#fff;border:1px solid #e5ded7;border-radius:16px;margin:0 0 26px}.listing-image-order-editor h3{color:var(--accent,#ff7900);margin-top:0}.listing-order-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.listing-order-tile{min-width:0;border:1px solid #ddd;border-radius:12px;overflow:hidden;background:#fff}.listing-order-tile.is-main{border:2px solid #ff7900}.listing-order-position{font-size:15px;font-weight:700;padding:10px;color:#444}.is-main .listing-order-position{color:#c85400;background:#fff4e9}.listing-order-preview{display:block;padding:0;border:0;background:#fafafa;width:100%;cursor:zoom-in}.listing-order-preview img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.listing-order-controls{display:flex;gap:5px;padding:9px;flex-wrap:wrap}.listing-order-controls button{padding:7px;border:1px solid #ddd;border-radius:7px;background:#fff7f0;color:#9b4300;font-size:13px;cursor:pointer}.listing-order-controls button:disabled{opacity:.35;cursor:default}.listing-order-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}.listing-order-lightbox{border:0;border-radius:12px;max-width:90vw;max-height:90vh;padding:12px}.listing-order-lightbox img{display:block;max-width:85vw;max-height:78vh;object-fit:contain}.listing-order-lightbox::backdrop{background:#0009}@media(max-width:600px){.listing-image-order-editor{padding:12px}.listing-order-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.listing-order-controls button{font-size:12px}.listing-order-position{font-size:13px}}
.listing-order-position{cursor:grab}.listing-order-position:active{cursor:grabbing}@media(max-width:600px){.listing-order-grid{grid-template-columns:1fr}.listing-order-controls{justify-content:space-between}.listing-order-controls button{font-size:14px}}
.listing-order-video{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#171717}.listing-order-video-note{padding:8px 10px;color:#555;font-size:14px;margin:0}