:root{--bg:#080b10;--card:#131922;--line:#293341;--text:#f4f6f8;--muted:#929dab;--orange:#ff7a00;--green:#20d478;--red:#ff5252;--blue:#59a9ff;--yellow:#f2c94c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 85% 0,rgba(255,122,0,.11),transparent 25%),var(--bg);color:var(--text);font-family:Arial,sans-serif}header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 4vw;background:rgba(8,11,16,.9)}.brand,.right{display:flex;align-items:center;gap:12px}.brand img{width:55px;height:55px;object-fit:contain;border-radius:13px}.brand b{display:block;font-size:20px}.brand small{color:var(--muted)}.pill,.credits{padding:10px 13px;border:1px solid var(--line);background:#111720;border-radius:12px;font-size:13px}.pill.online{color:var(--green)}.pill.offline{color:var(--red)}.credits b{color:#ff9b38;font-size:19px;margin-left:8px}main{width:min(1160px,calc(100% - 30px));margin:auto;padding:55px 0}.hero{max-width:800px;margin-bottom:30px}.hero span,.statusHead span{color:var(--orange);font-weight:bold;font-size:12px;letter-spacing:1.5px}.hero h1{font-size:clamp(35px,5vw,60px);letter-spacing:-2px;margin:8px 0 12px}.hero p,.muted,.info p{color:var(--muted)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{border:1px solid var(--line);background:linear-gradient(#171e28,#11161e);border-radius:18px;padding:22px}.card h2{font-size:19px}.card h2 i{font-style:normal;color:#ff9b38;background:rgba(255,122,0,.13);padding:7px 11px;border-radius:9px;margin-right:7px}.drop{height:310px;border:1.5px dashed #3a4655;border-radius:15px;background:#0c1118;display:grid;place-items:center;text-align:center;cursor:pointer;overflow:hidden}.drop input{display:none}#pick{display:flex;flex-direction:column;gap:7px;color:var(--muted)}#pick strong{font-size:35px;color:var(--orange)}#pick b{color:var(--text)}#preview{display:none;width:100%;height:310px;object-fit:contain}.presets{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:310px;overflow:auto}.preset{border:1px solid var(--line);background:#0d1219;color:var(--text);border-radius:12px;padding:14px;text-align:left;font-weight:bold;cursor:pointer}.preset.selected{border-color:var(--orange);background:rgba(255,122,0,.1)}button,.download{width:100%;height:52px;border:0;border-radius:13px;margin-top:18px;background:linear-gradient(135deg,#ff7200,#ffa038);color:#111;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}button:disabled{opacity:.4;cursor:not-allowed}.note{text-align:center;color:var(--muted);font-size:11px}.status{margin-top:18px}.statusHead{display:flex;align-items:center;justify-content:space-between}.statusHead h2{font-size:22px;margin:5px 0}.badge{padding:8px 11px;border-radius:99px;background:#252d38;color:var(--muted);font-size:11px}.badge.queued{color:var(--blue)}.badge.processing{color:var(--yellow)}.badge.completed{color:var(--green)}.badge.failed{color:var(--red)}.track{height:7px;background:#090d12;border-radius:99px;margin:22px 0;overflow:hidden}.track div{height:100%;width:0;background:linear-gradient(90deg,#ff7200,#ffa038);transition:.4s}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stats div{padding:13px;background:#0c1118;border:1px solid #202936;border-radius:12px;min-width:0}.stats small{display:block;color:var(--muted);margin-bottom:5px}.stats b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.message{padding:13px;border-radius:12px;background:rgba(255,82,82,.08);color:#ffb0b0;border:1px solid #552a2a}.hidden{display:none!important}.info{padding:25px 4px}.info p{line-height:1.7;max-width:850px}footer{border-top:1px solid var(--line);padding:25px 4vw;color:var(--muted);display:flex;justify-content:space-between;font-size:12px}@media(max-width:800px){.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.pill{display:none}}@media(max-width:480px){.presets,.stats{grid-template-columns:1fr}.brand small{display:none}.card{padding:16px}}.ageGate{position:fixed;inset:0;z-index:9999;background:rgba(3,5,8,.95);backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}.ageGate.hidden{display:none!important}.ageBox{width:min(460px,100%);text-align:center;border:1px solid var(--line);background:linear-gradient(#171e28,#0e131a);border-radius:22px;padding:30px}.ageBox img{width:78px;height:78px;object-fit:contain;border-radius:18px}.ageBox>span{display:block;color:var(--orange);font-weight:900;letter-spacing:2px;margin:10px}.ageBox h2{font-size:25px;margin:0 0 12px}.ageBox p{color:var(--muted);line-height:1.6}.ageBox .ageLeave{height:42px;margin-top:8px;background:transparent;color:var(--muted);border:1px solid var(--line)}body.ageLocked{overflow:hidden}.examples{margin-top:42px}.examplesHead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.examplesHead span{color:var(--orange);font-weight:bold;font-size:12px;letter-spacing:1.5px}.examplesHead h2{font-size:28px;margin:6px 0}.examplesHead p{color:var(--muted);margin:0}.carouselControls{display:flex;gap:8px}.carouselControls button{width:44px;height:44px;margin:0;border:1px solid var(--line);background:#131a23;color:white;font-size:28px}.carouselViewport{overflow:hidden;border-radius:18px}.carouselTrack{display:flex;transition:transform .38s}.exampleSlide{min-width:100%;border:1px solid var(--line);background:linear-gradient(#171e28,#11161e);border-radius:18px;padding:18px}.examplePair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.exampleLabel{display:block;color:var(--muted);font-size:11px;font-weight:bold;margin-bottom:8px}.exampleMedia img,.exampleMedia video{display:block;width:100%;height:390px;object-fit:contain;background:#090d12;border:1px solid #202936;border-radius:14px}.exampleModel{text-align:center;color:var(--muted);margin:16px 0 2px}.exampleModel b{color:#ff9b38;font-size:16px}.carouselDots{display:flex;justify-content:center;gap:7px;margin-top:14px;flex-wrap:wrap}.carouselDot{width:8px;height:8px;padding:0;margin:0;border:0;border-radius:50%;background:#3b4552}.carouselDot.active{background:var(--orange)}@media(max-width:800px){.examplePair{grid-template-columns:1fr}.exampleMedia img,.exampleMedia video{height:min(65vh,480px)}}
/* v1.2 - Minhas geracoes */
.gallerySection{margin-top:18px}
.galleryHead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.galleryHead>div>span{color:var(--orange);font-weight:bold;font-size:12px;letter-spacing:1.5px}
.galleryHead h2{font-size:25px;margin:5px 0}
.galleryHead p{color:var(--muted);margin:0;font-size:13px}
.secondaryBtn{width:auto;min-width:105px;height:42px;margin:0;padding:0 16px;background:#0d1219;color:var(--text);border:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.generationCard{background:#0c1118;border:1px solid #202936;border-radius:14px;padding:16px;min-width:0}
.generationTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.generationTop h3{font-size:14px;margin:8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.modelTag{display:inline-block;color:#ff9b38;font-size:11px;font-weight:900;letter-spacing:.7px}
.generationMeta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;margin-top:14px}
.generationMeta span:last-child{white-space:nowrap}
.galleryDownload{width:100%;height:42px;margin-top:13px;border-radius:11px;background:linear-gradient(135deg,#ff7200,#ffa038);color:#111;font-weight:900;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px}
.jobError{color:#ffb0b0;font-size:11px;line-height:1.5;margin:12px 0 0}
.emptyGallery{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;text-align:center;padding:35px;border:1px dashed #303b49;border-radius:14px;color:var(--muted)}
.emptyGallery b{color:var(--text)}
.message.success{background:rgba(32,212,120,.08);color:#9af0c3;border-color:#24563c}
@media(max-width:800px){.gallery{grid-template-columns:1fr}}
@media(max-width:480px){.galleryHead{align-items:flex-start;flex-direction:column}.secondaryBtn{width:100%}.generationMeta{flex-direction:column;gap:5px}}

.navPill{text-decoration:none;color:var(--text);cursor:pointer}.navPill:hover{border-color:#ff7a00;color:#ff9b38}
.galleryPageIntro{padding:44px 2px 18px}.galleryPageIntro>span{color:var(--orange);font-size:12px;font-weight:900;letter-spacing:1.5px}.galleryPageIntro h1{font-size:42px;line-height:1.05;margin:8px 0 10px}.galleryPageIntro p{color:var(--muted);max-width:720px;margin:0}
@media(max-width:650px){.right{flex-wrap:wrap;justify-content:flex-end}.galleryPageIntro h1{font-size:34px}}

/* v1.4 - previews e navegacao */
.brandLink{text-decoration:none;color:inherit}
.galleryPreview{width:100%;height:230px;background:#080c11;border:1px solid #263140;border-radius:11px;overflow:hidden;margin-bottom:14px;display:flex;align-items:center;justify-content:center}
.galleryPreview video{width:100%;height:100%;object-fit:contain;background:#080c11}
.backToGenerator{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;min-height:42px;padding:0 17px;border:1px solid #334052;border-radius:11px;background:#111821;color:var(--text);text-decoration:none;font-weight:800;font-size:13px}
.backToGenerator:hover{border-color:#ff7a00;color:#ff9b38}
@media(max-width:800px){.galleryPreview{height:300px}}
@media(max-width:480px){.galleryPreview{height:250px}}

/* v1.5 - rodape legal */
.siteFooter a, footer a{color:var(--muted);text-decoration:none}
.siteFooter a:hover, footer a:hover{color:#ff9b38}
.footerSep{margin:0 9px;color:#536071}
.legalPage{min-height:65vh;padding-top:55px}
.legalPage>span{color:var(--orange);font-size:12px;font-weight:900;letter-spacing:1.5px}
.legalPage h1{font-size:40px;margin:8px 0 18px}
.legalNotice{max-width:760px;color:var(--muted);line-height:1.7}

/* v1.6 - monitor da geração atual */
#currentGeneration{margin-top:18px}
#currentGeneration .download{margin-top:16px}
@media(max-width:600px){#currentGeneration .statusHead{align-items:flex-start;gap:10px}}


/* v1.7 - header fino, fixo e responsivo */
header{
  position:sticky;
  top:0;
  z-index:1000;
  height:58px;
  padding:6px 3vw;
  background:rgba(8,11,16,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
header .brand{gap:9px;min-width:0}
header .brand img{width:42px;height:42px;border-radius:10px}
header .brand b{font-size:16px;line-height:1.05}
header .brand small{font-size:10px}
header .right{gap:8px}
header .pill,
header .credits,
header .userPill{
  min-height:34px;
  padding:7px 10px;
  border:1px solid var(--line);
  background:#111720;
  border-radius:10px;
  font-size:11px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
header .userPill{color:var(--text);font-weight:800}
header .credits b{font-size:16px;margin-left:6px}

@media(max-width:800px){
  header{height:56px;padding:6px 12px}
  header .brand img{width:40px;height:40px}
  header .brand b{font-size:15px}
  header .right{gap:6px;flex-wrap:nowrap}
  header .pill{display:inline-flex}
  header #api{display:none}
  header .userPill{display:none}
  header .pill,header .credits{padding:7px 9px;font-size:10px}
  header .credits b{font-size:14px}
}
@media(max-width:480px){
  header .brand small{display:none}
  header .brand img{width:38px;height:38px}
  header .brand b{font-size:14px}
  header .navPill{max-width:118px;overflow:hidden;text-overflow:ellipsis}
}

/* v1.8 - autenticacao */
.authGate{position:fixed;inset:0;z-index:9000;background:rgba(3,5,8,.94);backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}.authGate.hidden{display:none!important}.authBox{width:min(430px,100%);text-align:center;border:1px solid var(--line);background:linear-gradient(#171e28,#0e131a);border-radius:22px;padding:28px}.authBox img{width:70px;height:70px;object-fit:contain;border-radius:16px}.authBox h2{margin:12px 0 7px}.authBox>p:not(.message){color:var(--muted);margin:0 0 18px}.authBox input{width:100%;height:48px;margin:6px 0;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#0c1118;color:var(--text);outline:none}.authBox input:focus{border-color:var(--orange)}.authBox .authSecondary{margin-top:8px;background:#111720;color:var(--text);border:1px solid var(--line)}body.authLocked{overflow:hidden}.headerLogout{width:auto;height:34px;margin:0;padding:0 10px;border:1px solid var(--line);background:#111720;color:var(--muted);border-radius:10px;font-size:11px}.headerLogout:hover{color:#ff9b38;border-color:var(--orange)}@media(max-width:800px){.headerLogout{display:none}}

/* =========================================================
   HEADER - PADRONIZACAO DOS BOTOES
========================================================= */

header .right {
  display: flex;
  align-items: center;
  gap: 8px;
}

header .right .pill,
header .right .navPill,
header .right .userPill,
header .right .credits {
  box-sizing: border-box;
  min-height: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

/* Remove estilos globais de button que deformam o header */
header .right button.pill,
header .right button.navPill,
header .right button.userPill {
  width: auto;
  min-width: 0;
  padding: 0 12px;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}

/* Links do header com exatamente a mesma altura */
header .right a.pill,
header .right a.navPill {
  padding: 0 12px;
}

/* Créditos */
header .right .credits {
  padding: 0 12px;
}

/* Minha conta */
#accountBtn {
  width: auto !important;
  min-width: 0 !important;
}

/* =========================================================
   MODAL - MINHA CONTA
========================================================= */

#accountModal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
}

#accountModal.hidden {
  display: none !important;
}

.accountModalCard {
  position: relative;

  width: 100%;
  max-width: 430px;

  padding: 32px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;

  background: #111318;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.55);
}

.accountModalCard #accountClose {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 36px;
  height: 36px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.05);

  color: #fff;

  font-size: 24px;
  line-height: 1;

  cursor: pointer;
}

.accountModalCard #accountClose:hover {
  background: rgba(255, 255, 255, 0.10);
}

.accountLabel {
  display: block;

  margin-bottom: 8px;

  color: #ff8a00;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

.accountModalCard h2 {
  margin: 0 0 24px 0;

  color: #fff;

  font-size: 24px;
}

.accountInfo {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

.accountInfo > div {
  display: flex;
  flex-direction: column;

  gap: 6px;

  padding: 15px 16px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.03);
}

.accountInfo small {
  color: #8f949e;

  font-size: 12px;
  font-weight: 600;
}

.accountInfo strong {
  color: #fff;

  font-size: 15px;
  font-weight: 700;

  overflow-wrap: anywhere;
}

/* =========================================================
   COMPRAR CRÉDITOS - BOTÃO DO HEADER
========================================================= */

header .right .creditsButton {
  width: auto;
  min-width: 0;
  height: 34px;
  min-height: 34px;

  margin: 0;
  padding: 0 12px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: #111720;
  color: var(--text);

  font: inherit;
  font-size: 11px;
  font-weight: normal;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
  cursor: pointer;
}

header .right .creditsButton:hover {
  border-color: var(--orange);
}

header .right .creditsButton b {
  color: #ff9b38;
  font-size: 16px;
  margin-left: 6px;
}


/* =========================================================
   MODAL - COMPRAR CRÉDITOS
========================================================= */

#creditsModal {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.76);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#creditsModal.hidden {
  display: none !important;
}


.creditsModalCard {
  position: relative;

  width: min(920px, 100%);

  max-height: calc(100vh - 40px);
  overflow-y: auto;

  padding: 32px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #151a22,
      #0e1218
    );

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.60);
}


/* X */

.creditsModalCard #creditsClose {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 36px;
  height: 36px;

  min-width: 36px;

  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.05);

  color: #fff;

  font-size: 24px;
  line-height: 1;

  cursor: pointer;
}

.creditsModalCard #creditsClose:hover {
  background: rgba(255, 255, 255, 0.10);
}


/* TÍTULO */

.creditsModalLabel {
  display: block;

  margin-bottom: 8px;

  color: var(--orange);

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}

.creditsModalCard > h2 {
  margin: 0 0 8px;

  color: #fff;

  font-size: 27px;
}

.creditsModalIntro {
  margin: 0 0 24px;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.6;
}


/* =========================================================
   PACOTES
========================================================= */

.creditPackages {
  display: grid;

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

  gap: 14px;
}


.creditPackage {
  position: relative;

  min-width: 0;

  padding: 20px;

  border: 1px solid #293341;
  border-radius: 16px;

  background: #0c1118;
}


.creditPackage.featured {
  border-color: var(--orange);

  background:
    linear-gradient(
      180deg,
      rgba(255, 122, 0, 0.10),
      #0c1118 45%
    );

  box-shadow:
    0 0 0 1px rgba(255, 122, 0, 0.08);
}


.creditPackageTop {
  min-height: 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;
}


.packageName {
  color: #ff9b38;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
}


.packagePopular {
  padding: 5px 7px;

  border-radius: 99px;

  background: rgba(255, 122, 0, 0.15);

  color: #ff9b38;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: .7px;

  white-space: nowrap;
}


.packageCredits {
  display: block;

  margin-top: 15px;

  color: #fff;

  font-size: 20px;
}


.packagePrice {
  display: flex;
  align-items: flex-start;

  gap: 4px;

  margin-top: 15px;
}


.packagePrice span {
  margin-top: 6px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 700;
}


.packagePrice b {
  color: #fff;

  font-size: 35px;
  line-height: 1;
  letter-spacing: -1px;
}


.packageUnit {
  display: block;

  margin-top: 8px;

  color: var(--muted);

  font-size: 11px;
}


/* BOTÕES DOS PACOTES */

.creditPackage .choosePackage {
  width: 100%;
  height: 44px;

  margin-top: 20px;

  border: 0;
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #ff7200,
      #ffa038
    );

  color: #111;

  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
}


.creditPackage:not(.featured) .choosePackage {
  background: #151c25;

  color: #fff;

  border: 1px solid #303b49;
}


.creditPackage:not(.featured)
.choosePackage:hover {
  border-color: var(--orange);

  color: #ff9b38;
}


/* =========================================================
   SALDO / SELEÇÃO
========================================================= */

.creditsCurrentBalance {
  margin-top: 20px;

  padding: 13px 15px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;

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

  color: var(--muted);

  text-align: center;

  font-size: 12px;
}


.creditsCurrentBalance strong {
  color: #ff9b38;

  font-size: 16px;

  margin: 0 4px;
}


.creditsSelection {
  margin: 12px 0 0;

  padding: 12px;

  border: 1px solid rgba(32,212,120,.25);
  border-radius: 11px;

  background: rgba(32,212,120,.08);

  color: #9af0c3;

  text-align: center;

  font-size: 12px;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width: 760px) {

  .creditsModalCard {
    padding: 26px 18px 20px;
  }

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

  .creditPackage {
    padding: 17px;
  }

}


@media(max-width: 480px) {

  header .right .creditsButton {
    padding: 0 9px;

    font-size: 10px;
  }

  header .right .creditsButton b {
    font-size: 14px;
  }

}