/**
 * instagram-massa.css — Instagram em Massa, no Design System do Nexus Core
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Este módulo tinha paleta própria (verde neon sobre fundo verde-escuro), o que
 * o fazia parecer um produto de outra empresa dentro do dashboard — e, pior,
 * ignorava o tema claro: as cores eram fixas, então no light tudo continuava
 * preto.
 *
 * Agora consome os tokens SEMÂNTICOS de `main.css` (--bg-card, --border,
 * --text, --accent...). Não há um único hex de marca aqui. Trocar o tema no
 * dashboard troca este módulo junto, de graça, e um ajuste futuro na paleta
 * chega aqui sem ninguém precisar lembrar deste arquivo.
 *
 * ESCOPO
 * Tudo prefixado em `.ig-massa`. O dashboard é uma SPA com vários módulos no
 * mesmo documento; seletor solto (`.card`, `.btn`) vazaria para as outras
 * telas.
 *
 * DESEMPENHO
 *   • animações só em `transform`/`opacity` (composição na GPU, sem layout);
 *   • `contain: content` nas listas longas, para o navegador não recalcular a
 *     página inteira quando 150 linhas de fila mudam de status;
 *   • `prefers-reduced-motion` respeitado.
 */

.ig-massa {
    /* Ponte para os tokens do tema. Os fallbacks existem para o caso de o
       módulo ser aberto fora do dashboard (teste isolado, storybook): sem eles
       a tela ficaria sem cor nenhuma em vez de só sem tema. */
    --im-fundo: var(--bg-body, #0c0c10);
    --im-painel: var(--bg-card, #111116);
    --im-painel-alto: var(--bg-elevated, #18181f);
    --im-campo: var(--bg-input, #15151b);
    --im-borda: var(--border, #26262f);
    --im-borda-sutil: var(--border-subtle, #1e1e26);
    --im-texto: var(--text, #fafafa);
    --im-texto-fraco: var(--text-muted, #8a8a97);
    --im-acento: var(--accent, #8b5cf6);
    --im-acento-texto: var(--accent-text, #a78bfa);
    --im-acento-fraco: var(--accent-dim, rgba(139, 92, 246, .12));
    --im-acento-brilho: var(--accent-glow, rgba(139, 92, 246, .28));
    --im-alerta: var(--yellow, #f59e0b);
    --im-erro: var(--red, #ef4444);
    --im-ok: var(--green, #22c55e);
    --im-raio: var(--radius-md, 14px);
    --im-raio-p: var(--radius-sm, 8px);
    --im-transicao: var(--ease, cubic-bezier(.16, 1, .3, 1));

    color: var(--im-texto);
    font-family: var(--font, 'Inter', system-ui, sans-serif);
    min-height: 100%;
    padding: var(--space-5, 24px);
}

/* ── Cabeçalho e abas ──────────────────────────────────────────────────── */
.ig-massa__topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.ig-massa__titulo {
    font-family: var(--font-display, inherit);
    font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0;
}
/* `background-clip: text` no gradiente da marca: é como os outros títulos do
   dashboard se apresentam, então o módulo entra na mesma linguagem. */
.ig-massa__titulo span {
    background: var(--grad-heading, linear-gradient(120deg, #f0abfc, #a78bfa 50%, #8b5cf6));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.ig-massa__saude {
    font-size: 12px; color: var(--im-texto-fraco);
    display: flex; align-items: center; gap: 7px;
    background: var(--im-painel); border: 1px solid var(--im-borda);
    padding: 7px 13px; border-radius: var(--radius-full, 9999px);
}
.ig-massa__pisca {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--im-ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}
.ig-massa__pisca--off { background: var(--im-erro); box-shadow: 0 0 0 3px rgba(239, 68, 68, .16); }

.ig-massa__abas {
    display: flex; gap: 4px; border-bottom: 1px solid var(--im-borda);
    margin-bottom: 22px; flex-wrap: wrap;
}
.ig-massa__aba {
    background: none; border: 0; color: var(--im-texto-fraco);
    padding: 12px 18px; cursor: pointer; font-size: 14px; font-weight: 600;
    font-family: inherit; position: relative;
    border-bottom: 2px solid transparent;
    transition: color .18s var(--im-transicao);
}
.ig-massa__aba:hover { color: var(--im-texto); }
.ig-massa__aba[aria-selected="true"] { color: var(--im-acento-texto); border-bottom-color: var(--im-acento); }
.ig-massa__aba:focus-visible { outline: 2px solid var(--im-acento); outline-offset: -3px; border-radius: var(--im-raio-p); }

.ig-massa__painel[hidden] { display: none; }

/* ── Cartões e formulários ─────────────────────────────────────────────── */
.ig-massa__grade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px; align-items: start;
}
.ig-massa__card {
    background: var(--im-painel); border: 1px solid var(--im-borda);
    border-radius: var(--im-raio); padding: 20px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .4));
    transition: border-color .2s var(--im-transicao);
}
.ig-massa__card:hover { border-color: var(--border-hover, #3a3a46); }
.ig-massa__card h3 {
    margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--im-texto);
    display: flex; align-items: center; gap: 8px;
}
/* Barrinha de acento antes do título: separa as seções sem gastar uma borda
   inteira, que competiria visualmente com a borda do cartão. */
.ig-massa__card h3::before {
    content: ''; width: 3px; height: 14px; border-radius: 2px;
    background: var(--im-acento); flex-shrink: 0;
}

.ig-massa__campo { margin-bottom: 14px; }
.ig-massa__campo label {
    display: block; font-size: 12px; color: var(--im-texto-fraco);
    margin-bottom: 6px; font-weight: 600;
}
.ig-massa__campo input[type="text"],
.ig-massa__campo input[type="number"],
.ig-massa__campo input[type="date"],
.ig-massa__campo input[type="color"],
.ig-massa__campo select,
.ig-massa__campo textarea {
    width: 100%; background: var(--im-campo); border: 1px solid var(--im-borda);
    color: var(--im-texto); padding: 10px 12px; border-radius: var(--im-raio-p);
    font-size: 13px; font-family: inherit;
    transition: border-color .16s var(--im-transicao), box-shadow .16s var(--im-transicao);
}
.ig-massa__campo input:focus, .ig-massa__campo select:focus, .ig-massa__campo textarea:focus {
    outline: none; border-color: var(--im-acento);
    box-shadow: 0 0 0 3px var(--im-acento-fraco);
}
.ig-massa__campo input[type="color"] { padding: 4px; height: 38px; cursor: pointer; }
.ig-massa__campo textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.ig-massa__campo--erro input, .ig-massa__campo--erro select, .ig-massa__campo--erro textarea {
    border-color: var(--im-erro);
}
.ig-massa__erro-campo { display: block; color: var(--im-erro); font-size: 11px; margin-top: 5px; }

.ig-massa__linha { display: flex; gap: 12px; flex-wrap: wrap; }
.ig-massa__linha > * { flex: 1; min-width: 130px; }

/* Caixa de seleção alinhada com o rótulo, sem o desencontro de baseline que o
   `vertical-align` padrão produz. */
.ig-massa__check {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px;
    color: var(--im-texto-fraco); cursor: pointer; user-select: none;
}
.ig-massa__check input { accent-color: var(--im-acento); width: 15px; height: 15px; cursor: pointer; }
.ig-massa__check:hover { color: var(--im-texto); }

/* ── Botões ────────────────────────────────────────────────────────────── */
.ig-massa__btn {
    background: var(--grad-accent, linear-gradient(135deg, #8b5cf6, #7c3aed));
    color: #fff; border: 0; padding: 11px 20px; border-radius: var(--im-raio-p);
    font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .14s var(--im-transicao), box-shadow .14s var(--im-transicao), opacity .14s;
}
.ig-massa__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px var(--im-acento-brilho); }
.ig-massa__btn:active:not(:disabled) { transform: translateY(0); }
.ig-massa__btn:disabled { opacity: .5; cursor: not-allowed; }
.ig-massa__btn:focus-visible { outline: 2px solid var(--im-acento-texto); outline-offset: 2px; }
.ig-massa__btn--fantasma {
    background: transparent; border: 1px solid var(--im-borda); color: var(--im-texto);
}
.ig-massa__btn--fantasma:hover:not(:disabled) {
    border-color: var(--im-acento); background: var(--im-acento-fraco); box-shadow: none;
}
.ig-massa__btn--perigo { background: transparent; border: 1px solid var(--im-erro); color: var(--im-erro); }
.ig-massa__btn--largo { width: 100%; }

/* Spinner só aparece com [data-carregando]; some sozinho quando o atributo sai. */
.ig-massa__btn[data-carregando]::before {
    content: ''; width: 12px; height: 12px; flex-shrink: 0;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: ig-massa-girar .7s linear infinite;
}
@keyframes ig-massa-girar { to { transform: rotate(360deg); } }

/* ── Área de upload ────────────────────────────────────────────────────── */
.ig-massa__solta {
    border: 1.5px dashed var(--im-borda); border-radius: var(--im-raio);
    padding: 26px 18px; text-align: center; cursor: pointer;
    background: var(--im-campo);
    transition: border-color .18s var(--im-transicao), background .18s var(--im-transicao);
}
.ig-massa__solta:hover, .ig-massa__solta:focus-visible {
    border-color: var(--im-acento); background: var(--im-acento-fraco); outline: none;
}
/* Estado durante o arrasto. Classe em vez de `:hover` porque o ponteiro sobre
   um arrasto não dispara hover de forma confiável entre navegadores. */
.ig-massa__solta--sobre { border-color: var(--im-acento); background: var(--im-acento-fraco); }
.ig-massa__solta--erro { border-color: var(--im-erro); }
.ig-massa__solta-icone { font-size: 26px; line-height: 1; margin-bottom: 8px; opacity: .75; }
.ig-massa__solta-titulo { font-size: 13px; font-weight: 600; color: var(--im-texto); margin-bottom: 4px; }
.ig-massa__solta-dica { font-size: 11.5px; color: var(--im-texto-fraco); }
/* O input nativo é feio e inconsistente entre navegadores; o rótulo inteiro
   vira a área clicável. `display:none` quebraria o foco por teclado, então ele
   fica invisível mas presente na árvore de acessibilidade. */
.ig-massa__solta input[type="file"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.ig-massa__arquivos { list-style: none; margin: 12px 0 0; padding: 0; max-height: 210px; overflow-y: auto; contain: content; }
.ig-massa__arquivo {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--im-borda-sutil); border-radius: var(--im-raio-p);
    margin-bottom: 6px; font-size: 12px; background: var(--im-painel-alto);
}
.ig-massa__arquivo-nome {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ig-massa__arquivo-peso { color: var(--im-texto-fraco); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ig-massa__arquivo-x {
    background: none; border: 0; color: var(--im-texto-fraco); cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0 4px; flex-shrink: 0;
}
.ig-massa__arquivo-x:hover { color: var(--im-erro); }

/* ── Sliders da marca d'água ───────────────────────────────────────────── */
.ig-massa__slider { display: flex; align-items: center; gap: 12px; }
.ig-massa__slider input[type="range"] { flex: 1; accent-color: var(--im-acento); min-width: 0; }
.ig-massa__slider output {
    min-width: 46px; text-align: right; font-variant-numeric: tabular-nums;
    font-size: 12px; color: var(--im-acento-texto); font-weight: 600;
}

/* ── Prévia: fundo + vídeo + marca ─────────────────────────────────────── */
.ig-massa__preview {
    position: relative; aspect-ratio: 9 / 16; max-height: 400px; margin: 0 auto;
    /* Xadrez = "aqui não há nada". Some assim que houver moldura ou vídeo, o
       que dá ao usuário um sinal claro de o que já está configurado. */
    background:
        repeating-conic-gradient(var(--im-painel-alto) 0 25%, var(--im-campo) 0 50%) 0 0 / 16px 16px;
    border: 1px solid var(--im-borda); border-radius: var(--im-raio); overflow: hidden;
}
/* Ordem de empilhamento espelha a do FFmpeg: fundo → vídeo → marca. Se a
   prévia empilhar diferente do filtergraph, ela mente. */
.ig-massa__preview-moldura {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    pointer-events: none; z-index: 1;
}
.ig-massa__preview-video {
    position: absolute; left: 0; right: 0; z-index: 2;
    background: #000; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.ig-massa__preview-video video, .ig-massa__preview-video img {
    width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}
/* Vídeo posicionável: arrasta para mover, o cantinho redimensiona. */
.ig-massa__preview-video:not(.ig-massa__preview-video--vazio) { cursor: grab; touch-action: none; }
.ig-massa__preview-video:not(.ig-massa__preview-video--vazio):active { cursor: grabbing; }
.ig-massa__preview-video--caixa { outline: 1px dashed rgba(255, 255, 255, .7); outline-offset: -1px; }
.ig-massa__preview-alca {
    position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; z-index: 4;
    background: var(--im-acento, #8b5cf6); border-top-left-radius: 6px; cursor: nwse-resize;
}
.ig-massa__preview--fundo { background: #fff; }
.ig-massa__modo { margin: 12px 0 6px; flex-wrap: wrap; gap: 6px 14px; }
.ig-massa__caixa-campos { gap: 8px; }
.ig-massa__caixa-campos .ig-massa__campo { flex: 1; min-width: 0; }
.ig-massa__preview-video--vazio {
    background: repeating-linear-gradient(45deg, var(--im-painel-alto) 0 8px, var(--im-campo) 8px 16px);
    color: var(--im-texto-fraco); font-size: 11px; text-align: center; padding: 8px;
}
.ig-massa__preview-marca {
    position: absolute; white-space: pre; font-weight: 700; line-height: 1.1; z-index: 3;
    /* `transform` em vez de `top/left`: muda só a composição, sem relayout a
       cada movimento do slider. */
    transform: translate3d(0, 0, 0); transform-origin: top left;
    will-change: transform;
}
.ig-massa__preview-legenda {
    font-size: 11px; color: var(--im-texto-fraco); text-align: center; margin-top: 10px; line-height: 1.5;
}

/* ── Fila e progresso ──────────────────────────────────────────────────── */
.ig-massa__barra {
    height: 8px; background: var(--im-painel-alto); border-radius: var(--radius-full, 9999px);
    overflow: hidden; margin: 14px 0 7px;
}
.ig-massa__barra-preenchida {
    height: 100%; background: var(--grad-accent, linear-gradient(90deg, #7c3aed, #8b5cf6));
    /* Anima via transform para não disparar layout a cada polling. */
    width: 100%; transform-origin: left; transform: scaleX(0);
    transition: transform .35s var(--im-transicao);
}
.ig-massa__legenda-progresso {
    font-size: 12px; color: var(--im-texto-fraco);
    display: flex; justify-content: space-between; font-variant-numeric: tabular-nums;
}

.ig-massa__fila { list-style: none; margin: 14px 0 0; padding: 0; max-height: 340px; overflow-y: auto; contain: content; }
.ig-massa__fila li {
    display: flex; align-items: center; gap: 10px; padding: 9px 2px;
    border-bottom: 1px solid var(--im-borda-sutil); font-size: 12px;
}
.ig-massa__selo {
    font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full, 9999px);
    text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0;
}
.ig-massa__selo--pending { background: var(--im-painel-alto); color: var(--im-texto-fraco); }
.ig-massa__selo--processing { background: var(--im-acento-fraco); color: var(--im-acento-texto); }
.ig-massa__selo--completed { background: rgba(34, 197, 94, .14); color: var(--im-ok); }
.ig-massa__selo--failed { background: rgba(239, 68, 68, .14); color: var(--im-erro); }
.ig-massa__selo--cancelled { background: rgba(245, 158, 11, .14); color: var(--im-alerta); }

/* ── Radar ─────────────────────────────────────────────────────────────── */
.ig-massa__perfil {
    display: flex; align-items: center; gap: 13px; padding: 13px;
    border: 1px solid var(--im-borda-sutil); border-radius: var(--im-raio-p);
    margin-bottom: 8px; background: var(--im-painel-alto);
    transition: border-color .18s var(--im-transicao);
}
.ig-massa__perfil:hover { border-color: var(--im-borda); }
.ig-massa__perfil-dados { flex: 1; min-width: 0; }
.ig-massa__avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--im-acento-fraco); border: 1px solid var(--im-borda);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; color: var(--im-acento-texto); text-transform: uppercase;
}
.ig-massa__perfil-nome {
    font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.ig-massa__perfil-meta { font-size: 11.5px; color: var(--im-texto-fraco); margin-top: 3px; }
/* Métricas em linha, separadas por ponto médio via ::before — assim o HTML não
   precisa carregar separadores que só existem para efeito visual. */
.ig-massa__metricas { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 11.5px; }
.ig-massa__metrica { color: var(--im-texto-fraco); display: flex; align-items: center; gap: 5px; }
.ig-massa__metrica b { color: var(--im-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.ig-massa__score {
    margin-left: auto; font-weight: 700; font-size: 16px; color: var(--im-acento-texto);
    font-variant-numeric: tabular-nums; text-align: right; flex-shrink: 0;
}
.ig-massa__score small { display: block; font-size: 10px; color: var(--im-texto-fraco); font-weight: 500; }
.ig-massa__score--frio { color: var(--im-texto-fraco); }
.ig-massa__etiqueta {
    font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-full, 9999px);
    text-transform: uppercase; letter-spacing: .3px;
    background: var(--im-acento-fraco); color: var(--im-acento-texto);
}
.ig-massa__etiqueta--manual { background: var(--im-painel); color: var(--im-texto-fraco); }

/* ─── Foto de perfil ────────────────────────────────────────────────────────
   A INICIAL FICA ATRÁS DA FOTO, sempre desenhada. A foto entra por cima quando
   (e se) carregar.

   O motivo é o caso que o teste no navegador revelou: enquanto a imagem carrega
   — ou quando a requisição fica pendurada, comum com o CDN da Meta em rede
   lenta — o `onerror` não dispara e um círculo só com <img> fica VAZIO. Círculo
   vazio é indistinguível de foto quebrada, que é o defeito que esta tela
   deveria corrigir.

   Com a inicial embaixo, o pior caso vira "aparece a inicial". Nunca "nada". */
.ig-massa__avatar--caixa { position: relative; overflow: hidden; padding: 0; }
.ig-massa__avatar--caixa img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `cover`: a foto do Instagram é quadrada e sem isto sairia esticada. */
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ─── Indicador de engajamento ──────────────────────────────────────────────
   O número sozinho ("1,80%") não diz se é bom. O selo traduz, e a cor deixa a
   leitura possível de relance numa lista de 12 perfis. A régua depende do
   tamanho do perfil — ver `indicadorEngajamento` no JS. */
.ig-massa__metrica--eng b { color: currentColor; }
.ig-massa__eng-selo {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: var(--radius-full, 9999px);
    /* ⚠️ NÃO usar `background: currentColor` aqui.
       `currentColor` num `background` resolve para o `color` DO PRÓPRIO
       elemento — e como este bloco também define `color`, o fundo e o texto
       saíam idênticos e o selo ficava invisível (achado no teste de contraste
       durante a auditoria: color e background-color vieram ambos rgb(24,24,31)).
       O fundo é declarado por nível, logo abaixo. */
    color: var(--im-painel-alto, #14181f);
    background: var(--im-texto-fraco);
}

/* Cor do NÚMERO (herdada pelo <b>) e cor do FUNDO do selo, por nível.
   As duas precisam ser declaradas separadamente justamente porque o selo
   inverte a relação: o texto dele é escuro sobre a cor do nível. */
.ig-massa__eng--baixo { color: var(--im-texto-fraco); }
.ig-massa__eng--medio { color: var(--yellow, #e0af68); }
.ig-massa__eng--alto  { color: var(--green, #7bc97b); }
.ig-massa__eng--otimo { color: var(--im-acento-texto); }

.ig-massa__eng--baixo .ig-massa__eng-selo { background: var(--im-texto-fraco); }
.ig-massa__eng--medio .ig-massa__eng-selo { background: var(--yellow, #e0af68); }
.ig-massa__eng--alto  .ig-massa__eng-selo { background: var(--green, #7bc97b); }
.ig-massa__eng--otimo .ig-massa__eng-selo { background: var(--im-acento-texto); }

/* Frequência alta é o sinal que o Radar procura (esteira de vídeo). */
.ig-massa__metrica--forte b { color: var(--im-acento-texto); }

/* ─── Faixa de conexão com o Instagram ──────────────────────────────────────
   Token do Instagram expira a cada 60 dias — é funcionamento normal da
   plataforma, não defeito. Por isso a faixa é âmbar e explicativa, não
   vermelha: vermelho comunica "quebrou", e o que aconteceu foi "venceu".
   Persistente, porque exige uma decisão do usuário que um toast de 5s não
   dá tempo de tomar. */
.ig-massa__conexao {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 15px; margin-bottom: 12px;
    border-radius: var(--im-raio-p);
    background: rgba(224, 175, 104, .08);
    border: 1px solid rgba(224, 175, 104, .28);
    color: var(--yellow, #e0af68);
    font-size: 12.5px; line-height: 1.45;
}
.ig-massa__conexao > i { margin-top: 2px; flex-shrink: 0; font-size: 15px; }
.ig-massa__conexao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ig-massa__conexao-texto b { color: var(--im-texto); }
.ig-massa__conexao-texto span { color: var(--im-texto); opacity: .85; }
.ig-massa__conexao-texto small { font-size: 11px; color: var(--im-texto-fraco); }
.ig-massa__conexao-botao {
    flex-shrink: 0; align-self: center;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: var(--im-raio-p);
    background: var(--im-acento-fraco); color: var(--im-acento-texto);
    border: 1px solid var(--im-borda);
    font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: filter .18s var(--im-transicao);
}
.ig-massa__conexao-botao:hover { filter: brightness(1.25); }

/* Conta conectada, mas sem Página vinculada: aviso informativo, tom neutro —
   a varredura continua funcionando, só a busca por nicho é que não. */
.ig-massa__conexao--aviso {
    background: var(--im-painel-alto);
    border-color: var(--im-borda-sutil);
    color: var(--im-texto-fraco);
}

@media (max-width: 620px) {
    /* Empilha para o botão não espremer o texto em tela estreita. */
    .ig-massa__conexao { flex-wrap: wrap; }
    .ig-massa__conexao-botao { align-self: stretch; justify-content: center; width: 100%; }
}

/* ── Avisos, vazio e toasts ────────────────────────────────────────────── */
.ig-massa__aviso {
    display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--im-raio-p);
    font-size: 12.5px; line-height: 1.5; margin-bottom: 14px;
    border: 1px solid var(--im-alerta); background: rgba(245, 158, 11, .08); color: var(--im-alerta);
}
.ig-massa__aviso--erro { border-color: var(--im-erro); background: rgba(239, 68, 68, .08); color: var(--im-erro); }
.ig-massa__aviso--info {
    border-color: var(--im-borda); background: var(--im-painel-alto); color: var(--im-texto-fraco);
}
.ig-massa__vazio {
    text-align: center; padding: 34px 16px; color: var(--im-texto-fraco);
    font-size: 13px; line-height: 1.6;
}

.ig-massa__toasts {
    position: fixed; right: 104px; bottom: 24px; display: flex; flex-direction: column;
    gap: 10px; z-index: 100000; max-width: min(380px, calc(100vw - 130px));
}
.ig-massa__toast {
    background: var(--bg-elevated, #18181f); border: 1px solid var(--border, #26262f);
    border-left: 3px solid var(--accent, #8b5cf6);
    color: var(--text, #fafafa); padding: 12px 16px; border-radius: var(--radius-sm, 8px);
    font-size: 13px; line-height: 1.5;
    box-shadow: var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, .6));
    animation: ig-massa-entrar .22s var(--ease, ease);
}
.ig-massa__toast--erro { border-left-color: var(--red, #ef4444); }
.ig-massa__toast--alerta { border-left-color: var(--yellow, #f59e0b); }
@keyframes ig-massa-entrar { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ig-massa { padding: var(--space-4, 16px); }
    .ig-massa__grade { grid-template-columns: 1fr; }
    .ig-massa__aba { padding: 10px 13px; font-size: 13px; }
    .ig-massa__toasts { right: 12px; left: 12px; bottom: 84px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ig-massa *, .ig-massa *::before {
        animation-duration: .01ms !important; transition-duration: .01ms !important;
    }
}

/* ── Downloader / Scraper Modal & Grid (Orion Support Aesthetic) ────── */
.ig-massa__modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    backdrop-filter: blur(8px);
}
.ig-massa__modal-overlay[hidden] { display: none !important; }
.ig-massa__modal-card {
    background: #0c0c11 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    width: 95vw !important;
    max-width: 1240px !important;
    height: 88vh !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(124, 111, 214, 0.15) !important;
}

.ig-massa__modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 18px 24px !important;
    background: radial-gradient(120% 90% at 20% 0%, #1a1030 0%, #0e0b17 55%, #0c0c11 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ig-massa__modal-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ededf2 !important;
}

.ig-massa__modal-subtitle {
    margin: 3px 0 0 !important;
    font-size: 12px !important;
    color: #9b9bab !important;
}

.ig-massa__modal-close {
    background: transparent !important;
    border: 0 !important;
    color: #9b9bab !important;
    font-size: 26px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    transition: all .15s ease !important;
}
.ig-massa__modal-close:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.ig-massa__reel-card {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .2s ease;
    user-select: none;
}
.ig-massa__reel-card:hover {
    border-color: #7c6fd6;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.ig-massa__reel-card--selected {
    border-color: #7c6fd6 !important;
    box-shadow: 0 0 14px rgba(124, 111, 214, 0.45);
}
.ig-massa__reel-thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ig-massa__reel-check {
    position: absolute; top: 8px; left: 8px;
    width: 22px; height: 22px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.65);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: bold;
    z-index: 2;
    transition: all .15s ease;
}
.ig-massa__reel-card--selected .ig-massa__reel-check {
    background: #7c6fd6;
    border-color: #7c6fd6;
}
.ig-massa__reel-meta {
    position: absolute; bottom: 0; inset-inline: 0;
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    color: #fff;
    font-size: 11px;
    display: flex; flex-direction: column; gap: 2px;
    pointer-events: none;
}
.ig-massa__reel-views {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #f1f1f1;
    font-size: 11px;
    width: fit-content;
    border-radius: 4px;
    padding: 1px 5px;
    background: rgba(0, 0, 0, 0.45);
}
.ig-massa__reel-views--viral {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(245, 158, 11, 0.45));
    color: #fef08a;
    border: 1px solid rgba(245, 158, 11, 0.55);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    font-weight: 800;
}
.ig-massa__reel-views--high {
    background: rgba(139, 92, 246, 0.35);
    color: #ede9fe;
    border: 1px solid rgba(139, 92, 246, 0.45);
    font-weight: 700;
}
.ig-massa__reel-title {
    font-size: 10px;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Badges de Plataforma & Player de Áudio ─────────────────────────── */
.ig-massa__reel-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.ig-massa__reel-badge--tiktok {
    background: rgba(0, 0, 0, 0.88);
    border-color: #00f2fe;
    color: #00f2fe;
}
.ig-massa__reel-badge--instagram {
    background: rgba(0, 0, 0, 0.88);
    border-color: #e1306c;
    color: #ff6b8b;
}

.ig-massa__btn-play-mini {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
    padding-left: 3px;
}
.ig-massa__btn-play-mini:hover {
    transform: translate(-50%, -50%) scale(1.15);
    background: #7c6fd6;
    border-color: #fff;
}

/* ── Tabs do Modal Downloader ─────────────────────────────────────── */
.ig-massa__modal-tabs {
    display: flex;
    gap: 8px;
    padding: 0 22px;
    background: #111118;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ig-massa__modal-tab {
    padding: 13px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #9b9bab;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ig-massa__modal-tab:hover {
    color: #ededf2;
}
.ig-massa__modal-tab--active {
    color: #ededf2 !important;
    border-bottom-color: #7c6fd6 !important;
    background: rgba(124, 111, 214, 0.08);
}

/* ── Chips de Nicho (Wrap sem scroll horizontal feio) ─────────────── */
.ig-massa__chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0 10px;
    overflow: visible;
}
.ig-massa__chip-nicho {
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #151520;
    color: #9b9bab;
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.ig-massa__chip-nicho:hover {
    border-color: rgba(124, 111, 214, 0.45);
    background: #1c1c2a;
    color: #ededf2;
}
.ig-massa__chip-nicho--active {
    background: #25243b !important;
    border-color: #7c6fd6 !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(124, 111, 214, 0.25);
}

/* ── Cards de Perfis em Alta ──────────────────────────────────────── */
.ig-massa__perfil-alta-card {
    background: #14141d;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ig-massa__perfil-alta-card:hover {
    border-color: rgba(124, 111, 214, 0.45);
    background: #191926;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.ig-massa__perfil-alta-topo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ig-massa__perfil-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #1b1b26;
    border: 1.5px solid rgba(124, 111, 214, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.ig-massa__perfil-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.ig-massa__perfil-avatar-link-icon {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 17, 0.72);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    border-radius: 50%;
}
.ig-massa__perfil-avatar:hover .ig-massa__perfil-avatar-link-icon {
    opacity: 1;
}
.ig-massa__perfil-info {
    overflow: hidden;
    flex: 1;
}
.ig-massa__perfil-user {
    font-size: 14px;
    font-weight: 700;
    color: #ededf2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: color .15s;
}
.ig-massa__perfil-user:hover {
    color: #b3aae6;
    text-decoration: underline;
}
.ig-massa__perfil-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.ig-massa__perfil-badge-dark {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(124, 111, 214, 0.15);
    color: #c4b5fd;
    border: 1px solid rgba(124, 111, 214, 0.3);
}
.ig-massa__perfil-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 11.5px;
    background: #101017;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.ig-massa__stat-item {
    display: flex;
    flex-direction: column;
}
.ig-massa__stat-label {
    font-size: 10px;
    color: #9b9bab;
}
.ig-massa__stat-val {
    font-weight: 700;
    color: #ededf2;
}

.ig-massa__modal-painel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.ig-massa__modal-painel[hidden] {
    display: none !important;
}

/* ── Botões Elegantes e Escuros no Modal ────────────────────────────── */
.ig-massa__modal-card button.ig-massa__btn,
.ig-massa__modal-card .ig-massa__btn {
    background: #181728 !important;
    border: 1px solid rgba(124, 111, 214, 0.45) !important;
    color: #ededf2 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    transition: all .15s ease !important;
}
.ig-massa__modal-card button.ig-massa__btn:hover:not(:disabled),
.ig-massa__modal-card .ig-massa__btn:hover:not(:disabled) {
    background: #232238 !important;
    border-color: #7c6fd6 !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(124, 111, 214, 0.3) !important;
    transform: translateY(-1px) !important;
}
.ig-massa__modal-card button.ig-massa__btn:disabled,
.ig-massa__modal-card .ig-massa__btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}
.ig-massa__modal-card .ig-massa__btn--secundario,
.ig-massa__modal-card a.ig-massa__btn--secundario {
    background: #121219 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #c4c4d4 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.ig-massa__modal-card .ig-massa__btn--secundario:hover,
.ig-massa__modal-card a.ig-massa__btn--secundario:hover {
    background: #1c1c28 !important;
    border-color: rgba(124, 111, 214, 0.45) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Tabs & Chips Dark Orion */
.ig-massa__modal-card .ig-massa__modal-tabs {
    background: #101017 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.ig-massa__modal-card .ig-massa__modal-tab {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: #9b9bab !important;
    box-shadow: none !important;
    transform: none !important;
}
.ig-massa__modal-card .ig-massa__modal-tab:hover {
    color: #ededf2 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    transform: none !important;
}
.ig-massa__modal-card .ig-massa__modal-tab--active {
    color: #ededf2 !important;
    border-bottom-color: #7c6fd6 !important;
    background: rgba(124, 111, 214, 0.1) !important;
    box-shadow: none !important;
    transform: none !important;
}

.ig-massa__modal-card .ig-massa__chip-nicho {
    background: #151520 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #9b9bab !important;
    border-radius: 20px !important;
    padding: 7px 15px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transform: none !important;
}
.ig-massa__modal-card .ig-massa__chip-nicho:hover {
    border-color: rgba(124, 111, 214, 0.45) !important;
    background: #1c1c2a !important;
    color: #ededf2 !important;
    box-shadow: none !important;
    transform: none !important;
}
.ig-massa__modal-card .ig-massa__chip-nicho--active {
    background: #25243b !important;
    border-color: #7c6fd6 !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(124, 111, 214, 0.25) !important;
    transform: none !important;
}

/* Inputs & Selects Dark Orion */
.ig-massa__modal-card input[type="text"],
.ig-massa__modal-card select {
    background: #14141d !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ededf2 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
}
.ig-massa__modal-card input[type="text"]:focus,
.ig-massa__modal-card select:focus {
    border-color: #7c6fd6 !important;
    box-shadow: 0 0 0 2px rgba(124, 111, 214, 0.25) !important;
}

[data-btn-rastrear-radar] {
    background: #161624 !important;
    border: 1px solid rgba(124, 111, 214, 0.35) !important;
    color: #c4b5fd !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
[data-btn-rastrear-radar]:hover {
    background: #202034 !important;
    border-color: #7c6fd6 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(124, 111, 214, 0.25) !important;
}