/* Painel de configuracao, flutuando sobre o jogo. Prefixo ih- em tudo: isto
   convive no DOM do jogo, e um seletor solto pegaria os elementos dele. */
#idle-helper-config, #idle-helper-config * { box-sizing: border-box; }

#idle-helper-config {
  --ih-painel:   #0b1011;
  --ih-cartao:   #121a1c;
  --ih-cartao2:  #171f22;
  --ih-borda:    #202629;
  --ih-texto:    #e2e8f0;
  --ih-fraco:    #8c95a0;
  --ih-apagado:  #5e6770;
  --ih-destaque: #f2dba9;
  --ih-verde:    #7dc98f;
  --ih-erro:     #e87a7a;

  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: none;
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
  color: var(--ih-texto);
}

#idle-helper-config.aberto { display: block; }

.ih-fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}

#idle-helper-config.aberto .ih-fundo { opacity: 1; }

.ih-painel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.97);
  width: 600px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  background: var(--ih-painel);
  border: 1px solid var(--ih-borda);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .9, .3, 1);
  overflow: hidden;
}

#idle-helper-config.aberto .ih-painel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Topo ------------------------------------------------------------- */
.ih-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ih-borda);
  background: radial-gradient(90% 160% at 15% 0%, rgba(242,219,169,.07), transparent 70%);
}

.ih-marca { display: flex; align-items: baseline; gap: 10px; }

.ih-logo {
  font: 800 14px "Segoe UI", sans-serif;
  letter-spacing: .5px;
  color: var(--ih-destaque);
}

.ih-logo b { color: var(--ih-texto); font-weight: 800; }

.ih-perfil { font-size: 11.5px; color: var(--ih-apagado); }

.ih-x {
  width: 30px; height: 30px;
  border: 1px solid var(--ih-borda);
  border-radius: 8px;
  background: var(--ih-cartao);
  color: var(--ih-apagado);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}

.ih-x:hover { background: var(--ih-cartao2); color: var(--ih-texto); border-color: var(--ih-fraco); }

/* ---- Execucao --------------------------------------------------------- */
.ih-execucao {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ih-borda);
}

.ih-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 12.5px "Segoe UI", sans-serif;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--ih-borda);
  background: var(--ih-cartao);
  color: var(--ih-fraco);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, box-shadow .16s;
}

.ih-btn:disabled { opacity: .4; cursor: default; }

.ih-iniciar:not(:disabled) {
  color: var(--ih-verde);
  border-color: rgba(125,201,143,.45);
  background: rgba(125,201,143,.12);
}

.ih-iniciar:not(:disabled):hover {
  background: rgba(125,201,143,.22);
  border-color: var(--ih-verde);
  box-shadow: 0 0 0 3px rgba(125,201,143,.1);
}

.ih-parar:not(:disabled) {
  color: var(--ih-erro);
  border-color: rgba(232,122,122,.4);
  background: rgba(232,122,122,.1);
}

.ih-parar:not(:disabled):hover {
  background: rgba(232,122,122,.2);
  border-color: var(--ih-erro);
  box-shadow: 0 0 0 3px rgba(232,122,122,.1);
}

.ih-tri {
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.ih-quad { width: 9px; height: 9px; background: currentColor; border-radius: 1.5px; }

.ih-estado { margin-left: auto; font-size: 11.5px; color: var(--ih-apagado); }
.ih-estado.rodando { color: var(--ih-verde); }

/* ---- Abas ------------------------------------------------------------- */
.ih-abas {
  display: flex;
  gap: 2px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--ih-borda);
}

.ih-aba {
  font: 600 12px "Segoe UI", sans-serif;
  padding: 8px 15px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ih-apagado);
  cursor: pointer;
  transition: color .16s, border-color .16s;
}

.ih-aba:hover { color: var(--ih-fraco); }
.ih-aba.ativa { color: var(--ih-destaque); border-bottom-color: var(--ih-destaque); }

/* ---- Corpo ------------------------------------------------------------ */
.ih-corpo {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Uma linha = um ajuste. Rotulo fraco a esquerda, valor forte a direita.
   Era o que faltava na barra antiga: la tudo tinha o mesmo peso visual e
   nada dizia o que era importante. */
.ih-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid var(--ih-borda);
  border-radius: 9px;
  background: var(--ih-cartao);
  transition: border-color .16s, background .16s;
}

.ih-linha:hover { border-color: #2b3438; }
.ih-linha.travada { opacity: .5; }

.ih-rotulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ih-rotulo .nome { font-size: 12.5px; color: var(--ih-texto); }
.ih-rotulo .dica { font-size: 10.5px; color: var(--ih-apagado); }

/* ---- Toggle ----------------------------------------------------------- */
.ih-toggle {
  position: relative;
  flex: 0 0 40px;
  width: 40px; height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ih-borda);
  background: #0e1416;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.ih-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ih-apagado);
  transition: transform .2s cubic-bezier(.2,.9,.3,1), background .2s ease;
}

.ih-toggle.ligado { background: rgba(125,201,143,.22); border-color: rgba(125,201,143,.5); }
.ih-toggle.ligado::after { transform: translateX(18px); background: var(--ih-verde); }
.ih-linha.travada .ih-toggle { cursor: default; }

/* ---- Select e numero --------------------------------------------------- */
.ih-select {
  appearance: none;
  font: 12.5px "Segoe UI", sans-serif;
  padding: 8px 30px 8px 11px;
  min-width: 150px;
  border: 1px solid var(--ih-borda);
  border-radius: 7px;
  background: var(--ih-cartao2);
  color: var(--ih-texto);
  cursor: pointer;
  /* Seta desenhada com dois gradientes: a do Windows nao aceita estilo e
     destoava de todo o resto. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ih-fraco) 50%),
    linear-gradient(135deg, var(--ih-fraco) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .16s;
}

.ih-select:hover, .ih-select:focus { border-color: var(--ih-fraco); outline: none; }
.ih-select option { background: var(--ih-cartao2); color: var(--ih-texto); }

.ih-numero {
  font: 12.5px "Segoe UI", sans-serif;
  width: 88px;
  padding: 8px 11px;
  border: 1px solid var(--ih-borda);
  border-radius: 7px;
  background: var(--ih-cartao2);
  color: var(--ih-texto);
  text-align: right;
  transition: border-color .16s;
}

.ih-numero:hover, .ih-numero:focus { border-color: var(--ih-fraco); outline: none; }

.ih-acao {
  font: 600 12px "Segoe UI", sans-serif;
  padding: 8px 14px;
  border: 1px solid var(--ih-borda);
  border-radius: 7px;
  background: var(--ih-cartao2);
  color: var(--ih-fraco);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}

.ih-acao:hover:not(:disabled) { background: #1d2629; color: var(--ih-texto); border-color: var(--ih-fraco); }
.ih-acao:disabled { opacity: .4; cursor: default; }

/* Variantes coloridas. A ação principal da tela nasce verde; a destrutiva
   fica em vinho escuro — visível, mas sem competir por atenção. */
.ih-acao.iniciar {
  color: #0a1a10;
  border-color: #5fbf7d;
  background: linear-gradient(180deg, #8fe0a4, #5fbf7d);
  font-weight: 700;
}

.ih-acao.iniciar:hover:not(:disabled) {
  background: linear-gradient(180deg, #a3ecb6, #6ecd8b);
  border-color: #5fbf7d;
  color: #0a1a10;
  box-shadow: 0 0 0 3px rgba(125,201,143,.14);
}

.ih-acao.parar {
  color: #f0b4b4;
  border-color: rgba(232,122,122,.5);
  background: linear-gradient(180deg, #33191d, #2a1418);
}

.ih-acao.parar:hover:not(:disabled) {
  background: linear-gradient(180deg, #452026, #3a1a1f);
  border-color: var(--ih-erro);
  color: #ffd0d0;
  box-shadow: 0 0 0 3px rgba(232,122,122,.12);
}

/* ---- Sub-painel de lista ------------------------------------------------ */
/* Blacklist e Consumo abriam JANELA DO WINDOWS — barra de título nativa,
   checkbox quadrado — no meio de um painel desenhado. A costura aparecia.
   Agora deslizam por cima do próprio painel.
   Tela cheia, e não uma linha que expande: quem caça sério acumula dezenas de
   itens, e isso deixaria a aba Hunt numa coluna interminável. */
.ih-lista-tela {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ih-painel);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.2, .9, .3, 1);
  z-index: 3;
}

.ih-lista-tela.aberta { transform: none; }

.ih-lista-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ih-borda);
}

.ih-voltar {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ih-borda);
  border-radius: 8px;
  background: var(--ih-cartao);
  color: var(--ih-fraco);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}

.ih-voltar:hover { background: var(--ih-cartao2); color: var(--ih-texto); border-color: var(--ih-fraco); }

.ih-lista-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ih-lista-titulo .nome { font-size: 13px; font-weight: 600; color: var(--ih-texto); }
.ih-lista-titulo .dica { font-size: 10.5px; color: var(--ih-apagado); }

.ih-add {
  display: flex;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ih-borda);
}

.ih-add input {
  flex: 1;
  min-width: 0;
  font: 12.5px "Segoe UI", sans-serif;
  padding: 9px 12px;
  border: 1px solid var(--ih-borda);
  border-radius: 8px;
  background: var(--ih-cartao2);
  color: var(--ih-texto);
  transition: border-color .16s;
}

.ih-add input:focus { border-color: var(--ih-destaque); outline: none; }
.ih-add input::placeholder { color: var(--ih-apagado); }

.ih-add button {
  flex: 0 0 auto;
  font: 700 12px "Segoe UI", sans-serif;
  padding: 9px 17px;
  border: 1px solid #5fbf7d;
  border-radius: 8px;
  background: linear-gradient(180deg, #8fe0a4, #5fbf7d);
  color: #0a1a10;
  cursor: pointer;
  transition: background .16s, box-shadow .16s;
}

.ih-add button:hover {
  background: linear-gradient(180deg, #a3ecb6, #6ecd8b);
  box-shadow: 0 0 0 3px rgba(125,201,143,.14);
}

.ih-itens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ih-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--ih-borda);
  border-radius: 8px;
  background: var(--ih-cartao);
  font-size: 12.5px;
  animation: ih-entrar .22s ease both;
}

@keyframes ih-entrar {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.ih-item span { flex: 1; min-width: 0; word-break: break-word; }

.ih-item button {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--ih-apagado);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.ih-item button:hover {
  background: rgba(232,122,122,.16);
  color: var(--ih-erro);
  border-color: rgba(232,122,122,.4);
}

.ih-vazio {
  padding: 24px 4px;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--ih-apagado);
}

/* ---- Telegram ----------------------------------------------------------- */
.ih-tg-estado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  margin-bottom: 4px;
  border-radius: 9px;
  border: 1px solid rgba(125,201,143,.35);
  background: rgba(125,201,143,.08);
  color: var(--ih-verde);
  font-size: 12.5px;
  font-weight: 600;
}

.ih-tg-passos {
  padding: 4px 2px 12px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ih-fraco);
}

.ih-tg-passos b { color: var(--ih-texto); font-weight: 600; }

/* Fundo branco atrás do QR: leitor de celular precisa de contraste, e o
   PNG vem com fundo transparente. */
.ih-qr {
  display: block;
  width: 190px;
  height: 190px;
  margin: 6px auto 14px;
  padding: 9px;
  border-radius: 10px;
  background: #fff;
}

.ih-tg-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 13px;
  border: 1px solid var(--ih-borda);
  border-radius: 9px;
  background: var(--ih-cartao);
  font-size: 12.5px;
  transition: border-color .16s;
}

.ih-tg-linha:hover { border-color: #2b3438; }

/* Fixo no rodapé, fora da área que rola. Com as 7 categorias numa tela de
   768px os botões caíam abaixo do corte — e "Enviar teste" e "Desvincular"
   são justamente o que se veio fazer aqui. */
.ih-tg-acoes {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ih-borda);
  background: var(--ih-painel);
}

.ih-tg-acoes button { flex: 1; }

.ih-tg-erro {
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(232,122,122,.4);
  background: rgba(232,122,122,.08);
  color: #f0b4b4;
  font-size: 12px;
}

.ih-esperando {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(242,219,169,.3);
  background: rgba(242,219,169,.06);
  color: var(--ih-destaque);
  font-size: 12px;
}

/* Ponto pulsante: mostra que a tela está esperando de verdade, não travada. */
.ih-esperando::before {
  content: "";
  width: 8px; height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--ih-destaque);
  animation: ih-pulso 1.4s ease-in-out infinite;
}

@keyframes ih-pulso { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.ih-itens::-webkit-scrollbar { width: 8px; }
.ih-itens::-webkit-scrollbar-track { background: transparent; }
.ih-itens::-webkit-scrollbar-thumb { background: #1d2528; border-radius: 4px; }

.ih-corpo::-webkit-scrollbar { width: 8px; }
.ih-corpo::-webkit-scrollbar-track { background: transparent; }
.ih-corpo::-webkit-scrollbar-thumb { background: #1d2528; border-radius: 4px; }
