:root {
  --fundo: #f4f6f5;
  --superficie: #ffffff;
  --texto: #18211e;
  --texto-suave: #5b6863;
  --borda: #dde3e0;
  --destaque: #0e7c66;
  --destaque-forte: #0a5f4e;
  --destaque-claro: #e3f3ef;
  --erro: #b42318;
  --erro-fundo: #fdecea;
  --sucesso-fundo: #e7f6ee;
  --raio: 12px;
  --sombra: 0 1px 2px rgb(16 24 20 / 0.06), 0 4px 16px rgb(16 24 20 / 0.06);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1513;
    --superficie: #17201d;
    --texto: #e8efec;
    --texto-suave: #9aaba5;
    --borda: #2a3632;
    --destaque: #2bb394;
    --destaque-forte: #5fd0b4;
    --destaque-claro: #173a32;
    --erro: #ff8a80;
    --erro-fundo: #3a1c1a;
    --sucesso-fundo: #163327;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

button { font: inherit; color: inherit; cursor: pointer; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; }

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}

.ferramentas { display: flex; flex-direction: column; gap: 6px; }
.ferramenta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
}
.ferramenta span { color: var(--texto-suave); font-size: 13px; }
.ferramenta:hover { background: var(--superficie); border-color: var(--borda); }
.ferramenta.ativa { background: var(--destaque-claro); border-color: var(--destaque); }
.ferramenta.ativa strong { color: var(--destaque-forte); }

.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
}
.painel h1 { margin: 0; font-size: 22px; }
.descricao { margin: -10px 0 0; color: var(--texto-suave); }

.area-envio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 40px 16px;
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.area-envio:hover, .area-envio:focus-visible, .area-envio.arrastando {
  border-color: var(--destaque);
  background: var(--destaque-claro);
  outline: none;
}
.area-titulo { font-weight: 600; font-size: 16px; }
.area-dica { color: var(--texto-suave); font-size: 13px; }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista:empty { display: none; }
.lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.lista .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .tamanho { color: var(--texto-suave); font-size: 13px; font-variant-numeric: tabular-nums; }
.lista button {
  border: none;
  background: transparent;
  color: var(--texto-suave);
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}
.lista button:hover { background: var(--fundo); color: var(--texto); }

.opcoes { display: flex; flex-wrap: wrap; gap: 16px; }
.opcoes:empty { display: none; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 200px; flex: 1; }
.campo[hidden] { display: none; }
.campo > span { font-size: 13px; font-weight: 600; }
.campo small { color: var(--texto-suave); font-size: 12px; }
.campo input, .campo select {
  font: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
}
.escolhas { display: flex; gap: 6px; flex-wrap: wrap; }
.escolhas label {
  padding: 7px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.escolhas input { position: absolute; opacity: 0; pointer-events: none; }
.escolhas label:has(input:checked) { border-color: var(--destaque); background: var(--destaque-claro); color: var(--destaque-forte); font-weight: 600; }
.escolhas label:has(input:focus-visible) { outline: 2px solid var(--destaque); outline-offset: 2px; }

.botao-principal {
  align-self: flex-start;
  padding: 11px 26px;
  border: none;
  border-radius: 10px;
  background: var(--destaque);
  color: #fff;
  font-weight: 600;
}
.botao-principal:hover:not(:disabled) { background: var(--destaque-forte); }
.botao-principal:disabled { opacity: 0.45; cursor: not-allowed; }
@media (prefers-color-scheme: dark) { .botao-principal { color: #08130f; } }

.botao-secundario {
  padding: 7px 14px;
  border: 1px solid var(--destaque);
  border-radius: 8px;
  background: transparent;
  color: var(--destaque-forte);
  font-weight: 600;
  font-size: 14px;
}

.status { padding: 12px 14px; border-radius: 10px; }
.status.processando { background: var(--fundo); }
.status.sucesso { background: var(--sucesso-fundo); }
.status.erro { background: var(--erro-fundo); color: var(--erro); }
.status a { color: var(--destaque-forte); font-weight: 600; }

.girando {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--borda);
  border-top-color: var(--destaque);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.rodape {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  color: var(--texto-suave);
  font-size: 12px;
}

@media (max-width: 760px) {
  .topo { padding: 12px 16px; }
  .layout { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .ferramentas { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .ferramenta { flex: 0 0 auto; }
  .ferramenta span { display: none; }
  .painel { padding: 18px; }
  .botao-principal { align-self: stretch; }
  .rodape { flex-direction: column; padding: 12px 16px; }
}

/* ---- licença ---- */
.topo-acoes { display: flex; align-items: center; gap: 10px; }
.selo {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--destaque-claro);
  color: var(--destaque-forte);
}
.ativacao { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; }
.ativacao[hidden], .layout[hidden] { display: none; }
.ativacao-cartao { width: 100%; max-width: 460px; }
.ativacao-cartao .campo { min-width: 0; }
.ativacao-cartao .campo small { font-weight: 400; }
.ativacao-cartao input { font-size: 15px; padding: 10px 12px; }
#chave { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; }