.logo-bg-matcher-section{
    background:#fff;
    padding:110px 0;
}

.logo-bg-matcher-shell{
    display:grid;
    gap:34px;
}

.logo-bg-matcher-intro{
    margin:0 auto 6px;
    max-width:980px;
}

.logo-bg-matcher-intro h5{
    color:#777;
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
    line-height:1.3;
    margin:0 0 12px;
}

.logo-bg-matcher-intro h1{
    margin:0;
}

.logo-bg-matcher-intro p{
    color:#6f6a7a;
    font-size:16px;
    font-weight:400;
    line-height:1.7;
    margin:18px auto 0;
    max-width:760px;
}

.logo-bg-matcher-tool{
    display:grid;
    gap:20px;
    grid-template-columns:minmax(320px, .82fr) minmax(0, 1.18fr);
    margin:0 auto;
    max-width:1180px;
    width:100%;
}

.logo-bg-matcher-sidebar{
    display:grid;
    gap:20px;
    align-content:start;
}

.logo-bg-matcher-panel{
    background:#fff;
    border:1px solid rgba(25,25,31,.08);
    border-radius:20px;
    box-shadow:0 32px 90px -74px rgba(25,25,31,.58);
    padding:26px;
}

.logo-bg-matcher-panel-head,
.logo-bg-matcher-result-head{
    align-items:flex-start;
    display:flex;
    gap:18px;
    justify-content:space-between;
    margin-bottom:22px;
}

.logo-bg-matcher-panel h2,
.logo-bg-matcher-result-head h2{
    color:#19191f;
    font-size:24px;
    font-weight:600;
    letter-spacing:0;
    line-height:1.14;
    margin:0;
}

.logo-bg-matcher-panel-head p,
.logo-bg-matcher-result-head p{
    color:#8a8495;
    font-size:13px;
    font-weight:400;
    line-height:1.5;
    margin:8px 0 0;
}

.logo-bg-matcher-result-head > div > span,
.logo-bg-matcher-marketing-head > span,
.logo-bg-matcher-review-cta span{
    color:#6b39f4;
    display:block;
    font-size:12px;
    font-weight:600;
    letter-spacing:0;
    line-height:1;
    margin-bottom:10px;
}

.logo-bg-matcher-icon-button,
.logo-bg-matcher-primary-button,
.logo-bg-matcher-secondary-button,
.logo-bg-matcher-upload-button{
    align-items:center;
    border:0;
    border-radius:999px;
    cursor:pointer;
    display:inline-flex;
    font-size:14px;
    font-weight:500;
    gap:8px;
    justify-content:center;
    letter-spacing:0;
    line-height:1;
    min-height:42px;
    padding:0 18px;
    text-decoration:none;
    transition:background .18s ease, color .18s ease, opacity .18s ease, transform .18s ease, border-color .18s ease;
    white-space:nowrap;
}

.logo-bg-matcher-primary-button{
    background:#6b39f4;
    color:#fff;
}

.logo-bg-matcher-primary-button:hover,
.logo-bg-matcher-primary-button:focus{
    background:#5d31dd;
    color:#fff;
    text-decoration:none;
    transform:translateY(-1px);
}

.logo-bg-matcher-secondary-button,
.logo-bg-matcher-upload-button{
    background:#f7f7ff;
    color:#5f596b;
}

.logo-bg-matcher-secondary-button:hover,
.logo-bg-matcher-secondary-button:focus,
.logo-bg-matcher-upload-button:hover,
.logo-bg-matcher-upload-button:focus{
    background:#f1edff;
    color:#6b39f4;
    text-decoration:none;
}

.logo-bg-matcher-icon-button{
    background:#f7f7ff;
    color:#6b39f4;
    flex:0 0 42px;
    font-size:20px;
    min-width:42px;
    padding:0;
}

.logo-bg-matcher-icon-button:hover,
.logo-bg-matcher-icon-button:focus{
    background:#f1edff;
    color:#5d31dd;
}

.logo-bg-matcher-primary-button:disabled,
.logo-bg-matcher-secondary-button:disabled,
.logo-bg-matcher-upload-button:disabled{
    cursor:not-allowed;
    opacity:.48;
    transform:none;
}

.logo-bg-matcher-version-list{
    display:grid;
    gap:12px;
}

.logo-bg-matcher-version-card{
    background:#fbfbff;
    border:1px dashed rgba(107,57,244,.22);
    border-radius:18px;
    display:grid;
    gap:12px;
    padding:12px;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.logo-bg-matcher-version-card.is-drag-over,
.logo-bg-matcher-version-card:focus-within{
    background:#fff;
    border-color:rgba(107,57,244,.7);
    box-shadow:0 0 0 4px rgba(107,57,244,.08);
}

.logo-bg-matcher-version-card.has-svg{
    border-style:solid;
}

.logo-bg-matcher-version-top{
    align-items:center;
    display:grid;
    gap:10px;
    grid-template-columns:minmax(0, 1fr) auto auto;
}

.logo-bg-matcher-version-name{
    background:#fff;
    border:1px solid rgba(25,25,31,.08);
    border-radius:12px;
    color:#19191f;
    font-size:14px;
    font-weight:500;
    height:40px;
    min-width:0;
    outline:0;
    padding:0 12px;
}

.logo-bg-matcher-version-name:focus{
    border-color:rgba(107,57,244,.54);
    box-shadow:0 0 0 4px rgba(107,57,244,.08);
}

.logo-bg-matcher-remove-button{
    align-items:center;
    background:#fff;
    border:1px solid rgba(25,25,31,.08);
    border-radius:50%;
    color:#8a8495;
    cursor:pointer;
    display:inline-flex;
    height:40px;
    justify-content:center;
    padding:0;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
    width:40px;
}

.logo-bg-matcher-remove-button:hover,
.logo-bg-matcher-remove-button:focus{
    background:#fff1f2;
    border-color:rgba(217,67,73,.18);
    color:#d94349;
}

.logo-bg-matcher-logo-preview{
    align-items:center;
    background:#fff;
    border:1px solid rgba(25,25,31,.07);
    border-radius:16px;
    display:flex;
    justify-content:center;
    min-height:140px;
    overflow:hidden;
    padding:18px;
    text-align:center;
}

.logo-bg-matcher-logo-preview svg{
    display:block;
    height:auto;
    max-height:108px;
    max-width:100%;
}

.logo-bg-matcher-empty-slot{
    align-items:center;
    color:#8a8495;
    display:flex;
    flex-direction:column;
    font-size:13px;
    font-weight:400;
    gap:8px;
    line-height:1.4;
}

.logo-bg-matcher-empty-slot i{
    color:#6b39f4;
    font-size:22px;
}

.logo-bg-matcher-color-list{
    border-radius:18px;
    display:grid;
    gap:12px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    outline:0;
}

.logo-bg-matcher-color-list:focus-visible{
    box-shadow:0 0 0 4px rgba(107,57,244,.12);
}

.logo-bg-matcher-color-row{
    background:#fbfbff;
    border:1px solid rgba(25,25,31,.06);
    border-radius:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
    padding:12px;
}

.logo-bg-matcher-color-main{
    align-items:center;
    display:grid;
    gap:10px;
    grid-template-columns:auto minmax(0, 1fr) auto;
    min-width:0;
}

.logo-bg-matcher-color-chip{
    border:1px solid rgba(25,25,31,.12);
    border-radius:999px;
    height:34px;
    overflow:hidden;
    width:34px;
}

.logo-bg-matcher-color-chip input{
    border:0;
    cursor:pointer;
    height:46px;
    margin:-6px;
    padding:0;
    width:46px;
}

.logo-bg-matcher-color-copy{
    display:grid;
    gap:4px;
    min-width:0;
}

.logo-bg-matcher-color-copy > input{
    background:transparent;
    border:0;
    color:#292334;
    font-size:14px;
    font-weight:500;
    min-width:0;
    outline:0;
    padding:0;
}

.logo-bg-matcher-color-copy > input:focus{
    color:#6b39f4;
}

.logo-bg-matcher-color-copy span{
    color:#9994a5;
    font-size:12px;
    font-weight:400;
    line-height:1;
}

.logo-bg-matcher-color-type{
    color:#9d96aa !important;
    font-size:11px !important;
    font-weight:400 !important;
    letter-spacing:0;
    min-height:12px;
    text-transform:none;
}

.logo-bg-matcher-color-remove-button{
    background:transparent;
    border:0;
    color:#aaa5b5;
    cursor:pointer;
    flex:0 0 auto;
    font-size:22px;
    line-height:1;
    padding:4px;
}

.logo-bg-matcher-color-remove-button:hover,
.logo-bg-matcher-color-remove-button:focus{
    color:#be3845;
}

.logo-bg-matcher-color-details{
    border-top:1px solid rgba(25,25,31,.06);
    display:grid;
    gap:6px;
    padding-top:9px;
}

.logo-bg-matcher-color-details > span{
    color:#8f899b;
    font-size:12px;
    font-weight:400;
    line-height:1;
}

.logo-bg-matcher-palette-footnote{
    color:#8a8495;
    font-size:13px;
    font-weight:400;
    line-height:1.55;
    margin:16px 0 0;
}

.logo-bg-matcher-palette-footnote a{
    color:#6f6a7a;
    text-decoration:underline;
    text-decoration-color:rgba(107,57,244,.32);
}

.logo-bg-matcher-palette-footnote a:hover{
    color:#6b39f4;
}

.logo-bg-matcher-size-list{
    display:grid;
    gap:10px;
}

.logo-bg-matcher-size-list label{
    align-items:center;
    background:#fbfbff;
    border:1px solid rgba(25,25,31,.07);
    border-radius:16px;
    cursor:pointer;
    display:grid;
    gap:12px;
    grid-template-columns:auto minmax(0, 1fr);
    margin:0;
    padding:13px 14px;
}

.logo-bg-matcher-size-list input{
    accent-color:#6b39f4;
}

.logo-bg-matcher-size-list strong{
    color:#19191f;
    display:block;
    font-size:14px;
    font-weight:500;
    line-height:1.1;
}

.logo-bg-matcher-size-list small{
    color:#8a8495;
    display:block;
    font-size:12px;
    font-weight:400;
    margin-top:4px;
}

.logo-bg-matcher-range-field{
    display:grid;
    gap:8px;
    margin:18px 0 0;
}

.logo-bg-matcher-contrast-field{
    background:#fbfbff;
    border:1px solid rgba(25,25,31,.06);
    border-radius:16px;
    margin:0 0 16px;
    padding:14px;
}

.logo-bg-matcher-logo-size-field{
    background:#fbfbff;
    border:1px solid rgba(25,25,31,.06);
    border-radius:16px;
    margin:14px 0 0;
    padding:14px;
}

.logo-bg-matcher-range-field span{
    color:#19191f;
    font-size:13px;
    font-weight:500;
    line-height:1.2;
}

.logo-bg-matcher-range-field strong{
    color:#6b39f4;
    font-weight:500;
}

.logo-bg-matcher-range-field input{
    accent-color:#6b39f4;
    width:100%;
}

.logo-bg-matcher-results-panel{
    align-content:start;
    display:grid;
    gap:18px;
}

.logo-bg-matcher-result-head{
    align-items:center;
    margin-bottom:0;
}

.logo-bg-matcher-preview-grid{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    max-height:780px;
    overflow:auto;
    padding-right:4px;
}

.logo-bg-matcher-preview-card{
    background:#fbfbff;
    border:1px solid rgba(25,25,31,.07);
    border-radius:18px;
    display:grid;
    gap:10px;
    min-width:0;
    padding:12px;
}

.logo-bg-matcher-preview-canvas-wrap{
    align-items:center;
    border-radius:14px;
    display:flex;
    justify-content:center;
    min-height:168px;
    overflow:hidden;
    position:relative;
}

.logo-bg-matcher-preview-canvas-wrap canvas{
    border-radius:12px;
    display:block;
    height:auto;
    max-height:170px;
    max-width:100%;
}

.logo-bg-matcher-preview-download{
    align-items:center;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(25,25,31,.08);
    border-radius:999px;
    box-shadow:0 12px 28px -22px rgba(25,25,31,.65);
    color:#5f596b;
    cursor:pointer;
    display:inline-flex;
    height:34px;
    justify-content:center;
    padding:0;
    position:absolute;
    right:10px;
    top:10px;
    transition:background .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
    width:34px;
}

.logo-bg-matcher-preview-download:hover,
.logo-bg-matcher-preview-download:focus{
    background:#fff;
    color:#6b39f4;
    transform:translateY(-1px);
}

.logo-bg-matcher-preview-download:disabled{
    cursor:not-allowed;
    opacity:.62;
    transform:none;
}

.logo-bg-matcher-preview-meta{
    display:grid;
    gap:6px;
}

.logo-bg-matcher-preview-meta strong{
    color:#19191f;
    font-size:13px;
    font-weight:600;
    line-height:1.25;
}

.logo-bg-matcher-preview-meta span,
.logo-bg-matcher-preview-meta small{
    color:#8a8495;
    font-size:12px;
    font-weight:400;
    line-height:1.35;
}

.logo-bg-matcher-preview-meta em{
    color:#6b39f4;
    font-style:normal;
    font-weight:500;
}

.logo-bg-matcher-empty{
    align-items:center;
    background:#fbfbff;
    border:1px solid rgba(25,25,31,.07);
    border-radius:18px;
    color:#6f6a7a;
    display:grid;
    gap:8px;
    min-height:280px;
    padding:34px;
    text-align:center;
}

.logo-bg-matcher-empty strong{
    color:#19191f;
    font-size:22px;
    font-weight:600;
    line-height:1.2;
}

.logo-bg-matcher-empty p{
    color:#8a8495;
    font-size:15px;
    font-weight:400;
    line-height:1.65;
    margin:0 auto;
    max-width:520px;
}

.logo-bg-matcher-toast{
    background:#19191f;
    border-radius:999px;
    bottom:24px;
    box-shadow:0 22px 60px -32px rgba(25,25,31,.7);
    color:#fff;
    font-size:14px;
    font-weight:500;
    left:50%;
    line-height:1.2;
    opacity:0;
    padding:13px 18px;
    pointer-events:none;
    position:fixed;
    transform:translate(-50%, 12px);
    transition:opacity .2s ease, transform .2s ease;
    z-index:9999;
}

.logo-bg-matcher-toast.is-visible{
    opacity:1;
    transform:translate(-50%, 0);
}

.logo-bg-matcher-marketing{
    display:grid;
    gap:28px;
    margin-top:34px;
}

.logo-bg-matcher-review-cta,
.logo-bg-matcher-marketing-grid article,
.logo-bg-matcher-faq-section{
    background:#fff;
    border:1px solid rgba(25,25,31,.08);
    border-radius:20px;
    box-shadow:0 28px 80px -68px rgba(25,25,31,.62);
}

.logo-bg-matcher-review-cta{
    align-items:center;
    display:grid;
    gap:22px;
    grid-template-columns:minmax(0, 1fr) auto;
    padding:30px 34px;
}

.logo-bg-matcher-review-cta h2{
    color:#19191f;
    font-size:28px;
    font-weight:600;
    letter-spacing:0;
    line-height:1.15;
    margin:0;
}

.logo-bg-matcher-review-cta p{
    color:#6f6a7a;
    font-size:15px;
    font-weight:400;
    line-height:1.65;
    margin:12px 0 0;
    max-width:680px;
}

.logo-bg-matcher-review-actions{
    align-items:center;
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.logo-bg-matcher-marketing-head{
    margin:0 auto;
    max-width:820px;
    text-align:center;
}

.logo-bg-matcher-marketing-head h2{
    color:#19191f;
    font-size:38px;
    font-weight:600;
    letter-spacing:0;
    line-height:1.12;
    margin:0;
}

.logo-bg-matcher-marketing-head p{
    color:#6f6a7a;
    font-size:16px;
    font-weight:400;
    line-height:1.7;
    margin:14px auto 0;
    max-width:760px;
}

.logo-bg-matcher-marketing-grid{
    display:grid;
    gap:18px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.logo-bg-matcher-marketing-grid article{
    padding:30px;
}

.logo-bg-matcher-marketing-grid article > span{
    align-items:center;
    background:#f7f7ff;
    border:1px solid rgba(107,57,244,.12);
    border-radius:999px;
    color:#6b39f4;
    display:inline-flex;
    font-size:12px;
    font-weight:600;
    height:34px;
    justify-content:center;
    line-height:1;
    margin-bottom:22px;
    width:34px;
}

.logo-bg-matcher-marketing-grid h3{
    color:#19191f;
    font-size:22px;
    font-weight:600;
    letter-spacing:0;
    line-height:1.15;
    margin:0 0 14px;
}

.logo-bg-matcher-marketing-grid p{
    color:#6f6a7a;
    font-size:15px;
    font-weight:400;
    line-height:1.7;
    margin:0;
}

.logo-bg-matcher-faq-section{
    display:grid;
    gap:24px;
    padding:34px;
}

.logo-bg-matcher-faq-list{
    display:grid;
    gap:12px;
}

.logo-bg-matcher-faq-list details{
    background:#fbfbff;
    border:1px solid rgba(25,25,31,.07);
    border-radius:16px;
    padding:0 18px;
}

.logo-bg-matcher-faq-list summary{
    color:#19191f;
    cursor:pointer;
    font-size:16px;
    font-weight:500;
    line-height:1.4;
    padding:18px 0;
}

.logo-bg-matcher-faq-list p{
    color:#6f6a7a;
    font-size:15px;
    font-weight:400;
    line-height:1.7;
    margin:0;
    padding:0 0 18px;
}

@media (max-width: 1199px){
    .logo-bg-matcher-tool{
        grid-template-columns:1fr;
    }

    .logo-bg-matcher-sidebar{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .logo-bg-matcher-settings-panel{
        grid-column:1 / -1;
    }
}

@media (max-width: 991px){
    .logo-bg-matcher-section{
        padding:90px 0;
    }

    .logo-bg-matcher-sidebar,
    .logo-bg-matcher-review-cta,
    .logo-bg-matcher-marketing-grid{
        grid-template-columns:1fr;
    }

    .logo-bg-matcher-preview-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        max-height:none;
    }

    .logo-bg-matcher-marketing-head h2{
        font-size:32px;
    }

    .logo-bg-matcher-review-actions{
        justify-content:flex-start;
    }
}

@media (max-width: 575px){
    .logo-bg-matcher-section{
        padding:76px 0;
    }

    .logo-bg-matcher-shell{
        gap:22px;
    }

    .logo-bg-matcher-panel,
    .logo-bg-matcher-review-cta,
    .logo-bg-matcher-marketing-grid article,
    .logo-bg-matcher-faq-section{
        padding:22px;
    }

    .logo-bg-matcher-panel-head,
    .logo-bg-matcher-result-head{
        align-items:stretch;
        flex-direction:column;
    }

    .logo-bg-matcher-color-list,
    .logo-bg-matcher-preview-grid{
        grid-template-columns:1fr;
    }

    .logo-bg-matcher-review-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .logo-bg-matcher-primary-button,
    .logo-bg-matcher-secondary-button{
        width:100%;
    }

    .logo-bg-matcher-marketing-head h2{
        font-size:28px;
    }

    .logo-bg-matcher-review-cta h2{
        font-size:24px;
    }
}