:root{
--blue:#075bd8;
--navy:#071c3f;
--navy2:#0b315f;
--white:#fff;
--bg:#f5f8fc;
--text:#122036;
--muted:#6d788b;
--border:#dfe6ef;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color:var(--text);
background:#fff;
}

a{
text-decoration:none;
color:inherit;
}

button,input{
font:inherit;
}

img{
max-width:100%;
}

.container{
width:min(1160px,calc(100% - 32px));
margin:auto;
}

.header{
height:72px;
display:flex;
align-items:center;
position:sticky;
top:0;
z-index:100;
background:rgba(255,255,255,.96);
border-bottom:1px solid var(--border);
backdrop-filter:blur(10px);
}

.header-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}

.brand{
font-weight:900;
font-size:20px;
color:var(--navy);
}

.brand span{
color:var(--blue);
}

nav{
display:flex;
gap:26px;
font-size:14px;
font-weight:600;
}

nav a:hover{
color:var(--blue);
}

.header-button{
background:var(--blue);
color:#fff;
padding:11px 18px;
border-radius:10px;
font-size:13px;
font-weight:800;
}

.hero{
padding:80px 0;
overflow:hidden;
background:
radial-gradient(circle at 85% 15%,rgba(7,91,216,.18),transparent 30%),
linear-gradient(135deg,#f7fbff,#fff 60%,#edf5ff);
}

.hero-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
align-items:center;
gap:70px;
}

.eyebrow{
display:inline-block;
padding:7px 13px;
background:#e8f2ff;
color:var(--blue);
border-radius:30px;
font-size:12px;
font-weight:900;
letter-spacing:.8px;
}

.hero h1{
font-size:clamp(42px,5vw,68px);
line-height:1;
letter-spacing:-3px;
margin:20px 0;
}

.hero h1 span{
color:var(--blue);
}

.hero-text p{
max-width:600px;
font-size:18px;
line-height:1.65;
color:var(--muted);
}

.hero-actions{
display:flex;
gap:12px;
margin-top:30px;
}

.button{
min-height:50px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 24px;
border:0;
border-radius:12px;
cursor:pointer;
font-weight:800;
}

.button.primary{
background:var(--blue);
color:#fff;
box-shadow:0 10px 30px rgba(7,91,216,.2);
}

.button.secondary{
background:#fff;
color:var(--navy);
border:1px solid var(--border);
}

.button.white{
background:#fff;
color:var(--navy);
}

.full{
width:100%;
margin-top:10px;
}

.hero-art{
text-align:center;
}

.frame-box{
width:min(400px,100%);
aspect-ratio:1;
position:relative;
margin:auto;
border-radius:50%;
overflow:hidden;
background:#dce7f3;
box-shadow:0 25px 70px rgba(7,28,63,.16);
}

.frame-background{
position:absolute;
inset:0;
display:grid;
place-items:center;
color:#94a6bb;
font-weight:800;
}

.frame-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
}

.hero-art p{
color:var(--muted);
font-size:13px;
}

.section,
.models{
padding:90px 0;
}

.models{
background:var(--bg);
}

.section-heading{
max-width:720px;
margin:0 auto 45px;
text-align:center;
}

.section-heading span{
font-size:11px;
font-weight:900;
letter-spacing:1.5px;
color:var(--blue);
}

.section-heading h2{
margin:9px 0;
font-size:clamp(30px,4vw,45px);
letter-spacing:-1.5px;
}

.steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}

.steps article{
border:1px solid var(--border);
padding:28px;
border-radius:20px;
}

.number{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:12px;
background:var(--blue);
color:#fff;
font-weight:900;
}

.steps h3{
margin:18px 0 8px;
}

.steps p,
.model-card p{
color:var(--muted);
line-height:1.55;
}

.models-grid{
max-width:820px;
margin:auto;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
}

.model-card{
background:#fff;
border:1px solid var(--border);
padding:27px;
border-radius:24px;
}

.model-card:not(.disabled):hover{
transform:translateY(-3px);
box-shadow:0 15px 40px rgba(7,28,63,.09);
}

.model-card strong{
color:var(--blue);
}

.circle-example{
width:180px;
height:180px;
margin:0 auto 24px;
border-radius:50%;
background:#dce7f3;
overflow:hidden;
}

.circle-example img{
width:100%;
height:100%;
object-fit:contain;
}

.story-example{
height:210px;
width:118px;
margin:0 auto 24px;
display:grid;
place-items:center;
border-radius:15px;
background:linear-gradient(150deg,var(--blue),var(--navy));
color:#fff;
font-weight:900;
font-size:23px;
}

.final-cta{
padding:75px 0;
text-align:center;
color:#fff;
background:linear-gradient(135deg,var(--navy),var(--blue));
}

.final-cta h2{
font-size:clamp(34px,5vw,50px);
margin:0;
}

.final-cta p{
color:#d8e7f8;
}

.footer{
background:#041225;
color:#fff;
padding-top:48px;
}

.footer-content{
display:flex;
justify-content:space-between;
gap:40px;
}

.footer-brand{
font-size:19px;
font-weight:900;
}

.footer p{
color:#98a7bb;
}

.footer-links{
display:flex;
flex-wrap:wrap;
gap:20px;
font-size:13px;
color:#c1ccda;
}

.copyright{
border-top:1px solid rgba(255,255,255,.08);
text-align:center;
margin-top:35px;
padding:18px;
font-size:12px;
color:#76879d;
}

/* EDITOR */

.tool{
min-height:calc(100vh - 72px);
padding:55px 0 90px;
background:var(--bg);
}

.tool-heading{
text-align:center;
max-width:720px;
margin:0 auto 40px;
}

.tool-heading h1{
font-size:clamp(34px,5vw,50px);
letter-spacing:-2px;
margin:12px 0;
}

.tool-heading p{
color:var(--muted);
}

.editor{
display:grid;
grid-template-columns:310px minmax(0,590px);
justify-content:center;
align-items:start;
gap:35px;
}

.editor-controls{
background:#fff;
border:1px solid var(--border);
padding:22px;
border-radius:20px;
}

.control-section + .control-section{
border-top:1px solid var(--border);
padding-top:22px;
margin-top:22px;
}

.control-title,
.control-section label{
display:block;
font-weight:800;
font-size:13px;
margin-bottom:10px;
}

.upload{
min-height:54px;
display:flex!important;
align-items:center;
justify-content:center;
border:2px dashed #b8c7da;
border-radius:13px;
background:#f7fbff;
color:var(--blue);
cursor:pointer;
}

#zoom{
width:100%;
}

.canvas-wrapper{
width:100%;
aspect-ratio:1;
position:relative;
overflow:hidden;
border-radius:50%;
background:#e3eaf3;
box-shadow:0 20px 60px rgba(7,28,63,.13);
touch-action:none;
}

#canvas{
display:block;
width:100%;
height:100%;
cursor:grab;
touch-action:none;
}

#canvas:active{
cursor:grabbing;
}

.canvas-empty{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
text-align:center;
pointer-events:none;
background:rgba(245,248,252,.92);
}

.plus{
width:58px;
height:58px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--blue);
color:#fff;
font-size:32px;
}

.canvas-empty span{
font-size:12px;
color:var(--muted);
}

.editor-tip{
text-align:center;
font-size:12px;
color:var(--muted);
}

.hidden{
display:none!important;
}

/* MODAL */

.modal{
position:fixed;
inset:0;
z-index:1000;
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(3,16,35,.8);
backdrop-filter:blur(7px);
}

.modal.open{
display:flex;
}

.modal-content{
width:min(500px,100%);
padding:34px;
text-align:center;
border-radius:24px;
background:#fff;
}

.spinner{
width:52px;
height:52px;
margin:0 auto 20px;
border:5px solid #dae6f4;
border-top-color:var(--blue);
border-radius:50%;
animation:spin .7s linear infinite;
}

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

.modal-content p{
color:var(--muted);
}

.ad{
height:150px;
margin-top:24px;
border:1px dashed #bdcada;
border-radius:14px;
background:#f7f9fc;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#8a98aa;
}

.ad small{
font-size:9px;
letter-spacing:1.2px;
margin-bottom:8px;
}

.success{
width:65px;
height:65px;
display:grid;
place-items:center;
margin:0 auto 20px;
border-radius:50%;
background:#e6f8ed;
color:#159747;
font-size:30px;
font-weight:900;
}

@media(max-width:850px){

nav,
.header-button{
display:none;
}

.header-content{
justify-content:center;
}

.hero{
padding:50px 0;
}

.hero-grid{
grid-template-columns:1fr;
gap:45px;
}

.hero-text{
text-align:center;
}

.hero h1{
letter-spacing:-2px;
}

.hero-text p{
margin-left:auto;
margin-right:auto;
}

.hero-actions{
justify-content:center;
}

.steps,
.models-grid,
.editor{
grid-template-columns:1fr;
}

.editor{
max-width:600px;
margin:auto;
}

.preview-column{
order:1;
}

.editor-controls{
order:2;
}

.footer-content{
flex-direction:column;
}

}

@media(max-width:520px){

.container{
width:calc(100% - 22px);
}

.header{
height:62px;
}

.hero h1{
font-size:39px;
}

.hero-actions{
flex-direction:column;
}

.hero-actions .button{
width:100%;
}

.section,
.models{
padding:65px 0;
}

.tool{
padding-top:30px;
}

.modal-content{
padding:26px 18px;
}

}


/* ==========================================================
   SELEÇÃO DE MOLDURAS V2
========================================================== */

.hero-models-preview {
    position: relative;
    width: min(390px, 85vw);
    height: 390px;
    margin: 0 auto;
}

.hero-mini-frame {
    position: absolute;
    width: 280px;
    aspect-ratio: 1;
    top: 15px;
    left: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #e6edf6;
    box-shadow: 0 20px 50px rgba(7, 28, 63, .15);
}

.hero-mini-second {
    width: 230px;
    top: 125px;
    left: 145px;
}

.hero-mini-frame img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.model-type-section {
    margin-top: 55px;
}

.model-type-section + .model-type-section {
    margin-top: 80px;
}

.model-type-heading {
    margin-bottom: 22px;
}

.model-type-heading h3 {
    margin: 0 0 7px;
    font-size: 28px;
    letter-spacing: -1px;
}

.model-type-heading p {
    margin: 0;
    color: var(--muted);
}


.campaign-model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.campaign-model-card {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: center;
    gap: 24px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
    transition: .2s ease;
}

.campaign-model-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(7, 28, 63, .09);
}

.campaign-model-preview {
    position: relative;
    overflow: hidden;
    background: #edf2f8;
}

.campaign-model-preview.is-profile {
    aspect-ratio: 1;
    border-radius: 50%;
}

.campaign-model-preview.is-story {
    width: 120px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 14px;
}

.campaign-model-preview img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.model-image-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    padding: 10px;
    color: #8a98a9;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.model-category {
    display: block;
    margin-bottom: 7px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.campaign-model-info h4 {
    margin: 0 0 16px;
    font-size: 24px;
}

.choose-model {
    color: var(--blue);
    font-weight: 800;
}


/* ==========================================================
   CRIAR - ETAPAS
========================================================== */

.creation-step {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 930px;
    margin: 45px auto 18px;
}

.creation-step-number {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--blue);
    color: #fff;
    font-weight: 900;
}

.creation-step h2 {
    margin: 0;
    font-size: 22px;
}

.creation-step p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}


.type-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    max-width: 930px;
    margin: 0 auto;
}

.type-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px;
    border: 2px solid var(--border);
    border-radius: 17px;
    background: #fff;
}

.type-option strong {
    font-size: 17px;
}

.type-option span {
    color: var(--muted);
    font-size: 12px;
}

.type-option.selected {
    border-color: var(--blue);
    background: #f2f7ff;
    box-shadow: 0 0 0 3px rgba(7, 91, 216, .08);
}


.editor-model-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 930px;
    margin: 0 auto;
}

.editor-model-option {
    display: grid;
    grid-template-columns: 125px 1fr;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: #fff;
}

.editor-model-option.selected {
    border-color: var(--blue);
    background: #f4f8ff;
    box-shadow: 0 0 0 3px rgba(7, 91, 216, .08);
}

.editor-model-thumb {
    position: relative;
    overflow: hidden;
    background: #e7edf5;
}

.editor-model-thumb.is-profile {
    aspect-ratio: 1;
    border-radius: 50%;
}

.editor-model-thumb.is-story {
    width: 80px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 10px;
}

.editor-model-thumb img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.editor-model-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.editor-model-label strong {
    font-size: 18px;
}

.editor-model-label span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}


.selected-model-summary {
    max-width: 930px;
    margin: 0 auto 25px;
    padding: 14px 17px;
    border-radius: 13px;
    background: #eaf3ff;
    color: var(--navy);
    font-size: 13px;
}

.selected-model-summary span {
    margin-right: 5px;
    color: var(--muted);
}


/* ==========================================================
   CANVAS
========================================================== */

.canvas-wrapper.canvas-profile {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.canvas-wrapper.canvas-story {
    width: min(100%, 390px);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 22px;
}

.canvas-wrapper.canvas-story #canvas {
    border-radius: 22px;
}

.canvas-wrapper.canvas-profile #canvas {
    border-radius: 50%;
}

.change-photo {
    cursor: pointer;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 800px) {

    .campaign-model-grid {
        grid-template-columns: 1fr;
    }

    .campaign-model-card {
        grid-template-columns: 145px 1fr;
    }

    .type-selector,
    .editor-model-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 520px) {

    .hero-models-preview {
        height: 310px;
    }

    .hero-mini-frame {
        width: 220px;
    }

    .hero-mini-second {
        width: 180px;
        left: 120px;
        top: 100px;
    }

    .campaign-model-card {
        grid-template-columns: 115px 1fr;
        gap: 15px;
        padding: 15px;
    }

    .campaign-model-preview.is-story {
        width: 75px;
    }

    .campaign-model-info h4 {
        font-size: 20px;
    }

    .editor-model-option {
        grid-template-columns: 100px 1fr;
    }

    .creation-step {
        margin-top: 35px;
    }

}


/* ============================================================
   CREATOR V3
============================================================ */

.creator-page {
    padding: 55px 0 90px;
    background:
        linear-gradient(
            180deg,
            #f6f9fd 0%,
            #ffffff 55%
        );
}

.creator-header {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

.creator-kicker {
    display: inline-flex;
    padding: 7px 13px;
    margin-bottom: 15px;
    border-radius: 999px;
    background: #e9f2ff;
    color: #075bd8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

.creator-header h1 {
    margin: 0 0 12px;
    color: #071c3f;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.creator-header p {
    max-width: 620px;
    margin: auto;
    color: #68778a;
    font-size: 16px;
    line-height: 1.65;
}


/* STEP */

.creator-step-title {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1000px;
    margin: 45px auto 17px;
}

.creator-step-number {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #075bd8;
    color: white;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(7,91,216,.20);
}

.creator-step-title h2 {
    margin: 0;
    color: #071c3f;
    font-size: 22px;
}

.creator-step-title p {
    margin: 3px 0 0;
    color: #738196;
    font-size: 13px;
}


/* FORMAT */

.format-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.format-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 2px solid #e5ebf3;
    border-radius: 20px;
    background: white;
    color: #071c3f;
    text-decoration: none;
    transition: .2s ease;
}

.format-card:hover {
    transform: translateY(-2px);
    border-color: #bcd3f5;
    box-shadow: 0 14px 35px rgba(10,40,80,.08);
}

.format-card.active {
    border-color: #075bd8;
    background: #f4f8ff;
    box-shadow:
        0 0 0 3px rgba(7,91,216,.06),
        0 12px 30px rgba(7,91,216,.09);
}

.format-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: #eaf2ff;
}

.profile-icon div {
    width: 38px;
    height: 38px;
    border: 4px solid #075bd8;
    border-radius: 50%;
}

.story-icon div {
    width: 25px;
    height: 43px;
    border: 4px solid #075bd8;
    border-radius: 8px;
}

.format-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.format-content strong {
    font-size: 17px;
}

.format-content span {
    color: #7b8999;
    font-size: 12px;
}

.selected-check {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #075bd8;
    color: white;
    font-size: 13px;
    font-weight: 900;
}


/* MODEL PICKER */

.model-picker-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
}

.model-picker-card {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 15px;
    border: 2px solid #e4eaf2;
    border-radius: 24px;
    background: white;
    color: #071c3f;
    text-decoration: none;
    transition: .2s ease;
}

.model-picker-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 42px rgba(10,37,73,.10);
}

.model-picker-card.active {
    border-color: #075bd8;
    box-shadow:
        0 0 0 3px rgba(7,91,216,.06),
        0 15px 36px rgba(7,91,216,.10);
}

.model-picker-preview {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 300px;
    background:
        linear-gradient(135deg,#eef3f9,#e3eaf4);
}

.model-picker-preview.profile-preview {
    border-radius: 18px;
}

.model-picker-preview.profile-preview img {
    width: min(100%,330px);
    aspect-ratio: 1/1;
    object-fit: contain;
}

.model-picker-preview.story-preview {
    border-radius: 18px;
}

.model-picker-preview.story-preview img {
    height: 340px;
    max-width: 100%;
    object-fit: contain;
}

.model-picker-preview img {
    position: relative;
    z-index: 2;
    display: block;
}

.missing-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 250px;
    color: #77869a;
    text-align: center;
}

.missing-frame-icon {
    margin-bottom: 4px;
    font-size: 32px;
}

.missing-frame strong {
    color: #34445b;
    font-size: 17px;
}

.missing-frame span {
    font-size: 12px;
}

.model-picker-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 17px 5px 4px;
}

.model-picker-bottom > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.model-picker-bottom small {
    color: #7b899b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.model-picker-bottom strong {
    font-size: 18px;
}

.model-selected-badge,
.model-choose-badge {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.model-selected-badge {
    background: #075bd8;
    color: white;
}

.model-choose-badge {
    background: #edf2f7;
    color: #506076;
}

.frame-status-warning {
    margin-top: 11px;
    padding: 8px;
    border-radius: 10px;
    background: #fff4d8;
    color: #9a6800;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}


/* SELECIONADO */

.chosen-model-bar {
    max-width: 1000px;
    margin: 0 auto 20px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid #d6e5fa;
    border-radius: 15px;
    background: #f1f7ff;
}

.chosen-model-bar > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chosen-model-bar small {
    color: #6c7c91;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.chosen-model-bar strong {
    color: #071c3f;
}

.chosen-model-bar a {
    color: #075bd8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}


/* ============================================================
   EDITOR
============================================================ */

.modern-editor {
    display: grid;
    grid-template-columns: 340px minmax(0,1fr);
    gap: 26px;
    max-width: 1000px;
    margin: 0 auto;
}

.modern-editor-sidebar,
.modern-editor-preview {
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    background: white;
    box-shadow: 0 14px 38px rgba(10,35,70,.06);
}


/* UPLOAD */

.modern-editor-sidebar {
    align-self: start;
    padding: 20px;
}

.modern-upload {
    min-height: 285px;
    padding: 30px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 2px dashed #b7c8df;
    border-radius: 19px;
    background: #f8fbff;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
}

.modern-upload:hover,
.modern-upload.dragging {
    border-color: #075bd8;
    background: #f0f6ff;
}

.upload-circle {
    width: 61px;
    height: 61px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e5f0ff;
    color: #075bd8;
}

.modern-upload strong {
    color: #071c3f;
    font-size: 18px;
}

.modern-upload span {
    color: #64748b;
    font-size: 13px;
}

.modern-upload small {
    margin-top: 3px;
    color: #98a5b5;
    font-size: 10px;
}

.upload-button {
    margin-top: 13px;
    padding: 11px 19px;
    border-radius: 11px;
    background: #075bd8;
    color: white;
    font-size: 12px;
    font-weight: 800;
}


/* FERRAMENTAS */

.photo-tools {
    margin-top: 17px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.photo-tools.hidden {
    display: none !important;
}

.photo-tool-block {
    padding: 15px;
    border-radius: 15px;
    background: #f5f8fc;
}

.tool-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #25364c;
    font-size: 12px;
    font-weight: 800;
}

.tool-label-row span {
    color: #075bd8;
}

.zoom-slider {
    width: 100%;
    cursor: pointer;
    accent-color: #075bd8;
}

.editor-action-button {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
}

.editor-action-button.primary {
    background: #075bd8;
    color: white;
}

.editor-action-button.primary:hover {
    background: #064daf;
}

.editor-action-button.secondary {
    border: 1px solid #d7e0eb;
    background: white;
    color: #25364c;
}

.editor-help {
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    background: #f7f9fc;
}

.editor-help strong {
    display: block;
    margin-bottom: 4px;
    color: #34445a;
    font-size: 11px;
}

.editor-help p {
    margin: 0;
    color: #778599;
    font-size: 11px;
    line-height: 1.5;
}


/* PREVIEW */

.modern-editor-preview {
    padding: 20px;
}

.preview-header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preview-header small {
    color: #8c99aa;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .9px;
}

.preview-header strong {
    color: #071c3f;
    font-size: 16px;
}

.preview-header > span {
    padding: 6px 9px;
    border-radius: 8px;
    background: #eef3f8;
    color: #67768a;
    font-size: 10px;
    font-weight: 700;
}


/* CANVAS */

.canvas-stage {
    position: relative;
    overflow: hidden;
    margin: auto;
    background:
        repeating-conic-gradient(
            #eef2f7 0% 25%,
            #f8fafc 0% 50%
        )
        50% / 20px 20px;
    box-shadow: inset 0 0 0 1px #dce4ee;
}

.canvas-stage.is-profile {
    width: min(100%, 560px);
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.canvas-stage.is-story {
    width: min(100%, 350px);
    aspect-ratio: 9/16;
    border-radius: 20px;
}

.canvas-stage canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.canvas-stage.is-profile canvas {
    border-radius: 50%;
}

.canvas-stage.is-story canvas {
    border-radius: 20px;
}

.canvas-start {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6e7c90;
    text-align: center;
    cursor: pointer;
}

.canvas-start.hidden {
    display: none !important;
}

.canvas-start-plus {
    width: 55px;
    height: 55px;
    margin-bottom: 9px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: white;
    color: #075bd8;
    box-shadow: 0 8px 22px rgba(10,35,70,.12);
    font-size: 29px;
}

.canvas-start strong {
    color: #34445a;
    font-size: 15px;
}

.canvas-start span {
    margin-top: 4px;
    font-size: 11px;
}

.canvas-frame-warning {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    z-index: 8;
    padding: 9px;
    border-radius: 10px;
    background: rgba(255,244,216,.95);
    color: #986500;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
}

.preview-tip {
    margin-top: 14px;
    color: #7c8999;
    text-align: center;
    font-size: 10px;
}


/* MOBILE */

@media (max-width: 850px) {

    .modern-editor {
        grid-template-columns: 1fr;
    }

    .modern-editor-sidebar {
        order: 2;
    }

    .modern-editor-preview {
        order: 1;
    }

}


@media (max-width: 680px) {

    .creator-page {
        padding-top: 32px;
    }

    .creator-header {
        margin-bottom: 30px;
    }

    .creator-header h1 {
        font-size: 34px;
        letter-spacing: -1.3px;
    }

    .format-grid,
    .model-picker-grid {
        grid-template-columns: 1fr;
    }

    .model-picker-preview {
        min-height: 240px;
    }

    .model-picker-preview.story-preview img {
        height: 290px;
    }

    .chosen-model-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .modern-editor-sidebar,
    .modern-editor-preview {
        border-radius: 19px;
    }

}


@media (max-width: 450px) {

    .format-card {
        padding: 15px;
    }

    .format-icon {
        width: 53px;
        height: 53px;
    }

    .model-picker-card {
        padding: 11px;
        border-radius: 20px;
    }

    .modern-editor-sidebar,
    .modern-editor-preview {
        padding: 14px;
    }

    .modern-upload {
        min-height: 235px;
    }

}



/* ==========================================================
   EDITOR DIRETO V4
========================================================== */

.easy-creator {
    padding:
        42px
        0
        85px;

    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 45%
        );
}


.easy-creator-container {
    max-width:
        1080px;
}


.easy-heading {
    max-width:
        720px;

    margin:
        0 auto 35px;

    text-align:
        center;
}


.easy-heading > span {
    display:
        inline-block;

    margin-bottom:
        9px;

    color:
        #0863df;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.2px;
}


.easy-heading h1 {
    margin:
        0 0 10px;

    color:
        #071c3f;

    font-size:
        clamp(
            30px,
            4.5vw,
            45px
        );

    line-height:
        1.08;

    letter-spacing:
        -1.8px;
}


.easy-heading p {
    margin:
        0;

    color:
        #6d7b8e;

    font-size:
        15px;

    line-height:
        1.55;
}


/* ==========================================================
   BLOCO
========================================================== */

.easy-block {
    max-width:
        920px;

    margin:
        0 auto 28px;
}


.easy-block-title {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        12px;
}


.easy-block-title strong {
    color:
        #071c3f;

    font-size:
        17px;
}


.easy-block-title span {
    color:
        #8794a5;

    font-size:
        11px;
}


/* ==========================================================
   FORMATO
========================================================== */

.easy-format-switch {
    display:
        grid;

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

    gap:
        14px;
}


.easy-format-button {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    width:
        100%;

    padding:
        16px;

    border:
        2px solid
        #e2e9f2;

    border-radius:
        17px;

    background:
        #ffffff;

    color:
        #172a44;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        .2s;
}


.easy-format-button:hover {
    border-color:
        #a8c8f4;
}


.easy-format-button.active {
    border-color:
        #0863df;

    background:
        #f3f8ff;

    box-shadow:
        0 0 0 3px
        rgba(
            8,
            99,
            223,
            .06
        );
}


.easy-format-button > span:last-child {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.easy-format-button strong {
    font-size:
        15px;
}


.easy-format-button small {
    color:
        #8290a1;

    font-size:
        10px;
}


.easy-format-icon {
    position:
        relative;

    flex:
        0 0 48px;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        #e8f2ff;
}


.easy-profile-icon::after {
    content:
        "";

    width:
        28px;

    height:
        28px;

    border:
        3px solid
        #0863df;

    border-radius:
        50%;
}


.easy-story-icon::after {
    content:
        "";

    width:
        20px;

    height:
        32px;

    border:
        3px solid
        #0863df;

    border-radius:
        5px;
}


/* ==========================================================
   MODELOS
========================================================== */

.easy-model-grid {
    display:
        grid;

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

    gap:
        16px;
}


.easy-model-card {
    padding:
        10px;

    border:
        2px solid
        #e4eaf2;

    border-radius:
        20px;

    background:
        #ffffff;

    cursor:
        pointer;

    transition:
        .2s;

    text-align:
        left;
}


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

    box-shadow:
        0 12px 30px
        rgba(
            8,
            37,
            72,
            .08
        );
}


.easy-model-card.active {
    border-color:
        #0863df;

    box-shadow:
        0 0 0 3px
        rgba(
            8,
            99,
            223,
            .06
        );
}


.easy-model-card.format-hidden {
    display:
        none;
}


.easy-model-image {
    position:
        relative;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    min-height:
        205px;

    border-radius:
        14px;

    background:
        #edf2f8;
}


.easy-model-image.profile img {
    width:
        min(
            100%,
            250px
        );

    aspect-ratio:
        1 / 1;

    object-fit:
        contain;
}


.easy-model-image.story img {
    height:
        240px;

    max-width:
        100%;

    object-fit:
        contain;
}


.easy-model-check {
    position:
        absolute;

    top:
        10px;

    right:
        10px;

    width:
        27px;

    height:
        27px;

    display:
        none;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #0863df;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        900;
}


.easy-model-card.active
.easy-model-check {
    display:
        grid;
}


.easy-model-name {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        12px 5px 3px;
}


.easy-model-name strong {
    color:
        #172a44;

    font-size:
        15px;
}


.easy-model-name span {
    color:
        #0863df;

    font-size:
        10px;

    font-weight:
        800;
}


.easy-model-card.active
.easy-model-name span {
    color:
        #187047;
}


.easy-model-card.active
.easy-model-name span::before {
    content:
        "Selecionado";
}


.easy-model-card.active
.easy-model-name span {
    font-size:
        0;
}


.easy-model-card.active
.easy-model-name span::before {
    font-size:
        10px;
}


.easy-model-missing {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        4px;

    color:
        #77869b;

    text-align:
        center;
}


.easy-model-missing strong {
    color:
        #45566d;
}


.easy-model-missing span {
    font-size:
        10px;
}


/* ==========================================================
   EDITOR
========================================================== */

.easy-editor {
    display:
        grid;

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

    gap:
        22px;

    max-width:
        920px;

    margin:
        36px auto 0;
}


.easy-controls,
.easy-preview {
    border:
        1px solid
        #e1e8f1;

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 12px 34px
        rgba(
            8,
            38,
            73,
            .06
        );
}


.easy-controls {
    align-self:
        start;

    padding:
        18px;
}


.easy-control-title {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin-bottom:
        14px;
}


.easy-control-title strong {
    color:
        #071c3f;

    font-size:
        17px;
}


.easy-control-title span {
    color:
        #7d8b9d;

    font-size:
        11px;
}


/* ==========================================================
   UPLOAD
========================================================== */

.easy-upload {
    min-height:
        210px;

    padding:
        23px 15px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        2px dashed
        #a9c3e6;

    border-radius:
        17px;

    background:
        #f5f9ff;

    cursor:
        pointer;

    text-align:
        center;

    transition:
        .2s;
}


.easy-upload:hover,
.easy-upload.dragging {
    border-color:
        #0863df;

    background:
        #edf5ff;
}


.easy-upload-icon {
    width:
        56px;

    height:
        56px;

    margin-bottom:
        6px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #dfeeff;

    color:
        #0863df;
}


.easy-upload strong {
    color:
        #071c3f;

    font-size:
        16px;
}


.easy-upload span {
    color:
        #78879a;

    font-size:
        11px;
}


.easy-upload small {
    color:
        #a0aaba;

    font-size:
        9px;
}


.easy-upload.has-photo {
    min-height:
        120px;
}


/* ==========================================================
   FERRAMENTAS
========================================================== */

.easy-photo-tools {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin-top:
        14px;
}


.easy-photo-tools.hidden {
    display:
        none;
}


.easy-zoom {
    padding:
        13px;

    border-radius:
        13px;

    background:
        #f4f7fb;
}


.easy-zoom > div {
    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        8px;
}


.easy-zoom strong,
.easy-zoom span {
    font-size:
        10px;
}


.easy-zoom span {
    color:
        #0863df;

    font-weight:
        800;
}


.easy-zoom input {
    width:
        100%;

    accent-color:
        #0863df;
}


.easy-secondary-button,
.easy-generate-button,
.easy-download-button {
    width:
        100%;

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        11px;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;

    cursor:
        pointer;
}


.easy-secondary-button {
    border:
        1px solid
        #d4dfeb;

    background:
        #ffffff;

    color:
        #25364d;
}


.easy-generate-button,
.easy-download-button {
    background:
        #0863df;

    color:
        #ffffff;
}


.easy-generate-button:hover,
.easy-download-button:hover {
    background:
        #0755bd;
}


.easy-instructions {
    margin-top:
        15px;

    padding:
        12px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    border-radius:
        12px;

    background:
        #f7f9fc;
}


.easy-instructions strong {
    color:
        #415067;

    font-size:
        10px;
}


.easy-instructions span {
    color:
        #7c8999;

    font-size:
        10px;

    line-height:
        1.45;
}


/* ==========================================================
   PREVIEW
========================================================== */

.easy-preview {
    padding:
        18px;
}


.easy-preview-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        14px;
}


.easy-preview-header > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.easy-preview-header span {
    color:
        #8996a7;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .9px;
}


.easy-preview-header strong {
    color:
        #071c3f;

    font-size:
        14px;
}


.easy-preview-header small {
    padding:
        5px 8px;

    border-radius:
        7px;

    background:
        #edf2f7;

    color:
        #647387;

    font-size:
        9px;
}


/* ==========================================================
   CANVAS
========================================================== */

.easy-canvas-stage {
    position:
        relative;

    overflow:
        hidden;

    margin:
        auto;

    background:
        repeating-conic-gradient(
            #edf1f6 0% 25%,
            #f9fafc 0% 50%
        )
        50% / 18px 18px;

    box-shadow:
        inset
        0
        0
        0
        1px
        #dce4ed;
}


.easy-canvas-stage.profile {
    width:
        min(
            100%,
            545px
        );

    aspect-ratio:
        1 / 1;

    border-radius:
        50%;
}


.easy-canvas-stage.story {
    width:
        min(
            100%,
            345px
        );

    aspect-ratio:
        9 / 16;

    border-radius:
        18px;
}


.easy-canvas-stage canvas {
    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    height:
        100%;

    touch-action:
        none;
}


.easy-canvas-stage.profile
canvas {
    border-radius:
        50%;
}


.easy-canvas-stage.story
canvas {
    border-radius:
        18px;
}


.easy-canvas-empty {
    position:
        absolute;

    inset:
        0;

    z-index:
        4;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        #718095;

    cursor:
        pointer;
}


.easy-canvas-empty.hidden {
    display:
        none;
}


.easy-canvas-empty > div {
    width:
        49px;

    height:
        49px;

    margin-bottom:
        7px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #0863df;

    box-shadow:
        0 7px 20px
        rgba(
            8,
            37,
            72,
            .12
        );

    font-size:
        26px;
}


.easy-canvas-empty strong {
    color:
        #405067;

    font-size:
        13px;
}


.easy-canvas-empty span {
    margin-top:
        3px;

    font-size:
        10px;
}


.easy-preview-info {
    margin:
        12px 0 0;

    color:
        #8491a2;

    text-align:
        center;

    font-size:
        9px;
}


/* ==========================================================
   DOWNLOAD
========================================================== */

.easy-download-modal {
    text-align:
        center;
}


.processing-note {
    display:
        block;

    margin-top:
        8px;

    color:
        #8996a7;
}


.easy-content-divider {
    max-width:
        920px;

    margin:
        45px auto 0;

    padding:
        22px;

    border-top:
        1px solid
        #edf1f5;

    color:
        #8996a6;

    text-align:
        center;

    font-size:
        11px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (
    max-width:
    800px
) {

    .easy-editor {
        grid-template-columns:
            1fr;
    }


    .easy-preview {
        order:
            1;
    }


    .easy-controls {
        order:
            2;
    }

}


@media (
    max-width:
    620px
) {

    .easy-creator {
        padding-top:
            28px;
    }


    .easy-heading {
        margin-bottom:
            27px;
    }


    .easy-heading h1 {
        font-size:
            31px;

        letter-spacing:
            -1.1px;
    }


    .easy-heading p {
        font-size:
            13px;
    }


    .easy-block-title {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            3px;
    }


    .easy-format-switch {
        grid-template-columns:
            1fr;
    }


    .easy-model-grid {
        grid-template-columns:
            1fr;
    }


    .easy-model-image {
        min-height:
            190px;
    }


    .easy-model-image.story img {
        height:
            220px;
    }


    .easy-controls,
    .easy-preview {
        border-radius:
            18px;
    }

}


/* ==========================================================
   LANDING - APENAS MODELO 1
========================================================== */

.hero-models-preview.single-model {
    position: relative;
    width: min(380px, 88vw);
    height: auto;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.hero-models-preview.single-model .hero-mini-frame {
    position: relative;
    top: auto;
    left: auto;
    width: min(320px, 82vw);
    height: auto;
    aspect-ratio: 1 / 1;
    transform: none;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    box-shadow:
        0 18px 50px
        rgba(7, 28, 63, .15);
}

.hero-models-preview.single-model .hero-mini-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@media (max-width: 600px) {

    .hero-models-preview.single-model {
        width: 100%;
        min-height: 270px;
    }

    .hero-models-preview.single-model .hero-mini-frame {
        width: min(260px, 78vw);
    }

}


/* ==========================================================
   PUBLICIDADE NO MODAL DE ESPERA
========================================================== */

.countdown-ad {
    width: 100%;
    margin: 20px auto 14px;
}

.countdown-ad-label {
    margin-bottom: 7px;
    color: #8b96a6;
    text-align: center;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.countdown-ad-content {
    width: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e4e9f0;
    border-radius: 14px;
    background: #f7f9fc;
}

.countdown-ad-content > span {
    color: #a1abb8;
    font-size: 11px;
}

.easy-download-modal {
    width: min(520px, calc(100vw - 30px));
}

@media (max-width: 600px) {

    .countdown-ad-content {
        min-height: 120px;
    }

}


/* ==========================================================
   BOTÃO GERAR - PRÓXIMO À PRÉ-VISUALIZAÇÃO
========================================================== */

.preview-generate-area {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    width: 100%;
    margin-top: 14px;
    padding-top: 8px;
}

.preview-generate-button {
    width: 100%;
    min-height: 64px;

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

    padding: 11px 18px;

    border: 0;
    border-radius: 16px;

    background: #0863df;
    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(8, 99, 223, .25);

    cursor: pointer;
    font-family: inherit;

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

.preview-generate-button:hover {
    background: #0754bd;
    transform: translateY(-2px);

    box-shadow:
        0 15px 34px rgba(8, 99, 223, .30);
}

.preview-generate-button:active {
    transform: translateY(0);
}

.preview-generate-icon {
    flex: 0 0 39px;

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border-radius: 11px;

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

    font-size: 22px;
    font-weight: 900;
}

.preview-generate-button > span:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.preview-generate-button strong {
    color: #ffffff;
    font-size: 14px;
}

.preview-generate-button small {
    color: rgba(255, 255, 255, .76);
    font-size: 9px;
    font-weight: 500;
}


/* No celular fica ainda mais fácil de alcançar */

@media (max-width: 800px) {

    .preview-generate-area {
        bottom: 10px;
    }

    .preview-generate-button {
        min-height: 60px;
        border-radius: 14px;
    }

}


@media (max-width: 500px) {

    .preview-generate-area {
        position: sticky;
        bottom: 8px;
        margin-top: 10px;
    }

    .preview-generate-button {
        padding: 10px 13px;
    }

    .preview-generate-button strong {
        font-size: 13px;
    }

    .preview-generate-button small {
        font-size: 8px;
    }

}


/* ==========================================================
   MOBILE V5
   BOTÃO SOMENTE APÓS FOTO
========================================================== */

.preview-generate-area.generate-hidden {
    display: none !important;
}


/* ----------------------------------------------------------
   Botão desktop
---------------------------------------------------------- */

.preview-generate-area:not(.generate-hidden) {
    display: block;
}


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

@media (max-width: 800px) {

    /*
     * Deixa a criação mais compacta.
     */

    .easy-creator {
        padding-top: 20px;
    }

    .easy-heading {
        margin-bottom: 22px;
    }

    .easy-heading > span {
        margin-bottom: 6px;
    }

    .easy-heading h1 {
        font-size: 28px;
        line-height: 1.08;
        letter-spacing: -1px;
    }

    .easy-heading p {
        max-width: 340px;
        margin: 0 auto;
        font-size: 12px;
    }


    /*
     * Perfil / Story lado a lado.
     */

    .easy-format-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .easy-format-button {
        min-height: 92px;
        padding: 11px 8px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 7px;
        border-radius: 14px;
    }

    .easy-format-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .easy-profile-icon::after {
        width: 22px;
        height: 22px;
    }

    .easy-story-icon::after {
        width: 16px;
        height: 26px;
    }

    .easy-format-button strong {
        font-size: 12px;
    }

    .easy-format-button small {
        display: none;
    }


    /*
     * Modelos lado a lado.
     */

    .easy-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .easy-model-card {
        padding: 7px;
        border-radius: 15px;
    }

    .easy-model-image {
        min-height: 135px;
        border-radius: 10px;
    }

    .easy-model-image.profile img {
        width: min(100%, 145px);
    }

    .easy-model-image.story img {
        height: 155px;
    }

    .easy-model-name {
        padding: 8px 3px 1px;
    }

    .easy-model-name strong {
        font-size: 12px;
    }

    .easy-model-name span,
    .easy-model-card.active
    .easy-model-name span::before {
        font-size: 8px;
    }


    /*
     * Preview vem antes dos controles.
     */

    .easy-editor {
        margin-top: 22px;
        gap: 13px;
    }

    .easy-preview {
        order: 1;
        padding: 12px;
        border-radius: 17px;
    }

    .easy-controls {
        order: 2;
        padding: 13px;
        border-radius: 17px;
    }

    .easy-preview-header {
        margin-bottom: 9px;
    }


    /*
     * Área da imagem ocupa praticamente
     * toda a largura disponível.
     */

    .easy-canvas-stage.profile {
        width: min(100%, 480px);
    }

    .easy-canvas-stage.story {
        width: min(100%, 330px);
    }


    /*
     * Upload mais baixo depois que foto existe.
     */

    .easy-upload {
        min-height: 155px;
        padding: 15px;
    }

    .easy-upload.has-photo {
        min-height: 80px;
        padding: 10px;
    }

    .easy-upload.has-photo
    .easy-upload-icon {
        width: 39px;
        height: 39px;
        margin-bottom: 2px;
    }

    .easy-upload.has-photo strong {
        font-size: 13px;
    }

    .easy-upload.has-photo span,
    .easy-upload.has-photo small {
        display: none;
    }


    /*
     * Botões secundários mais fáceis
     * de tocar.
     */

    .easy-secondary-button {
        min-height: 48px;
        font-size: 12px;
    }


    /*
     * BOTÃO GERAR:
     * quando existe foto, fica fixo
     * no rodapé do celular.
     */

    .preview-generate-area:not(.generate-hidden) {
        position: fixed;

        left: 10px;
        right: 10px;

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        z-index: 999;

        width: auto;

        margin: 0;
        padding: 0;
    }

    .preview-generate-button {
        min-height: 62px;

        border-radius: 16px;

        box-shadow:
            0 10px 35px
            rgba(7, 52, 120, .34);
    }

    .preview-generate-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .preview-generate-button strong {
        font-size: 14px;
    }

    .preview-generate-button small {
        font-size: 8px;
    }


    /*
     * Reserva espaço inferior para o botão
     * não cobrir o restante do conteúdo.
     */

    body.creator-has-photo
    .easy-creator {
        padding-bottom:
            calc(
                115px
                +
                env(safe-area-inset-bottom)
            );
    }


    /*
     * Modal mais parecido com bottom sheet
     * no celular.
     */

    .modal {
        padding: 10px;
    }

    .easy-download-modal {
        width: 100%;
        max-width: none;

        border-radius: 22px;

        padding: 24px 18px;
    }

}


/* ----------------------------------------------------------
   CELULARES PEQUENOS
---------------------------------------------------------- */

@media (max-width: 390px) {

    .easy-heading h1 {
        font-size: 25px;
    }

    .easy-format-button {
        min-height: 82px;
    }

    .easy-model-image {
        min-height: 118px;
    }

    .easy-model-image.profile img {
        width: 125px;
    }

    .easy-model-image.story img {
        height: 135px;
    }

    .preview-generate-button {
        min-height: 58px;
        padding: 8px 11px;
    }

}