.elementor-1004945 .elementor-element.elementor-element-797458dc{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1004945 .elementor-element.elementor-element-5ac6672{--display:flex;}.elementor-1004945 .elementor-element.elementor-element-c144cd8{width:var( --container-widget-width, 97.601% );max-width:97.601%;--container-widget-width:97.601%;--container-widget-flex-grow:0;}.elementor-1004945 .elementor-element.elementor-element-c144cd8.elementor-element{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-c144cd8 */*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Rubik',sans-serif;background:#0a0f1e;color:#fff;min-height:100vh;}

#confetti-canvas{position:fixed;top:0;left:0;width:100%;pointer-events:none;z-index:999;}

/* Header */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 28px;
  background:linear-gradient(90deg,#001a6e,#003d1a);
  border-bottom:3px solid #FEDD00;
  position:relative;
}
header::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#009C3B,#FEDD00,#002776,#009C3B);
  background-size:200%;animation:gm 3s linear infinite;
}
@keyframes gm{0%{background-position:0%}100%{background-position:200%}}
#hdr-logo{height:34px;filter:brightness(0) invert(1);}
#hdr-center{display:flex;align-items:center;gap:12px;}
#hdr-center strong{font-size:16px;font-weight:900;color:#FEDD00;letter-spacing:2px;}
.stars-row{color:#FEDD00;font-size:11px;opacity:.8;animation:tw 2s ease-in-out infinite;}
@keyframes tw{0%,100%{opacity:.3}50%{opacity:1}}
#hdr-trophy{height:50px;width:auto;filter:drop-shadow(0 0 8px #FFD700aa);animation:fl 2.5s ease-in-out infinite;}
@keyframes fl{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}

/* Page title */
#page-title{text-align:center;padding:32px 20px 20px;}
#page-title h1{font-size:28px;font-weight:900;color:#FEDD00;text-shadow:0 0 20px rgba(255,215,0,.4);}
#page-title p{margin-top:8px;color:rgba(255,255,255,.6);font-size:15px;}

/* Layout */
#page{min-height:100vh;}
#layout{
  display:flex;gap:40px;align-items:flex-start;
  max-width:900px;margin:0 auto;padding:0 24px 60px;
}

/* Left panel */
#left-panel{flex:1;display:flex;flex-direction:column;gap:20px;}

.card-form{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,215,0,.2);
  border-radius:16px;padding:22px;
}
.card-form h3{font-size:14px;font-weight:700;color:#FEDD00;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;}

.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fg{display:flex;flex-direction:column;gap:6px;}
.fg label{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.8px;}
.fg input,.fg select{
  padding:10px 14px;background:rgba(255,255,255,.08);
  border:2px solid rgba(255,215,0,.25);border-radius:10px;
  color:#fff;font-family:'Rubik',sans-serif;font-size:15px;font-weight:600;
  outline:none;transition:border-color .2s;text-transform:uppercase;
}
.fg input::placeholder{color:rgba(255,255,255,.3);text-transform:none;}
.fg input:focus,.fg select:focus{border-color:#FEDD00;}
.fg select option{background:#001a6e;}

/* Photo area */
#photo-preview-area{
  width:58%;aspect-ratio:3/4;margin:0 auto;border-radius:12px;overflow:hidden;
  background:rgba(0,0,0,.3);border:2px dashed rgba(255,215,0,.25);
  position:relative;
}
#video,#snap{width:100%;height:100%;object-fit:cover;display:block;}
#photo-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.3);
  font-size:13px;
}
#photo-placeholder svg{opacity:.4;}

#photo-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}

#btn-upload{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;background:linear-gradient(135deg,#FEDD00,#FFB300);
  color:#002776;border:none;border-radius:10px;font-family:'Rubik',sans-serif;
  font-size:14px;font-weight:700;cursor:pointer;transition:transform .15s;
}
#btn-upload:hover{transform:scale(1.03);}

#btn-cam{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;background:rgba(255,255,255,.1);color:#fff;
  border:2px solid rgba(255,255,255,.2);border-radius:10px;
  font-family:'Rubik',sans-serif;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s;
}
#btn-cam:hover{background:rgba(255,255,255,.16);}

#cam-actions{display:flex;gap:10px;margin-top:10px;}
#btn-snap,#btn-retake{
  flex:1;padding:10px;border-radius:10px;font-family:'Rubik',sans-serif;
  font-size:14px;font-weight:700;cursor:pointer;border:none;
}
#btn-snap{background:#009C3B;color:#fff;}
#btn-retake{background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.2);}

#btn-gerar{
  width:100%;padding:16px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#FEDD00,#FFB300);
  color:#002776;font-family:'Rubik',sans-serif;font-size:17px;font-weight:900;
  cursor:pointer;letter-spacing:.5px;
  box-shadow:0 6px 24px rgba(255,215,0,.35);transition:transform .15s,box-shadow .15s;
}
#btn-gerar:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(255,215,0,.5);}

/* Right panel */
#right-panel{
  width:340px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  position:sticky;top:20px;
}
#right-panel h3{font-size:14px;font-weight:700;color:#FEDD00;text-transform:uppercase;letter-spacing:1px;align-self:flex-start;}

#canvas-wrap{
  width:320px;height:450px;border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  position:relative;display:flex;align-items:center;justify-content:center;
}
#fig-canvas{display:none;border-radius:16px;box-shadow:0 0 40px rgba(255,215,0,.3),0 20px 50px rgba(0,0,0,.5);animation:appear .5s cubic-bezier(.22,1,.36,1) both;}
@keyframes appear{from{transform:scale(.7) rotateY(20deg);opacity:0}to{transform:scale(1);opacity:1}}
#canvas-placeholder{color:rgba(255,255,255,.25);font-size:16px;text-align:center;line-height:1.6;}

#dl-btns{display:flex;gap:10px;width:100%;}
#btn-dl{
  flex:1;padding:13px;background:linear-gradient(135deg,#FEDD00,#FFB300);
  color:#002776;border:none;border-radius:12px;font-family:'Rubik',sans-serif;
  font-size:14px;font-weight:800;cursor:pointer;transition:transform .15s;
}
#btn-share{
  padding:13px 18px;background:rgba(255,255,255,.1);color:#fff;
  border:2px solid rgba(255,255,255,.2);border-radius:12px;
  font-family:'Rubik',sans-serif;font-size:14px;font-weight:600;cursor:pointer;
}
#btn-dl:hover,#btn-share:hover{transform:scale(1.04);}

/* Responsive */
@media(max-width:720px){
  #layout{flex-direction:column;align-items:center;}
  #right-panel{width:100%;max-width:340px;position:static;}
  #canvas-wrap{width:100%;max-width:320px;}
  header{padding:10px 14px;}
  #hdr-center strong{font-size:12px;}
  .stars-row{display:none;}
}

/* ---- PAINEL DE COMPARTILHAMENTO ---- */
#share-panel{
  width:100%;background:rgba(255,215,0,.07);
  border:1px solid rgba(255,215,0,.3);border-radius:14px;
  padding:18px 16px;margin-top:12px;
  animation:appear .4s cubic-bezier(.22,1,.36,1) both;
}
#share-title{font-size:16px;font-weight:800;color:#FEDD00;text-align:center;margin-bottom:2px;}
#share-sub{font-size:12px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:14px;}
#share-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
#share-btns button{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px;border:none;border-radius:10px;
  font-family:'Rubik',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;transition:transform .15s,filter .15s;
}
#share-btns button:hover{transform:scale(1.04);filter:brightness(1.1);}
#shr-wpp{background:#25D366;color:#fff;}
#shr-fb{background:#1877F2;color:#fff;}
#shr-tw{background:#000;color:#fff;}
#shr-copy{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)!important;}
#share-counter{
  text-align:center;font-size:13px;color:rgba(255,255,255,.6);
  padding:8px 0 10px;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px;
}
#share-counter strong{color:#FEDD00;font-size:17px;}
#back-site-btn{
  display:block;text-align:center;
  padding:11px;background:linear-gradient(135deg,#002776,#001240);
  color:#FEDD00;text-decoration:none;border-radius:10px;
  font-family:'Rubik',sans-serif;font-size:13px;font-weight:700;
  border:1px solid rgba(255,215,0,.3);transition:filter .15s;
}
#back-site-btn:hover{filter:brightness(1.2);}

/* ---- BANNER PWA ---- */
#pwa-banner{
  display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#002776,#001240);
  border:2px solid #FEDD00;border-radius:16px;padding:14px 20px;
  align-items:center;gap:14px;z-index:99999;
  box-shadow:0 8px 32px rgba(0,0,0,.5);max-width:340px;width:90%;
  animation:appear .4s cubic-bezier(.22,1,.36,1) both;
}
#pwa-banner span{font-family:'Rubik',sans-serif;font-size:13px;color:#fff;flex:1;line-height:1.4;}
#pwa-banner strong{color:#FEDD00;}
#pwa-install{
  padding:8px 16px;background:#FEDD00;color:#002776;
  border:none;border-radius:8px;font-family:'Rubik',sans-serif;
  font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap;
}
#pwa-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:18px;cursor:pointer;padding:0 4px;}
</style>

<!-- Banner PWA -->
<div id="pwa-banner">
  <span>📲 <strong>Salve na tela inicial</strong> para criar figurinhas mais rápido!</span>
  <button id="pwa-install" onclick="installPwa()">Instalar</button>
  <button id="pwa-close" onclick="document.getElementById('pwa-banner').style.display='none'">✕</button>
</div>/* End custom CSS */