: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;
    }

}