:root {
  --fundo: #0b0b0c;
  --superficie: #161617;
  --linha: #2e2e30;
  --texto: #f2f0e8;
  --suave: #a3a198;
  --marca: #d4ff3a;
  --erro: #ff8a7a;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  place-items: stretch;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--linha);
  padding: 0.75rem 1.25rem;
}
.seletor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--suave);
}
.seletor select {
  border: 1px solid var(--linha);
  background: var(--superficie);
  padding: 0.4rem 0.6rem;
  color: var(--texto);
}
[hidden] {
  display: none !important;
}
.entrada {
  width: min(22rem, calc(100% - 2rem));
  margin: auto;
  align-self: center;
}
.entrada h1 {
  margin: 1.5rem 0 1rem;
  font-size: 1.4rem;
}
.entrada .botao {
  width: 100%;
}
.sair {
  border: 1px solid var(--linha);
  background: none;
  padding: 0.55rem 0.8rem;
  color: var(--suave);
  cursor: pointer;
}
.estado {
  margin: 0 0 0 auto;
  color: var(--suave);
}
.estado.ruim {
  color: var(--erro);
}
.botao {
  border: 0;
  background: var(--marca);
  padding: 0.6rem 1.1rem;
  color: #0b0b0c;
  font-weight: 700;
  cursor: pointer;
}
.botao:disabled {
  background: var(--linha);
  color: var(--suave);
  cursor: default;
}
.area {
  display: grid;
  grid-template-columns: 11rem minmax(21rem, 27rem) minmax(0, 1fr);
  min-height: 0;
}
.secoes {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  border-right: 1px solid var(--linha);
  padding: 1rem 0.6rem;
}
.secoes button {
  border: 0;
  background: none;
  padding: 0.6rem 0.7rem;
  color: var(--suave);
  text-align: left;
  cursor: pointer;
}
.secoes button[aria-current='true'] {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: inset 2px 0 var(--marca);
}
.formulario {
  overflow-y: auto;
  border-right: 1px solid var(--linha);
  padding: 1.25rem;
}
.formulario h1 {
  margin: 0;
  font-size: 1.4rem;
}
.descricao {
  margin: 0.25rem 0 1.25rem;
  color: var(--suave);
}
.campo {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
}
.campo > input,
.campo > textarea,
.campo > select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  border: 1px solid var(--linha);
  background: var(--fundo);
  padding: 0.55rem 0.65rem;
  font-weight: 400;
}
.campo :focus-visible,
.opcoes input:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
}
.campo.invalido > input,
.campo.invalido > textarea,
.campo.invalido > select {
  border-color: var(--erro);
}
.ajuda {
  display: block;
  margin-top: 0.25rem;
  color: var(--suave);
  font-size: 0.82rem;
  font-weight: 400;
}
.mensagem {
  display: block;
  margin-top: 0.25rem;
  color: var(--erro);
  font-size: 0.82rem;
  font-weight: 500;
}
.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0;
  border: 0;
  padding: 0;
}
.opcoes legend {
  margin-bottom: 0.35rem;
  padding: 0;
  font-weight: 600;
}
.opcoes label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
}
.opcoes input {
  accent-color: var(--marca);
}
.foto {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--linha);
  padding-bottom: 1rem;
}
.miniatura {
  width: 6rem;
  height: 7.5rem;
  background: var(--superficie);
  object-fit: cover;
}
.foto-titulo {
  margin: 0 0 0.35rem;
  font-weight: 600;
}
.foto input[type='file'] {
  width: 100%;
  margin-bottom: 0.6rem;
  color: var(--suave);
}
.foto .campo {
  margin: 0;
  font-size: 0.85rem;
}
.foto .campo input {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  border: 1px solid var(--linha);
  background: var(--fundo);
  padding: 0.45rem 0.55rem;
  font-weight: 400;
}
.item {
  margin-bottom: 0.5rem;
  border: 1px solid var(--linha);
  background: var(--superficie);
}
.item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.item summary::-webkit-details-marker {
  display: none;
}
.item .corpo {
  padding: 0.25rem 0.75rem 0.75rem;
}
.acoes {
  display: flex;
  gap: 0.15rem;
}
.acoes button {
  min-width: 1.9rem;
  border: 1px solid var(--linha);
  background: var(--fundo);
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}
.acoes button:disabled {
  opacity: 0.35;
  cursor: default;
}
.adicionar {
  width: 100%;
  border: 1px dashed var(--suave);
  background: none;
  padding: 0.6rem;
  font-weight: 600;
  cursor: pointer;
}
.previa {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}
.previa-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--linha);
  padding: 0.45rem 0.9rem;
  color: var(--suave);
}
.previa-barra button {
  border: 1px solid var(--linha);
  background: none;
  padding: 0.25rem 0.6rem;
  color: var(--suave);
  cursor: pointer;
}
.previa-barra button[aria-pressed='true'] {
  border-color: var(--marca);
  color: var(--texto);
}
.previa-moldura {
  display: grid;
  justify-items: center;
  min-height: 0;
  background: #000;
}
.previa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  transition: width 0.3s ease;
}
@media (max-width: 1100px) {
  body {
    height: auto;
  }
  .area {
    grid-template-columns: 1fr;
  }
  .secoes {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--linha);
  }
  .secoes button {
    white-space: nowrap;
  }
  .formulario {
    border-right: 0;
  }
  .previa {
    height: 80dvh;
    border-top: 1px solid var(--linha);
  }
}
@media (prefers-reduced-motion: reduce) {
  .previa iframe {
    transition: none;
  }
}