/* Design system compartilhado dos geradores — ID visual única.
   Auto-incluído em todo gerador (apps/tools/registry.py). Usa apenas classes
   .gen-* (não estiliza button/input genéricos), pra conviver com geradores
   ainda não refatorados. Usa os tokens do site (--accent, --card, etc.). */

.tool-generator .gen { max-width: 100%; color: var(--fg); }

.tool-generator .gen-group { margin: 0 0 22px; }
.tool-generator .gen-label {
  display: block; margin: 0 0 8px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
}

/* Botões de opção (toggle) — ex.: Raça/Gênero no RPG */
.tool-generator .gen-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-generator .gen-option {
  appearance: none; cursor: pointer;
  padding: 8px 14px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.88rem; font-weight: 500;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tool-generator .gen-option:hover { border-color: var(--border-2); color: var(--fg); }
.tool-generator .gen-option.is-active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2);
}

/* Campos */
.tool-generator .gen-input,
.tool-generator .gen-textarea,
.tool-generator .gen-select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border); color: var(--fg);
  font-size: 1rem; font-family: inherit; transition: border-color .15s ease;
}
.tool-generator .gen-input:focus,
.tool-generator .gen-textarea:focus,
.tool-generator .gen-select:focus { outline: none; border-color: var(--accent); }
.tool-generator .gen-input::placeholder,
.tool-generator .gen-textarea::placeholder { color: var(--muted); }
.tool-generator .gen-textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.tool-generator .gen-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2399a1b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.tool-generator .gen-select option { background: var(--card); color: var(--fg); }

/* Botões de ação */
.tool-generator .gen-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 0.95rem; font-weight: 600;
  font-family: inherit; transition: background .15s ease, border-color .15s ease;
}
.tool-generator .gen-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.tool-generator .gen-btn:disabled { opacity: .55; cursor: default; }
/* Confirmação padrão: botão vira verde ao copiar (mesma linguagem do .gen-copy). */
.tool-generator .gen-btn.copied,
.tool-generator .gen-btn.copied:hover { background: var(--success); border-color: var(--success); }
.tool-generator .gen-btn--block { width: 100%; }
/* Faixa de ações — centraliza o botão principal (evita full-width "gigante")
   com respiro vertical generoso. */
.tool-generator .gen-actions { display: flex; justify-content: center; margin: 26px 0; }
.tool-generator .gen-btn--ghost {
  background: transparent; color: var(--fg); border-color: var(--border-2);
}
.tool-generator .gen-btn--ghost:hover { background: var(--card-2); border-color: var(--accent); }

/* Resultados copiáveis */
.tool-generator .gen-results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin-top: 18px;
}
.tool-generator .gen-result {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
}
.tool-generator .gen-val { color: var(--fg); font-size: 0.98rem; word-break: break-word; }
.tool-generator .gen-copy {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  padding: 7px 12px; border-radius: 8px;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  font-size: 0.8rem; font-weight: 600; font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.tool-generator .gen-copy:hover { background: var(--accent-2); border-color: var(--accent-2); }
.tool-generator .gen-copy.copied { background: var(--success); border-color: var(--success); }

/* Variante "só ícone" do copiar (listas de nome) — mais limpo, dá espaço pro
   nome. Mesma linguagem do copiar dos cards do mural. O ícone vem do ::before
   (mask), então o botão fica vazio e troca pra "check" no estado .copied. */
.tool-generator .gen-copy--icon {
  padding: 0; width: 34px; height: 31px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--border); color: var(--muted);
}
.tool-generator .gen-copy--icon:hover { background: var(--card-2); border-color: var(--accent-2); color: var(--fg); }
.tool-generator .gen-copy--icon.copied { background: var(--success); border-color: var(--success); color: #fff; }
.tool-generator .gen-copy--icon::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tool-generator .gen-copy--icon.copied::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Alertas */
.tool-generator .gen-alert {
  padding: 12px 14px; border-radius: 10px; margin: 14px 0;
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--fg);
  font-size: 0.95rem;
}
.tool-generator .gen-alert--error {
  background: rgba(220,70,70,0.12); border-color: #c84b4b;
}
.tool-generator .gen-hidden { display: none !important; }