/* ===========================================================
   MeConta — 99TECH
   "me conta a real sobre a minha conta"

   ESPECIFICIDADE: tudo é ancorado em #meconta-app.
   Um ID vale (1,0,0) e vence qualquer seletor de classe que o
   tema do usuário use. Com .mc-app o tema ganhava e o layout
   inteiro renderizava com os tamanhos dele, não os nossos.

   Direção visual: o app fala com você. O veredito é o herói;
   o resto é lista quieta. Ameixa profunda + magenta,
   deliberadamente longe do gradiente do Instagram.
   =========================================================== */

#meconta-app {
  /* --- tokens --- */
  --bg:         #F3EDF2;
  --surface:    #FFFFFF;
  --ink:        #2B1B2E;
  --ink-soft:   #6B586E;
  --muted:      #9A8B9C;
  --line:       #E4D8E2;

  --accent:     #D6246E;  /* magenta — só no que importa */
  --mutual:     #2E7D6B;  /* teal: relação equilibrada */
  --inbound:    #7B5EA7;  /* violeta: te seguem e você não */

  --display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --body:    'Figtree', system-ui, -apple-system, sans-serif;
  --mono:    'DM Mono', ui-monospace, SFMono-Regular, monospace;

  --r: 14px;

  /* Full width: sai do container do tema com margem negativa.
     50vw inclui a barra de rolagem vertical, então sem compensar o
     bloco fica alguns pixels largo demais — conteúdo deslocado e
     barra horizontal. --mc-sbw é medido no JS e vale 0 se não houver
     barra ou se o JS não rodar.
     Para desligar: add_filter('meconta_full_width','__return_false'). */
  --mc-sbw: 0px;
  margin-left: calc(50% - 50vw + var(--mc-sbw) / 2);
  margin-right: calc(50% - 50vw + var(--mc-sbw) / 2);
  padding: 22px max(18px, calc(50vw - 560px)) 48px;
  max-width: none;

  /* Ocupa a altura da janela: telas curtas como Sobre e Configurações
     ficavam com o fundo do tema aparecendo embaixo. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* Reset defensivo. Temas injetam margem, line-height, list-style e
   tamanhos de fonte que desmontam os cards. Escopado no ID para não
   vazar para o resto da página. */
#meconta-app *,
#meconta-app *::before,
#meconta-app *::after { box-sizing: border-box; }

#meconta-app p,
#meconta-app h1,
#meconta-app h2,
#meconta-app ol,
#meconta-app ul,
#meconta-app li,
#meconta-app figure { margin: 0; padding: 0; }

/* Temas gostam de sublinhar ou pôr borda embaixo de h1/h2. */
#meconta-app h1,
#meconta-app h2 {
  text-decoration: none;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
}

#meconta-app ol,
#meconta-app ul { list-style: none; }

#meconta-app a { color: inherit; text-decoration: none; }

#meconta-app label { display: block; }

#meconta-app button,
#meconta-app select,
#meconta-app input,
#meconta-app textarea {
  font-family: var(--body);
  line-height: 1.4;
  margin: 0;
}

/* Quando o tema já é full width, a margem negativa não é precisa. */
#meconta-app.is-contained {
  margin-left: auto;
  margin-right: auto;
  max-width: 1160px;
  padding: 22px 20px 48px;
}

/* --- sanduíche no cabeçalho -------------------------------- */

#meconta-app .mc-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

#meconta-app .mc-burger {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s ease;
}
#meconta-app .mc-burger:hover { border-color: var(--ink-soft); }
#meconta-app .mc-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#meconta-app .mc-burger-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
}
#meconta-app .mc-burger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 1px;
}

/* Com o menu fechado numa gaveta, o nome da seção é a única pista
   de onde o usuário está. */
#meconta-app .mc-crumb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

#meconta-app .mc-view { flex: 1 1 auto; }

/* --- cabeçalho da vista ----------------------------------- */#meconta-app .mc-view { flex: 1 1 auto; }

/* --- cabeçalho da vista ----------------------------------- */

#meconta-app .mc-view-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}


#meconta-app .mc-view-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}

/* --- seletor de período em cartões ------------------------- */

#meconta-app .mc-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

#meconta-app .mc-seg-item {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-soft);
  padding: 11px 6px;
  cursor: pointer;
  text-align: center;
  text-transform: none;
  min-height: 0;
  width: 100%;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
#meconta-app .mc-seg-item:hover { border-color: var(--ink-soft); color: var(--ink); }
#meconta-app .mc-seg-item[aria-selected=true] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink);
  font-weight: 600;
}
#meconta-app .mc-seg-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  #meconta-app .mc-seg { gap: 5px; }
  #meconta-app .mc-seg-item { font-size: 11px; padding: 10px 4px; }
}

#meconta-app .mc-loading {
  font-size: 14px;
  color: var(--muted);
  padding: 40px 0;
  text-align: center;
}

/* --- painéis (configurações e sobre) ----------------------- */

#meconta-app .mc-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 14px;
}
#meconta-app .mc-panel-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--ink);
}
/* Dentro de um card o limite de leitura só cria faixa vazia à
   direita — a largura do card já é a medida. */
#meconta-app .mc-panel-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
#meconta-app .mc-panel-text + .mc-drop { margin-top: 14px; }

#meconta-app .mc-snaps { font-size: 14px; }
#meconta-app .mc-snaps li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
#meconta-app .mc-snaps li:last-child { border-bottom: 0; }
#meconta-app .mc-snap-date { color: var(--ink); font-weight: 500; }
#meconta-app .mc-snap-num { font-family: var(--mono); font-size: 12px; color: var(--muted); }

#meconta-app .mc-panel-danger { border-color: var(--accent); }
#meconta-app .mc-confirm {
  font-size: 13px;
  padding: 8px 12px;
  height: auto;
  min-height: 0;
  width: auto;
  max-width: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  margin: 14px 8px 0 0;
}
#meconta-app .mc-danger-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  width: auto;
  min-height: 0;
  text-transform: none;
}
#meconta-app .mc-danger-btn:disabled { opacity: .5; cursor: default; }
#meconta-app .mc-panel-danger .mc-panel-text:last-child { margin-top: 10px; }

/* --- cabeçalho ------------------------------------------- */

#meconta-app .mc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

#meconta-app .mc-wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
#meconta-app .mc-wordmark span { color: var(--accent); }

#meconta-app .mc-by {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
}

/* --- SIGNATURE: o veredito ------------------------------- */

#meconta-app .mc-verdict { margin: 0 0 30px; }

#meconta-app .mc-verdict-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 10px;
}

#meconta-app .mc-verdict-line {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
#meconta-app .mc-verdict-line em {
  font-style: normal;
  color: var(--accent);
}

#meconta-app .mc-verdict-note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 46ch;
}

/* --- dropzone -------------------------------------------- */

/* <label> é display:inline por padrão. Sem block, o padding gera
   uma faixa vertical fina e os <p> internos escapam da borda. */
#meconta-app .mc-drop {
  display: block;
  width: 100%;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
#meconta-app .mc-drop:hover { border-color: var(--accent); }
#meconta-app .mc-drop.is-dragover {
  border-color: var(--accent);
  background: #FDF2F7;
}
#meconta-app .mc-drop:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

#meconta-app .mc-drop-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 6px;
  color: var(--ink);
}
#meconta-app .mc-drop-sub {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}
#meconta-app .mc-drop input[type=file] { display: none; }

/* --- progresso ------------------------------------------- */

#meconta-app .mc-progress {
  margin-top: 18px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
#meconta-app .mc-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .3s ease;
}
#meconta-app .mc-progress-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* --- erro ------------------------------------------------ */

#meconta-app .mc-error {
  margin-top: 18px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 14px 16px;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 14px;
  line-height: 1.5;
}
#meconta-app .mc-error strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

/* --- guia de exportação ----------------------------------- */

#meconta-app .mc-howto { margin-top: 36px; }

#meconta-app .mc-howto-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 18px;
  color: var(--ink);
}

/* A numeração não é decoração: a ordem importa, e errar o passo 4
   produz resultado errado sem nenhum aviso. */
#meconta-app .mc-steps { border-left: 1px solid var(--line); }

#meconta-app .mc-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 0 0 22px 18px;
}
#meconta-app .mc-step:last-child { padding-bottom: 0; }
#meconta-app .mc-step > * { min-width: 0; }

#meconta-app .mc-step-n {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
  width: 26px;
  height: 26px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  margin-left: -32px;
}
#meconta-app .mc-step-t {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
  color: var(--ink);
}

#meconta-app .mc-step-d {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* --- o que mudou desde o último import -------------------- */

#meconta-app .mc-changes {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mutual);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
#meconta-app .mc-changes strong { font-weight: 600; }
#meconta-app .mc-renames {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 10px;
}
#meconta-app .mc-renames li { margin-top: 4px; }

/* --- ícone de direção -------------------------------------
   Você (círculo cheio) → a outra pessoa (contorno). O SVG usa
   currentColor, então herda a cor semântica do card. */

#meconta-app .mc-icon {
  display: block;
  line-height: 0;
  color: var(--muted);
}
#meconta-app .mc-icon svg { display: block; overflow: visible; }

/* --- figura pessoa/grupo (só nos cards de cima) -------------
   Silhueta única = você. Grupo colorido = as outras pessoas.
   Cores próprias do MeConta: replicar o gradiente do Instagram
   seria copiar a identidade visual da Meta, que as diretrizes
   deles proíbem. */

#meconta-app .mc-figure {
  display: block;
  line-height: 0;
  color: var(--ink);
}
#meconta-app .mc-figure svg { display: block; overflow: visible; }

/* --- números --------------------------------------------- */

#meconta-app .mc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

/* Seis cards fecham exatamente em duas colunas por três linhas.
   Some o card órfão, e some a necessidade do carrossel. */
@media (min-width: 620px) {
  #meconta-app .mc-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  #meconta-app .mc-stats { grid-template-columns: repeat(6, 1fr); gap: 10px; }
}

/* O card É o filtro. Precisa ler como clicável sem virar botão
   berrante: a borda muda no hover, e o selecionado ganha contorno
   escuro. */
#meconta-app .mc-stat {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 12px 13px;
  min-width: 0;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#meconta-app .mc-stat:hover { border-color: var(--ink-soft); }
#meconta-app .mc-stat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#meconta-app .mc-stat[aria-selected=true] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

#meconta-app .mc-stat .mc-figure { margin-bottom: 9px; }
#meconta-app .mc-stat .mc-figure svg { width: 100%; height: auto; max-width: 78px; }

/* display:block é o que separa o número do rótulo. Sem ele os dois
   colam numa linha só ("740te seguem"). */
#meconta-app .mc-stat-num {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
}
#meconta-app .mc-stat-label {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-soft);
  margin-top: 5px;
}

#meconta-app .mc-stat[data-kind=mutual] .mc-stat-num     { color: var(--mutual); }
#meconta-app .mc-stat[data-kind=i_follow] .mc-stat-num   { color: var(--accent); }
#meconta-app .mc-stat[data-kind=all_in] .mc-stat-num     { color: var(--inbound); }
#meconta-app .mc-stat[data-kind=lost_in] .mc-stat-num    { color: var(--ink-soft); }

@media (max-width: 619px) {
  /* No celular os cards ocupam a tela inteira: são a navegação,
     não um resumo. Por isso ganham mais respiro. */
  #meconta-app .mc-stats { gap: 10px; margin-bottom: 0; }
  #meconta-app .mc-stat { padding: 14px 13px; }
  #meconta-app .mc-stat-num { font-size: 23px; }
  #meconta-app .mc-stat-label { font-size: 11px; }
  #meconta-app .mc-stat .mc-figure svg { max-width: 70px; }
}

/* --- gráfico ----------------------------------------------- */

#meconta-app .mc-chart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 18px 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

#meconta-app .mc-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#meconta-app .mc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
#meconta-app .mc-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
#meconta-app .mc-swatch-out { background: var(--ink); }
#meconta-app .mc-swatch-in  { background: var(--inbound); }

/* O viewBox é calculado na largura real do container, então o SVG
   não deve esticar além dela — senão o texto do eixo escala junto. */
#meconta-app .mc-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#meconta-app .mc-chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}
#meconta-app .mc-chart-axis {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: -0.02em;
  fill: var(--muted);
}

#meconta-app .mc-bar-out  { fill: var(--ink); }
#meconta-app .mc-bar-in   { fill: var(--inbound); }
/* Traço de base para período sem nenhum follow. */
#meconta-app .mc-bar-zero { fill: var(--line); }
#meconta-app .mc-bar-count {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--ink-soft);
}

#meconta-app .mc-chart-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}

/* --- barra de trabalho ------------------------------------
   Buscar, esconder e ordenar numa linha só. Gruda no topo: com
   centenas de linhas, subir a página para trocar filtro é o que
   faz a pessoa largar a lista no meio. */

#meconta-app .mc-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  margin-bottom: 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* --- campo de busca ---------------------------------------- */

#meconta-app .mc-search {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.3;
  padding: 10px 15px;
  height: auto;
  min-height: 0;
  width: auto;
  max-width: 320px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
#meconta-app .mc-search::placeholder { color: var(--muted); }
#meconta-app .mc-search:focus {
  outline: none;
  border-color: var(--accent);
}
/* O X do type=search fica cinza demais no Chrome. */
#meconta-app .mc-search::-webkit-search-cancel-button { cursor: pointer; }

#meconta-app .mc-toolbar .mc-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
}

#meconta-app .mc-progress-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- pílula "esconder olhados" ----------------------------- */

#meconta-app .mc-toggle-pill {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 13px;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: none;
  min-height: 0;
  width: auto;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#meconta-app .mc-toggle-pill:hover { border-color: var(--ink-soft); color: var(--ink); }
#meconta-app .mc-toggle-pill[aria-pressed=true] {
  background: var(--mutual);
  border-color: var(--mutual);
  color: #fff;
}
#meconta-app .mc-toggle-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#meconta-app .mc-pill-icon { font-size: 12px; }

/* --- dropdown de ordenação --------------------------------- */

#meconta-app .mc-sort { position: relative; flex-shrink: 0; }

#meconta-app .mc-sort-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 13px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  min-height: 0;
  width: auto;
}
#meconta-app .mc-sort-btn:hover { border-color: var(--ink-soft); }
#meconta-app .mc-sort-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#meconta-app .mc-sort-chevron {
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  transition: transform .16s ease;
}
#meconta-app .mc-sort.is-open .mc-sort-chevron { transform: rotate(180deg); }

/* Alinhado à direita: o botão fica no fim da barra, e um menu
   crescendo para a esquerda nunca sai da tela. */
#meconta-app .mc-sort-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 180px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(43, 27, 46, .14);
}
#meconta-app .mc-sort.is-open .mc-sort-menu { display: block; }
#meconta-app .mc-sort-menu li { margin: 0; }

#meconta-app .mc-sort-item {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-soft);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: none;
  min-height: 0;
}
#meconta-app .mc-sort-item:hover { background: var(--bg); color: var(--ink); }
#meconta-app .mc-sort-item[aria-selected=true] {
  color: var(--accent);
  font-weight: 600;
  background: var(--bg);
}
#meconta-app .mc-sort-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* No celular os rótulos encolhem para os três controles caberem
   sem quebrar linha. O contador sai: o total já está no título. */
@media (max-width: 619px) {
  #meconta-app .mc-toolbar { gap: 6px; }
  #meconta-app .mc-progress-count { display: none; }
  #meconta-app .mc-pill-label { display: none; }
  #meconta-app .mc-toggle-pill { padding: 10px 12px; }
  #meconta-app .mc-pill-icon { font-size: 14px; }
  #meconta-app .mc-sort-btn { padding: 9px 11px; font-size: 12px; }
  #meconta-app .mc-sort-label { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
}

/* --- separador por ano ------------------------------------ */

#meconta-app .mc-year {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
#meconta-app .mc-year:first-child { margin-top: 6px; }
#meconta-app .mc-year::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- lista de pessoas ------------------------------------- */

#meconta-app .mc-list { margin: 0; }

#meconta-app .mc-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  transition: border-color .15s ease, opacity .2s ease;
}
#meconta-app .mc-row > * { min-width: 0; }
#meconta-app .mc-row:hover { border-color: var(--ink-soft); }

/* Já trabalhado sai de cena sem sumir — dá sensação de avanço. */
#meconta-app .mc-row.is-done { opacity: .45; }
#meconta-app .mc-row.is-done:hover { opacity: 1; }

/* --- identidade e tempo ------------------------------------ */

#meconta-app .mc-info { display: block; }

#meconta-app .mc-user {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

#meconta-app .mc-meta {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 2px;
}

/* O tempo é a informação com peso: nove anos seguindo alguém que
   nunca retribuiu é a história da linha, não um detalhe. */
#meconta-app .mc-age {
  font-weight: 600;
  color: var(--ink-soft);
}
#meconta-app .mc-row.is-old .mc-age { color: var(--accent); }

#meconta-app .mc-tagline {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--inbound);
  border: 1px solid var(--inbound);
  border-radius: 3px;
  padding: 0 4px;
}

/* --- ações -------------------------------------------------
   "Abrir" é a única ação que leva a algum lugar, então é a
   primária. Marcar é secundário e fica quieto até ser usado. */

#meconta-app .mc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#meconta-app .mc-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 7px 13px;
  white-space: nowrap;
  transition: background .15s ease;
}
#meconta-app .mc-open:hover {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
#meconta-app .mc-open-icon { font-size: 11px; opacity: .8; }
#meconta-app .mc-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#meconta-app .mc-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;
  width: auto;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#meconta-app .mc-chip:hover { border-color: var(--ink-soft); color: var(--ink-soft); }
#meconta-app .mc-chip-icon { font-size: 11px; }

#meconta-app .mc-chip-visit[aria-pressed=true] {
  background: var(--mutual);
  border-color: var(--mutual);
  color: #fff;
}
#meconta-app .mc-chip-dm[aria-pressed=true] {
  background: var(--inbound);
  border-color: var(--inbound);
  color: #fff;
}
#meconta-app .mc-chip-dm:hover { color: var(--inbound); }
#meconta-app .mc-chip-dm[aria-pressed=true]:hover { color: #fff; }

/* Abrir a conversa não é ter mandado. O × permite desmarcar
   sem reabrir o Instagram. */
#meconta-app .mc-dm-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
#meconta-app .mc-undo {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
#meconta-app .mc-undo:hover { color: var(--accent); background: var(--bg); }
#meconta-app .mc-undo[hidden] { display: none; }
#meconta-app .mc-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* No celular o rótulo some e fica só o ícone — o espaço é do nome. */
@media (max-width: 520px) {
  #meconta-app .mc-row { gap: 10px; }
  #meconta-app .mc-chip-label { display: none; }
  #meconta-app .mc-chip { padding: 7px 9px; }
  #meconta-app .mc-chip-icon { font-size: 13px; }
  #meconta-app .mc-open { padding: 7px 11px; }
}

/* --- vazio / paginação ----------------------------------- */

#meconta-app .mc-empty {
  padding: 44px 20px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

#meconta-app .mc-empty strong { display: block; }

/* Sem medida limitada: a frase corre a largura toda, como os
   outros textos do app. */
#meconta-app .mc-empty-body { margin-top: 8px; }
#meconta-app .mc-empty-body p + p { margin-top: 10px; }
#meconta-app .mc-empty strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 6px;
}

#meconta-app .mc-found { margin-top: 14px; text-align: left; }

#meconta-app .mc-found-jump {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  padding: 5px 10px;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: none;
  min-height: 0;
  width: auto;
}
#meconta-app .mc-found-jump:hover { border-color: var(--accent); color: var(--accent); }
#meconta-app .mc-found-jump { margin-top: 7px; }

#meconta-app .mc-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  text-transform: none;
}
#meconta-app .mc-more:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- rodapé ---------------------------------------------- */

#meconta-app .mc-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
#meconta-app .mc-foot p + p { margin-top: 8px; }

/* --- acessibilidade -------------------------------------- */

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

#meconta-app .mc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- portão de login (fora do #meconta-app) ---------------
   Não pode herdar tokens de #meconta-app, então redeclara os
   valores que usa. */

.mc-gate {
  --g-bg:#F3EDF2; --g-surface:#FFFFFF; --g-ink:#2B1B2E;
  --g-soft:#6B586E; --g-muted:#9A8B9C; --g-line:#E4D8E2; --g-accent:#D6246E;

  max-width: 560px;
  margin: clamp(28px, 6vw, 64px) auto;
  padding: clamp(26px, 4.5vw, 40px);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: 20px;
  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--g-ink);
  text-align: center;
}
.mc-gate p, .mc-gate h2 { margin: 0; }

.mc-gate-eyebrow {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--g-muted);
  margin-bottom: 10px !important;
}

.mc-gate-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--g-ink);
  text-wrap: balance;
}

.mc-gate-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--g-soft);
  margin: 12px auto 0 !important;
  max-width: 44ch;
}

.mc-gate-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px !important;
}

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--g-ink);
  color: #fff;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid var(--g-ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mc-btn:hover { background: var(--g-accent); border-color: var(--g-accent); color: #fff; }

/* Criar conta pesa igual: quem não tem conta é a maioria aqui. */
.mc-btn-alt {
  background: transparent;
  color: var(--g-accent);
  border-color: var(--g-accent);
}
.mc-btn-alt:hover { background: var(--g-accent); color: #fff; }

.mc-btn:focus-visible {
  outline: 3px solid var(--g-accent);
  outline-offset: 3px;
}

.mc-gate-by {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--g-muted);
  margin-top: 26px !important;
}
.mc-gate-by .mc-brand-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(154,139,156,.5);
}
.mc-gate-by .mc-brand-link:hover { color: var(--g-accent); border-bottom-color: var(--g-accent); }

@media (max-width: 420px) {
  .mc-gate-actions .mc-btn { width: 100%; }
}


/* --- gaveta lateral --------------------------------------- */

html.mc-scroll-locked { overflow: hidden; }

#meconta-drawer {
  --surface:#FFFFFF; --ink:#2B1B2E; --ink-soft:#6B586E; --muted:#9A8B9C;
  --line:#E4D8E2; --bg:#F3EDF2; --accent:#D6246E;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Figtree',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  position: fixed; inset: 0; z-index: 999999;
  font-family: var(--body); line-height: 1.5;
}
#meconta-drawer[hidden] { display: none; }

#meconta-drawer .mc-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(43,27,46,.42);
  opacity: 0; transition: opacity .2s ease;
}
#meconta-drawer.is-open .mc-drawer-backdrop { opacity: 1; }

#meconta-drawer .mc-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(43,27,46,.14);
  display: flex; flex-direction: column; padding: 16px;
  transform: translateX(100%); transition: transform .22s ease;
}
#meconta-drawer.is-open .mc-drawer-panel { transform: translateX(0); }

#meconta-drawer .mc-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 14px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
#meconta-drawer .mc-drawer-brand {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; color: var(--ink);
}
#meconta-drawer .mc-drawer-brand span { color: var(--accent); }
#meconta-drawer .mc-drawer-close {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  font-size: 26px; line-height: 1; width: 36px; height: 36px; min-height: 0;
  padding: 0; border-radius: 8px; color: var(--muted); cursor: pointer;
}
#meconta-drawer .mc-drawer-close:hover { color: var(--accent); background: var(--bg); }

#meconta-drawer .mc-drawer-list { list-style: none; margin: 0; padding: 0; flex: 1; }
#meconta-drawer .mc-drawer-list li { margin: 0; }
#meconta-drawer .mc-drawer-item {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  display: block; width: 100%; text-align: left;
  font-family: var(--body); font-size: 15px; font-weight: 500; line-height: 1.3;
  color: var(--ink-soft); padding: 13px 12px; border-radius: 10px;
  cursor: pointer; text-transform: none; min-height: 0;
}
#meconta-drawer .mc-drawer-item:hover { background: var(--bg); color: var(--ink); }
#meconta-drawer .mc-drawer-item[aria-current=page] {
  background: var(--bg); color: var(--accent); font-weight: 600;
}
#meconta-drawer .mc-drawer-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
#meconta-drawer .mc-drawer-foot {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  padding-top: 14px; border-top: 1px solid var(--line); margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  #meconta-drawer .mc-drawer-panel,
  #meconta-drawer .mc-drawer-backdrop { transition: none; }
}
@media (max-width: 420px) { #meconta-app .mc-by { display: none; } }

/* --- nível 1 e 2 da tela Analisar no celular --------------- */

#meconta-app .mc-search-wide {
  display: block; width: 100%; max-width: none;
  margin-bottom: 14px; padding: 12px 16px; font-size: 15px;
}
#meconta-app .mc-index-results:empty { display: none; }
#meconta-app .mc-index-results { margin-bottom: 16px; }

#meconta-app .mc-back {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body); font-size: 14px; font-weight: 500;
  color: var(--ink-soft); padding: 6px 4px 6px 0; margin-bottom: 6px;
  cursor: pointer; text-transform: none; min-height: 0; width: auto;
}
#meconta-app .mc-back:hover { color: var(--accent); }
#meconta-app .mc-back-arrow { font-size: 17px; line-height: 1; }

#meconta-app .mc-detail-title {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 600; font-size: 19px;
  line-height: 1.25; color: var(--ink); margin-bottom: 4px;
}
#meconta-app .mc-detail-count {
  font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--accent);
}

/* --- comparação com a população --------------------------- */

#meconta-app .mc-bench {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--inbound);
  border-radius: 0 var(--r) var(--r) 0; padding: 16px 18px; margin-top: 14px;
}
#meconta-app .mc-bench-line { font-size: 16px; line-height: 1.5; color: var(--ink); }
#meconta-app .mc-bench-line strong { font-weight: 600; color: var(--inbound); }
#meconta-app .mc-bench-note {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-top: 6px;
}

/* --- aviso de deleção agendada ---------------------------- */

#meconta-app .mc-queue-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; background: #FDF2F7;
  border: 1px solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 16px; margin-bottom: 18px;
}
#meconta-app .mc-queue-banner strong { font-size: 15px; font-weight: 600; color: var(--ink); }
#meconta-app .mc-queue-when {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-top: 3px;
}
#meconta-app .mc-queue-cancel {
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font-family: var(--body);
  font-size: 13px; font-weight: 600; padding: 9px 18px; cursor: pointer;
  white-space: nowrap; width: auto; min-height: 0; text-transform: none; flex-shrink: 0;
}
#meconta-app .mc-queue-cancel:hover { background: var(--accent); }
#meconta-app .mc-queue-cancel:disabled { opacity: .5; cursor: default; }

/* --- assistente de importação ------------------------------ */

#meconta-app .mc-wizard { margin-bottom: 8px; }
#meconta-app .mc-wiz-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px; max-width: 720px;
}
#meconta-app .mc-wiz-center { text-align: center; }
#meconta-app .mc-wiz-step {
  display: block; font-family: var(--mono); font-size: 11px;
  color: var(--muted); margin-bottom: 8px;
}
#meconta-app .mc-wiz-title {
  font-family: var(--display); font-weight: 600; font-size: 20px;
  line-height: 1.25; color: var(--ink); margin-bottom: 8px;
}
#meconta-app .mc-wiz-text {
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  max-width: 56ch; margin-bottom: 18px;
}
#meconta-app .mc-wiz-center .mc-wiz-text { margin-left: auto; margin-right: auto; }
#meconta-app .mc-wiz-btn {
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font-family: var(--body);
  font-size: 14px; font-weight: 600; padding: 12px 24px; cursor: pointer;
  width: auto; min-height: 0; text-transform: none;
}
#meconta-app .mc-wiz-btn:hover { background: var(--accent); }
#meconta-app .mc-wiz-btn:disabled { opacity: .5; cursor: default; }
#meconta-app .mc-wiz-back {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  font-family: var(--body); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); padding: 12px 4px; cursor: pointer;
  text-decoration: underline; width: auto; min-height: 0; text-transform: none;
}
#meconta-app .mc-wiz-back:hover { color: var(--accent); }
#meconta-app .mc-wiz-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px;
}
#meconta-app .mc-wiz-actions-center { justify-content: center; }
#meconta-app .mc-wiz-center .mc-wiz-back { display: block; margin: 10px auto 0; }
#meconta-app .mc-wiz-badge {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; font-weight: 600; margin: 0 auto 14px;
}
#meconta-app .mc-wiz-ok  { background: #E3F2EC; color: var(--mutual); }
#meconta-app .mc-wiz-err { background: #FDE7EF; color: var(--accent); }
#meconta-app .mc-wiz-warn { background: #FDF1E3; color: #B0752F; }

#meconta-app .mc-wiz-alt {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--accent); border-radius: 999px; background: transparent;
  color: var(--accent); font-family: var(--body); font-size: 14px; font-weight: 600;
  line-height: 1.2; padding: 12px 24px; cursor: pointer; width: auto;
  min-height: 0; text-transform: none;
  transition: background .15s ease, color .15s ease;
}
#meconta-app .mc-wiz-alt:hover { background: var(--accent); color: #fff; }
#meconta-app .mc-wiz-alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#meconta-app .mc-spinner {
  width: 34px; height: 34px; margin: 6px auto 16px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: mc-spin .9s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #meconta-app .mc-spinner { animation-duration: 3s; } }

/* --- formulários de configuração --------------------------- */

#meconta-app .mc-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
#meconta-app .mc-input {
  font-family: var(--body); font-size: 14px; line-height: 1.3;
  padding: 10px 13px; height: auto; min-height: 0; width: auto;
  flex: 1 1 190px; min-width: 150px; max-width: 260px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
}
#meconta-app .mc-input:focus { outline: none; border-color: var(--accent); }
#meconta-app .mc-form-status {
  font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 10px; min-height: 1em;
}
#meconta-app .mc-form-status.is-ok  { color: var(--mutual); }
#meconta-app .mc-form-status.is-err { color: var(--accent); }

@media (max-width: 520px) {
  #meconta-app .mc-form { flex-direction: column; }
  #meconta-app .mc-input { max-width: none; flex: 1 1 auto; }
  #meconta-app .mc-wiz-card { padding: 20px 16px; }
  #meconta-app .mc-wiz-btn,
  #meconta-app .mc-wiz-alt,
  #meconta-app .mc-danger-btn { width: 100%; }
}

/* --- cards recolhíveis de Configurações -------------------- */

#meconta-app .mc-acc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 10px; overflow: hidden;
}
#meconta-app .mc-acc.is-open { border-color: var(--ink-soft); }
#meconta-app .mc-acc-head {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 18px 20px; cursor: pointer; text-align: left;
  font-family: var(--body); text-transform: none; min-height: 0;
}
#meconta-app .mc-acc-head:hover { background: var(--bg); }
#meconta-app .mc-acc-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#meconta-app .mc-acc-title {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 16px; line-height: 1.3; color: var(--ink);
}
#meconta-app .mc-acc-sub {
  display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 3px;
}
#meconta-app .mc-acc-chevron {
  font-size: 20px; line-height: 1; color: var(--muted);
  transition: transform .18s ease; flex-shrink: 0;
}
#meconta-app .mc-acc.is-open .mc-acc-chevron { transform: rotate(180deg); }
#meconta-app .mc-acc-body {
  padding: 16px 20px 20px; border-top: 1px solid var(--line);
}
#meconta-app .mc-acc-body[hidden] { display: none; }
#meconta-app .mc-acc-body .mc-panel-text { max-width: none; }
#meconta-app .mc-acc-body .mc-panel-text + .mc-panel-text { margin-top: 10px; }

#meconta-app .mc-about-soon {
  font-size: 14px; line-height: 1.6; color: var(--accent); font-weight: 500;
}

#meconta-auth{
  --bg:#F3EDF2; --surface:#FFFFFF; --ink:#2B1B2E; --ink-soft:#6B586E;
  --muted:#9A8B9C; --line:#E4D8E2; --accent:#D6246E; --mutual:#2E7D6B;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Figtree',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  padding:clamp(24px,5vw,56px) 18px;
}
#meconta-auth *,#meconta-auth *::before,#meconta-auth *::after{box-sizing:border-box}
#meconta-auth p,#meconta-auth h1,#meconta-auth ul,#meconta-auth li{margin:0;padding:0}
#meconta-auth ul{list-style:none}

#meconta-auth .mc-auth{max-width:420px;margin:0 auto}

#meconta-auth .mc-auth-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(24px,4vw,32px);
}

#meconta-auth .mc-auth-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(23px,4vw,28px);line-height:1.15;letter-spacing:-.02em;
}
#meconta-auth .mc-auth-sub{
  font-size:14px;color:var(--ink-soft);margin-top:8px;
}
#meconta-auth .mc-auth-note{
  font-size:14px;color:var(--ink-soft);margin-bottom:4px;
}

#meconta-auth .mc-auth-form{display:flex;flex-direction:column;gap:16px;margin-top:22px}

#meconta-auth .mc-label{display:block}
#meconta-auth .mc-label > span{
  display:block;font-size:13px;font-weight:500;color:var(--ink-soft);margin-bottom:6px;
}
#meconta-auth .mc-field{
  appearance:none;-webkit-appearance:none;
  display:block;width:100%;
  font-family:var(--body);font-size:16px;line-height:1.3;
  padding:12px 15px;height:auto;min-height:0;
  border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);
}
#meconta-auth .mc-field:focus{outline:none;border-color:var(--accent)}

/* Código: monoespaçado e espaçado, para conferir dígito a dígito. */
#meconta-auth .mc-code{
  font-family:var(--mono);font-size:26px;letter-spacing:.34em;
  text-align:center;padding-left:.34em;
}

/* O campo isca fica fora da tela em vez de display:none —
   robô que ignora CSS ainda cai nele. */
#meconta-auth .mc-honeypot{
  position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;
}

#meconta-auth .mc-auth-btn{
  appearance:none;-webkit-appearance:none;
  border:0;border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--body);font-size:15px;font-weight:600;line-height:1.2;
  padding:14px 24px;cursor:pointer;width:100%;min-height:0;text-transform:none;
  transition:background .15s ease;
}
#meconta-auth .mc-auth-btn:hover:not(:disabled){background:var(--accent)}
#meconta-auth .mc-auth-btn:disabled{opacity:.45;cursor:default}

#meconta-auth .mc-check{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14px;color:var(--ink-soft);cursor:pointer;
}
#meconta-auth .mc-check input{
  width:17px;height:17px;margin:2px 0 0;accent-color:var(--accent);flex-shrink:0;
}

#meconta-auth .mc-auth-msg{
  font-size:14px;line-height:1.5;color:var(--muted);min-height:1.4em;
}
#meconta-auth .mc-auth-msg.is-err{color:var(--accent)}
#meconta-auth .mc-auth-msg.is-ok{color:var(--mutual)}

#meconta-auth .mc-auth-foot{
  text-align:center;font-size:14px;color:var(--ink-soft);margin-top:18px;
}
#meconta-auth .mc-auth-sep{margin:0 8px;color:var(--line)}

#meconta-auth .mc-auth-link{
  appearance:none;-webkit-appearance:none;border:0;background:none;
  font-family:var(--body);font-size:14px;font-weight:600;
  color:var(--accent);cursor:pointer;padding:0;text-decoration:underline;
  min-height:0;width:auto;text-transform:none;
}
#meconta-auth .mc-auth-link:hover{color:var(--ink)}
#meconta-auth .mc-auth-link:disabled{opacity:.5;cursor:default}

/* --- força da senha --- */

#meconta-auth .mc-strength{margin-top:-6px}
#meconta-auth .mc-meter{
  height:5px;border-radius:3px;background:var(--line);overflow:hidden;
}
#meconta-auth .mc-meter span{
  display:block;height:100%;width:0;border-radius:3px;
  background:var(--accent);transition:width .2s ease,background .2s ease;
}
#meconta-auth .mc-meter[data-level="3"] span{background:#C99A2E}
#meconta-auth .mc-meter[data-level="4"] span{background:var(--mutual)}

#meconta-auth .mc-rules{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;
  font-size:12px;color:var(--muted);
}
#meconta-auth .mc-rules li{display:flex;align-items:center;gap:6px}
#meconta-auth .mc-rule-dot{
  width:8px;height:8px;border-radius:50%;
  border:1.5px solid var(--line);background:transparent;flex-shrink:0;
  transition:background .15s ease,border-color .15s ease;
}
#meconta-auth .mc-rules li.is-ok{color:var(--mutual)}
#meconta-auth .mc-rules li.is-ok .mc-rule-dot{
  background:var(--mutual);border-color:var(--mutual);
}

/* --- termos --- */

#meconta-auth .mc-terms-box{
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:16px;font-size:14px;line-height:1.6;color:var(--ink-soft);
}
#meconta-auth .mc-terms-box a{color:var(--accent);font-weight:500}
#meconta-auth .mc-terms-note{
  font-size:12.5px;color:var(--muted);margin-top:10px;
}

@media(prefers-reduced-motion:reduce){
  #meconta-auth .mc-meter span,#meconta-auth .mc-rule-dot{transition:none}
}