/**
 * 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;
}
.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: 20px; bottom: 20px; display: flex; flex-direction: column;
    gap: 10px; z-index: 9999; max-width: min(360px, calc(100vw - 40px));
}
.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: 12px; max-width: none; }
}

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