/* Chrome em volta do card. O card em si vem do card.css e não é tocado aqui. */

:root {
  /* Trava o auto-dark do browser, que repintaria a página inteira. Mas NÃO uso
     forced-color-adjust aqui: quem liga o alto contraste do Windows precisa dele, e
     anular isso no painel seria hostil. A trava de forced-colors fica só no .card,
     que é o arquivo que sai daqui e não pode mudar de cor. */
  color-scheme: only dark;

  --green:  #00F3C3;
  --ink:    #050F0D;
  --ink-2:  #0A1A17;
  --ink-3:  #0E2521;
  --edge:   rgba(0, 243, 195, .16);
  --txt:    #E6F5F1;
  --muted:  #7FA79E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--ink); }

body {
  min-height: 100vh;
  background:
    radial-gradient(60% 50% at 88% 0%, rgba(0, 243, 195, .10), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(0, 145, 255, .08), transparent 70%),
    var(--ink);
  color: var(--txt);
  font-family: "Barlow C", system-ui, sans-serif;
  font-size: 17px;
}

/* height fixo, não min-height: com min-height o card de 1080px esticava o container,
   e o container esticado dizia ao fitStage() que cabia em escala 1. O cálculo se
   auto-alimentava e o preview nunca encolhia. */
.app { display: flex; height: 100vh; align-items: stretch; }

/* ---------------- panel ---------------- */
.panel {
  width: 390px; flex: none;
  padding: 30px 30px 40px;
  background: linear-gradient(180deg, var(--ink-2), rgba(10, 26, 23, .55));
  border-right: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.brand img { height: 40px; }
.brand span {
  font-family: "Bebas", sans-serif; font-size: 20px; letter-spacing: .17em;
  color: var(--muted); padding-top: 4px;
}

.field { display: flex; flex-direction: column; gap: 7px; }
.row { display: flex; gap: 14px; }
.row .field { flex: 1; min-width: 0; }

.label {
  font-family: "Bebas", sans-serif; font-size: 17px; letter-spacing: .2em;
  color: var(--green);
}

input[type=text], select, textarea {
  width: 100%;
  font-family: "Barlow C", sans-serif; font-size: 18px; font-weight: 500;
  color: var(--txt);
  background: var(--ink-3);
  border: 1.5px solid var(--edge); border-radius: 5px;
  padding: 11px 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; line-height: 1.35; font-size: 16px; }

input[type=text]:focus, select:focus, textarea:focus, .drop:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 243, 195, .16);
}

select { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%),
                    linear-gradient(135deg, var(--green) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--ink-3); color: var(--txt); }

small { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.hint { margin-top: -13px; }
small b { color: var(--green); font-weight: 700; }
code { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--green); }

/* ---- photo drop ---- */
.drop {
  position: relative;
  border: 1.5px dashed var(--edge); border-radius: 5px;
  background: var(--ink-3);
  transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--green); background: rgba(0, 243, 195, .07); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-inner { padding: 16px 14px; text-align: center; pointer-events: none; }
.drop-inner strong {
  display: block; font-size: 17px; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drop-inner small { display: block; margin-top: 3px; }

.ghost {
  align-self: flex-start;
  font-family: "Bebas", sans-serif; font-size: 15px; letter-spacing: .14em;
  color: var(--muted); background: none; border: 0; padding: 2px 0;
  cursor: pointer; border-bottom: 1px solid var(--edge);
}
.ghost:hover { color: var(--green); border-color: var(--green); }

/* ---- cta ---- */
.cta {
  margin-top: auto;
  font-family: "Bebas", sans-serif; font-size: 23px; letter-spacing: .16em;
  color: #04100D; background: var(--green);
  border: 0; border-radius: 5px; padding: 16px 18px 13px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 243, 195, .22);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0, 243, 195, .3); }
.cta:active { transform: translateY(0); }
.cta[disabled] { opacity: .55; cursor: progress; transform: none; }

.status { min-height: 20px; font-size: 14.5px; color: var(--muted); text-align: center; }
.status.err { color: #FF8A8A; }

/* ---------------- stage ---------------- */
.stage { flex: 1; min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; padding: 34px; }
.stage-inner { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }

/* O .card fica SEMPRE em 1080x1080 reais, senão o PNG exportado sairia com as medidas
   do preview. Quem encolhe é o .scaler, e a .stage-box existe pra ocupar no layout o
   tamanho JÁ escalado — transform não muda a caixa que o elemento reserva, e sem ela
   a página ganhava 1080px de altura e empurrava o botão de download pra fora da tela. */
.stage-box {
  position: relative; overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}

.scaler { width: 1080px; height: 1080px; transform-origin: top left; }

@media (max-width: 1180px) {
  .app { flex-direction: column; height: auto; min-height: 100vh; }
  .panel { width: 100%; border-right: 0; border-bottom: 1px solid var(--edge); overflow: visible; }
  .cta { margin-top: 8px; }
  .stage { padding: 22px; height: 78vh; }
}