/* ============ TOKENS — design system Nocturne ============
   Os valores vêm de _ds/nocturne-d0376a83.../styles.css (projeto Claude Design
   "Miner - Painel Redesenhado") e da coleção "Nocturne" do Figma "Jarvis — MINER".
   Os NOMES das variáveis são os de sempre — é por isso que as 16 views herdam o
   sistema novo sem serem tocadas.
   Escuro = Nocturne nativo. Claro = derivado da sua rampa neutra (o Nocturne não
   define tema claro). A rail fica escura nos dois, por regra do design system. */
:root{
  --bg:#F3F5FE; --surface:#FFFFFF; --surface-2:#EDEFFA; --surface-3:#E4E7F5;
  --ink:#292B31; --muted:#595D6C; --faint:#75798C; --line:#CFD3E5; --line-2:#B2B6CA;
  --rail:#11121D; --rail-2:#0D0E17; --rail-ink:#CFD3E5; --rail-muted:#75798C; --rail-line:#292B31;
  --accent:#796CBF; --accent-2:#5D5294; --accent-ink:#FFFFFF; --accent-soft:rgba(121,108,191,.12); --accent-300:#5D5294;
  --ok:#16A34A; --ok-dot:#22C55E; --ok-soft:rgba(34,197,94,.13);
  --warn:#B45309; --warn-dot:#F59E0B; --warn-soft:rgba(245,158,11,.15);
  --crit:#DC2626; --crit-dot:#EF4444; --crit-soft:rgba(239,68,68,.13);
  --info:#2563EB; --info-dot:#3B82F6; --info-soft:rgba(59,130,246,.14);
  --shadow:0 1px 2px rgba(41,43,49,.05),0 6px 20px -8px rgba(41,43,49,.16);
  --shadow-lg:0 20px 50px -16px rgba(41,43,49,.32);
  --radius:14px; --radius-sm:8px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161826; --surface:#232532; --surface-2:#2A2C3A; --surface-3:#31333F;
    --ink:#E9E9ED; --muted:#9397AB; --faint:#75798C;
    --line:color-mix(in srgb,#E9E9ED 16%,transparent); --line-2:color-mix(in srgb,#E9E9ED 26%,transparent);
    --rail:#11121D; --rail-2:#0D0E17; --rail-ink:#CFD3E5; --rail-muted:#75798C; --rail-line:#292B31;
    --accent:#9184D9; --accent-2:#A7A1DB; --accent-ink:#1A1B24; --accent-soft:color-mix(in srgb,#9184D9 16%,transparent);
    --accent-300:#D2CEFD;
    --ok:#34D399; --warn:#FBBF24; --crit:#F87171; --info:#60A5FA;
    --ok-soft:rgba(52,211,153,.14); --warn-soft:rgba(251,191,36,.15);
    --crit-soft:rgba(248,113,113,.14); --info-soft:rgba(96,165,250,.15);
    --shadow:0 6px 18px rgba(0,0,0,.55);
    --shadow-lg:0 16px 40px rgba(0,0,0,.65);
  }
}
:root[data-theme="light"]{
  --bg:#F3F5FE; --surface:#FFFFFF; --surface-2:#EDEFFA; --surface-3:#E4E7F5;
  --ink:#292B31; --muted:#595D6C; --faint:#75798C; --line:#CFD3E5; --line-2:#B2B6CA;
  --accent:#796CBF; --accent-2:#5D5294; --accent-ink:#FFFFFF; --accent-soft:rgba(121,108,191,.12); --accent-300:#5D5294;
  --ok:#16A34A; --warn:#B45309; --crit:#DC2626; --info:#2563EB;
  --ok-soft:rgba(34,197,94,.13); --warn-soft:rgba(245,158,11,.15);
  --crit-soft:rgba(239,68,68,.13); --info-soft:rgba(59,130,246,.14);
  --shadow:0 1px 2px rgba(41,43,49,.05),0 6px 20px -8px rgba(41,43,49,.16);
  --shadow-lg:0 20px 50px -16px rgba(41,43,49,.32);
}
:root[data-theme="dark"]{
  --bg:#161826; --surface:#232532; --surface-2:#2A2C3A; --surface-3:#31333F;
  --ink:#E9E9ED; --muted:#9397AB; --faint:#75798C;
  --line:color-mix(in srgb,#E9E9ED 16%,transparent); --line-2:color-mix(in srgb,#E9E9ED 26%,transparent);
  --accent:#9184D9; --accent-2:#A7A1DB; --accent-ink:#1A1B24; --accent-soft:color-mix(in srgb,#9184D9 16%,transparent);
    --accent-300:#D2CEFD;
  --ok:#34D399; --warn:#FBBF24; --crit:#F87171; --info:#60A5FA;
  --ok-soft:rgba(52,211,153,.14); --warn-soft:rgba(251,191,36,.15);
  --crit-soft:rgba(248,113,113,.14); --info-soft:rgba(96,165,250,.15);
  --shadow:0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 16px 40px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:640;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-soft)}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

/* ============ SHELL ============ */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* Rail */
.rail{background:linear-gradient(180deg,var(--rail),var(--rail-2));color:var(--rail-ink);
  border-right:1px solid var(--rail-line);display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;width:248px;z-index:30;padding:16px 12px;gap:2px}
.brand{display:flex;align-items:center;gap:11px;padding:8px 10px 14px}
.brand .mk{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:radial-gradient(120% 120% at 30% 20%,#7C8BFF,#4453E6);color:#fff;font-size:18px;
  box-shadow:0 4px 14px -3px rgba(68,83,230,.7),inset 0 0 0 1px rgba(255,255,255,.14)}
.brand b{color:#fff;font-size:15px;font-weight:680;letter-spacing:-.02em;display:block;line-height:1.15}
.brand span{color:var(--rail-muted);font-size:11px;letter-spacing:.04em}
.nav-label{color:var(--rail-muted);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:14px 12px 6px;font-weight:600}
.nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--rail-ink);
  font-size:13.5px;font-weight:500;position:relative;transition:background .14s,color .14s}
.nav svg{width:17px;height:17px;flex:none;opacity:.82}
.nav:hover{background:rgba(255,255,255,.05);color:#fff}
/* Item ativo: fundo accent-soft e o texto/ícone no accent, sem barra lateral —
   é assim no desenho (Nocturne marca o estado com a cor, não com um traço). */
.nav.on{background:var(--accent-soft);color:var(--accent)}
.nav.on svg{opacity:1;color:var(--accent)}
.nav .ct{margin-left:auto;background:var(--crit);color:#fff;font-size:10.5px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
.nav .ct.q{background:rgba(255,255,255,.14);color:var(--rail-ink)}
/* A lista de links é a única parte que rola. flex:1 + min-height:0 é o que a deixa MESMO encolher
   dentro do flex column — sem o min-height:0, um filho flex recusa-se a ficar mais baixo que o seu
   conteúdo e volta a empurrar o rodapé para fora do ecrã.
   O padding lateral negativo/positivo dá espaço à barra de scroll sem estreitar os itens. */
.rail-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;margin:0 -6px;padding:0 6px}
.rail-nav::-webkit-scrollbar{width:6px}
.rail-nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--rail-ink) 22%,transparent);
  border-radius:3px}
.rail-nav::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--rail-ink) 38%,transparent)}
.rail-nav{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--rail-ink) 22%,transparent) transparent}
/* Sombras de scroll: dizem que HÁ mais lista para lá do corte, e desaparecem sozinhas quando se
   chega ao topo ou ao fundo. Sem isto, um item cortado a meio lê-se como um menu partido, não como
   uma lista que rola — e no macOS a barra de scroll só aparece enquanto se rola, portanto não há
   outra pista. Técnica sem JS: as duas primeiras camadas rolam com o conteúdo (`local`) e tapam a
   sombra nos extremos; as duas últimas ficam fixas ao contentor (`scroll`). */
.rail-nav{
  background:
    linear-gradient(var(--rail-2) 30%, rgba(0,0,0,0)) top/100% 24px no-repeat local,
    linear-gradient(rgba(0,0,0,0), var(--rail-2) 70%) bottom/100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.5), rgba(0,0,0,0)) top/100% 11px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.5), rgba(0,0,0,0)) bottom/100% 11px no-repeat scroll;
}
/* margin-top:auto deixa de ser preciso (o .rail-nav já empurra), mas fica: com o menu vazio, é
   ele que mantém o rodapé em baixo. */
.rail-foot{margin-top:auto;border-top:1px solid var(--rail-line);padding-top:12px;flex:none}
.rail-user{display:flex;align-items:center;gap:10px;padding:6px 10px}
.rail-user .av{width:30px;height:30px;border-radius:8px;background:#26304a;display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px;flex:none}
.rail-user small{display:block;color:var(--rail-muted);font-size:11px}
.rail-user b{color:#fff;font-size:12.5px;font-weight:600}
.rail-user .rail-who{min-width:0;flex:1}
.rail-user .rail-who b,.rail-user .rail-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rail-logout{margin-left:auto;flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--rail-muted);text-decoration:none;transition:background .15s ease,color .15s ease}
.rail-logout:hover{background:rgba(248,113,113,.16);color:#f87171}

/* Main — sempre na 2.ª coluna: com o rail em position:fixed (fora do fluxo),
   sem isto o auto-placement do grid metia a .main na 1.ª coluna (248px). */
.main{grid-column:2;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:13px 26px}
.topbar h1{font-size:18px}
.topbar .sub{color:var(--muted);font-size:12.5px;margin-top:1px}
.spacer{flex:1}
/* Segmentado — o ativo marca-se com o preenchimento accent-soft (a mesma
   linguagem do .pill.on e do .msocio.on). Antes usava um box-shadow inset como
   "contorno": era um 2.º anel DENTRO do border do contentor, de cantos retos
   mastigados pelo overflow:hidden — dois anéis desalinhados nos cantos (print
   do Erico, 12/ago). Regra desta app: um contorno por elemento — o border
   vive só no contentor. */
.seg{display:inline-flex;background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0;overflow:hidden}
.seg button{border:none;background:none;color:var(--ink);padding:7px 12px;border-radius:0;font-size:13px;font-weight:500}
.seg button+button{border-left:1px solid var(--line)}
.seg button:not(.on):hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.seg button.on{background:var(--accent-soft);color:var(--accent)}
.icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);display:grid;place-items:center;transition:.14s}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2)}
.icon-btn svg{width:17px;height:17px}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;
  padding:8px 13px;font-size:13px;font-weight:580;display:inline-flex;align-items:center;gap:7px;transition:.14s}
.btn:hover{border-color:var(--line-2);background:var(--surface-2)}
.btn svg{width:15px;height:15px}
/* Ação primária em contorno — regra explícita do Nocturne ("Outline primary
   actions and let :focus-visible carry the accent"), e é assim que o desenho
   desenha o "Usar no Anúncio" e o "Criar produto". */
.btn.pri{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.pri:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent)}
.btn.pri:active{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.btn.sm{padding:6px 10px;font-size:12px}
/* Pílula cheia (accent liso): só para CTAs dentro do próprio cartão .card-acc
   ("Trocar chave"/"Editar saldo" do Gasto de uso de API) — o resto da app
   segue a regra de ação primária em contorno acima, isto não a substitui. */
.btn.acc{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  border-radius:20px;padding:7px 14px;font-size:12px;font-weight:640}
.btn.acc:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.acc:active{background:var(--accent-300);border-color:var(--accent-300)}
/* Botão fantasma (btn-ghost do Nocturne): só o ícone, sem caixa. */
.btn.gh{border-color:transparent;background:transparent;color:var(--accent);padding:4px}
.btn.gh:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:transparent}
/* Ícone a rodar enquanto se espera por algo de fora (o saldo pedido à fal.ai/Anthropic pode
   levar ~8s). Diz que o pedido está a acontecer sem tirar o número que já lá está. */
.btn.gh.arodar{cursor:progress;opacity:.72}
.btn.gh.arodar>svg{animation:jgira .9s linear infinite;transform-origin:50% 50%}
@keyframes jgira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.gh.arodar>svg{animation:none}}
.btn.dng{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 30%,var(--line))}

/* 🔴 04/set/2026, ordem do Erico: «faz com que toda a secção ocupe as margens laterais da
   direita — fica desproporcional». O painel tinha `max-width:1280px` e, num ecrã de 2000px,
   deixava quase 500px vazios à direita enquanto as tabelas se espremiam à esquerda. É uma
   ferramenta interna, lida em ecrã grande: a largura é para usar.
   As três excepções que existiam para o miner, o painel do sócio e o Verão dos Tugas deixaram
   de fazer sentido — passaram a ser a regra. O `padding-right` maior do sócio fica, que esse
   não é largura, é respiro. */
.view{padding:22px 26px 60px;max-width:none;width:100%;animation:fade .28s ease}
.view:has(.socio){padding-right:100px}
.main:has(.socio) .topbar{padding-right:100px}
@media(max-width:900px){.view:has(.socio){padding-right:16px}.main:has(.socio) .topbar{padding-right:16px}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ PRIMITIVES ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;box-shadow:0 0 0 3px var(--dbg,transparent)}
.dot.ok{background:var(--ok-dot)} .dot.warn{background:var(--warn-dot)} .dot.crit{background:var(--crit-dot)}
.dot.info{background:var(--info-dot)} .dot.na{background:var(--faint);opacity:.5}
.dot.pulse{animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok-dot) 60%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:620;padding:3px 9px;border-radius:20px;
  border:1px solid transparent;letter-spacing:.01em;white-space:nowrap}
.pill.ok{color:var(--ok);background:var(--ok-soft)} .pill.warn{color:var(--warn);background:var(--warn-soft)}
.pill.crit{color:var(--crit);background:var(--crit-soft)} .pill.info{color:var(--info);background:var(--info-soft)}
.pill.mut{color:var(--muted);background:var(--surface-3)}
.pill.on{color:var(--accent);background:var(--accent-soft)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:560;padding:4px 9px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:640}
.grid{display:grid;gap:16px}

/* Summary strip */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{padding:15px 17px}
.kpi .lbl{margin-bottom:9px}
.kpi .val{font-size:26px;font-weight:680;letter-spacing:-.02em}
.kpi .val small{font-size:15px;color:var(--muted);font-weight:600}
.kpi .meta{margin-top:6px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi.alert{border-color:color-mix(in srgb,var(--crit) 34%,var(--line))}
.kpi.alert .val{color:var(--crit)}
.spark{height:30px;margin-top:8px;display:block;width:100%}

/* Store cards */
.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:16px}
.store{padding:0;overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s;cursor:pointer}
.store:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.store.hidden-s{opacity:.5}
.store-h{display:flex;align-items:flex-start;gap:11px;padding:15px 16px 12px}
.store-h .fav{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:15px;color:#fff;letter-spacing:-.02em}
.store-h .nm{min-width:0;flex:1}
.store-h .nm b{font-size:14.5px;font-weight:640;display:block;letter-spacing:-.01em}
.store-h .nm .dm{font-size:12px;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sema{display:flex;gap:5px;padding:2px 16px 13px;flex-wrap:wrap}
.sema .s{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0}
.sema .s .dot{width:8px;height:8px}
.sema .s small{font-size:9px;color:var(--faint);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.store-m{display:flex;gap:0;border-top:1px solid var(--line);background:var(--surface-2)}
.store-m .c{flex:1;padding:11px 14px;border-right:1px solid var(--line)}
.store-m .c:last-child{border-right:none}
.store-m .c .lbl{font-size:9.5px;margin-bottom:3px}
.store-m .c b{font-size:15px;font-weight:660;letter-spacing:-.02em}
.store-m .c b.pos{color:var(--ok)} .store-m .c b.neg{color:var(--crit)}
.store-f{display:flex;align-items:center;gap:7px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.ada{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-family:var(--mono);color:var(--muted);
  padding:3px 7px;border-radius:6px;background:var(--surface-3)}
.mini-act{margin-left:auto;display:flex;gap:5px}

section.blk{margin-top:24px}
.blk-h{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.blk-h h2{font-size:15.5px}
.blk-h .lbl{margin-left:2px}

/* Radar list */
.radar{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.rrow{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--surface);transition:background .12s}
.rrow:hover{background:var(--surface-2)}
.rrow .sev{width:4px;align-self:stretch;border-radius:3px;flex:none;margin:-13px 0;margin-right:2px}
.rrow .sev.crit{background:var(--crit-dot)} .rrow .sev.warn{background:var(--warn-dot)} .rrow .sev.info{background:var(--info-dot)}
.rrow .rmain{flex:1;min-width:0}
.rrow .rmain b{font-size:13.5px;font-weight:620}
.rrow .rmain p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.rrow .rstore{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.rrow .ract{display:flex;align-items:center;gap:8px;flex:none}
.rrow .nextact{font-size:12px;color:var(--accent);font-weight:560;text-align:right;max-width:200px}

/* Matrix */
.mtx-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table.mtx{border-collapse:collapse;width:100%;font-size:12.5px;min-width:820px}
table.mtx th,table.mtx td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--line)}
table.mtx thead th{position:sticky;top:0;background:var(--surface-2);z-index:2;font-size:11px;font-weight:640;
  border-bottom:1px solid var(--line-2)}
table.mtx thead th.rot{white-space:nowrap;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
table.mtx td.feat,table.mtx th.feat{text-align:left;position:sticky;left:0;background:var(--surface);z-index:1;
  font-weight:560;min-width:220px;box-shadow:1px 0 0 var(--line)}
table.mtx thead th.feat{background:var(--surface-2);z-index:3}
table.mtx tr.cat td{background:var(--surface-3);font-weight:680;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-align:left;position:sticky;left:0}
.yes{color:var(--ok);font-weight:700} .no{color:var(--faint);opacity:.4}
table.mtx tbody tr:hover td{background:var(--surface-2)}
table.mtx tbody tr:hover td.feat{background:var(--surface-2)}
td.cgap{background:var(--warn-soft)!important}
td.cgap .dot{margin:0 auto}
.num-gap{color:var(--warn);font-variant-numeric:tabular-nums;font-weight:680}

/* Gap board */
.mtx-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.mtx-bar .lgd{display:flex;gap:12px;margin-left:auto;flex-wrap:wrap}
.mtx-bar .lgd span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.selwrap{position:relative}
select.mini{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:9px;padding:7px 30px 7px 11px;font-size:12.5px;font-weight:560;font-family:var(--sans)}
.selwrap::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:10px}
.togg{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
.togg .sw{width:34px;height:20px;border-radius:11px;background:var(--surface-3);border:1px solid var(--line);position:relative;transition:.16s}
.togg .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:.16s}
.togg.on .sw{background:var(--accent);border-color:var(--accent)}
.togg.on .sw::after{left:16px;background:#fff}
/* O mesmo interruptor, mas como <button role="switch"> — o único uso antigo (criar_loja.php) é
   uma maqueta em <div>, sem foco por teclado nem estado anunciado. Um controlo que arranca
   trabalho PAGO tem de ser alcançável por Tab e acionável por Espaço/Enter. As regras de `.on`
   ficam intactas: o markup novo dirige-se só por aria-checked — uma fonte de verdade, não duas. */
.togg{background:none;border:0;padding:0;font:inherit;text-align:left}
.togg[aria-checked="true"] .sw{background:var(--accent);border-color:var(--accent)}
.togg[aria-checked="true"] .sw::after{left:16px;background:#fff}
.togg:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft);border-radius:9px}
.togg[disabled]{opacity:.5;cursor:not-allowed}
/* Um campo bloqueado tem de PARECER bloqueado: sem isto o seletor de modo ficava igual ao
   normal enquanto «Fazer tudo» o prendia, e quem tentasse mexer não percebia porque não ia. */
.fld select:disabled,.fld input:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-2)}

.gapwrap{display:grid;grid-template-columns:1fr 296px;gap:20px;align-items:start}
.gapboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:14px}
.gcard{padding:16px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;flex-direction:column;gap:11px}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.gcard-h{display:flex;align-items:flex-start;gap:11px}
.gcard-h .fav{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;font-weight:700;color:#fff;font-size:15px}
.gcard-h .nm{flex:1;min-width:0}
.gcard-h .nm b{font-size:14px;display:block;letter-spacing:-.01em}
.gcard-h .nm .dm{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcount{text-align:right;flex:none;line-height:1.05}
.gcount b{font-size:30px;font-weight:720;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--warn)}
.gcount small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-top:1px}
.gcount.zero b{color:var(--ok);font-size:20px}
.gexp{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.gbar{flex:1;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.gbar i{display:block;height:100%;background:#3BA7A3;border-radius:3px}
.gcat{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:2px 0 -2px}
.gaps-list{display:flex;flex-wrap:wrap;gap:6px}
.gchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:560;padding:4px 9px;border-radius:8px;
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn-dot) 42%,transparent);color:var(--warn)}
.gchip .dot{width:6px;height:6px;background:var(--warn-dot)}
.gchip.design{background:var(--surface-3);border-color:var(--line-2);color:var(--muted)}
.gchip.design .dot{background:var(--faint);opacity:.6}
.gchip.more{background:none;border:1px dashed var(--line-2);color:var(--warn);cursor:pointer}
.gcomplete{display:flex;align-items:center;gap:8px;color:var(--ok);font-size:12.5px;font-weight:560;padding:6px 0}
.gcomplete svg{width:16px;height:16px}
.gsect{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:7px}
.oppo{position:sticky;top:82px}
.oppo .lbl{margin-bottom:10px}
.opp{padding:11px 0;border-bottom:1px solid var(--line)}
.opp:last-child{border:none;padding-bottom:0}
.opp .t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.opp .t b{font-size:12.5px;font-weight:580}
.opp .t .n{color:var(--warn);font-variant-numeric:tabular-nums;font-weight:680;font-size:12.5px;white-space:nowrap}
.opp small{color:var(--muted);font-size:11px}
.cov-mini{height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin-top:6px}
.cov-mini i{display:block;height:100%;background:var(--warn-dot);opacity:.55}
@media(max-width:960px){.gapwrap{grid-template-columns:1fr}.oppo{position:static}}

/* Radar de contingencia */
.verdict{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:16px 20px;border-radius:14px;margin-bottom:20px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--crit) 10%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--crit) 22%,var(--line))}
.verdict .big{font-size:24px;font-weight:720;letter-spacing:-.02em;line-height:1.1}
.verdict .big.crit{color:var(--crit)}
.panic{margin-left:auto;background:var(--crit);color:#fff;border:none;border-radius:10px;padding:10px 15px;font-weight:640;font-size:13px;display:inline-flex;gap:8px;align-items:center}
.panic svg{width:15px;height:15px}
.evrow{display:flex;gap:12px;align-items:center;padding:13px 16px;background:var(--surface)}
.evrow .emid{flex:1;min-width:0}
.evrow .emid b{font-size:13.5px;font-weight:620}
.evrow .ent{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.evrow .emid p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.who{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:6px;white-space:nowrap;flex:none}
.who.jarvis{background:var(--accent-soft);color:var(--accent)} .who.ti{background:var(--warn-soft);color:var(--warn)}
.evrow .eur{font-variant-numeric:tabular-nums;font-weight:700;color:var(--crit);white-space:nowrap;min-width:62px;text-align:right}
.evrow .eur.zero{color:var(--faint)}
.riskbar{display:flex;gap:3px;flex:none}
.riskbar i{width:15px;height:6px;border-radius:2px;background:var(--surface-3)}
.riskbar i.ok{background:var(--ok-dot)} .riskbar i.warn{background:var(--warn-dot)} .riskbar i.crit{background:var(--crit-dot)}
.plan2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pitem{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.pitem:last-child{border:none}
.pitem b{font-size:12.5px;font-weight:560}
.pitem small{color:var(--muted);font-size:11px;font-family:var(--mono)}

/* Prontidao */
.rcard{padding:16px;display:flex;flex-direction:column;gap:12px}
.gaterow{display:flex;gap:7px;flex-wrap:wrap}
.gate{font-size:10.5px;font-weight:680;padding:4px 9px;border-radius:7px;display:inline-flex;gap:5px;align-items:center}
.gate.ok{background:var(--ok-soft);color:var(--ok)} .gate.crit{background:var(--crit-soft);color:var(--crit)}
.gate.warn{background:var(--warn-soft);color:var(--warn)} .gate.na{background:var(--surface-3);color:var(--faint)}
.ritem{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.ritem:last-child{border:none}
.ritem .rn{flex:1}.ritem .rn b{font-size:12.5px;font-weight:560}.ritem .rn small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.ritem .rw{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.scorebig{font-size:32px;font-weight:720;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}

/* Fabrica */
.fmtx-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table.fmtx{border-collapse:collapse;width:100%;font-size:12px;min-width:780px}
table.fmtx th,table.fmtx td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--line)}
table.fmtx thead th{font-size:10px;color:var(--muted);font-weight:600;background:var(--surface-2)}
table.fmtx td.dom{text-align:left;font-family:var(--mono);font-size:11.5px;white-space:nowrap;padding-left:14px}
.fcell{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;font-size:11px;color:#fff;font-weight:700}
.fcell.done{background:var(--ok-dot)} .fcell.running{background:var(--info-dot)} .fcell.needs_jarvis{background:var(--accent)}
.fcell.needs_ti{background:var(--warn-dot);color:#3a2a06} .fcell.blocked{background:var(--surface-3)}
.fcell.failed{background:var(--crit-dot)} .fcell.queued,.fcell.wait{background:var(--surface-3);opacity:.5}
.pools{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:20px}
.pool{padding:13px 15px}
.pool small{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.pool b{font-size:22px;font-weight:720;font-variant-numeric:tabular-nums}.pool b.low{color:var(--crit)}
.pooldep{height:4px;border-radius:2px;background:var(--surface-3);margin-top:9px;overflow:hidden}
.pooldep i{display:block;height:100%;background:#3BA7A3} .pooldep i.low{background:var(--crit-dot)}
.hsess{display:flex;gap:11px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--line)}
.hsess:last-child{border:none}
.hsess .min{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
@media(max-width:760px){.plan2{grid-template-columns:1fr}.q4{grid-template-columns:1fr 1fr}}

/* Criar loja — manifesto */
.motorline{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:10px;background:var(--surface-2);border:1px dashed var(--line-2);font-size:12.5px;color:var(--muted);margin-bottom:12px}
.motorline b{color:var(--ink)} .motorline svg{width:15px;height:15px;flex:none;color:var(--accent)}
.statusbar{display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding:12px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);margin-bottom:20px}
.statusbar .s{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:520}
.statusbar .s b{font-variant-numeric:tabular-nums;font-size:16px;font-weight:700}
.mkgrid{display:grid;grid-template-columns:390px 1fr;gap:20px;align-items:start}
.mflist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:13px}
.mfcard{padding:14px 15px}
.mfcard h4{font-size:12px;margin-bottom:9px;letter-spacing:.01em;color:var(--ink)}
.mfitem{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:11.8px;line-height:1.3}
.mfitem .dot{width:8px;height:8px;flex:none}
.mfitem.off{opacity:.4}
.toglist{display:flex;flex-direction:column;gap:9px;margin-top:4px}
@media(max-width:900px){.mkgrid{grid-template-columns:1fr}}

/* Jobs */
.jobs{display:flex;flex-direction:column;gap:10px}
.job{padding:13px 15px;display:flex;align-items:center;gap:13px}
.job .jt{font-family:var(--mono);font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--surface-3);color:var(--ink)}
.job .jmain{flex:1;min-width:0}
.job .jmain b{font-size:13.5px}
.job .jmain p{margin:2px 0 0;font-size:12px;color:var(--muted);font-family:var(--mono)}
.job .prog{width:120px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;flex:none}
.job .prog i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .5s}
.logwrap{margin-top:16px}
.log{background:var(--rail);border-radius:var(--radius);padding:14px 16px;font-family:var(--mono);font-size:12px;
  color:#aeb6c8;line-height:1.7;max-height:230px;overflow:auto}
.log .t{color:#5f6b84} .log .g{color:#5fd68a} .log .y{color:#f5c451} .log .r{color:#f78ba0} .log .b{color:#7c9bff}

/* Wizard */
.wiz{display:grid;grid-template-columns:280px 1fr;gap:20px}
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;transition:.14s}
.step .sn{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:680;
  background:var(--surface-3);color:var(--muted);border:1px solid var(--line)}
.step small{display:block;font-size:11.5px;color:var(--muted)}
.step b{font-size:13px;font-weight:580}
.step.done .sn{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.step.run{background:var(--accent-soft)} .step.run .sn{background:var(--accent);color:#fff;border-color:transparent}
.step.mac .sn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.step.wait .sn{background:var(--surface-3)}
.wiz-form .field{margin-bottom:15px}
.wiz-form label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.wiz-form label span{color:var(--crit)}
.inp{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface-2);
  color:var(--ink);font-size:13.5px;font-family:var(--sans)}
/* Anel de foco dos campos: UM só sistema em toda a app — border accent + halo
   accent-soft (o mesmo de .fld e .mbusca). Nunca outline POR CIMA do border,
   que era o que aqui acontecia (dois anéis sobrepostos). */
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)}
.inp.mono{font-family:var(--mono);font-size:12.5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:11.5px;color:var(--muted);margin-top:5px}
.note{padding:11px 14px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:12.5px;
  display:flex;gap:9px;align-items:flex-start;border:1px solid color-mix(in srgb,var(--warn) 24%,transparent)}
.note svg{width:16px;height:16px;flex:none;margin-top:1px}

/* Detail Drawer */
.scrim{position:fixed;inset:0;background:rgba(10,13,20,.5);backdrop-filter:blur(2px);z-index:60;opacity:0;
  pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(680px,94vw);background:var(--bg);z-index:70;
  box-shadow:var(--shadow-lg);transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.15,1);
  display:flex;flex-direction:column;overflow:hidden}
.drawer.open{transform:none}
.dhead{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:13px;background:var(--surface)}
.dtabs{display:flex;gap:3px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto}
.dtab{border:none;background:none;color:var(--muted);padding:12px 12px;font-size:12.5px;font-weight:580;
  border-bottom:2px solid transparent;white-space:nowrap}
.dtab.on{color:var(--ink);border-bottom-color:var(--accent)}
.dbody{padding:20px 22px;overflow:auto;flex:1}
.cred-list{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--line)}
.cred{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--surface)}
.cred .cn{flex:1}.cred .cn b{font-size:13px;font-weight:560}.cred .cn small{display:block;color:var(--muted);font-size:11.5px;font-family:var(--mono)}
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.act{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);transition:.14s}
.act:hover{border-color:var(--accent);background:var(--surface)}
.act b{font-size:13px;display:flex;align-items:center;gap:8px}
.act p{margin:5px 0 10px;font-size:12px;color:var(--muted)}

/* Toast */
.toasts{position:fixed;bottom:84px;right:22px;z-index:90;display:flex;flex-direction:column;gap:10px}
/* Voltar ao topo — canto inferior direito, em todas as vistas.
   z-index 55: abaixo do scrim (60), da gaveta (70) e dos toasts (90),
   para nunca flutuar por cima de um modal aberto. */
.to-top{position:fixed;bottom:22px;right:22px;z-index:55;width:54px;height:54px;
  border:0;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent-2)}
.to-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.to-top svg{width:26px;height:26px;display:block}
@media (max-width:520px){.to-top{width:48px;height:48px;bottom:16px;right:16px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}
.toast{background:var(--rail);color:#fff;padding:13px 16px;border-radius:11px;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:11px;font-size:13px;font-weight:520;animation:slidein .3s ease;max-width:340px;
  border:1px solid var(--rail-line)}
.toast .dot{width:8px;height:8px}
.toast small{display:block;color:var(--rail-muted);font-size:11.5px;font-weight:500}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
/* Aviso de contexto em falta do Miner (12/ago): vermelho e MUITO maior que um toast normal
   — cerca de 5x a área — porque é o que impede alguém de gastar API com a loja/conta erradas.
   Um aviso do tamanho de uma notificação de rotina passaria despercebido, que é exatamente o
   que aconteceu antes de isto existir. */
.toast.toast-aviso{background:var(--crit);border-color:color-mix(in srgb,#fff 35%,var(--crit));
  max-width:min(560px,calc(100vw - 44px));padding:47px 34px;gap:20px;border-radius:18px;
  font-size:21px;font-weight:680;line-height:1.35;
  box-shadow:0 18px 48px color-mix(in srgb,var(--crit) 45%,transparent)}
.toast.toast-aviso .dot{width:14px;height:14px;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.25)}
.toast.toast-aviso small{font-size:16px;font-weight:500;color:rgba(255,255,255,.9);margin-top:8px}
@media (max-width:520px){
  .toast.toast-aviso{padding:20px 22px;font-size:17px}
  .toast.toast-aviso small{font-size:14px}
}
/* Entrada na fila de produção (pedido do Erico, 12/ago): cartão VERDE que entra da direita para a
   esquerda quando se carrega em Publicar num criativo. O botão está no cartão do criativo e a fila
   na coluna oposta — sem um cartão desta escala, um clique que arranca trabalho pago parecia não
   ter feito nada. Menor que o aviso vermelho de contexto em falta: isto é uma confirmação, não um
   travão.
   🔴 Verde ESCURO fixo nos dois temas (como o .toast normal, que usa a rail escura sempre): o --ok
   do tema escuro é claro demais e branco por cima dele dava 1,9:1. Este dá 7,1:1 no texto
   principal e 5,8:1 na linha esbatida (medido no browser, não estimado). */
.toast.toast-fila{background:#166534;border-color:#22C55E;color:#fff;
  max-width:min(440px,calc(100vw - 44px));padding:20px 24px;gap:14px;border-radius:16px;
  font-size:17px;font-weight:680;line-height:1.3;
  /* Três linhas de texto: centrado, o ponto caía ao lado do SUBTÍTULO e parecia solto do título
     que anuncia. Alinha-se ao topo, à altura da primeira linha. */
  align-items:flex-start;
  animation:slidein-fila .44s cubic-bezier(.17,.84,.44,1);
  box-shadow:0 16px 42px rgba(22,101,52,.5)}
.toast.toast-fila .dot{width:13px;height:13px;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.28);
  margin-top:5px;flex:none}
/* 🔴 O bloco de texto é filho de um flex: sem min-width:0 recusa-se a encolher abaixo da sua linha
   mais longa e o texto sai da caixa pela direita. O max-width do .toast sozinho não chega. */
.toast.toast-fila>div{min-width:0;overflow-wrap:anywhere}
.toast.toast-fila small{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.95);margin-top:8px;line-height:1.5}
.toast.toast-fila small b{display:block;font-size:14.5px;font-weight:680;color:#fff;margin-bottom:4px}
.toast.toast-fila small .lj{display:block;font-weight:620;color:#fff}
.toast.toast-fila small i{display:block;font-style:normal;color:rgba(255,255,255,.86);margin-top:2px}
@keyframes slidein-fila{from{transform:translateX(115%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.toast.toast-fila{animation:none}}

.empty{text-align:center;padding:50px 20px;color:var(--muted)}
/* Ícones do topo: no desenho são fantasma, sem contorno. */
.topbar .icon-btn{border-color:transparent;background:transparent}
.topbar .icon-btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* Email composer */
.mail{display:grid;grid-template-columns:1fr 300px;gap:18px}
.tpl{padding:11px 13px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:10px;
  background:var(--surface-2);margin-bottom:8px;cursor:pointer;transition:.14s}
.tpl:hover{border-color:var(--accent)}
.tpl.on{border-color:var(--accent);background:var(--accent-soft)}
.tpl b{font-size:12.5px}.tpl small{color:var(--muted);font-size:11px}

.menu-toggle{display:none}
.app{transition:grid-template-columns .22s ease}
.rail{transition:padding .18s ease,opacity .18s ease,width .18s ease;overflow:hidden}
/* Recolher a rail não a faz desaparecer: fica a coluna de ÍCONES. Assim continua
   a dar para navegar e para ver em que secção se está, sem ocupar 248px. */
.app.rail-collapsed{grid-template-columns:64px 1fr}
.app.rail-collapsed .rail{width:64px;padding:14px 0;gap:4px;align-items:center}
.app.rail-collapsed .brand,
.app.rail-collapsed .nav>span,
.app.rail-collapsed .rail-who,
.app.rail-collapsed .rail-logout{display:none}
/* Os títulos de secção viram um separador — a divisão mantém-se legível sem texto. */
.app.rail-collapsed .nav-label{padding:0;height:1px;overflow:hidden;text-indent:-999px;
  width:26px;margin:9px auto;background:var(--rail-line)}
.app.rail-collapsed .nav{width:40px;height:40px;padding:0;justify-content:center;gap:0}
.app.rail-collapsed .nav svg{width:19px;height:19px}
/* O badge numérico não cabe em 40px: fica um ponto no canto, com o número no title. */
.app.rail-collapsed .nav .ct{position:absolute;top:4px;right:4px;margin:0;min-width:7px;width:7px;height:7px;
  border-radius:50%;padding:0;font-size:0;overflow:hidden}
.app.rail-collapsed .rail-foot{width:100%;display:flex;justify-content:center;padding-top:12px}
.app.rail-collapsed .rail-user{padding:0}
/* Botão para reabrir, no topo da própria rail (o do topbar continua a funcionar). */
.rail-mini-toggle{display:none}
.app.rail-collapsed .rail-mini-toggle{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:10px;border:0;background:rgba(255,255,255,.06);color:var(--rail-ink);cursor:pointer;
  margin-bottom:9px}
.app.rail-collapsed .rail-mini-toggle:hover{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:900px){
  .app,.app.rail-collapsed{grid-template-columns:1fr}
  .main{grid-column:auto}
  /* Em ecrã pequeno a rail é gaveta off-canvas — não há modo "só ícones". */
  .app.rail-collapsed .rail{padding:16px 12px;gap:2px;align-items:stretch}
  .app.rail-collapsed .brand{display:flex}
  .app.rail-collapsed .nav>span{display:inline}
  .app.rail-collapsed .rail-who{display:block}
  .app.rail-collapsed .rail-logout{display:grid}
  .app.rail-collapsed .nav-label{padding:14px 12px 6px;height:auto;width:auto;overflow:visible;
    text-indent:0;margin:0;background:none}
  .app.rail-collapsed .nav{width:auto;height:auto;padding:9px 12px;justify-content:flex-start;gap:11px}
  .app.rail-collapsed .nav .ct{position:static;margin-left:auto;width:auto;min-width:18px;height:18px;
    border-radius:9px;padding:0 5px;font-size:10.5px}
  .app.rail-collapsed .rail-foot{display:block;padding-top:12px}
  .app.rail-collapsed .rail-user{padding:6px 10px}
  .app.rail-collapsed .rail-mini-toggle{display:none}
  .rail{position:fixed;left:0;top:0;z-index:80;width:248px;transform:translateX(-102%);transition:transform .28s}
  .rail.open{transform:none}
  .menu-toggle{display:grid}
  #railToggle{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .wiz{grid-template-columns:1fr}
  .mail{grid-template-columns:1fr}
  .view{padding:18px 16px 60px}
  .topbar{padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Sem border-radius forçado: o anel de foco segue o raio PRÓPRIO de cada
   elemento — antes isto deformava pills/chips redondos para 4px enquanto
   focados, mais um caso de "border-radius esquisito" por cima do desenho. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── módulo Ativos: campos de formulário (ficha «comprei conta nova») ─────── */
.fld{display:flex;flex-direction:column;gap:5px}
.fld>.lbl{font-size:11px}
.fld input,.fld select{width:100%;box-sizing:border-box;padding:9px 11px;font-size:16px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
  font-family:inherit;appearance:none}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld input::placeholder{color:var(--muted);opacity:.75}
details>summary::-webkit-details-marker{display:none}
details>summary::marker{content:""}

/* ══ Painel do Sócio (estética aprovada, usa as vars do painel → claro/escuro) ══ */
.socio .sc-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;display:inline-block}
.socio .sc-dot.g{background:var(--ok)} .socio .sc-dot.r{background:var(--crit)} .socio .sc-dot.a{background:var(--warn)}
.socio .sc-alert-wrap{position:relative;display:inline-block}
.socio .sc-alert{display:inline-flex;align-items:center;gap:8px;background:var(--crit-soft);
  border:1px solid color-mix(in srgb,var(--crit) 34%,var(--line));color:var(--crit);border-radius:10px;
  padding:8px 13px;font-size:13px;font-weight:640;cursor:pointer}
.socio .sc-alert .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;opacity:.85}
.socio .sc-alert.pulse{animation:scPulse 2.4s infinite}
@keyframes scPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--crit) 40%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.socio .sc-pop{position:absolute;top:44px;left:0;width:270px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.35);z-index:30;display:none}
.socio .sc-pop.show{display:block}
.socio .sc-pop .h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 8px}
.socio .sc-pop .it{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px}
.socio .sc-pop .it b{font-size:12.5px} .socio .sc-pop .it span{font-size:11px;color:var(--muted);display:block}
/* 🔴 07/set/2026 — os 4 KPIs do topo estouravam a largura da pagina.
   Duas causas somadas:
     1. `repeat(4,1fr)` — em CSS Grid, `1fr` tem minimo `auto`, ou seja o TAMANHO DO CONTEUDO.
        Um cartao com «R$ 21.918» dentro nunca encolhia abaixo disso, e a grelha empurrava
        para fora em vez de comprimir. (`minmax(0,1fr)` nao tem esse problema — e por isso que
        `.socio .roi`, logo abaixo, nunca estourou.)
     2. As media queries mediam a JANELA e a barra lateral ocupa 248px. Numa janela de 1040px
        sobram ~790px uteis, mas a regra dos 900px nao dispara: pedia 4 colunas onde cabiam 2.
        E quando a barra lateral esta recolhida a conta muda outra vez — uma largura fixa nunca
        podia acertar nos dois casos.
   Medido: janela 1040px -> `scrollWidth` 1202 vs `clientWidth` 1040 = 162px de scroll
   horizontal, com tudo cortado a direita.
   `auto-fit` resolve os dois de uma vez: conta o espaco REAL do contentor, e como sao 4
   cartoes nunca passa de 4 colunas (as faixas vazias colapsam). Sem media queries. */
.socio{container-type:inline-size}
.socio .sc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px;margin-bottom:24px}
/* `auto-fit` acima ja garante que nunca ha scroll horizontal, em qualquer browser. Isto so
   corrige a ESTETICA: com 4 cartoes, `auto-fit` cai em 3 colunas nas larguras intermedias e
   deixa um orfao sozinho na 2.a linha. Aqui forcam-se 4 ou 2 (nunca 3), medindo o CONTENTOR e
   nao a janela — que e a unica medida que sobrevive a barra lateral abrir e fechar. Browser sem
   suporte a @container ignora estas duas regras e fica com o auto-fit, que ja esta correto. */
@container (min-width:800px){.socio .sc-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:799px){.socio .sc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:430px){.socio .sc-kpis{grid-template-columns:minmax(0,1fr)}}
.socio .sc-kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 17px}
.socio .sc-kpi .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.socio .sc-kpi .v{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.socio .sc-kpi .m{margin-top:7px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
/* Tendência por KPI (só na vista "Hoje", ver torre.php/jp_torre_kpi_trend) —
   histórico REAL de torre_kpi_diario; com <2 pontos mostra a nota vazia em
   vez de inventar uma linha. Cor do selo separada do accent (regra dataviz):
   ok/crit para Lucro/Receita/ROI, info-neutro para Anúncio (gastar mais não
   é bom nem mau por si só). */
.socio .sc-kpi-trend{margin-top:9px;height:28px;display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Nome próprio (não ".empty") — a classe global ".empty" (padding:50px 20px,
   usada nos placeholders "sem resultados") colidia aqui e inflava a nota.
   Mesma altura (28px) que a linha com sparkline real, para os 4 cartões
   ficarem sempre proporcionais entre si, tenham ou não histórico ainda. */
.socio .sc-kpi-trend-empty{font-size:10.5px;color:var(--faint);justify-content:flex-start}
.socio .sc-spark{display:block;overflow:visible;flex:none}
.socio .sc-spark .area{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.socio .sc-spark .line{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.socio .sc-spark circle{fill:var(--accent)}
.socio .sc-delta{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.socio .sc-delta.ok{color:var(--ok);background:var(--ok-soft)}
.socio .sc-delta.crit{color:var(--crit);background:var(--crit-soft)}
.socio .sc-delta.info{color:var(--info);background:var(--info-soft)}
/* Ranking "Lucro líquido por loja" — mesmo dado dos cartões acima, magnitude
   em vez de só ordem de lista. Lojas sem lucro hoje ficam com faixa tracejada
   em vez de barra a 0% escondida. */
.socio .sc-rankbox{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:17px 18px}
.socio .sc-rank-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.socio .sc-rank-h h3{font-size:15px;margin:0;font-weight:640}
.socio .sc-rank-h span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.socio .sc-rank{display:flex;flex-direction:column;gap:9px}
.socio .sc-rankrow{display:grid;grid-template-columns:minmax(120px,220px) 1fr 96px;align-items:center;gap:10px;font-size:13px}
@media(max-width:640px){.socio .sc-rankrow{grid-template-columns:96px 1fr 78px;font-size:12px}}
.socio .sc-rankrow .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socio .sc-rankrow .track{height:15px;background:var(--surface-2);border-radius:6px;position:relative;overflow:hidden}
.socio .sc-rankrow .track.empty{background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,var(--surface-3) 6px 12px)}
.socio .sc-rankrow .fill{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--ok)}
.socio .sc-rankrow .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.socio .sc-rankrow .val.mut{color:var(--faint);font-weight:500}
.socio .sc-sech{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.socio .sc-sech h2{font-size:15px;font-weight:640;margin:0}
.socio .sc-sech span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.socio .sc-stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:16px}
@media(max-width:640px){.socio .sc-stores{grid-template-columns:1fr}}
.socio .sc-store{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 17px;display:flex;flex-direction:column;gap:14px}
.socio .sc-store .hd{display:flex;align-items:center;gap:11px}
.socio .sc-store .lg{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:16px;flex:0 0 auto}
/* Com ficheiro de logo real (assets/lojas/<slug>): quadrado branco — as marcas
   são quase todas escuras/transparentes e sumiam no tema escuro — e a imagem
   cobre o tile (o border-radius fica pelo overflow). */
.socio .sc-store .lg.has-img{background:#fff;overflow:hidden;border:1px solid var(--line)}
.socio .sc-store .lg.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.socio .sc-store .nm{flex:1;min-width:0}
.socio .sc-store .nm b{font-size:15px;display:block;line-height:1.25}
.socio .sc-store .nm span{font-size:12px;color:var(--muted);font-family:var(--mono)}
.socio .sc-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:620;padding:3px 9px;border-radius:20px;color:var(--ok);background:var(--ok-soft)}
.socio .sc-stale{display:flex;align-items:center;gap:7px;margin-top:-4px;padding:6px 10px;border-radius:9px;font-size:11.5px;font-weight:620;color:var(--warn);background:var(--warn-soft)}
.socio .sc-stale .dot{width:6px;height:6px;border-radius:50%;background:var(--warn-dot);flex:0 0 auto}
.socio .sc-stale.crit{color:var(--crit);background:var(--crit-soft)}
.socio .sc-stale.crit .dot{background:var(--crit-dot)}
.socio .roi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:11px;overflow:hidden}
.socio .roi>div{padding:11px 12px;border-right:1px solid var(--line)}
.socio .roi>div:last-child{border-right:none}
.socio .roi .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.socio .roi .val{font-size:16px;font-weight:680;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.socio .roi .val.g{color:var(--ok)}
@media(max-width:560px){.socio .roi{grid-template-columns:1fr 1fr}.socio .roi>div:nth-child(2n){border-right:none}}
.socio .accs .lbl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.socio .acc{display:flex;align-items:center;gap:10px;padding:7px 2px}
.socio .acc .st{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.socio .acc .st.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.socio .acc .st.off{background:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.socio .acc .nm{font-size:13px;font-weight:520;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socio .acc .nm.dim{color:var(--muted)}
.socio .acc .id{font-size:11px;color:var(--muted);font-family:var(--mono);opacity:.7}

/* semáforo 3 estados: verde=ativa+gasto · laranja=ativa sem gasto · vermelho=bloqueada */
.socio .acc .st.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
/* Minhas contas — 2 blocos lado a lado */
.socio .sc-cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-bottom:20px}
@media(max-width:820px){.socio .sc-cols2{grid-template-columns:1fr}}
.socio .sc-block{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.socio .sc-block .bh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.socio .sc-block .bh h3{margin:0;font-size:14px}
.socio .sc-block .bh .cnt{font-size:11px;font-family:var(--mono);color:var(--muted);background:var(--surface-2);padding:2px 9px;border-radius:20px}
.socio .sc-block.blk .bh{background:color-mix(in srgb,var(--crit) 9%,transparent)}
.socio .sc-block.blk .bh h3{color:var(--crit)}
.socio .sc-arow{display:flex;align-items:center;gap:11px;padding:12px 16px;border-top:1px solid var(--line)}
.socio .sc-arow:first-of-type{border-top:none}
.socio .sc-arow .st{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.socio .sc-arow .st.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.socio .sc-arow .st.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.socio .sc-arow .st.off{background:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.socio .sc-arow .mid{flex:1;min-width:0}
.socio .sc-arow .mid b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socio .sc-arow .mid span{font-size:11.5px;color:var(--muted)}
.socio .sc-arow .val{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.socio .sc-arow .empty{color:var(--muted);font-size:13px}
.socio .sc-del{border:1px solid color-mix(in srgb,var(--crit) 35%,var(--line));background:var(--crit-soft);color:var(--crit);font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.socio .sc-del:hover{background:var(--crit);color:#fff;border-color:var(--crit)}
/* modal de dupla confirmação */
.sc-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(6,8,14,.55);backdrop-filter:blur(3px);padding:20px}
.sc-modal[hidden]{display:none}
.sc-modal .box{background:var(--surface);border:1px solid var(--line);border-radius:18px;max-width:430px;width:100%;padding:26px 26px 22px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.sc-modal .box h3{margin:0 0 10px;font-size:19px}
.sc-modal .box p{margin:0 0 8px;font-size:14px;color:var(--muted);line-height:1.55}
/* 🔴 Colisão de nomes: existe um `.who` global (linha ~343) que é uma etiqueta curta —
   uppercase, nowrap, 10px. Dentro de um modal, `.who` é uma FRASE, e essas três propriedades
   faziam-na sair da caixa e correr pelo ecrã fora (visto no popup de conflito, 13/ago). O
   seletor mais específico tem de as anular explicitamente, não basta redefinir o resto. */
.sc-modal .box .who{font-weight:600;color:var(--ink);font-size:14px;margin:8px 0 18px;
  text-transform:none;white-space:normal;letter-spacing:normal;padding:0;border-radius:0}
.sc-modal .acts{display:flex;gap:10px;justify-content:flex-end}
.sc-modal .acts button{border-radius:10px;padding:10px 18px;font-size:14px;font-weight:620;cursor:pointer;border:1px solid var(--line);font-family:inherit}
.sc-modal .cancel{background:var(--surface-2);color:var(--ink)}
.sc-modal .confirm{background:var(--crit);color:#fff;border-color:var(--crit)}
.sc-modal .confirm:hover{filter:brightness(1.08)}
.socio .sc-flash{display:flex;align-items:center;gap:9px;background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 30%,var(--line));border-radius:11px;padding:11px 15px;margin-bottom:18px;font-size:13.5px}
.socio .sc-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:20px;max-width:620px}
.socio .sc-panel h3{margin:0 0 4px;font-size:16px}
.socio .sc-panel .hint{font-size:12.5px;color:var(--muted);margin:0 0 18px}
.socio .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.socio .fgrid{grid-template-columns:1fr}}
.socio .fld{display:flex;flex-direction:column;gap:6px}
.socio .fld label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.socio .fld input,.socio .fld select{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;color:var(--ink);padding:11px 12px;font-size:16px;font-family:inherit;outline:none;width:100%}
.socio .fld input:focus,.socio .fld select:focus{border-color:var(--accent)}
.socio .sc-btn{margin-top:18px;background:var(--accent);color:var(--accent-ink);border:none;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:680;cursor:pointer}
.socio .sc-flow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--muted)}
.socio .sc-list{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:20px}
.socio .sc-list .row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.socio .sc-list .row:first-child{border-top:none}
.socio .sc-list .mid{flex:1;min-width:0}
.socio .sc-list .mid b{font-size:13.5px} .socio .sc-list .mid span{font-size:12px;color:var(--muted)}
.socio .sc-list .id{font-size:11px;color:var(--muted);font-family:var(--mono);opacity:.7}
.socio .sc-chip{font-size:11px;font-weight:620;padding:3px 9px;border-radius:8px;white-space:nowrap}
.socio .sc-chip.prod{color:var(--ok);background:var(--ok-soft)}
.socio .sc-chip.wait{color:var(--warn);background:var(--warn-soft)}
.socio .sc-chip.off{color:var(--crit);background:var(--crit-soft)}
.socio .sc-chip.mut{color:var(--muted);background:var(--surface-3)}
.socio .sc-rm{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;flex:0 0 auto}
.socio .sc-rm:hover{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,var(--line));background:var(--crit-soft)}
.socio .sc-note{font-size:11.5px;color:var(--muted);margin-top:20px;line-height:1.6;border-top:1px dashed var(--line);padding-top:14px}

/* ============ NOCTURNE ============
   As peças que o Nocturne traz e o painel ainda não tinha. Tudo o resto do
   sistema já existia com outros nomes (.card, .btn, .fld/.inp, .seg, .pill). */

/* Régua que desvanece nas pontas — assinatura do Nocturne. A rampa é de 48px
   por ponta; contornos de caixa e separadores dentro de controlos ficam sólidos. */
.hr{height:1px;border:0;margin:14px 0;
  background:linear-gradient(to right,transparent,var(--line) 48px,var(--line) calc(100% - 48px),transparent)}

/* Cartão: cabeçalho, título e kicker. Substitui os h3 com style= inline. */
.card-p{padding:14px 16px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.card-t{margin:0;font-size:14px;font-weight:640;letter-spacing:-.01em}
.card-k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:640}
.card-s{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}

/* Tabela do sistema: a linha da linha é um gradiente ao nível da <tr>, para o
   fade correr a largura toda em vez de recomeçar em cada célula. */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;padding:6px;font-size:10.5px;font-weight:640;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.tbl td{padding:8px 6px;border:0;vertical-align:middle}
.tbl thead tr{background:linear-gradient(to right,transparent,var(--line) 48px,var(--line) calc(100% - 48px),transparent) no-repeat bottom/100% 1px}
.tbl tbody tr{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--ink) 8%,transparent) 48px,color-mix(in srgb,var(--ink) 8%,transparent) calc(100% - 48px),transparent) no-repeat bottom/100% 1px}
.tbl tbody tr:hover{background:
  linear-gradient(color-mix(in srgb,var(--ink) 4%,transparent),color-mix(in srgb,var(--ink) 4%,transparent)) no-repeat 0 0/100% 100%,
  linear-gradient(to right,transparent,color-mix(in srgb,var(--ink) 8%,transparent) 48px,color-mix(in srgb,var(--ink) 8%,transparent) calc(100% - 48px),transparent) no-repeat bottom/100% 1px}

/* Passo numerado (formulários em etapas). .step já é do wizard da Fábrica. */
.mstep{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:var(--surface-2)}
.mstep+.mstep{margin-top:10px}
.mstep-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.mstep-n{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;white-space:nowrap}

/* Zona de arrasto para ficheiro. O <input type=file> fica por cima, invisível:
   assim o clique e o drop nativos continuam a funcionar sem JS extra. */
.dropzone{position:relative;display:grid;place-items:center;gap:3px;text-align:center;
  padding:20px 16px;border:1.5px dashed var(--line-2);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--muted);font-size:12.5px;cursor:pointer;transition:.14s}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.dropzone.has{border-style:solid;border-color:var(--ok);color:var(--ink)}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone b{color:var(--accent);font-weight:620}
.dropzone small{color:var(--faint);font-size:11px}

/* Botão desativado — antes cada view punha style.opacity à mão. */
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:var(--surface);border-color:var(--line)}

/* "Criar produto" — a ação que põe a máquina toda a andar (vídeo, ficha, imagens, landing,
   produto, campanha, anúncio). O contorno do Nocturne serve para ações secundárias; esta é a
   principal do cartão e estava a desaparecer no ecrã, sobretudo desativada, onde o opacity:.5
   sobre um texto que já era só contorno a deixava ilegível. Sólida, maior, e desativada com
   contraste a sério em vez de transparência. */
#mCriarBtn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  padding:12px 28px;font-size:15px;font-weight:680;border-radius:11px;letter-spacing:.01em;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 22%,transparent)}
#mCriarBtn:hover:not(:disabled){background:var(--accent);filter:brightness(1.08);
  transform:translateY(-1px);box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 32%,transparent)}
#mCriarBtn:active:not(:disabled){transform:translateY(0);filter:brightness(.96)}
/* --surface-2 e não --surface-3: medido, é o que leva o texto desativado de 4,33:1 para
   4,8:1 — o mínimo para 15px a bold é 4,5:1. */
#mCriarBtn:disabled{opacity:1;background:var(--surface-2);border-color:var(--line-2);
  color:var(--muted);box-shadow:none;transform:none}
.btn.pri:disabled:hover{background:transparent;border-color:var(--accent)}

/* ---- Miner (view ?v=miner) ----
   Layout do desenho: coluna fixa de 248px à esquerda (contexto + estado) e a
   área de trabalho à direita. Ver ~/jarvis-figma-sync/patch-miner/README.md */
 /* Esta view ocupa a largura toda: ao encolher o menu lateral, a grelha de
   vencedores estica e preenche o espaço em vez de deixar faixa vazia à direita.
   (O .view do painel limita a 1280px — aqui não.) */
/* Laranja de destaque do Miner (fonte escolhida · filtro de categoria ativo).
   É deliberadamente diferente do accent roxo do painel: no desenho estes dois
   filtros têm de se distinguir do estado dos cartões à volta. */
/* Cores tiradas do miner real do sualojapopular.com/miner/ (--orange/--gold2 de
   lá), para os filtros ficarem iguais aos de origem. */
.miner{--miner-hi:#ff8c42;--miner-hi-ink:#1a1300;--miner-gold:#ffd84d;max-width:none;width:100%}
/* No tema claro o dourado do SLP (fundo escuro) fica ilegível sobre branco —
   mesmo papel, âmbar escuro. */
:root[data-theme="light"] .miner{--miner-gold:#8a4b00}
#mMinerView{display:flex;flex-direction:column;gap:18px}
/* Linha de topo: 3 cartões lado a lado (gasto de API, fila de produção,
   loja/conta/página) — antes era uma coluna lateral de 248px, agora ocupa
   a largura toda em cima da área de trabalho. */
/* 🔴 UM SÓ BLOCO (pedido do Erico, 12/ago): as cinco áreas deixaram de ser cinco
   cartões com moldura, sombra e fundo próprios dentro de uma caixa maior —
   passaram a ser cinco SECÇÕES do mesmo bloco, separadas só por um fio de 1px.
   Cinco molduras dentro de outra moldura é ruído: obrigava o olho a atravessar
   três contornos até chegar ao conteúdo e fazia a mesma informação parecer cinco
   assuntos desligados. O halo em gradiente (assinatura do desenho) fica como
   moldura à volta do bloco, não por baixo de cada cartão. */
.mtopwrap{border-radius:18px;padding:10px;background:
  radial-gradient(120% 150% at 0% 0%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 58%),
  radial-gradient(120% 150% at 100% 40%,color-mix(in srgb,var(--crit) 28%,transparent),transparent 58%),
  var(--bg)}
/* Regra do Erico (11/ago): esta linha nunca empilha, em nenhuma largura — em
   vez de colunas que colapsam por breakpoint, é flex com min-width por
   secção + scroll horizontal próprio quando não couber tudo. min-width baixo
   de propósito: o zoom do browser (Cmd +) encolhe a largura efetiva em CSS
   px, e as secções devem continuar a encolher PROPORCIONALMENTE — o scroll
   é só o último recurso, não a primeira resposta a um ecrã mais estreito. */
.mtoprow{display:flex;gap:0;align-items:stretch;overflow-x:auto;overflow-y:hidden;
  min-height:292px;background:color-mix(in srgb,var(--bg) 62%,var(--surface));
  border:1px solid var(--line);border-radius:13px}
/* A secção perde tudo o que a fazia um cartão (fundo, contorno, sombra, cantos)
   e fica só com o seu espaço interior + o fio que a separa da vizinha. */
.mtoprow>.card{flex:1 1 158px;min-width:158px;background:transparent;border:0;
  box-shadow:none;border-radius:0;padding:13px 13px 12px;display:flex;flex-direction:column;
  min-height:0;overflow:visible}
.mtoprow>.card+.card{border-left:1px solid var(--line)}
/* Quem não é admin não vê a secção do sócio (fica em display:none, não sai do DOM):
   sem isto o `+` dava o fio à secção seguinte, que passa a ser a primeira visível —
   um fio encostado à borda do bloco, a ler-se como contorno duplo. */
.mtoprow:not(.has-socios)>#mSociosCard+.card{border-left:0}
.mtoprow>.card.mfila{flex:3.2 1 296px;min-width:296px}
/* Só admin: com a secção "Escolha o Sócio" a linha passa a 5 — secções um
   pouco mais estreitas para caberem mais antes de precisar de scroll. */
.mtoprow.has-socios>.card{flex:1 1 148px;min-width:148px}
/* A fila leva o nome do produto, o estado, a loja e a hora — precisa de mais largura do que as
   outras quatro secções, senão o nome fica cortado a três letras. */
.mtoprow.has-socios>.card.mfila{flex:3.2 1 288px;min-width:288px}
/* Rótulo da secção: mais pequeno e numa linha só (pedido do Erico, 12/ago).
   Antes eram 10px com .1em de tracking e "Loja, conta e página" / "Modo de
   publicação" partiam em duas linhas — o que desalinhava o início do conteúdo
   de secção para secção. Corta com reticências em vez de verter. */
.mtoprow>.card>.card-h{position:relative;flex:none;flex-wrap:nowrap;margin-bottom:9px}
.mtoprow>.card>.card-h>.card-k{color:var(--accent);font-size:9.5px;letter-spacing:.05em;
  font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* No tema claro o roxo do accent sobre o fundo do bloco mede 4,23:1 — abaixo de AA
   (4,5:1) para um rótulo deste tamanho. O tom 300 do mesmo roxo põe-no em 6,1:1 sem
   trocar a cor da marca. No escuro já está em 5,18:1 e fica como está. */
:root[data-theme="light"] .mtoprow>.card>.card-h>.card-k{color:var(--accent-300)}
.mtoprow>.card>.card-h>.btn{position:absolute;right:-4px;top:-4px}

/* ---- densidade DENTRO do bloco ----
   Com as cinco secções a partilhar a mesma altura, a linha mede-se pela mais
   alta — e a mais alta era o "Gasto de uso de API" (dois saldos + estimativa +
   editar saldo + duas chaves), que empurrava as vizinhas para 326px e deixava
   buracos em todas elas. Estas regras apertam só o que era folga decorativa:
   nada sai do ecrã, tudo continua visível sem rolar.
   Especificidade acima das primitivas (.apilist, .fld…) de propósito — vale só
   dentro do bloco do topo, o resto da app fica na densidade normal. */
.mtoprow>.card .apilist{gap:7px;margin-top:6px}
.mtoprow>.card .apinote{font-size:10.5px;margin-top:4px;line-height:1.32}
/* No cartão estreito do topo o bloco encolhe, mas o número continua a ser o que salta à vista. */
/* A barra de consumo pertence à linha que está por cima dela: colada a essa linha
   (2px) e não a flutuar a meio do intervalo do .apilist. Com gasto do dia nas duas
   APIs são duas barras + duas notas, e é aí que a secção decide a altura do bloco. */
.mtoprow>.card .apibar{height:4px;margin:1px 0 2px}
.mtoprow>.card .apirow{margin-top:10px}
.mtoprow>.card .apisub{margin-bottom:4px}
/* Segunda metade da secção (as duas chaves): separada por um fio em vez de 26px
   de ar — o fio diz "outro assunto" e não custa altura. */
.apichaves{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.mtoprow>.card .apikeyv{padding-top:7px;padding-bottom:7px;font-size:12px}
.mtoprow>.card .apikey>.btn.ico{width:30px;height:30px;padding:0}
/* Campos: 16px é a regra anti-zoom do iOS e continua a valer em ecrã tátil
   (@media abaixo). Em rato, 16px numa coluna de ~150px partia "Escolhe a loja"
   a meio da palavra — daí 13.5px aqui. */
.mtoprow>.card .mrow3{gap:9px}
.mtoprow>.card .fld{gap:3px}
.mtoprow>.card .fld>.lbl{font-size:10px;letter-spacing:.06em}
.mtoprow>.card .fld select,.mtoprow>.card .fld input{padding:8px 10px;font-size:13.5px}
.mtoprow>.card .miner .fld select,.miner .mtoprow>.card .fld select{background-position:right 9px center;padding-right:28px}
.mtoprow>.card .hint{font-size:11px;margin-top:2px}
.mtoprow>.card .togg{font-size:11px;gap:7px}
@media (pointer:coarse){
  .mtoprow>.card .fld select,.mtoprow>.card .fld input{font-size:16px}
}
.msocios{display:flex;flex-direction:column;gap:4px}
.msocio{width:100%;text-align:left;padding:8px 11px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;cursor:pointer;background:transparent;border:1px solid transparent;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msocio:hover{background:var(--surface-3)}
.msocio.on{background:color-mix(in srgb,var(--accent) 22%,var(--surface-2));border-color:var(--accent);color:var(--accent)}
/* Modo de publicação: dois botões grandes empilhados + rodapé do cartão. */
/* Os dois modos são ambos sólidos no accent, como no desenho; o escolhido
   distingue-se por ficar mais claro e com contorno. */
.mmodo{display:flex;flex-direction:column;gap:7px}
/* 13,5px, não 13: são o controlo principal da secção e o "Automático" escolhido
   mede 3,23:1 no tema claro (branco sobre o accent clareado — desenho do Erico,
   não se mexe na cor). Se a cor fica, o corpo de letra não deve encolher mais. */
.mmodo>.btn{width:100%;justify-content:center;padding:9px 12px;font-size:13.5px;font-weight:600;
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mmodo>.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.mmodo>.btn.pri{background:color-mix(in srgb,var(--accent) 82%,#fff);border-color:#fff3;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,#fff)}
/* "Histórico de Ads" é o botão escuro do desenho, para não competir com os modos. */
.mmodo-foot>#mHistBtn{background:var(--bg);border-color:var(--line);color:var(--ink)}
/* Enquanto o histórico está aberto por baixo, o botão fica marcado — mesmo
   destaque laranja da fonte escolhida, para se ver de onde vem o que está em
   baixo (o ID na regra acima ganha ao .btn.pri, daí esta regra explícita). */
.mmodo-foot>#mHistBtn.pri{border-color:var(--miner-hi);color:var(--miner-gold);
  background:linear-gradient(135deg,rgba(255,140,66,.18),rgba(255,196,0,.1))}
/* Antes: `margin-top:auto` colava estes dois botões ao fundo da secção. Num bloco
   em que as cinco secções partilham altura, isso abria ~130px de vazio entre os
   modos e o rodapé e fazia a coluna parecer inacabada. Ficam a seguir aos modos,
   separados por um fio — são ações secundárias, não rodapé. */
.mmodo-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px}
.mmodo-foot>.btn,.mmodo-foot .mcalwrap>.btn{width:100%;justify-content:center;padding:8px 10px;font-size:12.5px}
/* Menus de modelo Claude (22/set/2026, pedido do Erico): no FUNDO do cartão, quase colados ao
   fim. `margin-top:auto` empurra-os para baixo quando a linha é mais alta que o cartão; o
   padding de fora garante ar mínimo por cima do fio quando não há folga nenhuma. */
.mmodelos{margin-top:auto;padding-top:14px;min-width:0}
.mmodelos-c{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line);min-width:0}
.mmodelos .fld{min-width:0}
/* Campo fechado: o <select> nativo continua a receber clique, teclado e foco, mas o texto dele
   fica transparente e quem se vê é o .mmod-vis por cima — nome com reticências e custo SEMPRE
   inteiro (cabe nos 148px mínimos do cartão). As <option> repõem a cor, senão a lista aberta
   herdava o transparente nalguns browsers (Chrome em Windows). */
.mmod-sel{position:relative;min-width:0;container:mmod/inline-size}
.mmod-sel>select{width:100%;min-width:0;color:transparent;text-shadow:none}
.mmod-sel>select option{color:var(--ink);background:var(--surface)}
.mmod-sel>select option:disabled{color:var(--muted)}
.mmod-vis{position:absolute;inset:0;display:flex;align-items:center;gap:5px;min-width:0;
  padding:0 25px 0 10px;pointer-events:none;font-size:12.5px;color:var(--ink);overflow:hidden}
.mmod-nm{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sans com algarismos tabulares, não mono: a mono comia ~15px a mais e, nos 121px do campo em
   telemóvel, deixava o nome reduzido a uma letra. */
.mmod-cu{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;
  font-size:11px;letter-spacing:-.01em;color:var(--miner-gold,var(--accent))}
.mmod-cu:empty{display:none}
.mmod-cu.desc{color:var(--muted)}
.mmod-sel>select:disabled+.mmod-vis{opacity:.5}
/* Campo estreito (os 148px mínimos do cartão dão ~121px de campo, a medida do telemóvel): numa
   linha só, o custo deixava o nome em «Op…». Aí o campo cresce para duas linhas — nome em cima,
   custo por baixo — e os dois leem-se inteiros. */
@container mmod (max-width:150px){
  .mmod-sel>select{min-height:46px}
  .mmod-vis{flex-direction:column;align-items:stretch;justify-content:center;gap:1px}
  .mmod-nm{flex:none;line-height:1.25}
  .mmod-cu{line-height:1.2}
}
.mmodelos .hint{line-height:1.32}
.mmodelos .hint.mmod-aviso{color:var(--warn,#e0a040)}
.mmod-rep{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
/* Controlo que a view moveu para o cabeçalho (ex.: "Aparência" do Miner). */
.topbar-slot{display:flex;align-items:center;gap:8px}
.topbar-slot:empty{display:none}
/* ── Categorias de minerações ──────────────────────────────────
   Isto é um FILTRO (escolhe de que faixa de garimpo sai a grelha de vencedores
   lá em baixo), não um carrossel — e um filtro que esconde opções não é filtro.
   Era o que acontecia: fila `nowrap` + `overflow-x:auto` com a barra apagada
   (`scrollbar-width:none`). Medido a 1728px de ecrã em 14/ago/2026: 1830px de
   conteúdo dentro de 1408px de caixa = DOIS blocos inteiros invisíveis, sem
   nada na página a dizer que existiam. Passa a grelha que quebra linha: na área
   útil de 1428px dá 4 colunas × 2 linhas, tudo à vista de uma só vez, e aguenta
   as faixas futuras sem voltar a esconder nenhuma.
   O bloco é HORIZONTAL (ícone · nome+legenda · contagem) de propósito: em coluna
   cada um pedia ~128px de altura e duas linhas empurravam os candidatos — o
   conteúdo principal — para fora do ecrã. Assim são ~62px.
   Cor: ATIVO em âmbar (--miner-hi), a identidade do miner dentro do painel roxo;
   NOVO continua vermelho (regra do Erico, 11/ago) mas em pílula suave dentro do
   bloco, em vez de etiqueta sólida pendurada a cortar a moldura. */
.mfontes-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 11px}
/* Alinhado à ESQUERDA, como o «Vencedores minerados em PT» logo a seguir: estava
   centrado por cima de uma fila que começa à esquerda — a única secção da página
   fora de esquadria. */
.mfontes-title{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0}
.mfontes-meta{display:flex;align-items:center;gap:10px;margin-left:auto}
.mfontes-tot{font-size:12.5px;color:var(--muted)}
/* «Todas» é o sítio onde se limpa o filtro. Antes limpava-se clicando OUTRA VEZ
   no bloco já ativo — verdade que ninguém descobre sozinho. */
.mfontes-todas{font:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.mfontes-todas:hover{border-color:var(--line-2);color:var(--ink)}
.mfontes-todas.on{border-color:var(--miner-hi);color:var(--miner-gold);
  background:color-mix(in srgb,var(--miner-hi) 12%,var(--surface))}
.mfontes-todas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Sem tabuleiro pintado por trás: no tema escuro o --surface-2 do contentor era
   MAIS claro que o --surface dos blocos, e blocos mais escuros que a caixa que os
   segura leem-se como buracos, não como cartões. */
.mfontesbox{position:relative}
.mfontesbox:has(.mfontes:empty){display:none}
/* UMA SÓ LINHA que rola para o lado (16/set/2026, pedido do Erico). Em grelha as
   14 faixas ocupavam três filas — ~290px de altura antes de se ver um único
   candidato, e a lista de vencedores começava já fora do ecrã. Os blocos mantêm a
   dimensão que sempre tiveram (320px, o mesmo que a grelha lhes dava num ecrã
   grande): o que muda é só deixarem de quebrar linha. É o desenho que o telemóvel
   já usava desde 11/ago, agora também no computador.
   A barra fica SEMPRE desenhada, como na fila de produção e pela mesma razão: uma
   fila cortada na margem sem barra nenhuma lê-se como fila acabada. */
/* 🔴 Sem `scrollbar-width` aqui, de propósito: a partir do Chrome 121, declarar a
   propriedade padrão faz o browser IGNORAR os `::-webkit-scrollbar` abaixo e cair
   na barra flutuante do macOS — que só se desenha durante o gesto. Numa fila que
   acaba cortada na margem, uma barra invisível lê-se como fila acabada. Com só os
   pseudo-elementos, a barra fica sempre no sítio. */
.mfontes{display:grid;gap:10px;grid-auto-flow:column;grid-auto-rows:auto;
  grid-auto-columns:320px;overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:9px;scroll-snap-type:x proximity}
.mfontes>.mfonte{scroll-snap-align:start}
.mfontes::-webkit-scrollbar{height:8px}
.mfontes::-webkit-scrollbar-track{background:transparent}
.mfontes::-webkit-scrollbar-thumb{border-radius:4px;
  background:color-mix(in srgb,var(--ink) 22%,transparent)}
.mfontes::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 34%,transparent)}
.mfonte{position:relative;text-align:left;cursor:pointer;font:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 13px;min-width:0;
  display:grid;grid-template-columns:30px minmax(0,1fr) auto 24px;
  align-items:center;align-content:center;column-gap:11px;row-gap:3px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
/* Sem o botão da receita (quem não é admin não o vê) a 4.ª coluna sairia na mesma
   com o seu gap — a contagem ficava a flutuar a 35px da margem. */
.mfonte:not(:has(.mfdoc)){grid-template-columns:30px minmax(0,1fr) auto}
@media (hover:hover) and (pointer:fine){
  .mfonte:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
}
.mfonte:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Moldura à volta do emoji: os ícones são emojis de tamanhos e pesos muito
   diferentes (⛏️ contra 🏆 contra 📊). Dentro de um quadrado de 30px com fundo
   próprio passam a ler-se como um jogo de ícones, e não como sinais soltos. */
.mf-ico{grid-column:1;grid-row:1/span 2;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;font-size:15px;line-height:1;
  background:var(--surface-2);border:1px solid var(--line)}
.mf-nome{grid-column:2;grid-row:1;font-size:13.6px;font-weight:650;letter-spacing:-.01em;
  line-height:1.25;display:flex;align-items:flex-start;gap:7px;min-width:0}
.mf-nome>span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.mf-sub{grid-column:2;grid-row:2;font-size:11.9px;color:var(--muted);line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* A contagem é o que decide para onde ir trabalhar, por isso sai de dentro do
   título entre parênteses — onde ficava órfã na 2.ª linha assim que o nome era
   comprido («Vencedores no Miner + Apify (189)») — para coluna própria, em
   tabular-nums, com a unidade por baixo: «vídeos», «criativos» ou «publicados»,
   que o «(9)» sozinho não dizia. */
.mf-n{grid-column:3;grid-row:1/span 2;text-align:right;line-height:1.12;padding-left:4px}
.mf-n b{display:block;font-size:17px;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.mf-n i{display:block;font-style:normal;font-size:10px;color:var(--muted);letter-spacing:.02em}
/* Uma faixa a zeros não finge ter material. */
.mf-n.zero b{color:var(--faint)}
/* Pílula NOVO: remessa ingerida nas últimas 48h (regra do Erico, 11/ago). Ao fim
   das 48h sai sozinha — ver fonteEhNova. */
.mf-tag{flex:none;margin-top:1px;font-size:9px;font-weight:800;letter-spacing:.08em;line-height:1;
  padding:3px 6px;border-radius:5px;background:var(--crit-soft);color:var(--crit);
  border:1px solid color-mix(in srgb,var(--crit) 32%,transparent)}
.mfonte.novo{border-color:color-mix(in srgb,var(--crit) 34%,var(--line))}
/* Ativo: âmbar do miner + barra de 3px à esquerda — «é este o filtro que está a
   mandar na grelha lá de baixo». Vem DEPOIS do .novo de propósito: um bloco novo
   que está selecionado tem de se ler como selecionado. */
.mfonte.on{border-color:var(--miner-hi);
  background:linear-gradient(135deg,color-mix(in srgb,var(--miner-hi) 15%,var(--surface)),var(--surface) 68%)}
.mfonte.on::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--miner-hi)}
.mfonte.on .mf-nome{color:var(--miner-gold)}
.mfonte.on .mf-n b{color:var(--miner-gold)}
.mfonte.on .mf-ico{background:color-mix(in srgb,var(--miner-hi) 18%,var(--surface));
  border-color:color-mix(in srgb,var(--miner-hi) 40%,transparent)}
/* Telemóvel: aqui a fila deslizante É a resposta certa, ao contrário do que era
   no computador. Empilhados em coluna os 8 blocos mediam 906px — mais do que um
   ecrã inteiro só de filtros, antes de se ver um único candidato. Em toque o
   gesto lateral é nativo, o bloco seguinte fica meio à vista a dizer que há mais
   (78vw), há snap, e a barra fica VISÍVEL — que era o que faltava no desenho
   antigo do computador. */
@media (max-width:560px){
  /* No telemóvel os blocos encolhem para 86vw: o seguinte fica meio à vista. */
  .mfontes{grid-template-rows:none;grid-auto-rows:auto;
    grid-auto-columns:min(86vw,320px)}
  .mfontes-meta{margin-left:0;width:100%;justify-content:space-between}
}
/* Fila de produção: é a ÚNICA área do bloco que rola (pedido do Erico, 12/ago —
   "um só lugar em scroll"). Tudo o resto do bloco cabe à altura; aqui o que não
   couber rola na vertical, dentro da própria lista.
   container-type: os grupos por loja empilham quando a PRÓPRIA SECÇÃO fica
   estreita (não o ecrã — o mtoprow já a encolhe sozinho), senão a coluna do nome
   da loja ficava a comer quase tudo e o trabalho media ~12px de largura real,
   sem espaço nenhum para o nome do produto (ver 11/ago). */
.mfila{overflow:hidden!important;container-type:inline-size;container-name:mfila}
/* 🔴 `flex:1 1 0px`, NÃO `flex:1`. São diferentes aqui: `flex:1` expande para
   `flex:1 1 0%`, e uma percentagem medida contra um pai de altura indefinida
   (que é o caso — a linha do topo não tem altura fixa) degrada para "content".
   Resultado com `flex:1`: a fila mede-se pelos trabalhos que tem, estica a linha
   toda (medido: 639px com 12 trabalhos) e nunca chega a rolar. Com um comprimento
   absoluto de 0px o corpo nasce a zero, a altura da linha passa a ser decidida
   pelas outras quatro secções, e só depois o `stretch` lhe dá a altura que sobra —
   que é exatamente onde o scroll aparece (medido: 385px, lista a rolar). */
.mfilabody{flex:1 1 0px;min-height:0;display:flex;flex-direction:column}
/* O scroll vive aqui e em mais lado nenhum. A barra fica SEMPRE desenhada (e não
   só durante o gesto, como é o hábito do macOS): num bloco onde mais nada rola,
   uma lista cortada a meio sem barra nenhuma lê-se como lista acabada. */
.mfila .qlist{overflow-y:auto;overflow-x:hidden;min-height:0;flex:1 1 0px;margin-top:0;gap:6px;
  overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 24%,transparent) transparent}
.mfila .qlist::-webkit-scrollbar{width:6px}
.mfila .qlist::-webkit-scrollbar-track{background:transparent}
.mfila .qlist::-webkit-scrollbar-thumb{border-radius:3px;
  background:color-mix(in srgb,var(--ink) 24%,transparent)}
.mfila .qlist::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 38%,transparent)}
/* Grupo por loja (só admin): nome da loja à esquerda, empilhado com os das outras
   lojas, e os trabalhos dessa loja ao lado. Um só scroll para tudo — nada fica
   escondido atrás de um clique. */
.mfila .qlist.qgrps{gap:0}
/* 88px é medido, não gosto: a 78px o slug "mesmobom" — uma palavra só, sem sítio
   por onde quebrar — partia em "mesmobo/m". A 88px cabe inteiro e "Sua Loja
   Popular" continua a quebrar pelos espaços, como deve. */
.qgrp{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:stretch;
  border-top:1px solid var(--line)}
.qgrp:first-child{border-top:0}
.qgrp-l{display:flex;flex-direction:column;gap:1px;justify-content:flex-start;
  padding:9px 9px 9px 0;border-right:1px solid var(--line);min-width:0}
/* Nome completo da loja: pode ocupar duas linhas em vez de virar sigla cortada. */
.qgrp-n{font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--ink);
  line-height:1.2;overflow-wrap:break-word}
/* --muted, não --faint: o contador é informação (quantos trabalhos tem esta loja),
   e o --faint mede 4,09:1 no tema claro e 3,88:1 no escuro — abaixo dos 4,5:1 de AA.
   Com --muted passa a 6,2:1 nos dois temas (medido no browser, 12/ago). */
.qgrp-c{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.qgrp-i{display:flex;flex-direction:column;gap:6px;padding:8px 0 8px 10px;min-width:0}
/* Atalho dentro do texto da fila vazia ("…está no Histórico de Ads"): é um botão porque troca de
   vista em JS, mas tem de se ler como um link no meio da frase. */
.mfila .lnk{background:none;border:0;padding:0;font:inherit;color:var(--accent);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.mfila .lnk:hover{color:var(--ink)}
/* Item da fila: estado · foto do produto · nome + barra — foto+nome viram UMA
   área clicável só quando há mesmo link real para o produto (nunca antes),
   com seta sempre à vista (não escondida atrás de um ícone de 14px a
   adivinhar). Regra do Erico (11/ago): imagem maior, redirecionamento
   legível, sem tocar na coluna de lojas à esquerda. */
/* Linha de ~34px (era 68px, com a foto a 56px): cinco cabem no cartao com folga, sem scroll. */
.mfila .qitem{align-items:center;gap:8px}
.mfila .qitem>.pill{flex:none}
/* A foto encolhe primeiro (regra do Erico, 11/ago): 56px é o tamanho
   preferido, mas em espaço apertado cede antes do nome — nunca o oposto.
   aspect-ratio mantém-na quadrada em qualquer tamanho intermédio. */
.mfila .qitem .th{width:32px;height:32px;border-radius:7px;background-color:var(--surface-3);
  flex:0 0 32px;display:grid;place-items:center;color:var(--faint);position:relative;overflow:hidden}
/* A foto entra por cima do placeholder; se o CDN a recusar (IG/TikTok mandam CORP), o JS
   remove-a e fica o ícone — nunca um quadrado vazio. */
.mfila .qitem .th .thimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mfila .qitem .th .ph{opacity:.6;width:60%;height:60%}
.mfila .qopen{flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  text-decoration:none;color:inherit;border-radius:8px;margin:-4px;padding:4px;
  transition:background .14s ease}
/* Piso do nome: cabem sempre as duas primeiras palavras (duasPalavras() no JS)
   sem cortar a meio — é a foto que cede espaço primeiro, nunca o texto.
   140px cobre confortavelmente 2 palavras médias em PT-PT a 13.5px/650. */
/* Duas linhas por item: nome em cima, estado · loja · quando por baixo. Tudo numa linha só
   ficava cortado a esta largura (o cartão da fila anda pelos 230px com 5 cartões no topo). */
.mfila .qopen .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mfila .qmeta{display:flex;align-items:center;gap:5px;min-width:0}
/* O estado é texto colorido, não uma pill: a pill com moldura roubava metade da linha. */
/* 🔴 A etiqueta cede, o tempo não. Em 390px um estado longo («Publicado, por confirmar») era
   flex:none e empurrava o tempo para fora do cartão: lia-se «demorou 2m 0», com o «0s» cortado.
   O tempo é a informação nova desta linha — quem encurta é a etiqueta, com reticências. */
.mfila .qst{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.01em}
.mfila .qst.ok{color:var(--ok)} .mfila .qst.warn{color:var(--warn)}
.mfila .qst.crit{color:var(--crit)} .mfila .qst.info{color:var(--info)}
.mfila .qst.mut{color:var(--muted)}
.mfila .qsep{flex:none;color:var(--faint);font-size:10px}
/* Etiqueta da loja: a sigla chega, o nome completo vai no title. */
.mfila .qloja{flex:none;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.03em;
  color:var(--muted)}
/* Admin: o nome completo da loja, e não a sigla. Encolhe com reticências se a linha apertar. */
.mfila .qloja.qloja-nome{flex:0 1 auto;min-width:0;font-family:inherit;font-size:11px;font-weight:650;
  letter-spacing:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfila .qwhen{flex:none;white-space:nowrap;font-size:10.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
/* Barra só nos jobs a andar, e ocupa o resto da linha de meta. */
.mfila .qmeta .bar{flex:1;height:3px;min-width:24px;margin-left:2px}
/* Tempo que falta, ao lado da barra (pedido do Erico, 13/ago): «bem pequeno», por isso 10px e a
   cor mais apagada da paleta — informa quem procura, sem competir com o estado nem com o nome do
   produto. tabular-nums para o número não dançar a cada refresco da fila. */
/* 16/ago: a estimativa desceu para a segunda linha (ver jobSubHtml). Na linha de meta, com o
   botão «Cancelar» à direita, era o estado que cedia — «Disponível» lia-se «D.». Aqui tem a
   linha inteira e destaca-se do resto da frase por peso e cor, não por tamanho. */
.mfila .qsub .qeta{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* Tempo REAL a correr, no lugar onde antes vivia a estimativa (15/ago). Mesma discrição — o que
   mudou foi o significado: isto é o percurso do clique em Publicar até a campanha estar visível
   na conta. Um pouco mais legível que a estimativa que substituiu, porque agora é um número em
   que se pode confiar. tabular-nums é obrigatório: sem ele a linha treme a cada segundo. */
.mfila .qtempo{flex:none;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;margin-left:1px;font-weight:600}
/* A segunda linha: só aparece quando há mesmo alguma coisa a dizer — produto já no site com a
   campanha por sair, ou a hora a que se retoma. Mais apagada que a linha de estado, porque é
   detalhe de quem foi lá ver, e nunca corta uma palavra a meio (o cartão da fila é estreito). */
.mfila .qsub{font-size:10px;color:var(--faint);line-height:1.35;margin-top:1px;
  overflow-wrap:anywhere}
.mfila .qsub .qdesde{font-variant-numeric:tabular-nums;color:var(--muted)}
/* O motivo da falha, em texto e não em tooltip (16/ago). Duas linhas: chega para a frase que
   resolve o problema («legendas do criador em português do Brasil queimadas no vídeo») sem
   empurrar para fora do cartão os trabalhos seguintes, e o texto inteiro continua no title.
   Cor apagada e não o vermelho do estado: quem grita já é a etiqueta «Erro» e o nome do produto
   — dois vermelhos empilhados na mesma linha só tiram legibilidade a ambos. */
.mfila .qsub.qerr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--muted);cursor:help}
.mfila .qitem.err .t{color:var(--crit)}
/* Trabalho acabado de entrar (12/ago): fica marcado ~20s. É o par visual do cartão verde de
   confirmação — um diz que entrou, este mostra ONDE entrou, sem obrigar a varrer a lista. O
   realce desvanece sozinho, para não virar um estado permanente. Medidas curtas: a linha da fila
   minimalista tem ~34px e um realce com o padding de um cartão desalinhava-a das vizinhas. */
/* 🔴 O --ok-soft de 14% dava 1,32:1 contra o cartão (medido no browser): a linha "realçada" era
   quase indistinguível das outras, e um realce que não se vê não é um realce. Fundo a 20% e
   contorno a 75% do verde põem o contorno em 5,06:1 — acima do mínimo de 3:1 para um indicador
   não-textual (WCAG 1.4.11). */
.mfila .qitem.qnovo{background:color-mix(in srgb,var(--ok) 20%,transparent);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ok) 75%,transparent);
  border-radius:8px;padding:5px 6px;margin:-5px -6px;animation:qnovo-entra .45s ease}
@keyframes qnovo-entra{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mfila .qitem.qnovo{animation:none}}
.mfila .qitem .acts{flex:none}
.mfila .qitem .acts .btn{padding:3px 7px;font-size:11px}
/* "ver todos (N)" -- o resto da fila vive no Historico de Ads. Fica FORA da lista
   que rola: dentro dela desaparecia por baixo do scroll e só se encontrava quem
   fosse até ao fim. */
.mfilafoot{flex:none;border-top:1px solid var(--line);margin-top:6px;padding-top:5px}
.mfilafoot:empty{display:none}
.mfila-mais{width:100%;background:none;border:0;padding:4px;font:inherit;font-size:11.5px;
  color:var(--muted);cursor:pointer;text-align:center;border-radius:6px}
.mfila-mais:hover{background:var(--surface-3);color:var(--accent)}
.mfila .qopen.link{cursor:pointer}
.mfila .qopen.link:hover{background:var(--surface-3)}
.mfila .qopen.link:hover .t{color:var(--accent)}
.mfila .qopen .t{font-size:12.5px;font-weight:650;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfila .qopen .arrow{flex:none;color:var(--accent)}
/* Disparado pela largura da SECÇÃO (não do ecrã) — é o que acontece quando o
   mtoprow encolhe a fila sozinho (zoom do browser, ecrã médio com "Escolha o
   Sócio" a ocupar espaço). Sem isto, a coluna do nome da loja continuava a
   reclamar 78px fixos e o trabalho ficava com o resto — perto de zero. O nome
   passa para cima da própria fatia, em vez de lado a lado. */
@container mfila (max-width:340px){
  .qgrp{grid-template-columns:minmax(0,1fr)}
  .qgrp-l{flex-direction:row;align-items:baseline;gap:6px;border-right:0;
    padding:8px 0 0}
  .qgrp-i{padding:6px 0 8px}
}
@media (max-width:700px){
  .qgrp{grid-template-columns:minmax(0,1fr)}
  .qgrp-l{flex-direction:row;align-items:baseline;gap:6px;border-right:0;padding:8px 0 0}
  .qgrp-i{padding:6px 0 8px}
}
/* Vencedores minerados: título e subtítulo centrados, como no desenho. */
.mvenc>.msec-t,.mvenc>.hint{text-align:center}
.mvenc>.msec-t{font-size:34px;margin-bottom:6px}
/* Filtros de categoria dentro de uma caixa, pílulas neutras e a ativa LARANJA
   (mesma cor da fonte escolhida) — no desenho o filtro não usa o accent roxo. */
.mcatsbox{background:var(--surface-2);border-radius:14px;padding:12px;margin-bottom:14px}
/* Barra horizontal de países (15/set/2026). Os países são o eixo mais usado e o mais
   numeroso: em vez de se misturarem com nichos e canais numa fila que quebrava em três
   linhas, ficam numa tira própria que rola NA HORIZONTAL e nunca quebra. Mesmo princípio
   da tira de paginação (.mpg-track), pelas mesmas razões. */
/* ── Linha "Básico": país e duração, os dois filtros de uso constante ──
   Substituiu a tira horizontal de bandeiras (18/set/2026): a tira mostrava ~6 países de
   cada vez e obrigava a arrastar na horizontal para ver o resto. */
.mfbasico{display:flex;align-items:center;gap:12px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.mfbasico-lbl{flex:0 0 auto;min-width:62px;font-size:12px;font-weight:700;color:var(--text);
  letter-spacing:.01em;white-space:nowrap}
.mfbasico-dds{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Painel largo do menu de países: precisa de espaço para duas colunas. */
.mdd-pop-lg{padding:10px 12px 12px}
/* Duplicado de propósito mais abaixo, a seguir a .mdd-pop: as duas regras têm a mesma
   especificidade e .mdd-pop vem depois no ficheiro, por isso era o min-width:226px dela
   que ganhava e o menu de países nascia estreito (nomes cortados em "P…", "B…"). */
.mdd-grp + .mdd-grp{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* Duas colunas, como no modelo que a Lorena mandou. Numa janela estreita passa a uma. */
.mdd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 14px;margin-top:7px}
@media (max-width:520px){ .mdd-grid{grid-template-columns:1fr} }

/* Caixa de seleção desenhada: o <input> real fica escondido mas continua a ser ele a
   receber o clique e o foco do teclado — trocá-lo por <div> partia a navegação por Tab. */
.mdd-cx{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
  cursor:pointer;font-size:17px;color:var(--text);user-select:none}
.mdd-cx:hover{background:var(--surface-2)}
.mdd-cx input{position:absolute;opacity:0;width:0;height:0}
.mdd-cxb{flex:0 0 auto;width:22px;height:22px;border-radius:6px;
  border:1.5px solid var(--line);background:var(--surface);position:relative;
  transition:background .12s,border-color .12s}
.mdd-cx input:checked + .mdd-cxb{background:var(--miner-gold,#ff9f45);
  border-color:var(--miner-gold,#ff9f45)}
.mdd-cx input:checked + .mdd-cxb::after{content:"";position:absolute;left:7px;top:2.5px;
  width:6px;height:12px;border:solid #171b26;border-width:0 2.8px 2.8px 0;transform:rotate(45deg)}
.mdd-cx input:focus-visible + .mdd-cxb{outline:2px solid var(--miner-gold,#ff9f45);
  outline-offset:2px}
/* Grupo meio-marcado: traço em vez de visto — "alguns" não é "todos". */
.mdd-cx-g.meio .mdd-cxb{background:var(--miner-gold,#ff9f45);
  border-color:var(--miner-gold,#ff9f45)}
.mdd-cx-g.meio .mdd-cxb::after{content:"";position:absolute;left:4.5px;top:9.5px;
  width:12px;height:2.8px;background:#171b26;border:0;transform:none}
.mdd-cx-g{font-weight:700;font-size:17px;padding-left:10px}
.mdd-fl{flex:0 0 auto;font-size:23px;line-height:1}
.mdd-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdd-cx i{flex:0 0 auto;font-style:normal;font-size:14px;color:var(--muted)}
/* Sem vídeos: fica à vista mas apagado — esconder daria a entender que o mercado não
   existe, quando o que falta é minerá-lo. */
.mdd-cx.vazio{opacity:.4;cursor:not-allowed}
.mdd-cx.vazio:hover{background:transparent}
/* ── Linha "Canais": pílulas, não menu (19/set/2026, pedido da Lorena) ──
   Fica por baixo de "Básico" e com o mesmo rótulo à esquerda, para se lerem como duas
   linhas do mesmo bloco de filtros. Os canais são poucos e de uso constante: em pílulas
   vê-se de relance quais existem e escolhe-se num clique. */
.mfcanais,
.mfselecao{display:flex;align-items:center;gap:12px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
/* A última linha do bloco não leva risca: fecharia o grupo duas vezes, já que o
   .mcatsbox tem a sua própria margem a seguir. */
.mfselecao{border-bottom:0;padding-bottom:0;margin-bottom:0}
/* 🔴 O "Limpar" é uma AÇÃO, não um filtro — vai para a ponta direita da fila, longe
   das escolhas (Lorena, 23/set/2026). `margin-left:auto` num contentor flex empurra-o
   para lá sem precisar de um wrapper só para isso. */
.mlimpar-dir{margin-left:auto}
/* Alinhada à esquerda: esta fila fica encostada ao rótulo, ao contrário da fila de
   categorias lá em baixo, que é centrada. */
.miner .mcanais{justify-content:flex-start;flex:1 1 auto}
/* 🔴 Exceção na fila "Seleção" (23/set/2026): ali o #mEspeciais partilha a linha com o
   Nicho e o Ordenar, e o `flex:1 1 auto` fazia-o crescer até empurrá-los para o outro
   extremo — ficava um vazio enorme entre o Alto-Valor e eles. Encolhido ao seu conteúdo,
   os três ficam juntos e só o "Limpar tudo" (margin-left:auto) vai para a direita. */
.mfselecao .mcanais{flex:0 0 auto}
@media(max-width:700px){
  .mfselecao{flex-wrap:wrap}
  .mfselecao>.mfbasico-dds{flex:1 1 100%;min-width:0}
}
/* Canal sem candidatos: à vista mas apagado — esconder daria a entender que a
   plataforma não existe, quando o que falta é minerá-la. */
.miner .mcats .chip.vazio{opacity:.4;cursor:not-allowed}
.miner .mcats .chip.vazio:hover{border-color:var(--line)}

.mfbar{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;padding-left:74px;padding-top:14px}
/* 21/set/2026: era `space-between` com o .mcats a crescer (flex:1), o que atirava
   Nicho/Ordenar/Limpar para a borda direita enquanto as linhas de cima (Basico,
   Canais, Formato, Qualidade) comecavam todas a esquerda. Agora esta fila alinha
   no mesmo eixo das outras. */
.mfbar>.mcats{flex:0 1 auto;justify-content:flex-start}
.mfbar>.mcats:empty{display:none}
/* Limpar filtros: fica sempre na barra e só acende quando há algo para limpar — um botão
   que aparece/desaparece mudava a largura da barra a cada clique. */
.mlimpar{white-space:nowrap}
.mlimpar:disabled{opacity:.38;cursor:default}
.mlimpar.on{border-color:var(--miner-hi,var(--accent));color:var(--miner-hi,var(--accent))}
@media (max-width:640px){
  .mfbar>.mcats{justify-content:center}
}
.mcats{justify-content:center}
.miner .mcats .chip{border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.miner .mcats .chip:hover{border-color:var(--miner-hi)}
.miner .mcats .chip:not(.out){background:var(--miner-hi);border-color:var(--miner-hi);color:var(--miner-hi-ink)}
.miner .mcats .chip b{font-weight:600;opacity:.7}
/* Tem de vir DEPOIS de '.miner .mcats .chip': mesma especificidade, ganha quem está
   mais abaixo no ficheiro. As pílulas de canal acompanham o menu de países (17px),
   que a Lorena pediu maior em 19/set/2026 — mais pequenas liam-se como secundárias. */
.miner .mcanais .chip{font-size:15px;padding:9px 16px;gap:8px}
.miner .mcanais .chip b{font-size:13px}
/* Logo real da plataforma dentro da pilula de canal (21/set/2026, pedido da
   Lorena): substitui os simbolos de texto que estavam no CANAL_ROTULO. Tem de
   vir depois de .plat-ico, que declara 26px para a barra do topo. */
.miner .mcanais .chip .plat-ico{width:18px;height:18px;flex:none}
.miner .mcats .chip:not(.out) b{opacity:.85}
/* ⓘ dentro do chip de categoria (ex. "Categoria 1"): abre um popup com a receita
   de mineração daquela categoria. Vive dentro do próprio botão do chip — sem
   contorno/fundo próprio, só o "peso" de uma cor mais forte no hover/foco, para
   não competir visualmente com o texto do chip. */
.mcat-info-btn{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;margin-left:2px;font-size:12px;line-height:1;
  color:inherit;opacity:.65;cursor:pointer;transition:opacity .14s,background-color .14s}
.mcat-info-btn:hover,.mcat-info-btn:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 18%,transparent);outline:none}
/* Trocar de categoria não esvazia a grelha: os cartões antigos ficam esbatidos
   até chegarem os novos, para a página não encolher nem o scroll saltar. */
.mcands.a-carregar{opacity:.45;transition:opacity .12s ease;pointer-events:none}
@media (max-width:900px){.mvenc>.msec-t{font-size:24px}}
/* 🔴 Altura: as secções JÁ NÃO rolam por dentro (12/ago). Antes cada cartão tinha
   326px fixos com `overflow-y:auto` — cinco barras de scroll possíveis no mesmo
   bloco, e o "Gasto de uso de API" aparecia cortado a meio do campo API IMG (print
   do Erico). Agora a linha mede-se pela secção mais alta (`align-items:stretch` +
   `min-height` no .mtoprow) e a única coisa que rola é a lista da fila. */
.mtoprow>.card>.card-h{flex:none}
.mmain{display:flex;flex-direction:column;gap:18px}
.mtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mkpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.mkpi{padding:15px 14px;display:flex;flex-direction:column;gap:3px}
.mkpi b{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.mkpi span{font-size:12.5px;color:var(--muted);line-height:1.3}
/* ---- Funil dos indicadores (16/set/2026) ---------------------------------
   Substitui os cinco cartões iguais de cima por uma faixa contínua em que a
   LARGURA de cada passo é o próprio dado: o rastreio ocupa a maior fatia, os
   mineráveis são o herói em âmbar, e os estados a zero encolhem sem sair da
   página. As larguras são postas pelo mFunilSync() (flex-grow); aqui ficam só as
   pontas, os mínimos e a cor — sem isso a barra nasceria com tudo do mesmo
   tamanho e a leitura voltava ao ponto de partida.
   `.mkpis`/`.mkpi` ficam intactos logo acima: voltar ao desenho antigo é trocar
   o bloco no miner.php, nada mais. */
/* `wrap` é rede de segurança e é o que faz o desenho de ecrã estreito funcionar:
   sem ele os passos encolhiam todos até caberem à força numa linha só, e em 1000px
   «Alta performance» ficava com o rótulo em três linhas dentro de 84px. */
.mfunil{display:flex;flex-wrap:wrap;align-items:stretch;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
/* `flex-start` e não `center`: «Aguardando aprovação» não cabe numa linha num passo
   estreito, e com o conteúdo centrado esse número subia 8px em relação aos vizinhos —
   cinco números que se comparam a olho não podem estar em cinco alturas diferentes.
   Ancorados no topo, ficam todos na mesma linha, quebre o rótulo ou não. */
.mfunil>.mfseg{flex:1 1 0;min-width:136px;box-sizing:border-box;padding:15px 16px;
  background:var(--surface);display:flex;flex-direction:column;justify-content:flex-start;gap:3px;
  transition:flex-grow .35s ease}
/* Caixa de altura igual com o número encostado ao fundo: o herói tem 38px e os
   outros 30px, e sem isto as bases dos algarismos ficavam a alturas diferentes —
   o desalinhamento que se lê como «desconfigurado» ainda antes de se perceber
   porquê. Encostados ao fundo da mesma caixa, todas as bases coincidem. */
.mfunil>.mfseg>b{font-size:30px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;
  display:flex;align-items:flex-end;min-height:42px}
.mfunil>.mfseg>span{font-size:12.5px;color:var(--muted);line-height:1.3;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
/* O herói: é este número que decide se há trabalho hoje. Ganha a cor do miner, o
   corpo maior e a ponte para o total («10,3% do rastreio»), que é a informação
   que antes ninguém conseguia tirar de dois cartões lado a lado. */
.mfunil>.mfseg.is-hero{min-width:196px;
  background:color-mix(in srgb,var(--miner-hi) 13%,var(--surface))}
.mfunil>.mfseg.is-hero>b{font-size:38px;color:var(--miner-gold)}
.mfunil>.mfseg.is-hero>span{color:var(--ink);font-weight:600}
.mfseg-pct{font-style:normal;font-weight:500;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* Zero não é alarme, é ausência de material: fica apagado, não vermelho. */
.mfunil>.mfseg.is-zero>b{color:var(--faint)}
/* Nada de wrap antes de ser preciso: os quatro passos com os mínimos que têm pedem
   ~604px, e a área de trabalho só desce abaixo disso por volta dos 940px de ecrã
   (a rail come 248px). Uma quebra mais cedo punha um passo sozinho a ocupar 600px
   numa linha quase vazia — o oposto de uma barra proporcional. */
/* Telemóvel: o herói fica com a faixa inteira (é o número que se vem ver) e os
   outros quatro emparelham dois a dois. Empilhados um por linha mediam ~380px —
   um ecrã quase inteiro de indicadores antes de se chegar às categorias, pior do
   que os cartões que isto veio substituir. */
/* Telemóvel: os dois números que se vêm ver — mineráveis e rastreio — ficam com a
   faixa inteira cada um, e os três estados repartem a linha de baixo. Um por linha
   media ~380px: um ecrã quase inteiro de indicadores antes de se chegar às
   categorias, pior do que os cartões que isto veio substituir. */
@media (max-width:940px){
  .mfunil>.mfseg{flex:1 1 100%;min-width:0;padding:11px 12px}
  .mfunil>.mfseg>b{font-size:25px;min-height:34px}
  .mfunil>.mfseg.is-hero>b{font-size:31px}
  .mfunil>.mfseg>span{font-size:12px}
}
.miner.density-compact .mfunil>.mfseg{padding:10px 12px}
.miner.density-compact .mfunil>.mfseg>b{font-size:25px;min-height:36px}
.miner.density-compact .mfunil>.mfseg.is-hero>b{font-size:32px}
/* Borda inteira à volta do passo herói — `inset` e não `border`, que mudaria a
   medida do passo e desalinhava a faixa toda por 2px. */
.mfunil>.mfseg.is-hero{box-shadow:inset 0 0 0 1px var(--miner-hi)}
/* «Mineráveis · 10,3%» é uma coisa só: o «·» a abrir uma segunda linha sozinho
   lia-se como erro de composição. */
.mfunil>.mfseg.is-hero>span{white-space:nowrap}
/* Fim da viagem: os que já viraram produto ganham o verde de «feito». O `--ok` puro
   sobre branco media 3,3:1 — passa por ser um número de 30px, mas por pouco; a
   mistura com `--ink` empurra-o para o lado escuro no tema claro e para o lado claro
   no escuro, subindo o contraste nos dois sem mudar o tom. */
.mfunil>.mfseg[data-kpi="kPublicados"]>b{color:color-mix(in srgb,var(--ok) 82%,var(--ink))}
.mfunil>.mfseg[data-kpi="kPublicados"].is-zero>b{color:var(--faint)}

/* ============ Cartão único do Miner (16/set/2026) ============
   Indicadores, categorias, título e filtros eram quatro blocos a flutuar no fundo
   da página, sem nada a dizer que mandavam uns nos outros. Passam a viver dentro
   de um cartão só — o comando — e a grelha de vídeos fica de fora, por baixo: a
   resposta. Desenho escolhido pelo Erico a partir da maqueta «Funil proporcional». */
/* 🔴 SEM `overflow:hidden` no cartão, por mais tentador que seja para os cantos: os
   menus do rodapé (Canais, Nicho, Duração, Ordenar) são `position:absolute` e abrem
   PARA FORA do cartão — com overflow ficavam decepados a meio, e o que se via por
   baixo eram os cartões da grelha (relatado pelo Erico, 16/set). Quem arredonda os
   cantos de baixo é o próprio rodapé, com o seu raio. */
.mhub{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
/* `center` desde que o subtítulo saiu: com uma linha de título só, ancorar o topo
   deixava o botão de 46px a pairar acima da linha de base do texto. */
.mhub-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 26px 18px}
.mhub-tit{flex:1 1 320px;min-width:0}
/* Alinhado à esquerda, ao contrário do `.mvenc>.msec-t` centrado que este título
   era quando vivia por cima da grelha: dentro do cartão manda a mesma esquadria
   de tudo o resto. */
.mhub .msec-t{font-size:26px;line-height:1.15;margin:0 0 5px;text-align:left}
.mhub-sub{margin:0;font-size:13.5px;color:var(--muted)}
/* O botão «Usar num anúncio» que vivia aqui saiu a 16/set (ordem do Erico): rolava
   até à grelha, que está logo a seguir. O seu estilo saiu com ele. */
/* A linha de cima tem dois donos: o funil da POOL à esquerda — fica sempre com mais
   de metade da largura, é o que se lê primeiro — e as duas faixas de CADA SÓCIO à
   direita, à mesma altura. Misturados na mesma régua, os números pessoais liam-se
   como se fossem da pool. */
/* Duas metades exactas, e não larguras fixas: com os cartões do sócio a 266px fixos,
   num ecrã de 1000px sobrava um décimo da linha para o funil — que se espremia a 97px
   e transbordava a página (medido). Em grid, cada lado fica com metade e encolhe
   junto; o funil ocupa do meio para a esquerda, como pedido. */
.mhub-linha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;
  gap:12px;margin:0 26px}
.mhub-linha>.mfunil{margin:0;border-radius:14px}
.mhub-socio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Os cartões aqui são os mesmos da fila (mesmo markup, mesmo clique), só que parados
   e centrados na altura do funil. A 238px o nome partia-se em duas linhas
   («Criativos / (IA)») e a legenda ficava cortada a meio; com 266px o nome cabe de
   uma vez e a legenda fica-se por uma linha, que aqui é o que se quer — estes dois
   cartões são para reconhecer de relance, não para ler. */
.mhub-socio>.mfonte{align-content:center}
.mhub-socio .mf-nome>span{-webkit-line-clamp:1}
.mhub-socio .mf-sub{-webkit-line-clamp:1}
.mhub>.mfontesbox{padding:22px 26px 2px}
.mhub .mfontes-head{align-items:center;gap:14px;margin:0 0 12px}
/* O nome da secção deixa de competir com o título do cartão: vira etiqueta, com a
   régua a levá-la até ao botão. */
.mhub .mfontes-title{flex:1;display:flex;align-items:center;gap:14px;min-width:0;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mhub .mfontes-title::after{content:"";flex:1;height:1px;background:var(--line)}
.mhub .mfontes-meta{margin-left:0;flex:none}
/* Rodapé: o mesmo tom do resto do painel para as caixas de segundo plano, separado
   por uma linha — é onde se afina, não onde se decide. */
/* O raio vive aqui (o cartão deixou de cortar) e o z-index põe os menus abertos por
   cima da grelha que vem a seguir no documento. */
.mhub-foot{position:relative;z-index:5;display:flex;align-items:center;gap:16px;margin-top:20px;
  padding:15px 26px;border-top:1px solid var(--line);background:var(--surface-2);
  border-radius:0 0 19px 19px}
/* `--muted` e não `--faint`: a 11px sobre o fundo do rodapé o `--faint` media 3,76:1,
   abaixo do mínimo para texto pequeno. */
.mhub-foot>.mcatsbox{flex:1;min-width:0;background:transparent;border-radius:0;padding:0;margin:0}
/* Com a linha «Básico» dentro do rodapé (18/set), a fila Canais/Nicho/Ordenar/Limpar deixa
   de caber entre ~1000 e 1060px e empurrava o «Limpar» para cima da
   borda do cartão. Aqui pode encolher e quebrar linha, encostada à direita. Só acima de
   640px: abaixo disso a regra do telemóvel já a põe a toda a largura e centrada. */
@media (min-width:641px){
}
/* Nas vistas que desenham o seu próprio cabeçalho (Criativos IA, SerpApi Máximo) sai
   só o RODAPÉ de filtros — é o único que não se aplica a elas (filtram por país,
   canal e nicho, que ali não existem).
   🔴 O cabeçalho FICA: escondê-lo deixava o cartão a acabar a meio, logo a seguir à
   fila de categorias, com o conteúdo da vista solto na página por baixo — «o card
   colapsa e transborda» (Erico, 16/set). */
.mhub-bare .mhub-foot{display:none}
/* E o conteúdo dessas vistas ganha a mesma moldura do cartão de cima, em vez de ficar
   texto nu sobre o fundo da página. Na grelha normal a secção continua sem moldura:
   ali os cartões de vídeo é que são a matéria. */
.mhs-bare{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:22px 26px 24px}
@media (max-width:760px){
  .mhs-bare{padding:16px;border-radius:16px}
}
/* 🔴 Estas três têm de vir DEPOIS da regra base do `.mhub-socio`, não lá em cima
   junto às do funil: mesma especificidade, ganha a última do ficheiro — escritas
   antes, a largura fixa de 266px sobrevivia ao telemóvel e os dois cartões
   transbordavam 174px para fora do ecrã (medido a 390px). */
/* Meia linha para três passos pede menos folga do que num ecrã grande: os mínimos
   descem para caber, antes de valer a pena empilhar. */
@media (max-width:1400px){
  .mfunil>.mfseg{min-width:112px}
  .mfunil>.mfseg.is-hero{min-width:168px}
}
/* Abaixo disto meia linha deixa os cartões do sócio com menos de 250px, e «Criativos
   (IA)» começa a sair truncado («Criativ…»). Antes de chegar aí, descem para debaixo
   do funil, lado a lado e com largura inteira — lê-se melhor do que espremido ao lado. */
@media (max-width:1380px){
  .mhub-linha{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mhub-socio{grid-template-columns:1fr}
}
/* «Todas as 14» é um nome, não uma frase: partido em duas linhas o botão fica com o
   dobro da altura dos vizinhos e o «14» órfão. */
.mfontes-todas{white-space:nowrap}
/* Nas vistas sem rodapé (Criativos IA, SerpApi Máximo) o cartão acabava rente à barra
   de scroll das categorias; aqui ganha o mesmo ar que o rodapé lhe dava. */
.mhub-bare>.mfontesbox{padding-bottom:18px}
@media (max-width:760px){
  .mhub-head{padding:18px 16px 14px;gap:14px}
  .mhub .msec-t{font-size:21px}
  .mhub-linha{margin:0 16px}
  .mhub>.mfontesbox{padding:16px 16px 2px}
  .mhub-foot{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px;margin-top:16px}
  /* A régua entre a etiqueta e o botão não sobrevive a um ecrã estreito: some, e a
     linha respira em duas. */
  .mhub .mfontes-head{flex-wrap:wrap;gap:8px}
  .mhub .mfontes-title{flex:1 1 100%}
  .mhub .mfontes-title::after{display:none}
  .mhub .mfontes-meta{flex:1 1 100%;justify-content:space-between}
}
.miner.density-compact .mhub-head{padding:16px 20px 12px}
.miner.density-compact .mhub>.mfontesbox{padding:16px 20px 2px}
.miner.density-compact .mhub-foot{padding:12px 20px;margin-top:14px}
.msec-t{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 2px}
.mmain>section>.hint{font-size:13px;margin-top:0}
.mrow3{display:flex;flex-direction:column;gap:12px}
@media (max-width:1180px){
  /* Continua tudo numa linha só (regra do Erico) — o que não couber, a linha
     rola para o lado em vez de empilhar. Sem aumentar min-width aqui: as
     secções continuam a encolher com o ecrã (ver a regra base), só o padding
     à volta do bloco é que aperta. */
  .mtopwrap{padding:7px;border-radius:14px}
  .mkpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* O .fld remove a seta nativa (appearance:none); aqui devolvemos uma. */
.miner .fld select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239397ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.msaldos{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px}
.msaldos .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Grelha de vencedores minerados — 5 colunas na densidade Confortável (18/ago) */
.mcands{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1500px){.mcands{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1180px){.mcands{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.mcands{grid-template-columns:1fr}}
/* Paginação da grelha de candidatos (18/ago) — só 60 cartões por página em vez dos até 200
   que a API pode devolver de uma vez; números clicáveis por baixo, mesma pílula do resto
   do miner (.chip) para não introduzir um 3º estilo de botão na página. */
/* GRELHA de três colunas, não flex (corrigido 15/set/2026): ‹ | números | ›, os três
   SEMPRE na mesma linha. Com `display:flex` + `flex-wrap:wrap` as setas caíam para uma
   linha própria por cima dos números assim que a tira ficava larga — que é o defeito
   que a Lorena apanhou. Numa grelha de colunas fixas não há quebra possível: as setas
   ficam ancoradas a cada extremo e a tira ocupa o meio, seja qual for o número de
   páginas. O `minmax(0,1fr)` do meio é o que autoriza a tira a encolher e a rolar em
   vez de empurrar as setas para fora. */
.mcand-pag{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:12px;margin-top:16px}
.mpg-nav.mpg-prev{grid-column:1;justify-self:start}
.mpg-nav.mpg-next{grid-column:3;justify-self:end}
/* A contagem ("3.833 vídeos") vive na 2.ª linha da grelha, centrada a toda a largura:
   na mesma linha das setas roubava espaço à tira e empurrava o › para fora do canto.
   Regra única — a antiga `.mpg-info{margin-left:8px}` foi absorvida aqui, senão vinha
   mais abaixo no ficheiro e reintroduzia o desalinhamento que isto corrige. */
.mpg-info{grid-column:1 / -1;justify-self:center;white-space:nowrap;margin:2px 0 0}
/* Tira dos números (09/set/2026): mostra TODAS as páginas e rola na horizontal, em vez de as
   esconder atrás de «…». `flex:1 1 0` — base zero de propósito: com base automática a tira era
   larga de mais para a linha e o `flex-wrap` do pai atirava-a para baixo, separando-a do ‹ e do
   ›. `max-width:max-content` impede que estique quando há só 2 ou 3 páginas. */
.mpg-track{flex:1 1 auto;min-width:0;max-width:100%;position:relative;
  display:flex;align-items:center;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-behavior:smooth;padding:4px 2px 10px}
.mpg-track::-webkit-scrollbar{height:6px}
.mpg-track::-webkit-scrollbar-track{background:transparent}
.mpg-track::-webkit-scrollbar-thumb{border-radius:3px;background:color-mix(in srgb,var(--ink) 20%,transparent)}
.mpg-track::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 38%,transparent)}
/* Ao dobro do tamanho a pedido do Erico (09/set): 34→68px de diâmetro e 13→26px de número,
   mantendo a proporção que o desenho já tinha. `flex:0 0 auto` para não encolherem dentro da
   tira — quem cede é o scroll, não o botão. */
.mpg-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  padding:0 12px;border-radius:999px;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);cursor:pointer;
  transition:border-color .14s,background-color .14s,color .14s}
.mpg-btn:hover:not(:disabled){border-color:var(--miner-hi)}
.mpg-btn.on{background:var(--miner-hi);border-color:var(--miner-hi);color:var(--miner-hi-ink)}
.mpg-btn:disabled{opacity:.35;cursor:default}
.mpg-btn.mpg-nav{font-size:22px;font-weight:700}
/* "…" entre blocos de páginas: com 44 páginas não se desenham todos os
   botões, só uma janela à volta da atual mais a primeira e a última. */
.mpg-gap{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:44px;font-size:17px;opacity:.45;user-select:none}
@media (max-width:520px){.mpg-info{margin:6px 0 0}}
/* Embed que o browser recusou (CSP sem frame-src, extensão de bloqueio, vídeo removido):
   o cartão mostra a capa do vídeo e um botão que o abre na origem, em vez de ficar com a
   caixa cinzenta "Este conteúdo está bloqueado" do Chrome. Ver `embedParaCapa` no miner.php. */
.med-fallback{position:relative;display:block;background:var(--surface-2);overflow:hidden}
.medfb-i{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat}
/* Véu por baixo do botão: a capa é uma fotografia qualquer e o texto tem de se ler nas
   claras e nas escuras. */
.med-fallback::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);pointer-events:none}
.medfb-a{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600;text-decoration:none;
  background:var(--miner-hi);color:var(--miner-hi-ink);border:1px solid var(--miner-hi)}
.medfb-a:hover{filter:brightness(1.08)}
/* Grelha sem resultados por causa dos filtros: diz o que está posto e dá como desfazer.
   `grid-column:1/-1` porque o pai é a grelha de cartões — sem isto a caixa ficava
   espremida na primeira coluna. */
.mvazio{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:34px 16px;text-align:center}
.mvazio b{font-size:15px}
.mvazio .hint{margin:0}
.mcand{overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius)}
.mcand .wrap{position:relative}
/* Proporção de vídeo de feed do Instagram (4:5) — a altura acompanha a
   largura, por isso os cartões continuam proporcionais quando esticam. */
.mcand .med{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;display:block;background:#0c0d16}
.mcand video.med{object-fit:cover;background:#0c0d16}
/* Miniatura leve dos candidatos fora da 1ª tela (13/ago) — mesmo tamanho de .med, sem nenhum
   <video> por trás até entrar no ecrã (ver VIDEOS_EAGER/ligarPlays no miner.php). O .medplay já
   existia no CSS para um botão de "play" centrado — reaproveitado aqui, agora sem colidir com
   controlos nativos porque não há vídeo nenhum debaixo ainda. */
.mcand .med.med-lazy{cursor:pointer}

.mcand .nomed{width:100%;aspect-ratio:4/5;display:grid;place-items:center;background:var(--surface-2);color:var(--faint);font-size:11px}
.medplay{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:999px;border:0;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(3px);
  box-shadow:0 4px 16px rgba(0,0,0,.4);transition:.14s}
.medplay:hover{background:color-mix(in srgb,var(--accent) 75%,transparent);transform:scale(1.06)}
/* Cabeçalho do cartão (anatomia dos cards da Minea, 08/ago): ícone da
   plataforma + hook + categoria — identidade/proveniência antes da media. */
.mcand .mchd{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 11px}
/* Com o logótipo OFICIAL a cores (11/ago), a caixa deixa de ter fundo próprio: o azul do
   Facebook e o gradiente do Instagram já são a identidade, e o accent-soft por trás só os
   sujava. Fica só a área reservada, para os cabeçalhos alinharem entre cartões. */
.mcand .mcplat{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:transparent}
/* O TikTok é preto no logótipo oficial — em tema escuro desaparecia contra o fundo, por isso
   herda a cor do texto (branco no escuro, preto no claro) nas partes que usam currentColor. */
.plat-ico{width:26px;height:26px;display:block;color:var(--ink)}
.mcand .mcplat .plat-ico{width:30px;height:30px}
.mcand .mct{flex:1;min-width:0}
.mcand .mct .sub{font-size:12px;color:var(--muted);margin-top:2px}
.mcand .score{flex:none;font-size:11px;font-weight:700;padding:3px 9px;
  border-radius:6px;background:var(--accent-soft);color:var(--accent)}
/* Faixa de frescura: tempo na pool + data de mineração (criado_em real).
   Texto 13.5px e data quase na cor do tinta principal — pedido do Erico
   (09/ago): a faixa tem de se ler bem no telemóvel. Em cartões estreitos
   (densidade compacta) as células truncam com reticências em vez de verter. */
.mcand .mcinfo{display:flex;border-top:1px solid var(--line)}
.mcand .mcinfo>div{flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:9px 10px;
  font-size:13.5px;color:color-mix(in srgb,var(--ink) 80%,transparent);white-space:nowrap;overflow:hidden}
.mcand .mcinfo>div+div{border-left:1px solid var(--line)}
.mcand .mcinfo svg{flex:none}
.mcand .mcinfo span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mcand .fresh{display:flex;align-items:center;gap:7px;color:var(--ok);font-weight:600}
.mcand .fresh i{flex:none;width:8px;height:8px;border-radius:99px;background:var(--ok-dot)}
.mcand .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.mcand .hk{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* O hook como LINK para onde o vídeo está (19/set/2026, pedido da Lorena). Herda o
   tamanho e o corte a 2 linhas do `.hk` acima — só muda o cursor, a cor no hover e a
   seta ↗. `display:-webkit-box` continua a valer: é o que corta às 2 linhas. */
.mcand a.hk{color:inherit;text-decoration:none;cursor:pointer;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:7px;
  -webkit-line-clamp:none}
/* O corte a 2 linhas mudou-se para o span interior (21/set/2026): no <a> ele
   engolia a seta com as reticencias nos titulos longos, e a seta e a unica
   pista de que o titulo abre fora. */
.mcand a.hk .hk-t{min-width:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.mcand a.hk:hover{color:var(--miner-hi,var(--accent))}
.mcand a.hk:focus-visible{outline:2px solid var(--miner-hi,var(--accent));outline-offset:2px;border-radius:4px}
/* A seta acompanha a última palavra em vez de flutuar à direita: com o título cortado
   a duas linhas, um `float` deixava-a órfã numa linha só dela. */
.mcand .hk-x{flex:none;display:block;margin:1px 0 0;opacity:.9}
.mcand a.hk:hover .hk-x{opacity:1}

/* Link do anúncio original (source_url) — a "Enlace da anúncio" da Minea. */
.mcand .mcsrc{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:12.5px;color:var(--muted);text-decoration:none;transition:.14s}
.mcand .mcsrc:hover{border-color:var(--accent);color:var(--accent)}
.mcand .mcsrc .lbl-src{flex:none}
.mcand .mcsrc b{color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcand .mcsrc:hover b{color:inherit}
.mcand .mcsrc svg{flex:none;margin-left:auto}
.mcand .mt{font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.mcand .cs{display:flex;gap:6px;flex-wrap:wrap}
.mcand .btn{margin-top:auto;justify-content:center;width:100%}
/* Etiqueta em contorno — a tag-outline do Nocturne */
.chip.out{background:transparent;border-color:var(--accent);color:var(--accent)}
/* (Saíram duas regras mortas, 12/ago: uma ".mcats .chip:not(.out)" roxa que
   NUNCA ganhava — todos os .mcats vivem dentro de .miner, onde a regra laranja
   tem mais especificidade; duas "cores de ativo" em guerra no mesmo elemento.
   E um ".mcats button{cursor/font-family}" duplicado do que fica junto da
   base .mcats mais abaixo.) */
/* Resultados (Receita · Lucro líquido · Gasto de anúncio) */
.mkpis3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mkpis3>.card{padding:11px 12px}
/* ---- Histórico de Ads: um cartão só (16/set/2026) --------------------------
   Receita/lucro/gasto, a eficiência do garimpo e a tabela de campanhas são a MESMA
   conta vista de três alturas — o total, a leitura por categoria, o detalhe por
   campanha. Em três cartões soltos liam-se como três assuntos sem relação; dentro
   de uma moldura só, separados por linhas, lê-se que os números são os mesmos. */
.mhist-hub{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:18px 20px 20px}
/* De quem são estes números: «Todos» + um sócio por botão, numa linha horizontal que
   quebra em vez de rolar (são quatro ou cinco nomes curtos, não uma fila). */
.mhist-socios{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 15px}
.msocio-chip{font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
  height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.msocio-chip:hover{border-color:var(--line-2);color:var(--ink)}
.msocio-chip.on{border-color:var(--miner-hi,var(--accent));color:var(--miner-gold,var(--accent));
  background:color-mix(in srgb,var(--miner-hi,var(--accent)) 14%,var(--surface))}
.msocio-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Os três indicadores viram faixa contínua, como o funil do Miner: um total dividido
   em três, e não três números que por acaso estão lado a lado. */
.mhist-hub .mkpis3{gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.mhist-hub .mkpis3>.card{border:0;border-radius:0;box-shadow:none;padding:14px 16px}
/* E os dois blocos de tabela deixam de ser cartões: passam a secções do mesmo cartão,
   com uma linha a dividi-las e sem padding lateral próprio (o da moldura chega). */
.mhist-hub>.card,.mhist-topo>.card{background:transparent;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--line);padding:18px 0 0;margin-top:18px}
/* Topo do cartão num fundo mais escuro (25/set/2026, pedido do Erico): sócios, totais e
   eficiência do garimpo são o resumo; a lista de campanhas por baixo é o detalhe. O bloco
   encosta às bordas da moldura (margens negativas = o padding dela) e herda os cantos de cima.
   Mistura com o --bg em vez de uma cor fixa: escurece no tema escuro e no claro. */
.mhist-topo{--hist-topo:color-mix(in srgb,var(--bg) 70%,var(--surface));
  background:var(--hist-topo);margin:-18px -20px 0;padding:18px 20px 20px;
  border-bottom:1px solid var(--line);border-radius:20px 20px 0 0}
.mhist-topo .mkpis3>.card{background:var(--hist-topo)}
.mhist-topo+.card{border-top:0;margin-top:0}
.hcab-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* Personalizado: início e fim lado a lado, na mesma linha dos períodos (25/set/2026). */
.hper-datas{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.hper-datas label{display:inline-flex;align-items:center;gap:7px;height:33px;padding:0 9px;
  border:1px solid var(--line);border-radius:var(--radius-sm);font-size:12px;color:var(--muted)}
.hper-datas label:focus-within{border-color:var(--accent)}
.hper-datas input{border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;
  padding:0;outline:0;color-scheme:light dark}
.hper-info{margin:0 0 10px}
/* Telemóvel: 7 períodos numa fila davam 60 px de scroll lateral à página. Passam a grelha de
   2 filas — Hoje·3·7·30 em cima, 60·90·Personalizado (a ocupar 2) em baixo. */
@media (max-width:700px){
  .hcab-r{width:100%;justify-content:flex-start;min-width:0}
  #mHistPeriodo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  #mHistPeriodo button{padding:8px 4px;white-space:nowrap}
  #mHistPeriodo button:nth-child(4n+1){border-left:0}
  #mHistPeriodo button:nth-child(n+5){border-top:1px solid var(--line)}
  #mHistPeriodo [data-per=custom]{grid-column:span 2}
  .hper-datas{width:100%}
  .hper-datas label{flex:1;min-width:0}
  .hper-datas input{min-width:0;width:100%}
}
/* Vista «Criativos»: um vídeo por linha, a metade do tamanho do cartão do Miner (a largura
   vem do JS em --hcv-w, a proporção 4:5 é a mesma), e os números ao lado. */
.hcriativos{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.hcv{display:flex;gap:16px;align-items:flex-start;padding:12px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface)}
.hcv-vid{position:relative;flex:none;width:var(--hcv-w,160px);max-width:44%;aspect-ratio:4/5;
  border-radius:10px;overflow:hidden;background:#0c0d16;cursor:pointer}
.hcv-vid video{width:100%;height:100%;object-fit:cover;display:block}
.hcv-som{position:absolute;right:6px;bottom:6px;font-size:11px;line-height:1;padding:4px 6px;
  border-radius:99px;background:rgba(0,0,0,.55);pointer-events:none}
.hcv-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding-top:2px}
.hcv-t{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.hcv-t a{color:inherit;text-decoration:none}
.hcv-t a:hover{color:var(--accent)}
.hcv-t .arrow{vertical-align:-2px;margin-left:4px;color:var(--accent)}
.hcv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12.5px}
.hcv-meta .hautor{display:inline}
.hcv-meta .hautor-s{display:inline;margin:0}
.hcv-meta .hcat,.hcv-meta .hautor{white-space:normal;max-width:100%}
.hcv-nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;max-width:760px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hcv-d{background:var(--surface);padding:9px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.hcv-d>span{font-size:11px;color:var(--muted)}
.hcv-d>b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hcv-cop{font-size:12px;color:var(--muted)}
.hcv-mais{display:flex;justify-content:center;padding-top:2px}
.hcv-nota{margin:0;text-align:center}
/* 5 números em 3 colunas (ou 2, no telemóvel) deixavam uma célula vazia com a cor da linha:
   a última (Encomendas) estica-se até ao fim da fila. */
@media (max-width:900px){.hcv-nums{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hcv-d:last-child{grid-column:span 2}}
/* Telemóvel: ao lado de um vídeo de ~135 px sobram ~170 px e «Lucro líquido» cortava o valor.
   O vídeo e o título ficam lado a lado; os números descem para baixo dos dois, a toda a
   largura (o .hcv-info desfaz-se na grelha do cartão com display:contents). */
@media (max-width:700px){
  .hcv{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:10px;padding:10px}
  .hcv-info{display:contents}
  .hcv-vid{grid-row:1 / span 2;max-width:none}
  .hcv-t{grid-column:2}
  .hcv-meta{grid-column:2;align-self:start}
  .hcv-nums,.hcv-cop{grid-column:1 / -1}
  .hcv-nums{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .hcv-d:last-child{grid-column:1 / -1}
  .hcv-d{padding:7px 10px}
  .hcv-d>b{font-size:14px}
}
/* A tabela das campanhas tem 11 colunas e não cabe em ecrã nenhum abaixo dos ~1250px:
   rola para o lado, e a barra fica desenhada para se saber que há mais à direita —
   sem ela a última coluna lê-se como coluna final. Mesma razão e mesmo desenho da
   fila de categorias (e, como lá, sem `scrollbar-width`: declará-la faz o Chrome
   ignorar estes pseudo-elementos e voltar à barra flutuante do macOS). */
.htblwrap::-webkit-scrollbar{height:8px}
.htblwrap::-webkit-scrollbar-track{background:transparent}
.htblwrap::-webkit-scrollbar-thumb{border-radius:4px;
  background:color-mix(in srgb,var(--ink) 22%,transparent)}
.htblwrap::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 34%,transparent)}
@media (max-width:760px){
  .mhist-hub{padding:14px;border-radius:16px}
  .mhist-topo{margin:-14px -14px 0;padding:14px;border-radius:16px 16px 0 0}
}
/* (antigo) */
/* Barra de filtros do Histórico: pesquisa + calendário */
.mfiltros{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.mbusca{position:relative;flex:1;min-width:220px}
.mbusca svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.mbusca input{width:100%;padding:9px 11px 9px 34px;font-size:14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-family:inherit}
.mbusca input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mcalwrap{position:relative}
.calpop{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:272px;padding:17px;
  max-width:calc(100vw - 48px);max-height:calc(100vh - 140px);overflow:auto;
  background:#161616;border-radius:20px;box-shadow:var(--shadow-lg)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;
  font-size:12px;font-weight:600;letter-spacing:.06em;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.calnav{display:flex;gap:4px}
.calnav .btn{padding:2px 8px;font-size:15px;line-height:1}
.calsem{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.calsem span{text-align:center;font-size:11px;color:color-mix(in srgb,var(--ink) 45%,transparent)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;justify-items:center}
.caldia{width:28px;height:28px;padding:0;border:0;border-radius:999px;font-family:inherit;font-size:12px;
  background:transparent;color:var(--ink);cursor:pointer;justify-self:center}
.caldia.vazio{visibility:hidden}
.caldia:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.caldia.hoje{background:color-mix(in srgb,var(--ink) 88%,transparent);color:var(--bg);font-weight:600}
.caldia.on{background:var(--accent);color:var(--bg);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mthumb{width:56px;aspect-ratio:4/5;flex:none;border-radius:8px;background-color:var(--surface-3);
  display:grid;place-items:center;color:color-mix(in srgb,#fff 70%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}

/* ---- Histórico de Ads (100% do desenho) ---- */
.hkpi{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hkpi-l{font-size:12px;color:var(--muted);margin-top:2px}
.hcab{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:11px}
.hcab-t{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.hprod{display:flex;align-items:center;gap:10px;min-width:0}
.hprod>*:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hprod .arrow{flex:none;margin-left:4px;color:var(--accent);vertical-align:-2px}
/* Foto real do produto na loja. Quadrada e recortada ao centro: as fotos de catálogo
   das lojas são 1:1 e o produto está sempre no meio. */
.hthumb{width:34px;height:34px;border-radius:6px;flex:none;display:block;object-fit:cover;
  background:var(--surface-3)}
.hplat{display:inline-flex;align-items:center;gap:7px}
.hplat svg{flex:none;color:var(--ink)}
/* O logótipo oficial é desenhado a 26px para o cartão; numa célula de tabela isso desalinha a
   linha — aqui vale o tamanho do texto ao lado. */
.hplat .plat-ico{width:18px;height:18px}
.hdata{color:var(--muted)}
/* Coluna "Publicado por": dono em cima, quem executou por baixo (só quando diferem). */
.hautor{display:block;white-space:nowrap}
/* Sigla da loja onde o produto saiu, ao lado do nome de quem o publicou. */
/* O hífen é texto a sério no markup, não um ::before: assim copia-se com o resto
   da célula e um leitor de ecrã lê-o. */
.hloja{color:var(--muted);font-weight:600;font-size:11.5px}
.hautor-s{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;white-space:nowrap}
/* ── A linha da tabela leva ao cartão do vídeo (15/ago) ───────────────────────
   Só as campanhas que nasceram de um candidato ganham o cursor de mão: as manuais
   (link colado) não têm cartão nenhum para abrir e não devem prometê-lo. O `title`
   diz qual é o caso em ambas. O foco é visível porque a linha é alcançável pelo
   teclado (tabindex) — sem isto ficava sem indicação nenhuma ao navegar por Tab. */
.tbl tbody tr.hclic{cursor:pointer}
.tbl tbody tr[data-jrow]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* tag-neutral do Nocturne para os estados terminais da tabela */
#mHistBody .pill.mut{background:var(--surface-3);color:color-mix(in srgb,var(--ink) 88%,transparent)}
@media (max-width:700px){.mkpis3{grid-template-columns:1fr}}

/* ── Histórico de Ads: ROI, dinheiro e proveniência (11/ago) ──────────────────
   Faltava um `.text-muted` no sistema: era usado no markup do histórico e não
   existia regra nenhuma, por isso os "—" saíam na cor do texto normal. */
.text-muted{color:var(--muted)}
/* Categoria de garimpo de onde o vídeo veio — etiqueta, não título. */
.hcat{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--surface-3);
  color:color-mix(in srgb,var(--ink) 92%,transparent);font-size:11.5px;font-weight:600;white-space:nowrap}
/* Como o produto entrou (15/ago): garimpado pelo Miner, link colado a mao, ou um trabalho
   de "Editar IA" — que nao e publicacao nenhuma e ate hoje era indistinguivel de uma
   campanha nesta tabela. Tres etiquetas de cor propria porque a pergunta que se faz a
   coluna e "qual destes?", e nao "leia-se um a um". */
.hmodo{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap}
.hmodo-auto{background:color-mix(in srgb,var(--miner-hi,var(--accent)) 16%,transparent);
  color:var(--miner-hi,var(--accent))}
.hmodo-manual{background:var(--surface-3);color:color-mix(in srgb,var(--ink) 92%,transparent)}
.hmodo-ia{background:var(--accent-soft);color:var(--accent)}
/* Dinheiro e rácios alinham pelo algarismo: numa tabela de comparação isso é o
   que permite ler uma coluna de cima a baixo sem a percorrer número a número. */
#mHistBody td, #mResumoBody td{font-variant-numeric:tabular-nums}
/* "R$ 3.420,00" partia em duas linhas nas colunas estreitas e a coluna deixava de
   se ler de cima a baixo — que é a única razão para estes números estarem juntos. */
#mHistBody td:nth-child(n+5):nth-child(-n+8),
#mResumoBody td:nth-child(n+3){white-space:nowrap}
.hroi{font-weight:640;white-space:nowrap}
/* Mesmos cortes do dashboard: >=2 bom · >=1 a pagar-se · abaixo disso a perder. */
.hok{color:var(--ok)} .hwarn{color:var(--warn)} .hbad{color:var(--crit)}
/* O --ok do sistema (#16A34A) dá 3,30:1 sobre branco — abaixo de AA, e aqui são
   números que se leem, não um ponto de estado. Um degrau mais escuro só nesta
   coluna (4,60:1); o token global fica como está, que serve outras 15 vistas. */
:root[data-theme="light"] .hok{color:#15803D}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .hok{color:#15803D}}
/* Cabeçalho do cartão: título à esquerda, período e filtros à direita. */
.hcab-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ── Menu de estado do Histórico de Ads (15/ago) ──────────────────────────────
   Substitui a fila de seis chips (Todos/Erro/Publicado/A publicar/Editado/Cancelado).
   Só um estado pode estar ativo de cada vez, e um controlo de valor único lê-se melhor
   como menu do que como seis botões permanentes a ocupar a barra. Nada de informação se
   perde: a contagem por estado passou para dentro do menu, ao lado de cada opção. */
.mdd{position:relative}
.mdd-b{white-space:nowrap}
.mdd-l{color:var(--muted);font-weight:500}
.mdd-v{font-weight:640}
.mdd-c{flex:none;transition:transform .16s}
.mdd.aberto .mdd-c{transform:rotate(180deg)}
/* Um filtro ativo tem de se ver com o menu fechado — era o que os chips davam de
   graça e é o único risco real de os trocar por um menu. */
.mdd.filtrado .mdd-b{border-color:var(--miner-hi,var(--accent));color:var(--miner-hi,var(--accent))}
.mdd.filtrado .mdd-l{color:color-mix(in srgb,var(--miner-hi,var(--accent)) 70%,var(--muted))}
.mdd-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:226px;padding:6px;
  max-height:min(340px,calc(100vh - 140px));overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}
/* ── Menu largo dos países ──
   Tem de vir DEPOIS de .mdd-pop: mesma especificidade, ganha quem está mais abaixo.
   Abre para a DIREITA (left:0) em vez de para a esquerda: ancorado a right:0, um painel
   largo crescia por cima do rótulo "Básico" e saía do ecrã à esquerda. */
.mdd-pop-lg{min-width:820px;max-width:min(900px,calc(100vw - 130px));left:0;right:auto;
  max-height:min(700px,calc(100vh - 100px))}
/* Abaixo desta largura já não cabem 820px: o menu passa a ocupar o que sobra à direita
   do botão. O desconto é da POSIÇÃO do painel (~90px do bordo), não da viewport — com
   94vw ele transbordava porque nascia já deslocado para dentro. */
@media (max-width:980px){ .mdd-pop-lg{min-width:0;width:calc(100vw - 130px);left:0;right:auto} }
/* Menu largo dos países e das linguagens: os dois precisam de duas colunas.

   🔴 `left:0` só serve ao PRIMEIRO menu da barra. O de Linguagem é o segundo, e 820px
   a nascer da sua esquerda saem fora do ecrã à direita — o painel abria, mas fora da
   área visível (23/set/2026: `__idioma` deu `lista:39, ligado:true` e mesmo assim não
   se via nada). Com `left:auto;right:0` ele cresce para a ESQUERDA, para dentro do
   ecrã, ancorado ao próprio botão. */
/* Menu de Linguagem: ancorado ao PRÓPRIO botão, tal como o de Países — abre logo por
   baixo dele (pedido da Lorena, 23/set/2026: "coloque igual o de países").
   `left:0` conta a partir do .mdd, que é position:relative; a largura encolhe com a
   janela para nunca passar o bordo direito. Nada de ancorar à barra: isso punha o
   painel no fundo dela, longe do botão que o abriu. */
#mIdiomaDD .mdd-pop-lg{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:auto;transform:none;
  /* A largura tem de caber no que sobra À DIREITA do botão, não na janela inteira:
     ancorado ao botão, `100vw` ignorava os ~370px à esquerda dele e o menu transbordava
     abaixo de 1200px (medido: dir=1233 numa janela de 1100). */
  width:min(860px,calc(100vw - 100% - 60px));min-width:0;
  max-height:min(70vh,560px)}
/* Quando já não sobra largura útil à direita, o menu deixa de se ancorar ao botão e
   alinha-se pelo bordo esquerdo da barra — continua por baixo, mas cabe. */
@media (max-width:1200px){
  #mIdiomaDD{position:static}
  .mcatsbox{position:relative}
  #mIdiomaDD .mdd-pop-lg{left:12px;right:12px;width:auto}
}


.mdd-o{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);
  font-family:inherit;font-size:13px;font-weight:520;cursor:pointer;text-align:left}
.mdd-o:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.mdd-o.on{background:color-mix(in srgb,var(--miner-hi,var(--accent)) 15%,transparent);
  color:var(--miner-hi,var(--accent));font-weight:640}
.mdd-o:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Opção que não daria resultado nenhum com os outros filtros postos: fica à vista,
   apagada e não clicável — esconder dava a entender que não existe. */
.mdd-o.vazia{opacity:.38;cursor:default}
.mdd-o.vazia:hover{background:transparent}
/* Quantas campanhas cada estado daria, com a pesquisa e a data que já estão postas. */
.mdd-n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mdd-o.on .mdd-n{color:inherit;opacity:.78}
.hres .tbl th:first-child, .hres .tbl td:first-child{width:1%;white-space:nowrap}
.mselcand{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 11px;font-size:12.5px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.mcats{display:flex;gap:6px;flex-wrap:wrap}
.mcats button{cursor:pointer;font-family:inherit}
/* Cartão em destaque (o "Gasto de uso de API" do desenho): o accent entra a 8%
   no fundo e o contorno mal se nota — o desenho não o carrega. */
.card-acc{background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 14%,var(--line))}
.apibig{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:2px 0;font-variant-numeric:tabular-nums}
/* Barra de consumo — só é desenhada quando existe denominador real (ver renderSaldos). */
.apibar{height:5px;border-radius:3px;background:var(--surface-3);margin:5px 0 0;overflow:hidden}
.apibar>i{display:block;height:100%;background:var(--accent);border-radius:3px}
/* Rótulo de secção dentro do cartão (ATUALIZAR SALDO ANTHROPIC · API IMG · …) */
.apisub{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:14px 0 6px}
.apirow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.apirow .apisub{margin:0;flex:1;min-width:0}
.apikey{display:flex;align-items:center;gap:8px}
.apikey>input{flex:1;min-width:0}
.apikeyv{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-family:var(--mono);font-size:12.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apikeyv.off{color:var(--faint);font-family:inherit}
/* Botões do cartão de API sólidos no accent, como no desenho ("Editar" e os dois
   de substituir chave). */
.apirow>.btn,.apikey>.btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.apirow>.btn:hover,.apikey>.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.apirow>.btn[disabled],.apikey>.btn[disabled]{opacity:.45}
.btn.ico{padding:0;width:38px;height:38px;flex:none;display:grid;place-items:center}
.apiline{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;min-width:0}
.apiline>span:first-child{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
/* O valor é um número — nunca deve partir a meio ("$ 24,94" -> "24" + ",94" em linhas
   diferentes, achado no QA, 12/ago). flex:none garante que o rótulo é que cede espaço. */
.apiline .v{text-align:right;white-space:nowrap;flex:none}
.apinote{font-size:11px;color:var(--faint);margin-top:8px}
/* Duas quantidades — quantos produtos ainda dá para publicar e quantas edições de IA ainda dá para
   fazer (decisão do Erico, 13/ago; substituiu os preços por operação). Lado a lado com um «ou» no
   meio, porque competem pelo mesmo saldo: fazer nove produtos não deixa as quarenta edições
   intactas. O número é o que se lê primeiro; a etiqueta explica-o em duas linhas curtas. */
.apiq{margin-top:9px;padding:9px 11px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.apiq-c{display:flex;align-items:baseline;gap:8px}
.apiq-n{font-size:23px;font-weight:760;letter-spacing:-.02em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;flex:none}
.apiq-l{font-size:11.5px;font-weight:650;line-height:1.15;min-width:0;color:var(--ink)}
/* Na mesma linha do rótulo: «produtos a publicar» lê-se de uma vez, e uma linha por quantidade
   chega para tudo caber sem cortar. */
.apiq-l small{font-size:10.5px;font-weight:500;color:var(--ink);opacity:.74;margin-left:4px}
/* O «ou» é a peça que impede a leitura errada («nove E quarenta»). Fica entre as duas colunas, com
   uma régua de cada lado para se ler como escolha, não como soma. */
.apiq-ou{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);opacity:.62;padding:0 1px;position:relative}
/* O «ou» separa as duas quantidades e é a peça que impede a leitura errada («nove E sessenta e
   cinco»). Réguas de cada lado para se ler como escolha, não como soma. */
.apiq-ou{display:flex;align-items:center;gap:7px;margin:1px 0}
.apiq-ou::before,.apiq-ou::after{content:"";flex:1;height:1px;background:var(--line-2);opacity:.75}

.apidelta{font-size:12px;color:var(--accent-300);margin-bottom:2px}

/* Lista de linhas por API: sempre visível agora (o cartão já não colapsa). */
.apilist{display:flex;flex-direction:column;gap:13px;margin-top:10px}
/* "Trocar chave"/"Editar saldo" e os mini-formulários que revelam por baixo. */
.apibtns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.apipanel{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.chev{transition:transform .15s ease}
.chev.open{transform:rotate(180deg)}
/* Barra de progresso */
.bar{flex:1;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ok-dot),var(--info-dot))}
.bar.err>i{background:var(--crit-dot)} .bar.off>i{background:var(--faint)}
/* barra do cartão de API: accent liso, como no desenho */
.bar.acc>i{background:var(--accent)}
/* Fila de produção — lista com progresso, como no desenho */
.qlist{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.qitem{display:flex;gap:10px;align-items:flex-start}
.qitem .th{width:28px;height:38px;border-radius:5px;flex:none;background:var(--surface-3);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--faint)}
.qitem .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.qitem .nm{font-size:13px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qitem .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.qitem .prog{display:flex;align-items:center;gap:8px}
.qitem .pct{font-size:11px;color:var(--muted);min-width:32px;text-align:right;font-variant-numeric:tabular-nums}
.qitem .acts{display:flex;gap:5px;flex-wrap:wrap}

/* ---- Aparência do Miner (3 tweaks do redesign Nocturne) ---- */
/* Densidade compacta: gaps/paddings menores e mais colunas na grelha de vencedores. */
.miner.density-compact #mMinerView{gap:12px}
.miner.density-compact .mtoprow{gap:12px}
.miner.density-compact .mmain{gap:12px}
.miner.density-compact .card-p{padding:10px 12px}
.miner.density-compact .mkpis{gap:6px}
.miner.density-compact .mkpi{padding:10px 10px}
.miner.density-compact .mcands{gap:8px;grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1500px){.miner.density-compact .mcands{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1180px){.miner.density-compact .mcands{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.miner.density-compact .mcands{grid-template-columns:1fr}}

/* Vencedores minerados em lista: mesma grelha, virada em linhas compactas
   (miniatura + título + métricas + score + ação), no espírito do .qitem. */
.miner.cardlayout-list .mcands{display:flex;flex-direction:column;gap:8px}
/* Cartão aberto a partir de uma linha do histórico: anel do accent que se apaga
   sozinho em ~3s. Anel e não fundo — o cartão tem media a ocupá-lo quase todo, e um
   realce por baixo do vídeo não se via. */
.mcand.foco,.mcand-row.foco{animation:cand-foco 3.2s ease-out}
@keyframes cand-foco{
  0%,55%{box-shadow:0 0 0 3px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}
  100%{box-shadow:0 0 0 0 transparent,0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){
  .mcand.foco,.mcand-row.foco{animation:none;box-shadow:0 0 0 3px var(--accent)}}
.mcand-row{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.mcand-row .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mcand-row .hk{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcand-row .mt{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.mcand-row .score{flex:none;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent)}
.mcand-row .btn{flex:none}

/* Barra lateral vibrante: reforça o .card-acc já existente (mesmo tratamento
   do "apiCardGlow" do desenho quando sidebarEnergy=vivid). */
.miner.sidebar-vivid .card-acc{background:color-mix(in srgb,var(--accent) 20%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),
             0 10px 28px color-mix(in srgb,var(--accent) 22%,transparent)}

/* ══════════════════════════════════════════════════════════════════════════
   MINER — pele "novo" (/impeccable, 10/ago/2026)
   ══════════════════════════════════════════════════════════════════════════
   É o que se vê por omissão. O popover "Aparência" tem um interruptor que põe
   `data-miner-skin="classico"` no <html> e devolve tudo ao desenho anterior —
   por isso cada regra aqui está sob :root:not([data-miner-skin="classico"]) e
   nenhuma linha do markup mudou.

   O que motivou o redesenho, medido na produção antes de mexer:
   · o contexto do topo ocupava 868px — quase um ecrã inteiro de cartões (3
     linhas, colunas fixas de 280px, fila de 320px com um item e o resto vazio)
     antes de se ver UM vídeo, quando o trabalho aqui é percorrer 410;
   · o cartão de vídeo media 614px, ou seja ~1,5 filas por ecrã;
   · no "Modo de publicação" o botão INATIVO estava com o acento a 100% e o
     ativo a 82% misturado com branco: o estado lia-se ao contrário.

   A tese: o Miner é triagem visual. O contexto configura-se uma vez e esquece-se;
   os vídeos são o trabalho. Então o topo encolhe a uma barra e a grelha fica com
   o ecrã. Sem cor nova, sem tipo novo — só hierarquia e densidade.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- 1. Topo: de parede de cartões a barra de contexto ---- */

/* O halo roxo/vermelho era decoração num sítio onde o olho só quer passar. Fica
   uma superfície plana que se lê como barra, não como conteúdo. */
:root:not([data-miner-skin="classico"]) .mtopwrap{
  padding:12px;border-radius:16px;background:var(--surface-2);
  border:1px solid var(--line)}
:root:not([data-miner-skin="classico"]) .mtoprow{gap:10px;align-items:start}

/* Os 4 cartões de contexto numa linha, a fila a ocupar a linha seguinte inteira:
   a fila é a única coisa aqui que cresce com o uso, e é a que precisa de largura. */
:root:not([data-miner-skin="classico"]) .mtoprow,
:root:not([data-miner-skin="classico"]) .mtoprow.has-socios{
  grid-template-columns:repeat(4,minmax(0,1fr))}
:root:not([data-miner-skin="classico"]) .mtoprow>.card.mfila{grid-column:1/-1}

:root:not([data-miner-skin="classico"]) .mtoprow>.card{
  background:var(--surface);padding:12px 13px}
/* Rótulos dos cartões: passam a etiqueta, não a título. Deixam de competir com
   os valores que estão logo por baixo. */
:root:not([data-miner-skin="classico"]) .mtoprow>.card>.card-h{margin-bottom:9px}
:root:not([data-miner-skin="classico"]) .mtoprow>.card>.card-h>.card-k{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:640}
:root:not([data-miner-skin="classico"]) .mtoprow>.card.mfila>.card-h{justify-content:flex-start}
:root:not([data-miner-skin="classico"]) .mtoprow>.card.mfila>.card-h>.card-k{text-align:left}

/* Sócios: de lista vertical solta a etiquetas que embrulham. Três nomes não
   justificam 190px de coluna vazia. */
:root:not([data-miner-skin="classico"]) .msocios{flex-direction:row;flex-wrap:wrap;gap:6px}
:root:not([data-miner-skin="classico"]) .msocio{
  width:auto;padding:6px 11px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  border-radius:8px;background:var(--surface-2);border-color:var(--line);text-transform:none}
:root:not([data-miner-skin="classico"]) .msocio.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---- 2. Modo de publicação: o estado deixa de se ler ao contrário ---- */
/* Inativo = fantasma. Ativo = acento sólido. Regra do register product: nada de
   acento cheio em estado inativo. */
:root:not([data-miner-skin="classico"]) .mmodo{flex-direction:row;gap:0}
:root:not([data-miner-skin="classico"]) .mmodo>.btn{
  padding:8px 12px;font-size:13px;font-weight:580;border-radius:0;
  background:var(--surface);border-color:var(--line);color:var(--muted);box-shadow:none}
:root:not([data-miner-skin="classico"]) .mmodo>.btn:first-child{
  border-radius:9px 0 0 9px}
:root:not([data-miner-skin="classico"]) .mmodo>.btn:last-child{
  border-radius:0 9px 9px 0;border-left-width:0}
:root:not([data-miner-skin="classico"]) .mmodo>.btn:hover{
  background:var(--surface-3);border-color:var(--line-2);color:var(--ink)}
:root:not([data-miner-skin="classico"]) .mmodo>.btn.pri{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:none;font-weight:640}
:root:not([data-miner-skin="classico"]) .mmodo-foot{padding-top:10px;gap:6px}

/* ---- 3. Fila de produção: altura pelo conteúdo ---- */
/* A fila acompanha a altura das outras secções. Sem stretch, o flex-basis:0px
   do corpo/lista colapsava a lista nesta skin (o topo usa align-items:start).
   Só a lista rola; o rodapé continua fora dela. */
:root:not([data-miner-skin="classico"]) .mtoprow>.card.mfila{
  height:auto;max-height:none;align-self:stretch}
:root:not([data-miner-skin="classico"]) .mfila .qlist{max-height:216px}
/* Só acima de 700px: abaixo disso a coluna das lojas vira faixa horizontal (regra
   de origem) e reimpor duas colunas aqui esmagava os trabalhos no telemóvel. */
@media (min-width:701px){
  :root:not([data-miner-skin="classico"]) .mfilabody{
    grid-template-columns:minmax(96px,132px) minmax(0,1fr);gap:12px}
  :root:not([data-miner-skin="classico"]) .mfilaloja{padding:7px 10px}
}
:root:not([data-miner-skin="classico"]) .mfilaloja{font-size:11.5px;letter-spacing:.02em}
:root:not([data-miner-skin="classico"]) .mfila .qitem .th{width:38px;height:38px}

/* ---- 4. Indicadores: números que se comparam, não cartões que se olham ---- */
:root:not([data-miner-skin="classico"]) .mkpis{gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
:root:not([data-miner-skin="classico"]) .mkpis>.card.mkpi{
  border:0;border-radius:0;box-shadow:none;padding:11px 13px}
:root:not([data-miner-skin="classico"]) .mkpi b{
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---- 5. Grelha: mais vídeos por ecrã ---- */
/* Passa a contar a largura REAL disponível em vez de saltar para 3 colunas só
   porque o ecrã tem menos de 1500px — a rail já come 248px, e o cálculo antigo
   deixava as colunas gordas de mais. */
:root:not([data-miner-skin="classico"]) .mcands{
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
@media (max-width:700px){
  :root:not([data-miner-skin="classico"]) .mcands{grid-template-columns:1fr}
}

/* ---- 6. Cartão de vídeo: 614px era uma fila e meia por ecrã ---- */
:root:not([data-miner-skin="classico"]) .mcand .mchd{padding:10px 12px 9px;gap:9px}
:root:not([data-miner-skin="classico"]) .mcand .mcplat{width:26px;height:26px;border-radius:7px}
:root:not([data-miner-skin="classico"]) .mcand .mcplat svg{width:14px;height:14px}
:root:not([data-miner-skin="classico"]) .mcand .mct .sub{font-size:11px;margin-top:1px}
:root:not([data-miner-skin="classico"]) .mcand .score{font-size:10.5px;padding:2px 7px}
/* O hook sobe para o cabeçalho em peso: é a primeira leitura, com a imagem. */
:root:not([data-miner-skin="classico"]) .mcand .hk{
  font-size:13.5px;line-height:1.28;-webkit-line-clamp:2}
:root:not([data-miner-skin="classico"]) .mcand a.hk{-webkit-line-clamp:none}
/* Faixa de frescura: informação de contexto, não manchete. O Erico pediu que se
   lesse bem no telemóvel (09/ago) — 12.5px continua acima do mínimo, e no
   telemóvel a regra abaixo devolve-lhe os 13.5px. */
:root:not([data-miner-skin="classico"]) .mcand .mcinfo>div{
  padding:7px 10px;font-size:12.5px}
:root:not([data-miner-skin="classico"]) .mcand .mcinfo svg{width:13px;height:13px}
:root:not([data-miner-skin="classico"]) .mcand .fresh i{width:7px;height:7px}
:root:not([data-miner-skin="classico"]) .mcand .bd{padding:10px 12px 12px;gap:7px}

/* O ticket é o critério que decide se vale a pena, e estava em cinzento a 13px
   no fundo do cartão. Passa a ser a segunda coisa que se lê. */
:root:not([data-miner-skin="classico"]) .mcand .mt{
  font-size:15px;font-weight:660;color:var(--ink);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;gap:8px}

/* O link do anúncio é para quem quer confirmar a fonte: continua clicável e
   inteiro, mas deixa de ocupar uma caixa com borda no meio do cartão. */
:root:not([data-miner-skin="classico"]) .mcand .mcsrc{
  padding:0;border:0;border-radius:0;font-size:11.5px;gap:6px}
:root:not([data-miner-skin="classico"]) .mcand .mcsrc:hover{background:none}
:root:not([data-miner-skin="classico"]) .mcand .mcsrc .lbl-src{display:none}
:root:not([data-miner-skin="classico"]) .mcand .mcsrc b{font-weight:500;color:var(--muted)}
:root:not([data-miner-skin="classico"]) .mcand .mcsrc:hover b{color:var(--accent)}
:root:not([data-miner-skin="classico"]) .mcand .mcsrc svg{width:12px;height:12px;margin-left:0}

:root:not([data-miner-skin="classico"]) .mcand>.btn{padding:8px 12px;font-size:12.5px}

/* Alvo de leitura no telemóvel: aí há uma coluna só, o cartão tem largura toda e
   a densidade deixa de ser o problema — devolve-se o tamanho ao que se lê. */
@media (max-width:700px){
  :root:not([data-miner-skin="classico"]) .mcand .mcinfo>div{font-size:13.5px;padding:9px 10px}
  :root:not([data-miner-skin="classico"]) .mcand .hk{font-size:14.5px}
  :root:not([data-miner-skin="classico"]) .mtoprow,
  :root:not([data-miner-skin="classico"]) .mtoprow.has-socios{grid-template-columns:1fr}
}
@media (max-width:1080px) and (min-width:701px){
  :root:not([data-miner-skin="classico"]) .mtoprow,
  :root:not([data-miner-skin="classico"]) .mtoprow.has-socios{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 7. Segunda passagem: o primeiro vídeo estava a 1040px, num ecrã de 900 ----
   Medido depois da primeira ronda: mesmo com o topo reduzido, entre o cabeçalho da
   página e o primeiro cartão havia contexto a mais empilhado (indicadores, fontes,
   título de secção, categorias). Aqui aperta-se cada um deles sem tirar informação
   nenhuma do ecrã, e a media do cartão passa de 4:5 a quadrada — numa grelha de
   triagem, 70px de altura por cartão valem mais do que os 20% de imagem que se
   perdem, e o produto está quase sempre no centro do enquadramento. */

/* Chaves de API: rótulo e campo lado a lado em vez de empilhados. O cartão era o
   mais alto da linha (284px) e é o que se configura uma vez e se esquece. */
:root:not([data-miner-skin="classico"]) .mtoprow>.card:has(.apikey){
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-content:start}
:root:not([data-miner-skin="classico"]) .mtoprow>.card:has(.apikey)>.card-h,
:root:not([data-miner-skin="classico"]) .mtoprow>.card:has(.apikey)>.apilist,
:root:not([data-miner-skin="classico"]) .mtoprow>.card:has(.apikey)>.apirow{grid-column:1/-1}
:root:not([data-miner-skin="classico"]) .mtoprow>.card:has(.apikey)>.apisub{
  align-self:center;margin:0;white-space:nowrap}
:root:not([data-miner-skin="classico"]) .apirow{margin-top:4px}
:root:not([data-miner-skin="classico"]) .apikeyv{padding-top:7px;padding-bottom:7px}
:root:not([data-miner-skin="classico"]) .apikey>.btn.ico{width:32px;height:32px;padding:0}

/* Indicadores, título da secção e chips: menos casca, mesma informação. */
:root:not([data-miner-skin="classico"]) .mkpis>.card.mkpi{padding:9px 12px}
:root:not([data-miner-skin="classico"]) .msec-t{font-size:17px}
:root:not([data-miner-skin="classico"]) .mcatsbox{padding:9px;margin-bottom:10px}
:root:not([data-miner-skin="classico"]) .mfontesbox{padding:8px}
:root:not([data-miner-skin="classico"]) .mmain{gap:14px}
:root:not([data-miner-skin="classico"]) #mMinerView{gap:14px}

/* Media quadrada: -70px por cartão, e a grelha ganha quase meia fila por ecrã. */
:root:not([data-miner-skin="classico"]) .mcand .med,
:root:not([data-miner-skin="classico"]) .mcand .nomed{aspect-ratio:1/1}

/* ---- 8. As hashtags do anúncio original estavam a comandar a altura da grelha ----
   Medido: um cartão com 5 hashtags do Instagram (#arcondicionado, #climatizacao, …)
   empilhava-as em 157px e, como a grelha alinha a fila pelo cartão mais alto,
   arrastava mais cinco cartões com ele — 637px onde os vizinhos precisavam de 473.
   As tags ficam (dão contexto de nicho), mas numa linha: não são o que decide se
   um produto vale, e o anúncio de origem continua a um clique para quem quiser ver
   tudo. Com o cabeçalho fixo em duas linhas, todos os cartões passam a medir o
   mesmo e a fila deixa de ter reféns. */
:root:not([data-miner-skin="classico"]) .mcand .cs{
  flex-wrap:nowrap;overflow:hidden;max-height:23px}
:root:not([data-miner-skin="classico"]) .mcand .cs>*{flex:none}
:root:not([data-miner-skin="classico"]) .mcand .hk{min-height:2.56em}

/* ---- 9. A causa real dos 868px: os cartões do topo tinham altura FIXA ----
   `.mtoprow>.card{height:420px;overflow-y:auto}` (360px abaixo de 1600, 340 abaixo
   de 1180). Quatro caixas todas com a mesma altura, independentemente de terem 91px
   ou 284px de conteúdo — e com scroll próprio lá dentro quando não cabia. Era daqui
   que vinha quase todo o espaço morto do topo, e nenhuma das compactações anteriores
   lhe podia tocar. Cada cartão passa a ter a altura do que tem dentro; a linha fica
   com a do maior, que é o das chaves de API. */
:root:not([data-miner-skin="classico"]) .mtoprow>.card{
  height:auto;max-height:none;overflow:visible}

/* ---- 10. Contraste no tema claro (medido, não estimado) ----
   Duas coisas ficavam abaixo de 4,5:1 por pouco, e ambas em texto pequeno:
   · o rótulo dos cartões do topo em --faint dava 4,31:1 a 10,5px → passa a --muted (6,55:1);
   · o modo ativo, branco sobre --accent, dava 4,46:1 → no claro usa --accent-2, que é a
     mesma cor de marca um degrau mais escura (o escuro fica como está: lá o --accent é
     claro e o --accent-2 seria pior). */
:root:not([data-miner-skin="classico"]) .mtoprow>.card>.card-h>.card-k{color:var(--muted)}
:root[data-theme="light"]:not([data-miner-skin="classico"]) .mmodo>.btn.pri{
  background:var(--accent-2);border-color:var(--accent-2)}

/* ---- 11. Loja ativa na fila: branco sobre lilás claro dava 1,54:1 ----
   `.mfilaloja.on` pinta texto branco sobre `accent 26% + surface-2`. No tema escuro
   esse fundo é escuro e funciona; no claro é quase branco, e o nome da loja
   selecionada ficava ilegível (visível a olho, confirmado a medir). Mesmo tratamento
   que já é dado ao sócio escolhido: acento sólido e a tinta que lhe pertence. */
:root[data-theme="light"]:not([data-miner-skin="classico"]) .mfilaloja.on{
  background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink)}

/* ══════════════════════════════════════════════════════════════════════════
   MINER — micro-interações (/emil-design-eng, 10/ago/2026)
   ══════════════════════════════════════════════════════════════════════════
   Continua tudo sob a pele "novo": o interruptor Aparência › Desenho › Clássico
   devolve também isto ao que era. Nenhuma linha de markup mudou.

   O que a auditoria encontrou na vista, antes de escrever uma linha:
   · `marcarCandAtivo()` põe a classe `.on` no cartão escolhido — e não existia
     nenhuma regra `.mcand.on`. Escolher um vídeo, que é a ação central desta
     vista, não mudava absolutamente nada no cartão (confirmado a medir borda,
     fundo, sombra e contorno antes e depois: idênticos). Com 200 cartões na
     grelha, perdia-se de vista o que se tinha escolhido.
   · dois `:active` em todo o ficheiro, nenhum com escala: nada respondia ao
     toque;
   · oito `transition:.14s` sem propriedade, que é `all` — anima layout e paint
     sem necessidade;
   · zero gates de hover: no telemóvel do Erico o estado fica colado depois do
     toque;
   · popovers a aparecer instantaneamente, com origem no centro.

   Durações pelo que a interação é, não por gosto: pressão 120ms, hover 140ms,
   popover 170ms. Nada acima de 200ms — isto é uma ferramenta de trabalho, não
   uma apresentação.
   ══════════════════════════════════════════════════════════════════════════ */

:root:not([data-miner-skin="classico"]){
  /* No :root e não em .miner: o popover "Aparência" é movido por JS para a barra
     de topo, fora de #minerRoot, e lá dentro as variáveis do .miner não chegam. */
  --e-out:cubic-bezier(.23,1,.32,1);      /* entradas e reações: começa depressa */
  --e-both:cubic-bezier(.77,0,.175,1);    /* movimento de A para B no ecrã */
}

/* ---- 1. O vídeo escolhido passa a ver-se ----
   Anel de acento + fundo levemente tingido. Sem sombra colorida nem escala: a
   grelha tem 200 destes e qualquer coisa mais pesada torna-se ruído. */
:root:not([data-miner-skin="classico"]) .mcand{
  transition:border-color 140ms var(--e-out),box-shadow 140ms var(--e-out),
             transform 140ms var(--e-out)}
:root:not([data-miner-skin="classico"]) .mcand.on{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--shadow)}
:root:not([data-miner-skin="classico"]) .mcand.on .mchd{
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
/* O botão do cartão escolhido também muda de voz: já não é "usar este", é "está
   escolhido". */
:root:not([data-miner-skin="classico"]) .mcand.on .btn{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---- 2. Feedback de pressão ----
   Tudo o que se carrega encolhe 3%. É o detalhe que faz a interface parecer que
   ouviu o toque — e o que mais falta nesta vista. */
:root:not([data-miner-skin="classico"]) .miner .btn,
:root:not([data-miner-skin="classico"]) .miner .chip,
:root:not([data-miner-skin="classico"]) .msocio,
:root:not([data-miner-skin="classico"]) .mfilaloja,
:root:not([data-miner-skin="classico"]) .mfonte,
:root:not([data-miner-skin="classico"]) .medplay{
  transition:transform 120ms var(--e-out),background-color 140ms var(--e-out),
             border-color 140ms var(--e-out),color 140ms var(--e-out)}
:root:not([data-miner-skin="classico"]) .miner .btn:not(:disabled):active,
:root:not([data-miner-skin="classico"]) .miner .chip:active,
:root:not([data-miner-skin="classico"]) .msocio:active,
:root:not([data-miner-skin="classico"]) .mfilaloja:active,
:root:not([data-miner-skin="classico"]) .mfonte:active{transform:scale(.97)}
/* O play do vídeo já crescia no hover; ao carregar volta ao tamanho normal, que
   é o gesto certo para um botão redondo sobre media. */
:root:not([data-miner-skin="classico"]) .medplay:active{transform:scale(.98)}
/* Um botão desativado não deve fingir que reage. */
:root:not([data-miner-skin="classico"]) .miner .btn:disabled{transform:none}

/* ---- 3. Hover só onde existe rato ----
   Sem este gate, em telemóvel o estado de hover fica preso no último cartão
   tocado até se tocar noutro sítio. */
@media (hover:hover) and (pointer:fine){
  :root:not([data-miner-skin="classico"]) .mcand:hover{
    border-color:var(--line-2);transform:translateY(-1px)}
  :root:not([data-miner-skin="classico"]) .mcand.on:hover{border-color:var(--accent)}
}
@media (hover:none){
  /* Em toque, o hover do CSS de origem fica colado — anula-se o que é decorativo. */
  :root:not([data-miner-skin="classico"]) .mfonte:hover{border-color:var(--line)}
  :root:not([data-miner-skin="classico"]) .msocio:hover{background:var(--surface-2)}
  :root:not([data-miner-skin="classico"]) .mfilaloja:hover{background:transparent}
  :root:not([data-miner-skin="classico"]) .mfilaloja.on:hover{background:var(--accent)}
}

/* ---- 4. Popovers nascem de onde foram abertos ----
   "Aparência" e o calendário abrem-se do canto superior direito, que é onde
   está o botão que os abriu, em vez de crescerem do próprio centro. */
:root:not([data-miner-skin="classico"]) #mAparPop,
:root:not([data-miner-skin="classico"]) #mCalPop{
  transform-origin:top right;
  animation:mPop 170ms var(--e-out)}
@keyframes mPop{
  from{opacity:0;transform:scale(.97) translateY(-4px)}
  to{opacity:1;transform:none}
}

/* ---- 5. Transições específicas em vez de `all` ----
   O `.14s` sem propriedade animava também layout e paint. */
:root:not([data-miner-skin="classico"]) .miner .mcsrc{
  transition:color 140ms var(--e-out)}
:root:not([data-miner-skin="classico"]) .miner .dropzone{
  transition:border-color 140ms var(--e-out),background-color 140ms var(--e-out),
             color 140ms var(--e-out)}
:root:not([data-miner-skin="classico"]) .miner .fld select,
:root:not([data-miner-skin="classico"]) .miner .mbusca input{
  transition:border-color 140ms var(--e-out),box-shadow 140ms var(--e-out)}

/* ---- 6. A grelha a recarregar ----
   Já esbatia a 0.45; ganha a curva certa e a mesma linguagem do resto. */
:root:not([data-miner-skin="classico"]) .mcands.a-carregar{
  transition:opacity 140ms var(--e-out)}

/* ---- 7. Movimento reduzido: menos, não zero ----
   A regra global desta app corta animação E transição a toda a gente com
   `!important`. Quem pede movimento reduzido pede que as coisas não se MEXAM —
   não que percam o feedback de cor, que é o que diz se um botão está ativo ou
   se um vídeo está escolhido. Aqui devolvem-se as transições de cor e opacidade
   e mantém-se tudo o que é deslocamento desligado. */
@media (prefers-reduced-motion:reduce){
  :root:not([data-miner-skin="classico"]) .miner .btn,
  :root:not([data-miner-skin="classico"]) .miner .chip,
  :root:not([data-miner-skin="classico"]) .msocio,
  :root:not([data-miner-skin="classico"]) .mfilaloja,
  :root:not([data-miner-skin="classico"]) .mfonte,
  :root:not([data-miner-skin="classico"]) .mcand{
    transition:background-color 140ms ease,border-color 140ms ease,
               color 140ms ease,box-shadow 140ms ease!important;
    transform:none!important}
  :root:not([data-miner-skin="classico"]) #mAparPop,
  :root:not([data-miner-skin="classico"]) #mCalPop{animation:none!important}
}

/* ============ Criativos (IA) — seleção/curadoria (11/ago) ============ */
.mhs-bare>.msec-t,.mhs-bare>.hint,.mhs-bare>.mcatsbox{display:none}
.msub{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:20px 0 10px;color:var(--ink)}
/* Escapa ao grid de 4 colunas do #mCandGrid (.mcands) quando lá dentro se
   injeta HTML solto em vez de cards — sem isto cada filho de topo (h3, p,
   h4, div) vira 1 célula do grid, espalhado em colunas finas com espaço
   morto enorme ao lado (achado 11/ago, ver montarCriativosIA/
   montarSerpApiMax). grid-column:1/-1 ocupa a largura toda como 1 célula só;
   o flow normal (ou sub-grids próprios, aninhados) funciona por dentro. */
.mflow{grid-column:1/-1}

/* ============ Barra de ações do cartão (11/ago) ============
   🔴 REGRA DO ERICO: nenhum elemento acionável POR CIMA do vídeo — todos abaixo
   dele e dentro do cartão, como prioridade logo a seguir à media. O `<video
   controls>` reserva a barra inferior inteira (play/tempo/volume/fullscreen) E,
   no Chrome, o botão de Picture-in-Picture no canto superior direito: qualquer
   overlay acaba por colidir com um dos dois (aconteceu duas vezes seguidas,
   bottom:10px e depois top:10px;right:10px). Fora do vídeo o problema deixa de
   existir — e os botões ficam sempre legíveis, seja qual for o frame. */
/* Destino de um criativo já publicado: loja em vermelho e, por baixo, a conta de anúncio
   (pedido do Erico, 11/ago). Fica logo a seguir à media e antes das ações — quem varre a aba
   "Publicados" quer saber ONDE é que aquilo foi parar antes de mais nada. */
/* Faixa no TOPO do cartão, colada às bordas e a acompanhar o arredondamento (pedido do Erico,
   12/ago). Só a margem inferior a separa do cabeçalho — sem margens laterais, senão lia-se como
   uma caixa solta dentro do cartão em vez de um cabeçalho do próprio cartão. */
.mdest{margin:0;padding:8px 14px;display:flex;flex-direction:column;gap:1px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:color-mix(in srgb,var(--crit) 14%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--crit) 35%,transparent)}
.mdest-l{font-size:12.5px;font-weight:700;color:var(--crit);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdest-c{font-size:11.5px;color:var(--muted);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Um candidato pode ter mais de um destino desde 12/ago (republicar noutra loja/conta) — cada
   par loja/conta extra ganha uma linha divisória por cima, para não ler como uma lista contínua
   de 4 linhas soltas. */
.mdest-l + .mdest-l, .mdest-c + .mdest-l{
  margin-top:5px;padding-top:4px;border-top:1px solid color-mix(in srgb,var(--crit) 25%,transparent)}
/* No layout de lista a etiqueta vive dentro da coluna de texto, mais compacta e com caixa
   própria — ali não é o topo de nada, é mais um metadado da linha. */
.mcand-row .mdest{margin:4px 0 0;padding:4px 8px;border-radius:7px;border:1px solid color-mix(in srgb,var(--crit) 35%,transparent)}
/* De quem é este criativo. Só o admin vê estes chips — é a única vista que mistura sócios;
   ao sócio, tudo o que aparece já é dele e o chip repetido em cada cartão seria ruído.
   Deliberadamente discreto e em tom neutro: a faixa vermelha de destino por cima é que tem de
   continuar a ser a primeira coisa que se lê num criativo já publicado. */
.mdono{padding:5px 14px;font-size:11.5px;color:var(--muted);line-height:1.25;
  background:color-mix(in srgb,var(--ink) 4%,transparent);
  border-bottom:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdono b{color:var(--ink);font-weight:650}
/* Sem faixa de destino por cima, é o chip do dono que faz de cabeçalho do cartão e leva o
   arredondamento — senão descola dos cantos e lê-se como uma caixa solta lá dentro. */
.mcand > .mdono:first-child{border-radius:var(--radius) var(--radius) 0 0}
.mcand-row .mdono{margin:4px 0 0;padding:3px 8px;border-radius:7px;border:1px solid var(--line)}
/* Original vs Editado — segmentado compacto entre a media e as ações (12/ago). Só existe em
   criativos já readaptados; nos outros não há escolha nenhuma para oferecer. */
.mvers{display:flex;gap:0;margin:10px 12px 0;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.mver{flex:1;border:0;background:var(--surface-2);color:var(--muted);font:inherit;font-size:12px;
  font-weight:600;padding:7px 8px;cursor:pointer;white-space:nowrap;transition:.14s}
.mver+.mver{border-left:1px solid var(--line)}
.mver:hover{color:var(--ink)}
.mver.on{background:var(--ok);color:#04140e}
.macoes{display:flex;gap:6px;padding:10px 12px 0;flex-wrap:wrap}
/* 🔴 `width:auto` explícito: a regra `.mcand .btn{width:100%}` (que existia para o
   botão único que havia antes no rodapé do cartão) apanha estes três e punha cada um
   na sua linha. Aqui Baixar e Editar IA partilham a linha e o Publicar leva a de
   baixo inteira. */
.macoes>.mact{flex:1 1 auto;width:auto;justify-content:center;min-width:0;white-space:nowrap;gap:5px;margin-top:0}
/* "Publicar" é a ação principal do cartão — verde sólido e maior que as outras (pedido do
   Erico, 12/ago). É a única ação irreversível aqui (cria produto e campanha reais): deve
   destacar-se do Baixar/Editar IA, que são reversíveis. Verde e não o roxo do painel, porque
   é uma confirmação, não mais um controlo. */
.macoes>.mact.pri{flex:1 1 100%;width:100%;order:3;
  background:var(--ok);border-color:var(--ok);color:#04140e;
  padding:13px 16px;font-size:15px;font-weight:700;gap:8px;
  box-shadow:0 4px 14px color-mix(in srgb,var(--ok) 30%,transparent)}
.macoes>.mact.pri:hover{background:color-mix(in srgb,var(--ok) 88%,#000);
  border-color:color-mix(in srgb,var(--ok) 88%,#000);color:#04140e}
.macoes>.mact.pri svg{width:17px;height:17px}
.macoes>.mact.on{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.macoes>.mact-ok{flex:1 1 auto;justify-content:center}
.macoes .mact svg{flex:none}
/* Badges do SLP (categoria · 💎 faixa · região) — pílulas discretas, o 💎 dourado. */
.mbdgs{display:flex;flex-wrap:wrap;gap:6px}
.mbdg{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:12px;
  background:color-mix(in srgb,var(--miner-hi) 13%,transparent);color:var(--ink);
  border:1px solid color-mix(in srgb,var(--miner-hi) 30%,transparent)}
.mbdg.dia{background:color-mix(in srgb,var(--miner-gold) 16%,transparent);color:var(--miner-gold);
  border-color:color-mix(in srgb,var(--miner-gold) 45%,transparent);font-weight:600}
/* As 4 caixas de métricas (PLAYS · LIKES · NO AR · CPA), como no cartão do SLP. */
.mmet{display:flex;flex-wrap:wrap;gap:6px}
/* Três métricas (visualizações · curtidas · compartilhamento) lado a lado, em colunas
   iguais: com `flex:1 1 52px` a caixa do número maior roubava largura às outras e a
   leitura em coluna perdia-se. `nowrap` porque as três TÊM de caber na mesma linha. */
.mmet.n3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex-wrap:nowrap}
.mmet.n3 .mm{padding:5px 6px}
.mmet.n3 .mv{white-space:nowrap}
/* "COMPARTILHAMENTO" não cabe numa linha na coluna do cartão. Cortar dava
   "COMPARTILHA…" (rótulo que deixa de dizer o que a caixa é) e a quebra automática
   partia-o a meio de sílaba ("COMPARTILHAME/NTO"). Com `hyphens` e o idioma declarado
   no HTML, o browser parte onde a palavra parte de facto. `text-wrap:balance` reparte
   as duas linhas em vez de deixar uma órfã de três letras. */
.mmet.n3 .ml{font-size:9.5px;letter-spacing:.01em;white-space:normal;
  line-height:1.15;hyphens:auto;-webkit-hyphens:auto;text-wrap:balance}
.mmet .mm{flex:1 1 52px;min-width:52px;text-align:center;padding:5px 8px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line)}
.mmet .mv{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;line-height:1.2}
.mmet .mm.win .mv{color:var(--ok)}
.mmet .ml{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
/* Guião transcrito do anúncio original — fechado por omissão, texto longo. */
.mguiao{font-size:12.5px}
.mguiao>summary{cursor:pointer;color:var(--accent);font-weight:600;list-style:none}
.mguiao>summary::-webkit-details-marker{display:none}
.mguiao>summary::before{content:"▸ ";display:inline-block;transition:transform .15s ease}
.mguiao[open]>summary::before{content:"▾ "}
.mguiao-t{margin-top:6px;max-height:200px;overflow:auto;white-space:pre-wrap;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px;font-size:12px}
/* Layout de lista: as ações ficam à direita, numa linha só, sem crescer. */
.mcand-row .macoes{padding:0;flex:0 0 auto;flex-wrap:nowrap;align-items:center}
.mcand-row .macoes>.mact{flex:0 0 auto}
.mcand-row .macoes>.mact.pri{flex:0 0 auto;width:auto;order:0}
/* 🔴 Abaixo de 760px a linha não cabe: a miniatura + texto + 3 botões espremiam a
   coluna do meio a ~60px e cada métrica quebrava palavra a palavra (visto a 390px,
   11/ago). Passa a duas filas — identidade em cima, ações em baixo — em vez de
   continuar a apertar. */
@media (max-width:760px){
  .mcand-row{flex-wrap:wrap;row-gap:10px}
  .mcand-row .mid{flex:1 1 calc(100% - 68px);min-width:0}
  .mcand-row .macoes{flex:1 1 100%;flex-wrap:wrap}
  .mcand-row .macoes>.mact{flex:1 1 auto;justify-content:center}
}

/* ============ SerpApi Máximo — painel analítico (11/ago) ============
   No miner do SLP esta aba nunca teve cards de vídeo: são gráficos de
   tendência, faixas de preço do Shopping, bestsellers e autocomplete/
   trending-now. Ver montarSerpApiMax() em miner.php. */
.chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.trends{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(225px,1fr))}
.trd{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.trd-h{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.trd-h b{color:var(--ink)}
.trdg{font-weight:700;font-size:13px}
.trdg.up{color:var(--ok)} .trdg.down{color:var(--crit)}
.trd-m{color:var(--muted);font-size:12.5px;margin-top:2px}
.trdspark{display:block;margin:5px 0}
.shoptab{display:grid;gap:9px;max-width:820px}
.shrow{display:grid;grid-template-columns:180px 1fr 165px;align-items:center;gap:12px;font-size:13.5px}
.shbar{height:12px;background:var(--surface-3);border-radius:6px;position:relative;border:1px solid var(--line)}
.shrange{position:absolute;height:100%;border-radius:6px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--miner-hi) 55%,transparent),var(--miner-hi))}
.shmed{position:absolute;top:-4px;width:3px;height:20px;background:var(--miner-gold);border-radius:2px}
.shp{color:var(--ink);font-weight:600}
.shval{color:var(--muted);text-align:right}
.shval b{color:var(--miner-gold)}
.bestgrp{margin-bottom:14px}
.bestgrp>b{color:var(--miner-gold)}
.bestsel{display:grid;gap:8px;margin-top:6px}
.bs{display:flex;gap:10px;align-items:center;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:8px}
.bs img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:6px;flex:none}
.bs .t{font-size:13px;flex:1;min-width:0}
.bs .p{color:var(--miner-gold);font-weight:700;font-size:13px;white-space:nowrap}
.autrow{margin-bottom:8px}
.tnlist{display:flex;flex-wrap:wrap;gap:7px}
.tnq{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;
  font-size:13px;color:var(--ink)}
.tnq b{color:var(--miner-gold)}
@media (max-width:700px){.shrow{grid-template-columns:1fr;gap:2px;text-align:left}.shval{text-align:left}}

/* ── Receita de garimpo por faixa (só admin) ──────────────────────────────────
   Botão discreto no canto do cartão da fonte + modal com o Markdown. O cartão é
   `div[role=button]` justamente para este botão poder viver lá dentro. */
.mfdoc{grid-column:4;grid-row:1/span 2;width:24px;height:24px;padding:0;display:grid;
  place-items:center;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--muted);cursor:pointer;opacity:.6;transition:opacity .14s,color .14s,border-color .14s}
.mfonte:hover .mfdoc,.mfdoc:focus-visible{opacity:1;color:var(--accent);border-color:var(--accent)}
@media (hover:none){.mfdoc{opacity:1}}   /* em toque não há hover que o revele */

.mdocbg{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.55);display:grid;
  place-items:center;padding:24px}
.mdoc{width:min(760px,100%);max-height:min(82vh,900px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden}
.mdoc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
.mdoc-h b{font-size:15px;font-weight:640}
.mdoc-b{padding:16px 18px 22px;overflow:auto;min-height:0}

/* Markdown renderizado: prosa a 68ch, o resto (tabelas, código) à largura toda. */
.md{font-size:14px;line-height:1.62}
.md p,.md li{max-width:68ch}
.md h2{font-size:17px;margin:18px 0 8px} .md h3{font-size:14.5px;margin:16px 0 6px}
.md h4{font-size:13px;margin:14px 0 5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.md h2:first-child,.md h3:first-child{margin-top:0}
.md p{margin:0 0 10px} .md ul,.md ol{margin:0 0 12px;padding-left:20px} .md li{margin:3px 0}
.md code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);
  padding:1.5px 5px;border-radius:5px}
.md pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 13px;overflow-x:auto;margin:0 0 12px}
.md pre code{background:none;padding:0;font-size:12px;line-height:1.55}
.md blockquote{margin:0 0 12px;padding:10px 13px;background:var(--surface-2);
  border-radius:var(--radius-sm);color:var(--ink)}
.md blockquote p{margin:0}
.md .tbl{margin:0 0 14px}
.md a{color:var(--accent)}
/* Ligação de vault ([[assim]]): não é clicável aqui, mas lê-se como referência. */
.mdwiki{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
@media (max-width:700px){.mdocbg{padding:0}.mdoc{max-height:100vh;height:100vh;border-radius:0}}

/* ── LOGs (?v=logs, só admin) ─────────────────────────────────────────────────
   Consola de execução. Reaproveita .log/.logwrap (monoespaçado, cores por nível) e
   acrescenta a barra de filtros e a linha clicável que abre o contexto em JSON. */
.lg-acts{display:flex;align-items:center;gap:10px}
.lg-auto{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);cursor:pointer}
.lg-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 2px}
.lg-in{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:7px 10px;font:inherit;font-size:12.5px;min-width:0}
.lg-in[type="search"]{flex:1 1 260px}
.lg-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lg-lista{max-height:min(64vh,720px);overflow:auto;line-height:1.65}
.lg-l{padding:2px 4px;border-radius:5px;white-space:pre-wrap;overflow-wrap:anywhere}
.lg-l.tem{cursor:pointer}
.lg-l.tem:hover{background:var(--surface-3)}
.lg-ctx{margin:6px 0 8px;padding:10px 12px;background:var(--surface-2);border-radius:8px;
  border-left:2px solid var(--accent);font-size:11.5px;color:var(--muted);
  white-space:pre;overflow-x:auto}


/* ===== Review — secção de avaliações do Miner (?v=miner, botão "Review") =====
   Vocabulário do Nocturne: .card/.btn/.fld/.seg/.pill/.chip/.tbl já existem e
   não se duplicam aqui. Isto é só o que a secção acrescenta: a grelha de
   produtos, os cartões de alvo e as miniaturas da tabela de candidatas.
   Cartões dentro de cartões: nunca — as secções internas são separadas por um
   fio de 1px, como no bloco de topo do Miner. */

/* O segmentado Miner|Review é filho de um flex column (#mMinerView), que por
   omissão estica os filhos. Sem isto, os dois botões ocupavam a largura toda. */
#mSecao{align-self:flex-start}
/* Seletor Miner|Review|Posts maior que o .seg normal (Erico, 27/set/2026:
   dobro do tamanho e depois 30% mais pequeno). Só aqui: o .seg continua com o
   tamanho normal nas outras vistas. Assim cabe no telemóvel sem regra própria. */
#mSecao,#mSecaoCamp{border-radius:calc(var(--radius-sm)*1.4)}
#mSecao button,#mSecaoCamp button{padding:10px 18.5px;font-size:18px;line-height:23px}
/* «Campanhas» é um segmentado à parte, ao lado e com espaço (Erico, 27/set/2026).
   No telemóvel as margens laterais encolhem para os dois caberem na mesma linha;
   num ecrã ainda mais estreito o «Campanhas» passa para baixo em vez de sair do ecrã. */
.msecrow{align-self:flex-start;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (max-width:640px){
  .msecrow{gap:10px}
  #mSecao button,#mSecaoCamp button{padding:10px 10px}
}
/* iPhone SE/mini (375px) e Androids de 360px: margens mais curtas para o «Campanhas»
   continuar ao lado. E a «Aparência» do Miner fica só com o ícone (o texto continua lá
   para leitores de ecrã): com ele, um título de uma palavra longa como «Campanhas»
   empurrava o botão do tema para fora do ecrã. */
@media (max-width:380px){
  .msecrow{gap:8px}
  #mSecao button,#mSecaoCamp button{padding:10px 7px}
  #mAparBtn{font-size:0;gap:0}
}

/* --- grelha de produtos publicados --- */
/* Coluna unica: o cartao vive na fila de topo, estreito, e os produtos enfileiram-se
   na vertical com scroll proprio (Erico, 19/ago/2026). */
.rgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:2px;
  align-content:start;   /* linhas com a altura do conteudo — nunca esticadas para encher */
  overflow-y:auto;overscroll-behavior:contain;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 24%,transparent) transparent}
.rgrid::-webkit-scrollbar{width:6px}
.rgrid::-webkit-scrollbar-track{background:transparent}
.rgrid::-webkit-scrollbar-thumb{border-radius:3px;background:color-mix(in srgb,var(--ink) 24%,transparent)}
.rgrid::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 38%,transparent)}
.rprod{display:flex;align-items:center;gap:10px;text-align:left;width:100%;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 10px;cursor:pointer;color:var(--ink);font:inherit;transition:background .14s,border-color .14s}
.rprod:hover{background:var(--surface-3);border-color:var(--line-2)}
.rprod-img{flex:0 0 auto;width:40px;height:40px;border-radius:6px;background:var(--surface-3)
  center/cover no-repeat}
.rprod-n{flex:1 1 auto;font-size:13px;line-height:1.35;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.rprod .pill{flex:0 0 auto}

/* Cartão de produto da secção Review: linha clicável em cima, barra de progresso e
   botão roxo por baixo (Erico, 19/ago/2026). O cartão é um <div> e os dois botões são
   irmãos — nunca aninhados —, por isso cada um recebe o seu clique sem truques. */
.rprod{flex-direction:column;align-items:stretch;gap:0;padding:0}
.rprod-main{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:8px 10px}
.rprod-acao{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 10px 8px}
/* 🔴 `flex-basis:0` e não `auto` (medido em QA, 24/ago/2026). A .rprod-acao é flex-wrap:wrap —
   tem de ser, porque a variante .falhou pede `flex:0 0 100%` para ocupar a linha toda. Com base
   `auto`, a base da barra é a LARGURA DO SEU TEXTO, e o texto tem white-space:nowrap: «0 de 110
   · parece encravado (~24h 47 min sem mexer)» mede ~250px, mais o botão e o gap dá 358px num
   cartão de 340px, e o browser quebra a linha ANTES de encolher. Resultado: o cartão com
   trabalho a decorrer passava de 107px para 139px, e numa grelha de 2 colunas toda a linha
   subia com ele — era o que fazia a 3.ª linha de produtos cair de fora do ecrã.
   Com base 0 a barra encolhe em vez de quebrar, o texto corta com reticências (e vai inteiro no
   title, ver .rprod-eta[title]) e todos os cartões ficam com a mesma altura. */
.rprod-prog{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.rprod-prog.vazio{visibility:hidden}
/* Falha do ciclo de avaliacoes: o cartao deixa de ficar mudo quando o job morre. Sem barra
   (nao ha progresso a mostrar), so o motivo, na cor de erro e com quebra de linha permitida —
   as mensagens do worker sao frases inteiras, nao codigos. */
/* A mensagem de falha ocupa a LARGURA TODA e empurra o botao para a linha de baixo (o
   .rprod-acao e flex-wrap). Em coluna estreita, uma frase inteira ao lado de um botao
   sobrepunha-se a ele — visto no QA visual de 22/ago, no separador Review do Verao dos Tugas. */
.rprod-prog.falhou{gap:0;flex:0 0 100%;order:2;margin-top:2px}
.rprod-prog.falhou .rprod-eta{color:var(--crit);white-space:normal;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rprod-bar{height:5px;border-radius:99px;background:var(--accent-soft);overflow:hidden}
.rprod-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;
  transition:width .3s ease}
.rprod-eta{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rprod-prog.mau .rprod-bar i{background:var(--warn,#E0A22C)}
.rprod-prog.mau .rprod-eta{color:var(--warn,#E0A22C)}
/* Progresso ainda a zero: risca viva a passear, para nao parecer parado. */
.rprod-prog.indet .rprod-bar i{width:35%!important;animation:rprodIndet 1.1s ease-in-out infinite}
@keyframes rprodIndet{0%{transform:translateX(-100%)}100%{transform:translateX(285%)}}
@media(prefers-reduced-motion:reduce){.rprod-prog.indet .rprod-bar i{animation:none}}
/* Os dois estados distinguem-se por substancia, nao por transparencia: opacity:.4 sobre
   o acento dava um roxo lavado com ar de avariado. Ativo = pilula cheia com relevo;
   desativado = superficie neutra, que se le como "ainda nao". Erico, 19/ago/2026. */
.rprod-pub,.rprod-ia{flex:0 0 auto;padding:5px 15px;font-size:11.5px;font-weight:640;
  border-radius:99px;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:.14s}
.rprod-pub:not(:disabled),.rprod-ia:not(:disabled){cursor:pointer}
.rprod-pub:not(:disabled):hover,.rprod-ia:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.26)}
.rprod-pub:not(:disabled):active,.rprod-ia:not(:disabled):active{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.rprod-pub:disabled,.rprod-ia:disabled{opacity:1;background:var(--surface-3);border-color:var(--line);
  color:var(--muted);box-shadow:none;cursor:not-allowed}
.rprod-fotos{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;padding:4px 11px;border:1px solid var(--line-2);border-radius:99px;
  background:var(--surface-3);color:var(--ink);font-size:11.5px;font-weight:640;
  cursor:pointer;user-select:none;white-space:nowrap;transition:.14s}
.rprod-fotos:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.rprod-fotos.arodar{pointer-events:none;color:var(--muted);border-color:var(--line)}
@media (prefers-reduced-motion:reduce){
  .rprod-pub,.rprod-ia,.rprod-pub:not(:disabled):hover,.rprod-ia:not(:disabled):hover,.rprod-fotos,.rprod-fotos:hover{transition:none;transform:none}
}
/* Fila de cima do cartão: o botão de abrir à esquerda, a contagem e a quantidade à
   direita. O input fica FORA do <button> — dentro dele seria HTML inválido e roubava
   o clique de abrir o detalhe. 19/ago/2026. */
.rprod-topo{display:flex;align-items:center;gap:6px;width:100%}
.rprod-topo>.rprod-main{flex:1 1 auto;min-width:0}
.rprod-meta{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding-right:10px}
.rprod-alvo{width:52px;padding:3px 4px;font-size:11.5px;font-weight:600;text-align:center;
  background:var(--surface-3);border:1px solid var(--line);border-radius:6px;color:inherit;
  font-family:inherit;-moz-appearance:textfield;appearance:textfield}
.rprod-alvo::-webkit-outer-spin-button,.rprod-alvo::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rprod-alvo:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.rprod-alvo:disabled{opacity:.5}

/* Editor de avaliação (popup) */
.redit-linha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
@media(max-width:640px){.redit-linha{grid-template-columns:minmax(0,1fr)}}
.redit-linha textarea,.redit-ta{width:100%;box-sizing:border-box;padding:9px 11px;font-size:13.5px;line-height:1.5;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:inherit;
  font-family:inherit;resize:vertical}
.redit-linha textarea:focus,.redit-ta:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.redit-orig{opacity:.72;cursor:default}
.redit-estrelas{padding:9px 11px;font-size:13.5px;background:var(--surface-3);border:1px solid var(--line);
  border-radius:8px;color:var(--muted)}
.redit-estrelas b{color:inherit;font-size:15px}
.redit-fotos{display:flex;flex-wrap:wrap;gap:8px}
.redit-foto{position:relative;width:82px;height:82px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface-3) center/cover no-repeat}
.redit-foto-b{position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;gap:2px;
  padding:3px;background:rgba(0,0,0,.55);border-radius:0 0 7px 7px}
.redit-foto-b button{border:0;background:transparent;color:#fff;font-size:12px;line-height:1;
  padding:2px 4px;cursor:pointer;border-radius:4px}
.redit-foto-b button:hover{background:rgba(255,255,255,.22)}
/* As acoes colam ao fundo do modal. Com localidade, data e fotos o corpo passou a ser
   mais alto do que o modal, e o Guardar ficava atras do scroll — o botao que se procura
   primeiro era o unico que nao se via. O -22px come o padding-bottom do .mdoc-b. */
.redit-acoes{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  position:sticky;bottom:-22px;z-index:1;margin-top:14px;padding:12px 0 10px;
  background:var(--surface);border-top:1px solid var(--line)}
.redit-acoes .hint{margin-right:auto}
/* O iOS da zoom automatico a QUALQUER campo com fonte abaixo de 16px, e o zoom desalinha
   o modal inteiro. So em ecra estreito: no desktop manda a densidade do painel. */
@media(max-width:640px){
  .redit-in,.redit-ta,.redit-linha textarea{font-size:16px}
}

/* Campos de texto do editor e do criador de avaliação — mesma pele dos textareas ao lado,
   para as duas metades da linha não parecerem de sítios diferentes. */
.redit-in{width:100%;box-sizing:border-box;padding:9px 11px;font-size:13.5px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:inherit;
  font-family:inherit}
.redit-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Aviso de que o que se guarda sai já na página do produto. Âmbar, não vermelho: é um facto
   a saber antes de carregar em Guardar, não um erro. */
.redit-aviso{margin:0 0 12px;padding:9px 11px;border-radius:8px;font-size:12.5px;line-height:1.5;
  background:var(--warn-soft);border:1px solid var(--warn);color:var(--ink)}
/* O «+» de acrescentar foto tem exatamente o tamanho das miniaturas, para a fila não saltar
   quando a primeira foto entra. */
.redit-add{position:relative;display:flex;align-items:center;justify-content:center;
  width:82px;height:82px;border-radius:8px;border:1px dashed var(--line-2);cursor:pointer;
  background:var(--surface-3);color:var(--muted);font-size:26px;line-height:1;user-select:none}
.redit-add:hover{border-color:var(--accent);color:var(--accent)}
.redit-add.arodar{opacity:.5;pointer-events:none}
/* Localidade por baixo do nome, na coluna AUTOR da tabela de avaliações recolhidas. */
.rloc{font-size:11.5px;line-height:1.3;color:var(--muted);margin-top:2px}
.rloc.falta{opacity:.6;font-style:italic}

/* Modo AUTO/MANUAL compacto, no rodapé do cartão da Loja: dois botões lado a lado
   num cartão estreito, sem os parágrafos da versão grande. */
.rmodo--mini{gap:6px;justify-content:stretch;padding:10px 0 0;margin-top:8px;
  border-top:1px solid var(--line)}
.rmodo--mini .rmodo-b{flex:1 1 0;min-width:0;padding:6px 4px;border-radius:8px;gap:0}
.rmodo--mini .rmodo-b b{font-size:10px;font-weight:700;letter-spacing:.06em}

/* --- cartão "Alvo por produto" --- */
.ralvos{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.ralvos .lbl{margin:0}
.rnum{width:74px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius-sm);padding:5px 8px;font:inherit;font-size:13px;text-align:right}
.rnum:focus{outline:none;border-color:var(--accent);background:var(--surface)}

/* --- detalhe do produto --- */
.rdet-acoes{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.rkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 4px}
.rkpis .mkpi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.rkpis .mkpi .val{font-size:22px;font-weight:680;letter-spacing:-.02em;line-height:1.2}
.rkpis .mkpi .k{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.66;margin-top:2px}

.rsec{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.rsec-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.rsec-h .lbl{margin:0}
.rsec-h .seg{margin-left:auto}

/* --- fontes de origem --- */
.rfonte-add{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.rfontes{display:flex;flex-wrap:wrap;gap:6px}
.rfonte{display:inline-flex;align-items:center;gap:5px}
.rfonte b{font-weight:680}
.rfonte-x{font-style:normal;cursor:pointer;opacity:.5;padding:0 2px;font-size:13px}
.rfonte-x:hover{opacity:1;color:var(--crit)}

/* --- tabela de candidatas --- */
/* Tabela larga rola DENTRO do cartão, nunca a página inteira. */
.tbl-wrap{overflow-x:auto;max-width:100%}
.rthumb{display:block;width:44px;height:44px;border-radius:6px;background:var(--surface-3) center/cover no-repeat}
.rtxt{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.racoes{white-space:nowrap}
.racoes .btn+.btn{margin-left:6px}

@media (max-width:900px){
  .rkpis{grid-template-columns:repeat(2,1fr)}
  .rtxt{max-width:200px}
}
@media (max-width:700px){
  /* .rgrid: as colunas passaram a ser decididas por @container mfila */
  .rfonte-add{flex-direction:column;align-items:stretch}
  .rdet-acoes{width:100%}
  .rdet-acoes .btn{flex:1}
}
@media (max-width:390px){
  .rkpis{grid-template-columns:1fr}
  .rsec-h .seg{margin-left:0;width:100%}
}

/* --- bloco de topo da Review ---
   O bloco do Miner tem cinco secções e resolve o telemóvel com scroll interno
   (.mtoprow{overflow-x:auto}). A Review só tem três, e uma delas é um <select>
   de loja: a 390px esse select ficava com 132px e cortava o nome. Aqui empilha,
   que é o que serve a leitura — o fio separador passa de vertical a horizontal
   para o bloco continuar a ler-se como UMA caixa, não como três cartões. */
/* 🔴 24/ago/2026 — larguras. Aqui estava `#rTopRow>.card{flex:1 1 240px;min-width:240px}`,
   uma regra de ID (0,1,1,0) que anulava EM SILÊNCIO o `.mtoprow>.card.mfila{flex:3.2 1 296px}`
   (0,0,2,0) da linha 897. Resultado medido a 1440px: os três cartões com 372,7px cada — a lista
   de produtos, a única coisa desta fila com conteúdo a sério, com a mesma largura de dois
   <select> que tinham 179px de vazio por baixo. Era acidente, não desenho.
   Agora o Sócio e a Loja têm largura própria e NÃO crescem (flex-grow:0): todo o espaço livre
   vai para os produtos. 200px chega para «Sua Loja Popular» inteiro no select; 176px é o chão
   de emergência, só tocado quando a fila já está em scroll horizontal — e o mínimo somado
   desce de 240x3=720 para 176+176+360=712, ou seja rola MENOS do que rolava. */
#rTopRow>.card{flex:0 1 200px;min-width:176px}
#rTopRow>.card.mfila{flex:1 1 560px;min-width:360px}

/* 🔴 Altura. O `min-height:292px` do `.mtoprow` (linha 884) foi calibrado para a fila do MINER,
   que leva cinco secções densas. A Review tem três, duas das quais são um <select> e uma frase:
   a lista ficava travada em 200px — 2 produtos de 20 — enquanto os vizinhos tinham 179px de
   nada por baixo. Aqui a altura é a da LISTA, que é o que esta fila serve.
   clamp() e não um número fixo porque o alvo são dois ecrãs reais: 1440x900 e o MacBook
   1512x982. O 51vh saiu de MEDIR, não de gosto: o .rprod mede 107px com nome de duas linhas e
   o gap é 8, logo uma linha da grelha custa 115px; para caber a 3.a linha — 6 produtos, o
   triplo dos 2 de antes — a grelha precisa de 337px e a fila de ~453. A 46vh dava 414 e ficavam
   4 produtos: duas linhas e o resto cortado. A 51vh são 459px a 1440x900 e 501px no MacBook.
   512px trava o crescimento em ecrãs grandes (num 27" o vazio dos cartões finos ia a 700px e
   nenhum device tipográfico salva isso); 360px é o chão, para portáteis de 768px.
   Não se mexe no `.mtoprow` nem no `.mfila`: são partilhados com a fila de trabalhos do
   separador Miner (miner.php:171), que não se testa nesta ida. */
/* 🔴 `align-items` explícito, e não é decoração — é o que segura tudo o resto.
   O `.mtoprow` da linha 884 já diz `stretch`, mas a linha 1689
   (`:root:not([data-miner-skin="classico"]) .mtoprow{align-items:start}`) sobrepõe-se sempre que
   o atributo NÃO estiver no <html>. E esse atributo é posto por JAVASCRIPT (layout.php:100): se
   o script falhar, chegar tarde ou alguém lhe mexer, os cartões deixam de esticar, o .mfila fica
   com a altura do seu conteúdo e o `flex:1 1 0px` da grelha resolve a ZERO — a lista de produtos
   desaparece por completo. Antes isto era inofensivo porque a .rgrid tinha max-height fixo;
   agora a altura vem daqui, e uma linha de CSS não pode depender de um script ter corrido.
   Apanhado em QA a 24/ago: sem o atributo, os cartões mediam 109/109/114 numa fila de 414 e a
   grelha 0px de altura com 2387px de conteúdo lá dentro. */
#rTopRow{align-items:stretch;min-height:clamp(360px,51vh,512px)}
/* A grelha é o corpo do cartão e absorve o que sobrar; o rodapé de contagem cola ao fundo
   sozinho. `flex:1 1 0px` e nunca `flex:1` — ver a nota da linha 1103. */
#rProdutos.rgrid{flex:1 1 0px;min-height:0}

/* 🔴 As 2 colunas são decididas pela largura do PRÓPRIO CARTÃO, não do ecrã. O ecrã não sabe se
   o cartão do Sócio está visível (só admin o vê) — o cartão sabe. E uma container query comuta
   com o zoom do browser, coisa que uma media query não faz.
   570px de content box = 281px por coluna, que é o piso a que o `.rprod` continua a ler-se:
   ~116px para o nome (2 linhas ≈ 35 caracteres), mais a miniatura de 40px, a contagem, a caixa
   da quantidade e o botão Publicar sem quebrar de linha.
   🔴 O número saiu de MEDIR e não de arredondar: com 600px, o MacBook a 1348 dava exatamente
   599px de content box e ficava numa coluna, com cartões de 595px em que a miniatura e o nome
   ficavam a 400px do botão — um cartão espalhado lê-se pior do que dois apertados. */
@container mfila (min-width:570px){
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Comprar de volta ~34px para o nome: em duas colunas o padding lateral e a caixa da
     quantidade valem mais do que o ar que lhes sobrava em coluna única. */
  .rprod-main{padding:8px 8px}
  .rprod-acao{padding:0 8px 8px}
  .rprod-meta{gap:5px;padding-right:8px}
  .rprod-alvo{width:46px}
}

/* Num grid os itens de uma linha esticam à altura do mais alto. Sem isto, o botão Publicar do
   cartão de nome curto flutuava a meio e o do vizinho ficava em baixo — duas colunas com os
   botões desalinhados. Ancorado ao fundo, cada linha tem a mesma base. */
.rprod-acao{margin-top:auto}
/* E o subtítulo deixa de poder crescer sem fim: «sem fontes · 114 por publicar» não cabe numa
   linha a 129px. Duas linhas é o teto, como já é no nome. */
.rprod-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Os cartões finos: o vazio deles passou de 372,7x172 a 200x338 — +5% de área mas −46% de
   largura, e um vazio estreito e alto lê-se como coluna enquanto um largo e baixo lê-se como
   buraco. O que eles dizem ancora ao FUNDO, com fio — a mesma gramática do .mfilafoot da Fila
   (linha 1237). Em cima o que se escolhe, em baixo o que isso dá; um cartão com topo e rodapé
   lê-se, um cartão com tudo colado em cima lê-se como cortado. */
#rTopRow>.card:not(.mfila)>*:last-child{
  margin-top:auto;padding-top:9px;border-top:1px solid var(--line)}
/* 🔵 TENTADO E REJEITADO em QA (24/ago/2026): centrar o campo no espaço livre
   (`#rTopRow>.card:not(.mfila)>.fld{margin:auto 0}`) para dividir o vazio em dois. No ecrã ficou
   pior — o rótulo «SÓCIO» ficava órfão em cima e o <select> solto a meio do nada, sem relação
   visível um com o outro. Um vazio grande abaixo de um bloco coeso lê-se melhor do que dois
   vazios pequenos à volta de um campo desgarrado. O rótulo e o campo ficam juntos, como estão. */

/* --- pesquisa dentro do cartão de Produtos ---
   Herda o `.mbusca` do Histórico de Ads (linha 1410); aqui só se ajusta a densidade, tal como
   as linhas 943-950 já fazem aos `.fld` deste bloco. Vive em linha PRÓPRIA e não dentro do
   `.card-h`: esse header é `flex-wrap` com um kicker de 9,5px, e um campo de 32px lá dentro
   fazia a altura variar com a largura, desalinhando o início do conteúdo das três secções — o
   problema que o comentário da linha 905 diz que não pode voltar. */
#rTopRow .mbusca{flex:none;min-width:0;margin-bottom:9px}
#rTopRow .mbusca input{padding:6px 30px;font-size:13.5px;border-radius:var(--radius-sm)}
#rTopRow .mbusca svg{left:10px}
/* 🔴 Placeholder a --muted OPACO. O `.fld` usa opacity:.75, que aqui daria ~3,9:1 sobre
   --surface e falhava AA; a 1 mede 6,54:1 no claro e 5,25:1 no escuro. */
#rTopRow .mbusca input::placeholder{color:var(--muted);opacity:1}
/* O x nativo do type=search não é focável por teclado, não existe no Firefox e não se pode
   etiquetar em português. Fica o nosso. */
#rTopRow .mbusca input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
#rTopRow .mbusca .rbusca-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--muted);cursor:pointer;transition:color .14s,background-color .14s}
#rTopRow .mbusca .rbusca-x:hover{color:var(--ink);background:var(--surface-3)}
#rTopRow .mbusca .rbusca-x[hidden]{display:none}
#rTopRow .mbusca input:disabled{opacity:.55;cursor:not-allowed}
/* 16px em ecrã tátil — a mesma regra anti-zoom do iOS que os .fld daqui já aplicam. A largura
   entra como segunda rede: um iPad com teclado e rato reporta `pointer:fine` e ficaria com
   13,5px, e é no ecrã estreito que o zoom automático dói. Aqui há espaço de sobra — no
   empilhamento o campo tem a largura toda do cartão. */
@media (pointer:coarse),(max-width:820px){#rTopRow .mbusca input{font-size:16px}}

/* 🔴 Estado de mensagem. A `.rgrid` É um display:grid: injetar-lhe um <span> solto punha a
   frase a ocupar meia coluna com o resto vazio ao lado — a armadilha do #mCandGrid já
   registada. Enquanto for mensagem, vira flex centrado. */
.rgrid.rgrid-msg{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:12px 16px 12px 12px}
.rgrid.rgrid-msg .hint{max-width:38ch;line-height:1.45}
/* A trocar de termo a grelha NÃO se esvazia: esbate-se e volta, para a lista não encolher nem
   o scroll saltar. Mesmo device do `.mcands.a-carregar` (linha 1287) — sem spinner novo, e o
   bloco global do prefers-reduced-motion já lhe desliga a transição. */
.rgrid.a-carregar{opacity:.45;transition:opacity .12s ease;pointer-events:none}
/* O nome com que o produto foi publicado, quando já não é o que a loja mostra e foi ele que o
   fez aparecer na pesquisa. Discreto: é uma explicação, não um dado do produto. */
.rprod-achado{display:block;font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;
  opacity:.75;color:var(--accent-2);margin-top:1px}

@media (max-width:820px){
  #rTopRow{flex-direction:column;overflow-x:visible;min-height:0}
  /* 🔴 O `.mfila` tem de vir explícito: `#rTopRow>.card` é (0,1,1,0) e
     `#rTopRow>.card.mfila{min-width:360px}` é (0,1,2,0) — sem esta linha o mínimo de 360px
     sobrevivia ao empilhamento e, num ecrã de 390px com 32px de padding na .view, os cartões
     ficavam 2px mais largos do que o espaço e a PÁGINA INTEIRA passava a rolar na horizontal.
     Apanhado em QA a 390x844. */
  #rTopRow>.card,
  #rTopRow>.card.mfila{min-width:0;flex:1 1 auto}
  #rTopRow>.card+.card{border-left:0;border-top:1px solid var(--line)}
  /* 🔴 Empilhados, os cartões não têm altura definida. Com `flex:1 1 0px` a base 0 não é
     recuperada por grow nenhum e a LISTA DESAPARECE por completo no telemóvel — a armadilha da
     linha 1103, ao contrário. Aqui a altura volta a ser explícita. */
  #rProdutos.rgrid{flex:none;max-height:min(58vh,420px)}
  /* Sem vazio para preencher, o rodapé ancorado deixa de fazer sentido. */
  #rTopRow>.card:not(.mfila)>*:last-child{margin-top:0;padding-top:0;border-top:0}
}

/* Segunda linha do cartão de produto: fontes mapeadas e recolhidas por publicar.
   Vive dentro do nome para o clamp de 2 linhas do nome não a cortar. */
.rprod-n{display:flex;flex-direction:column;gap:2px;-webkit-line-clamp:unset}
.rprod-sub{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.55}
/* Nome cortado em 2 linhas: com a contagem e a quantidade a ocupar a direita, um titulo
   longo esticava o cartao para 4 linhas e a lista (200px, com scroll) mostrava pouco
   mais de um produto. 19/ago/2026. */
.rprod-nome{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Saldo das chaves do sócio escolhido, no cartão «Sócio» da Review.
   Rótulo à esquerda e valor à direita alinhados pela BASELINE — o mesmo
   princípio do cartão de API do Miner, que é o que faz o número ler-se. */
.rsaldo{display:flex;flex-direction:column;gap:2px;margin-top:8px}

/* ===== Review — escolha de modo AUTOMÁTICO / MANUAL (ordem do Erico, 18/ago/2026) =====
   Dois botões grandes no centro do cartão do produto selecionado: AUTOMÁTICO é um só
   clique (gera+publica); MANUAL abre o desenho de sempre (fontes → recolha → QA). */
.rmodo{display:flex;gap:18px;justify-content:center;align-items:stretch;padding:30px 8px 26px}
.rmodo-b{flex:0 1 340px;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 22px;border-radius:16px;cursor:pointer;text-align:center;
  border:2px solid var(--line);background:var(--surface);color:var(--ink);
  transition:transform .12s cubic-bezier(.23,1,.32,1),border-color .14s,background .14s,box-shadow .14s}
.rmodo-b b{font-size:21px;font-weight:800;letter-spacing:.04em}
.rmodo-b span{font-size:12.5px;line-height:1.45;color:var(--muted)}
.rmodo-b.auto{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.rmodo-b.auto span{color:color-mix(in srgb,var(--accent-ink) 80%,transparent)}
@media (hover:hover) and (pointer:fine){
  .rmodo-b.auto:hover{box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 32%,transparent);transform:translateY(-1px)}
  .rmodo-b.manual:hover{border-color:var(--accent);color:var(--accent)}
}
.rmodo-b:active{transform:scale(.98)}
.rmodo-b:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.rmodo-b.manual.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.rmodo-b.correndo b::after{content:'';display:inline-block;width:14px;height:14px;margin-left:10px;
  border:2px solid color-mix(in srgb,var(--accent-ink) 35%,transparent);border-top-color:var(--accent-ink);
  border-radius:50%;animation:rauto-spin .8s linear infinite;vertical-align:-2px}
@keyframes rauto-spin{to{transform:rotate(360deg)}}

#rAutoBox{margin:4px 0 2px;padding:18px 4px 6px}
.rauto-estado{font-size:15px;font-weight:600;text-align:center}
.rauto-bar{height:10px;border-radius:99px;background:var(--accent-soft);margin:12px auto 8px;max-width:520px;overflow:hidden}
.rauto-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .3s ease}
.rauto-nota{text-align:center;font-size:12px;color:var(--muted)}

@media (max-width:640px){
  .rmodo{flex-direction:column;padding:18px 2px}
  .rmodo-b{flex:1 1 auto;width:100%}
}
.rsaldo-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rsaldo-l span{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.66}
.rsaldo-l b{font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rsaldo-n{font-size:10.5px;opacity:.5;line-height:1.3;margin:-1px 0 5px}

/* Saldo em falta ou quase esgotado: o QA e a tradução param sem ele. */
.rsaldo-l b.mau{color:var(--crit)}

/* ===== Posts — publicações dos anúncios do miner (?v=miner, botão "Posts") =====
   Vocabulário do Nocturne outra vez: .card/.btn/.pill/.tbl/.note/.hint/.lbl/.rsec já
   existem e não se duplicam aqui. Isto é só o que a secção acrescenta, com prefixo `p`
   próprio — 🔴 nada de mexer em .mcand (grelha de candidatos) nem em .rprod (Review),
   que partiria as duas secções que já funcionam em produção.
   A grelha herda .mcands tal e qual: 5 colunas → 4 @1500 → 3 @1180 → 1 @700. */

/* Valor grande dos cartões do topo. `.nl` = valor não lido, nunca um zero inventado. */
.pval{font-size:24px;font-weight:680;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums}
.pval.pval-sm{font-size:15.5px;font-weight:640;letter-spacing:-.01em}
.pval.nl{color:var(--muted)}
.btn.pfull{width:100%;justify-content:center;margin-top:9px}
/* Sem cartão de sócio à esquerda não há nada que justifique o fio vertical — mesma
   correcção que o #mSociosCard já tem no bloco de topo do Miner. */
#pTopRow:not(.has-socios)>#pSocioCard+.card{border-left:0}

/* --- cartão de publicação --- */
.ppost{overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius)}
.ppost .pmed{position:relative;width:100%;aspect-ratio:4/5;background:var(--surface-3);
  display:grid;place-items:center;color:var(--faint)}
.ppost .pmed .thimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ppost .pbd{padding:11px 13px 13px;display:flex;flex-direction:column;gap:8px;flex:1}
.ppost .ppills{display:flex;flex-wrap:wrap;gap:5px}
/* Nome REAL da campanha na Meta, por cima do titulo do produto (Erico, 20/ago/2026).
   Monoespacado e em tom de acento: le-se como identificador do Gestor de Anuncios, nao
   compete com o nome do produto, que continua a ser o titulo do cartao. */
.ppost .pcamp{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.01em;
  color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:-4px}
.ppost .pnome{font-size:14px;font-weight:600;line-height:1.32;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ppost .pdata{font-size:11.5px;color:var(--muted)}
/* Faixa de contadores — anatomia do .mcinfo: células iguais divididas por um fio de 1px. */
.ppost .pmetrics{display:flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.ppost .pmetrics>div{flex:1;min-width:0;padding:7px 6px;text-align:center}
.ppost .pmetrics>div+div{border-left:1px solid var(--line)}
.ppost .pmetrics b{display:block;font-size:16px;font-weight:680;line-height:1.2;
  font-variant-numeric:tabular-nums}
.ppost .pmetrics b.nl{color:var(--muted);font-weight:600}
/* Minúsculas e sem tracking: "COMENTÁRIOS" em versalete não cabe numa célula de ~64px
   (5 colunas a 1600px) e encostava ao fio da vizinha. Reticências como última rede. */
.ppost .pmetrics span{display:block;font-size:9.5px;letter-spacing:0;color:var(--faint);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* No lugar dos contadores, quando não há contadores: o motivo real, nunca um zero. */
.ppost .pfalha{font-size:11.5px;line-height:1.4;color:var(--warn);background:var(--warn-soft);
  border-radius:var(--radius-sm);padding:8px 10px}
.ppost .pfalha.espera{color:var(--muted);background:var(--surface-3)}
.ppost .psrc{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:12px;color:var(--muted);text-decoration:none;transition:.14s}
.ppost .psrc:hover{border-color:var(--accent);color:var(--accent)}
.ppost .psrc svg{flex:none;margin-left:auto}
.ppost .btn{margin-top:auto;justify-content:center;width:100%}

/* --- detalhe: rodapé de acções (irmão do .redit-acoes da Review, não o mesmo: mexer
       naquele mudaria o editor de avaliações, que já está em produção) --- */
.pacoes{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
.pacoes .hint{margin-right:auto;margin-top:0}
.psec-1{border-top:0;margin-top:4px;padding-top:0}
.pmono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px}

/* --- detalhe: os 10 comentários, editáveis antes de sair nada --- */
.pcoms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:8px 0}
.pcom{display:flex;align-items:flex-start;gap:8px}
.pcom-n{flex:none;width:18px;text-align:right;font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;padding-top:9px}
.pcom textarea{flex:1;min-width:0;box-sizing:border-box;padding:7px 10px;font-size:13.5px;
  line-height:1.4;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  color:inherit;font-family:inherit;resize:vertical}
.pcom textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pcom.fixo textarea{border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.pcom .pill{flex:none;margin-top:7px}

/* --- detalhe: lotes já encomendados --- */
.plote{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin-top:10px}
.plote+.plote{margin-top:8px}
.plote-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.plote .pacoes{margin-top:8px}

/* --- detalhe: comentários com foto --- */
.pfotos{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px}
.pfoto{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface-2)}
.pfoto-img{position:relative;flex:none;width:76px;height:76px;border-radius:8px;overflow:hidden;
  background:var(--surface-3);display:grid;place-items:center;color:var(--faint)}
.pfoto-img .thimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pfoto-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pfoto-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pfoto-bd textarea{width:100%;box-sizing:border-box;padding:8px 10px;font-size:13.5px;line-height:1.45;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;color:inherit;
  font-family:inherit;resize:vertical}
.pfoto-bd textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pfoto-bd details{font-size:11.5px;color:var(--muted);line-height:1.45}
.pfoto-bd summary{cursor:pointer;color:var(--accent)}

/* Numa coluna, um comentário como «esse artigo e espetacula, mesmo bom.» passa a duas
   linhas e a caixa de uma linha cortava-o a meio. */
@media (max-width:1180px){
  .pcoms{grid-template-columns:minmax(0,1fr)}
  .pcom textarea{min-height:50px}
}
@media (max-width:700px){
  .pfoto{flex-direction:column}
  .pfoto-img{width:100%;height:160px}
  .pacoes .btn{flex:1 1 auto}
  #pDetalhe .rdet-acoes{width:100%}
  #pDetalhe .rdet-acoes .btn{flex:1}
}
/* A linha de topo do Miner tem min-height:292px porque leva cinco secções densas (a fila
   de produção enche-a). A de Posts tem três cartões curtos: com a mesma altura ficavam
   200px de vazio por baixo do saldo. Só aqui, e sem tocar no #rTopRow da Review. */
#pTopRow{min-height:0}

/* ── Grelha das imagens encontradas ──────────────────────────────────────────────────
   auto-fill com minmax: enche a largura que houver e cai para menos colunas sozinha, sem
   media queries a adivinhar pontos de corte. A 390px dá uma coluna. */
.rfotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.rfoto{margin:0;display:flex;flex-direction:column;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  transition:border-color .14s}
/* A cor da moldura é o estado: verde aprovada, vermelha reprovada, neutra por decidir.
   Quem varre a grelha com os olhos vê o que falta decidir sem ler uma palavra. */
.rfoto.ok{border-color:var(--good,#3E9B72)}
.rfoto.crit{border-color:var(--crit)}
.rfoto.mut:hover{border-color:var(--line-2)}
/* 4:3 e `contain`: uma foto de comprador vem em qualquer proporção e cortar ao meio
   escondia justamente o que é preciso ver para decidir. Fundo escuro para as verticais. */
.rfoto-img{display:block;width:100%;aspect-ratio:4/3;background:var(--surface-3) center/contain no-repeat}
.rfoto-cap{display:flex;flex-direction:column;gap:5px;padding:8px 9px}
.rfoto-l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rfoto-est{font-size:11px;font-weight:600;color:var(--ink)}
/* A origem por confirmar é o aviso mais importante do cartão: uma foto boa de um artigo
   errado continua a ser um artigo errado. Fica na cor de atenção, sempre visível. */
.rfoto-insp{font-size:10.5px;font-weight:600;color:var(--warn,#E0A22C);line-height:1.3}
.rfoto-motivo{font-size:10.5px;color:var(--muted);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rfoto-meta{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rfoto-acoes{display:flex;gap:6px;margin-top:2px}
.rfoto-acoes .btn{flex:1 1 auto;padding:4px 8px;font-size:11px}
.rfoto-acoes .btn:disabled{opacity:1;background:var(--surface-3);border-color:var(--line);
  color:var(--muted);cursor:not-allowed}
@media(max-width:420px){
  .rfotos-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── Posts › prova social num link colado à mão (Erico, 05/set/2026) ──────────
   O cartão vive à largura toda por cima da grelha das publicações: é a primeira
   coisa que se vê ao entrar em Posts, porque é a acção que se vem cá fazer. */
.plink .plink-form{display:flex;gap:10px;align-items:center;margin-top:2px}
.plink .plink-form .fld{flex:1;min-width:0}
.plink .plink-form .btn{flex:none;white-space:nowrap}
.plink .plink-of{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:11px 0 10px}
.plink .note{margin-top:0}
.plink-coms{margin:12px 0 0;padding-left:24px;columns:2;column-gap:24px;
  font-size:12.5px;line-height:1.75;color:var(--muted)}
.plink-coms li{break-inside:avoid}
.plink-url{font-family:var(--mono);font-size:11.5px;color:var(--accent);text-decoration:none;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plink-url:hover{text-decoration:underline}
.plink #pLinkHist .plote:first-child{margin-top:14px}

/* --- histórico: cartão minimizado, abre ao clicar (Erico, 08/set/2026) ---
   O cabeçalho é a linha que decide (estado, link, quando, quem, quanto) e fica sempre
   visível; a tabela dos order IDs é o detalhe e nasce fechada. */
/* 🔴 nowrap é o que mantém o cartão fechado com UMA linha: com flex-wrap:wrap o algoritmo
   quebra a linha ANTES de deixar o URL encolher, e um permalink de 180 caracteres crescia
   o cartão de 46px para 109px. Em ecrã estreito volta a wrap (ver o media query). */
.plote.pfold>.plote-h{cursor:pointer;margin-bottom:0;padding:1px 0;border-radius:6px;
  flex-wrap:nowrap;-webkit-user-select:none;user-select:none}
/* Só o URL encolhe; o estado e o «quando · quem · quanto» nunca se cortam. */
.plote.pfold>.plote-h>.pill,
.plote.pfold>.plote-h>.hint{flex:none}
.plote.pfold.aberto>.plote-h{margin-bottom:8px}
.plote.pfold>.plote-h:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.plote.pfold>.plote-bd{display:none}
.plote.pfold.aberto>.plote-bd{display:block}
/* O URL no cabeçalho é texto, não link: a barra inteira é «abrir/fechar». Fica mono e
   discreto para não prometer um clique que já não faz. */
/* min-width:0 é o que faz o URL ENCOLHER com reticências em vez de quebrar o cabeçalho
   em duas linhas — um permalink.php de 180 caracteres partia a lista ao meio. */
.plote.pfold>.plote-h span.plink-url{color:var(--muted);cursor:inherit;flex:0 1 auto;min-width:0}
/* Alvo dedicado para abrir a publicação — 26px, ao lado da seta, com o seu próprio cursor. */
.pfold-ir{order:98;margin-left:auto;flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:26px;height:26px;border-radius:6px;color:var(--faint);
  text-decoration:none;font-size:13px;line-height:1;transition:background .14s ease,color .14s ease}
.pfold-ir:hover{background:var(--surface-2);color:var(--accent);text-decoration:none}
.pfold-ir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Seta: order alto para ficar no fim mesmo quando o cabeçalho quebra em duas linhas. */
.pfold-ch{order:99;flex:none;color:var(--muted);font-size:15px;line-height:1;width:16px;
  text-align:center;transition:transform .16s ease,color .16s ease}
.plote.pfold.aberto .pfold-ch{transform:rotate(90deg);color:var(--accent)}
.plote.pfold>.plote-h:hover .pfold-ch{color:var(--accent)}
/* Fechado, o cartão é uma linha: menos respiro vertical do que quando está aberto. */
.plote.pfold:not(.aberto){padding:8px 12px}
@media (prefers-reduced-motion:reduce){ .pfold-ch{transition:none} }
/* Ecrã estreito: já não cabe tudo numa linha, por isso volta a quebrar — e aí o URL
   ocupa a sua própria linha, com reticências no fim. */
@media (max-width:720px){
  .plote.pfold>.plote-h{flex-wrap:wrap;gap:6px 10px}
  /* Duas linhas, não três: em cima o que decide (estado · quando · quem · quanto),
     em baixo o URL truncado com os dois alvos ao lado. */
  .plote.pfold>.plote-h span.plink-url{order:50;flex:1 1 60%;max-width:100%}
  .pfold-ir{margin-left:auto}
}
@media(max-width:720px){
  .plink .plink-form{flex-direction:column;align-items:stretch}
  .plink-coms{columns:1}
}

/* Player de embed do YouTube no cartão do Miner: ocupa o mesmo
   espaço que o <video>/<img> da media. */
.med-yt{display:block;width:100%;border:0;background:#000;aspect-ratio:9/16}

/* Embed do TikTok no cartão do Miner. */
.med-tt{display:block;width:100%;border:0;background:#000;aspect-ratio:9/16}

/* ── Anel de carregamento sobre a grelha (pedido da Lorena, 23/set/2026) ─────────
   "às vezes demora carregar e não temos visualmente e achamos que travou".
   O esbatimento a 0.45 que já existia é ambíguo — parece um painel inerte. O anel
   diz que há trabalho em curso.

   Aparece só ao fim de 400ms: abaixo disso a resposta já chegou, e um anel que
   pisca por um instante lê-se como falha, não como progresso.
   `position:sticky` mantém-no à vista com a grelha grande e o scroll a meio. */
.mcands{position:relative}
.mcands.a-carregar::after{
  /* `grid-column:1/-1` em vez de `margin:auto`: a .mcands é uma grelha, e nela o auto
     só centra dentro da própria célula — o anel ficava encostado à direita, na coluna
     onde calhasse. Ocupando a fila toda, centra-se na grelha inteira. */
  content:"";position:sticky;top:45vh;grid-column:1/-1;justify-self:center;
  display:block;width:38px;height:38px;margin:24px auto;
  border:3px solid color-mix(in srgb,var(--ink) 16%,transparent);
  border-top-color:var(--brand,#f97316);
  border-radius:50%;
  animation:mgira .7s linear infinite, mAparece .18s ease-out .4s both;
  z-index:4;pointer-events:none}
@keyframes mgira{to{transform:rotate(360deg)}}
@keyframes mAparece{from{opacity:0}to{opacity:1}}
/* Movimento reduzido: deixa de girar, continua visível — quem pede menos movimento
   não está a pedir menos informação. */
@media (prefers-reduced-motion:reduce){
  .mcands.a-carregar::after{animation:mAparece .18s ease-out .4s both}
}

/* ── Resumo do que está ligado (23/set/2026) ─────────────────────────────────
   Faixa por baixo das filas, com uma etiqueta por filtro ativo e a contagem de
   resultados à direita. Fundo `--accent-soft` para se ler como consequência das
   escolhas acima, e não como mais uma fila de filtros. */
.mfresumo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding:11px 14px;border-radius:10px;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.mfres-t{flex:none;font-size:12px;font-weight:640;color:var(--accent-300)}
.mfres-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.mfres-n{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* A etiqueta é um botão: clicar desliga AQUELE filtro. O ✕ não é um ícone decorativo
   ao lado — é a própria etiqueta que age, para o alvo de clique ser o rótulo inteiro. */
.mfres-tag{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;
  border-radius:999px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-size:12px;font-family:inherit;cursor:pointer;
  transition:border-color .12s,color .12s}
.mfres-tag svg{color:var(--faint);flex:none;transition:color .12s}
.mfres-tag:hover{border-color:var(--crit);color:var(--crit)}
.mfres-tag:hover svg{color:var(--crit)}
@media (max-width:640px){
  .mfres-n{margin-left:0;width:100%}
}

/* ── Menu com filtro ativo ───────────────────────────────────────────────────
   Um dropdown a filtrar tem de se distinguir de um em "Todos" — sem isto, a única
   pista é ler o valor de cada um. Mesma cor do resumo: é o mesmo conceito de "ligado". */
.mdd.tem-filtro > .mdd-b{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent-300)}
.mdd.tem-filtro > .mdd-b .mdd-l{color:color-mix(in srgb,var(--accent-300) 72%,transparent)}
.mdd.tem-filtro > .mdd-b .mdd-v{color:var(--accent-300)}

/* ===== Campanhas (?v=miner&sec=campanhas) — Erico, 27/set/2026 =====
   Ver as contas de cada sócio (ativas / bloqueadas) e as campanhas de uma conta sem abrir o
   Gerenciador de Anúncios. Linguagem visual da referência que o Erico mandou: pills, faixa de
   contas com scroll lateral, tabela protagonista, cor só para estado, seleção e ação principal.
   Segue o tema do painel (claro/escuro); o LARANJA é só desta secção (decisão do Erico). */
:root{--camp-acc:#B8570B;--camp-acc-ink:#FFFFFF;--camp-acc-soft:rgba(234,120,20,.10);--camp-acc-line:rgba(184,87,11,.55)}
@media (prefers-color-scheme:dark){
  :root{--camp-acc:#F0A04B;--camp-acc-ink:#1A1B24;--camp-acc-soft:rgba(240,160,75,.13);--camp-acc-line:rgba(240,160,75,.62)}
}
:root[data-theme="light"]{--camp-acc:#B8570B;--camp-acc-ink:#FFFFFF;--camp-acc-soft:rgba(234,120,20,.10);--camp-acc-line:rgba(184,87,11,.55)}
:root[data-theme="dark"]{--camp-acc:#F0A04B;--camp-acc-ink:#1A1B24;--camp-acc-soft:rgba(240,160,75,.13);--camp-acc-line:rgba(240,160,75,.62)}

.camp{display:flex;flex-direction:column;gap:14px;min-width:0}
.camp :is(button,input){font-family:inherit}
.camp :is(.camp-pill,.camp-conta,.camp-ic,.camp-grp button,.camp-datas,.camp-pg,.camp-th,.camp-btn-acc):focus-visible{
  outline:2px solid var(--camp-acc);outline-offset:2px}

/* topo: sócios, «atualizado» e as duas filas de contas — tudo num card (Erico, 27/set) */
.camp-cab{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px 10px;box-shadow:var(--shadow);min-width:0}
.camp-cab .camp-contas{border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent);padding-top:12px}
/* topo: sócios + «atualizado» */
.camp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.camp-socios{display:flex;gap:8px;flex-wrap:wrap}
.camp-pill{height:34px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:13px;font-weight:560;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.camp-pill:hover{border-color:var(--line-2)}
.camp-pill.on{border-color:var(--camp-acc-line);background:var(--camp-acc-soft);color:var(--camp-acc)}
.camp-upd{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.camp-ic{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);cursor:pointer}
.camp-ic:hover{color:var(--ink);border-color:var(--line-2)}
.camp-ic:disabled{opacity:.45;cursor:default}

/* faixa de contas: ativas | bloqueadas, com scroll lateral discreto */
.camp-contas{display:flex;flex-direction:column;gap:8px;min-width:0}
/* Uma fila por grupo, cada uma com o seu scroll: numa só fila, com 25 ativas, as bloqueadas
   ficavam fora do ecrã e nem se percebia que existiam. */
.camp-grupo{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;min-width:0}
.camp-grupo-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:640;white-space:nowrap}
.camp-grupo-h b{color:var(--muted);font-weight:640;margin-left:3px}
.camp-grupo-l{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;scroll-snap-type:x proximity}
.camp-grupo-vazio{font-size:12px;color:var(--faint);padding:10px 0}
.camp-conta{display:flex;align-items:center;gap:10px;flex:none;min-width:200px;max-width:320px;padding:9px 14px;
  border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;
  cursor:pointer;scroll-snap-align:start;transition:border-color .15s,background-color .15s}
.camp-conta:hover{border-color:var(--line-2)}
.camp-conta.on{border-color:var(--camp-acc-line);background:var(--camp-acc-soft)}
.camp-conta-t{display:flex;flex-direction:column;min-width:0}
.camp-conta-n{font-size:12.5px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-conta-s{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-vazio-l{font-size:12.5px;color:var(--muted);padding:10px 0}

/* secção da tabela */
.camp-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 12px;
  box-shadow:var(--shadow);min-width:0}
.camp-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.camp-tit-w{min-width:0}
.camp-tit{margin:0;font-size:16px;font-weight:660;letter-spacing:-.01em;overflow-wrap:anywhere}
.camp-sub{display:flex;align-items:center;column-gap:12px;row-gap:2px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px}
.camp-sub-meta{white-space:nowrap}
.camp-est{display:inline-flex;align-items:center;gap:6px;font-weight:560}
.camp-est.ok{color:var(--ok)} .camp-est.crit{color:var(--crit)}
.camp-fil{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.camp-grp{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.camp-grp button{height:28px;padding:0 11px;border:0;border-radius:7px;background:none;color:var(--muted);
  font-size:12.5px;font-weight:560;cursor:pointer;white-space:nowrap}
.camp-grp button:hover{color:var(--ink)}
.camp-grp button.on{background:var(--surface);color:var(--camp-acc);box-shadow:0 0 0 1px var(--camp-acc-line)}
.camp-datas-w{position:relative}
.camp-datas{height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:560;cursor:pointer;white-space:nowrap}
.camp-datas:hover{color:var(--ink)}
.camp-datas.on{color:var(--camp-acc);border-color:var(--camp-acc-line)}
.camp-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:10px;padding:14px;width:240px;
  border-radius:12px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-lg)}
.camp-pop[hidden]{display:none}
.camp-pop label{display:grid;gap:4px;font-size:11.5px;color:var(--muted)}
.camp-pop input{height:34px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);font-size:13px;color-scheme:light dark}
.camp-pop-msg:empty{display:none}
.camp-pop-msg{font-size:11.5px;color:var(--crit)}
.camp-btn-acc{height:34px;border-radius:8px;border:0;background:var(--camp-acc);color:var(--camp-acc-ink);font-size:13px;font-weight:640;cursor:pointer}
.camp-busca{height:36px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--faint);width:230px}
.camp-busca:focus-within{border-color:var(--camp-acc-line)}
.camp-busca input{border:0;background:none;outline:none;color:var(--ink);font-size:13px;width:100%;min-width:0}
.camp-busca input::placeholder{color:var(--faint)}
.camp-aviso{margin:-4px 0 12px;font-size:12px;color:var(--warn);background:var(--warn-soft);padding:8px 12px;border-radius:8px}
.camp-aviso[hidden]{display:none}

/* tabela: protagonista, números à direita e tabulares, poucos fios */
.camp-tw{overflow-x:auto;margin:0 -18px;padding:0 18px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.camp-tbl{width:100%;min-width:1080px;border-collapse:separate;border-spacing:0;font-size:13px}
/* ROI e lucro do dashboard Jarvis ROI: pastilhas com fundo para se distinguirem do resto
   (verde = ganho; vermelho = perda — uma perda nunca aparece a verde). */
.camp-met{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font-weight:680;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.camp-met.ok{color:var(--ok);background:var(--ok-soft)}
.camp-met.crit{color:var(--crit);background:var(--crit-soft)}
/* As colunas de números encolhem ao conteúdo; o nome fica com o resto e parte em 2 linhas. */
.camp-tbl :is(th,td):not(.camp-c-nome){width:1%;white-space:nowrap}
.camp-tbl th{text-align:left;padding:10px 12px;font-size:11.5px;font-weight:620;color:var(--faint);white-space:nowrap;
  border-bottom:1px solid var(--line);background:var(--surface)}
.camp-tbl th.num{text-align:left}
.camp-th{all:unset;display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:inherit;border-radius:4px}
.camp-th:hover{color:var(--ink)}
.camp-th svg{opacity:.4;flex:none}
.camp-tbl th[aria-sort="ascending"] .camp-th,.camp-tbl th[aria-sort="descending"] .camp-th{color:var(--camp-acc)}
.camp-tbl th[aria-sort="ascending"] .camp-th svg,.camp-tbl th[aria-sort="descending"] .camp-th svg{opacity:1}
.camp-tbl td{padding:12px;border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);vertical-align:middle;background:var(--surface)}
.camp-tbl tbody tr:last-child td{border-bottom:0}
.camp-tbl tbody tr:not(.camp-tr-vazio):hover td{background:color-mix(in srgb,var(--ink) 3%,var(--surface))}
.camp-tbl .num{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Colunas repartidas pela largura toda, dados da esquerda para a direita (Erico, 27/set): antes o
   nome ficava com todo o espaço que sobrava e os números iam colados à direita. */
@media (min-width:901px){
  .camp-tbl{table-layout:fixed}
  .camp-tbl thead th.camp-c-est{width:9%}
  .camp-tbl thead th[data-col="nome"]{width:22%}
  .camp-tbl thead th[data-col="veic"]{width:10%}
  .camp-tbl thead th[data-col="res"]{width:8%}
  .camp-tbl thead th[data-col="cpr"]{width:11%}
  .camp-tbl thead th[data-col="orc"]{width:9%}
  .camp-tbl thead th[data-col="gasto"]{width:10%}
  .camp-tbl thead th[data-col="roi"]{width:8%}
  .camp-tbl thead th[data-col="lucro"]{width:13%}   /* a pastilha do lucro (ex.: «R$ -10.492,11») cabia cortada a 11% */
  .camp-tbl td:last-child{padding-right:8px}
  .camp-tbl.com-sel thead th.camp-c-sel{width:4%}
  .camp-tbl.com-sel thead th[data-col="nome"]{width:18%}
  .camp-tbl td{overflow:hidden;text-overflow:ellipsis}
}
.camp-tbl .camp-c-est{width:104px;min-width:104px;max-width:104px;box-sizing:border-box}
.camp-tbl td.camp-c-est{padding-left:10px;padding-right:4px;text-overflow:clip}
/* «Conta bloqueada» e «produto · N campanhas» partem em 2 linhas em vez de ficarem cortados */
.camp-tbl td .camp-veic{white-space:normal;align-items:flex-start;line-height:1.35}
.camp-tbl td .camp-veic .dot{margin-top:5px;flex:none}
.camp-tbl td .camp-meta-w{white-space:normal;line-height:1.3}
/* Seleção (Erico, 27/set noite): caixa no começo de cada campanha, só nas contas bloqueadas */
.camp-tbl:not(.com-sel) .camp-c-sel{display:none}
.camp-tbl .camp-c-sel{padding:0 2px 0 8px;width:44px;min-width:44px;max-width:44px;box-sizing:border-box}
.camp-chk-w{display:grid;place-items:center;width:32px;height:32px;margin:-4px 0;border-radius:8px;cursor:pointer}
.camp-chk-w:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.camp-chk-w input{width:16px;height:16px;margin:0;accent-color:var(--camp-acc);cursor:pointer}
.camp-chk-w:has(input:focus-visible){outline:2px solid var(--camp-acc);outline-offset:1px}
.camp-chk-w:has(input:disabled){opacity:.4;cursor:default}
/* opaco (e não translúcido) porque no telemóvel as primeiras colunas ficam presas por cima das outras */
.camp-tbl tbody tr.sel td,.camp-tbl tbody tr.sel:hover td{background:color-mix(in srgb,var(--camp-acc) 7%,var(--surface))}
.camp-selbar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 0;
  padding:10px 10px 10px 16px;border-radius:12px;border:1px solid var(--camp-acc-line);
  background:color-mix(in srgb,var(--camp-acc) 6%,var(--surface));box-shadow:var(--shadow-lg);font-size:13px}
.camp-selbar[hidden]{display:none}
.camp-selbar-t{flex:1;min-width:0;color:var(--muted)}
.camp-selbar-t b{color:var(--camp-acc)}
.camp-selbar .camp-btn-acc{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;white-space:nowrap;justify-content:center}
.camp-lnk{all:unset;cursor:pointer;color:var(--muted);font-size:12.5px;font-weight:600;border-radius:4px;white-space:nowrap}
.camp-lnk:hover{color:var(--ink)}
.camp-lnk:focus-visible{outline:2px solid var(--camp-acc);outline-offset:2px}
.camp-nome{font-weight:600;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;line-height:1.35}
.camp-meta{font-size:11.5px;color:var(--faint);margin-top:2px}
.camp-gasto{font-weight:660}
.camp-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;
  font-weight:600;color:var(--muted);background:var(--surface-3);white-space:nowrap}
.camp-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.camp-chip.on{color:var(--ok);background:var(--ok-soft)}
.camp-chip.on::before{background:var(--ok-dot)}
.camp-veic{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.camp-tr-vazio td{padding:44px 12px;text-align:center;color:var(--muted)}
.camp-spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--camp-acc);animation:campGira .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes campGira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.camp-spin{animation-duration:2.4s}}
.camp-rod{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0 2px;
  font-size:12.5px;color:var(--muted)}
.camp-n b{color:var(--ink)}
.camp-fx{margin-left:10px;color:var(--faint);font-size:11.5px}
.camp-pag{display:flex;gap:4px;flex-wrap:wrap}
.camp-pg{min-width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  cursor:pointer;font-size:12.5px}
.camp-pg.on{border-color:var(--camp-acc-line);color:var(--camp-acc);background:var(--camp-acc-soft)}
.camp-pg:disabled{opacity:.4;cursor:default}

@media (max-width:900px){
  .camp-sec{padding:14px 14px 10px}
  .camp-tw{margin:0 -14px;padding:0 14px}
  .camp-sec-h{align-items:stretch}
  .camp-fil{width:100%}
  .camp-busca{flex:1 1 100%;width:auto}
  /* 6 períodos não cabem num telemóvel: o grupo desliza para o lado em vez de alargar a página */
  #campPer{max-width:100%;overflow-x:auto;scrollbar-width:none}
  #campPer::-webkit-scrollbar{display:none}
  #campPer button{flex:none}
  .camp-busca input,.camp-pop input{font-size:16px}   /* iOS: menos de 16px faz zoom automático */
  .camp-grupo{grid-template-columns:minmax(0,1fr);gap:6px}
  .camp-conta{min-width:180px}
  /* Estado e Campanha ficam presos à esquerda enquanto os números deslizam */
  .camp-tbl .camp-c-est{position:sticky;left:0;z-index:1}
  .camp-tbl .camp-c-nome{position:sticky;left:104px;z-index:1;min-width:170px;max-width:170px;box-shadow:6px 0 8px -8px rgba(0,0,0,.35)}
  /* Com a seleção, ficam presas a caixa e a Campanha; o Estado desliza (numa conta bloqueada diz pouco) */
  .camp-tbl.com-sel .camp-c-sel{position:sticky;left:0;z-index:1}
  .camp-tbl.com-sel .camp-c-est{position:static}
  .camp-tbl.com-sel .camp-c-nome{left:44px}
  .camp-selbar{bottom:8px;gap:10px}
  .camp-selbar-t{flex:1 1 100%}
  .camp-selbar .camp-btn-acc{flex:1}
  .camp-selbar .camp-btn-acc svg{display:none}
  .camp-fx{display:block;margin:4px 0 0}
}

/* ações por linha: espaço reservado (a linha não muda de altura); aparecem com o rato ou o
   teclado, e ficam sempre visíveis em ecrãs táteis */
.camp-acoes{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:3px;margin-top:6px;opacity:0;transition:opacity .12s}
.camp-tbl tbody tr:hover .camp-acoes,.camp-tbl tbody tr:focus-within .camp-acoes{opacity:1}
@media (hover:none){.camp-acoes{opacity:1}}
.camp-acoes button{all:unset;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:560;color:var(--muted);cursor:pointer;border-radius:4px}
.camp-acoes button:hover{color:var(--camp-acc)}
.camp-acoes button:focus-visible{outline:2px solid var(--camp-acc);outline-offset:2px}

/* gaveta lateral */
:root{--camp-graf:#B8570B}
@media (prefers-color-scheme:dark){:root{--camp-graf:#CF7A26}}
:root[data-theme="light"]{--camp-graf:#B8570B}
:root[data-theme="dark"]{--camp-graf:#CF7A26}
.camp-scrim{position:fixed;inset:0;z-index:80;background:rgba(10,11,18,.45)}
.camp-scrim[hidden],.camp-drawer[hidden]{display:none}
.camp-drawer{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(460px,100vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-lg)}
html.camp-dr-aberta{overflow:hidden}
.camp-dr-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 12px}
.camp-dr-hk{min-width:0}
.camp-dr-k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--camp-acc);font-weight:660}
.camp-dr-t{margin:4px 0 0;font-size:15px;font-weight:660;line-height:1.35;overflow-wrap:anywhere}
.camp-dr-tabs{margin:0 18px;align-self:flex-start}
.camp-dr-b{flex:1;overflow:auto;padding:14px 18px 24px}
.camp-dr-load{padding:40px 0;text-align:center;color:var(--muted);font-size:13px}
.camp-dr-per{font-size:12px;color:var(--muted);margin-bottom:10px}
.camp-graf{margin:0 0 16px}
.camp-graf figcaption{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.camp-graf figcaption b{color:var(--ink);font-size:14px;font-weight:660;font-variant-numeric:tabular-nums}
.camp-graf-w{position:relative}
.camp-graf svg{display:block;width:100%;height:auto;overflow:visible}
.camp-gl{stroke:var(--line);stroke-width:1}
.camp-gt{fill:var(--faint);font-size:10px;font-variant-numeric:tabular-nums}
.camp-bar{fill:var(--camp-graf)}
.camp-hit{fill:transparent;cursor:default}
.camp-hit.on{fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.camp-tip{position:absolute;top:0;white-space:nowrap;z-index:2;pointer-events:none;font-size:11.5px;
  padding:5px 8px;border-radius:6px;background:var(--ink);color:var(--surface);box-shadow:var(--shadow)}
.camp-tip[hidden]{display:none}
.camp-dias summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:4px 0}
.camp-dias summary:hover{color:var(--ink)}
.camp-mini{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.camp-mini th{text-align:left;font-size:11px;color:var(--faint);font-weight:620;padding:6px 4px;border-bottom:1px solid var(--line)}
.camp-mini td{padding:6px 4px;border-bottom:1px solid color-mix(in srgb,var(--ink) 6%,transparent)}
.camp-mini .num{text-align:right;font-variant-numeric:tabular-nums}

/* Analisar */
.camp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:6px}
.camp-kpi{padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.camp-kpi-v{font-size:16px;font-weight:680;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.camp-kpi-r{font-size:11px;color:var(--muted);margin-top:2px}
.camp-kpi-s{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.camp-h4{margin:18px 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:660}
.camp-sub-t{font-size:12.5px;font-weight:620;margin:8px 0 4px;overflow-wrap:anywhere}
.camp-dl{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:6px 12px;margin:0;font-size:12.5px}
.camp-dl dt{color:var(--muted)}
.camp-dl dd{margin:0;overflow-wrap:anywhere}
.camp-dl a{color:var(--camp-acc);text-decoration:none}
.camp-dl a:hover{text-decoration:underline}
.camp-regras{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:12.5px}
.camp-regras li{display:flex;align-items:center;gap:8px}
.camp-txt-crit{color:var(--crit)}
.camp-anun{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.camp-anun:first-of-type{border-top:0}
.camp-anun img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:none;background:var(--surface-2)}
.camp-anun-t{min-width:0;flex:1}
@media (max-width:520px){
  .camp-kpis{grid-template-columns:1fr 1fr}
  .camp-kpi:first-child{grid-column:1/-1}
  .camp-dl{grid-template-columns:1fr;gap:0 0}
  .camp-dl dd{margin-bottom:6px}
}

/* Recuperar: selo na linha e modal em 4 passos */
.camp-recsel{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-recsel+.camp-recsel{margin-top:2px}
.camp-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:81;width:min(680px,calc(100vw - 24px));
  max-height:min(88vh,860px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg)}
.camp-modal[hidden]{display:none}
.camp-md-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 10px}
.camp-passos{display:flex;gap:6px;list-style:none;margin:0;padding:0 20px 12px;counter-reset:passo;flex-wrap:wrap}
.camp-passos li{counter-increment:passo;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--faint);font-weight:560}
.camp-passos li::before{content:counter(passo);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line);font-size:11px;font-weight:660}
.camp-passos li+li::after{content:none}
.camp-passos li+li{padding-left:6px;border-left:1px solid var(--line);margin-left:2px}
.camp-passos li.on{color:var(--camp-acc)}
.camp-passos li.on::before{border-color:var(--camp-acc-line);background:var(--camp-acc-soft);color:var(--camp-acc)}
.camp-passos li.feito{color:var(--muted)}
.camp-passos li.feito::before{content:"✓";background:var(--ok-soft);color:var(--ok);border-color:transparent}
.camp-md-b{flex:1;overflow:auto;padding:4px 20px 16px;border-top:1px solid var(--line)}
.camp-md-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.camp-md-p{font-size:13px;margin:12px 0}
.camp-btn{height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:13px;font-weight:600;cursor:pointer}
.camp-btn:hover{border-color:var(--line-2)}
.camp-md-f .camp-btn-acc{padding:0 16px;height:36px}
.camp-btn:disabled,.camp-btn-acc:disabled{opacity:.45;cursor:default}
.camp-btn:focus-visible{outline:2px solid var(--camp-acc);outline-offset:2px}
.camp-opcs{display:grid;gap:8px;margin-top:4px}
.camp-opc{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);cursor:pointer;font-size:13px}
.camp-opc:hover{border-color:var(--line-2)}
.camp-opc:has(input:checked){border-color:var(--camp-acc-line);background:var(--camp-acc-soft)}
.camp-opc input{accent-color:var(--camp-acc);margin:0;width:16px;height:16px;flex:none}
.camp-opc-t{display:flex;flex-direction:column;gap:1px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.camp-opc-t small{font-weight:400;color:var(--muted);font-size:11.5px}
.camp-opc-s{padding:9px 12px}
.camp-md-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.camp-md-sec{min-width:0}
.camp-pagina{display:inline-flex;align-items:center;gap:8px;min-width:0}
.camp-av{position:relative;flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  overflow:hidden;background:var(--surface-3);border:1px solid var(--line)}
.camp-av b{font-size:11px;color:var(--muted)}
.camp-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camp-pags{display:grid;gap:6px}
.camp-pags .camp-opc{gap:10px}
.camp-pags-sep{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:640;margin:8px 0 2px}
.camp-pag-orig{margin-left:auto;font-size:11px;color:var(--faint)}
fieldset.camp-campo[hidden]{display:none}
.camp-md-thumb{width:28px;height:28px;border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:6px}
.camp-campo{display:grid;gap:6px;margin:12px 0;border:0;padding:0;font-size:12px;color:var(--muted);min-width:0}
.camp-campo legend{padding:0;margin-bottom:6px}
.camp-campo-l{display:flex;gap:8px;align-items:center}
.camp-campo input[type=number],.camp-campo select{height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-size:14px;min-width:0;flex:1;color-scheme:light dark}
.camp-campo input:disabled{opacity:.6}
.camp-campo :is(input,select):focus-visible,.camp-opc:has(input:focus-visible){outline:2px solid var(--camp-acc);outline-offset:1px;border-color:var(--camp-acc-line)}
.camp-campo small{font-size:11.5px;color:var(--faint)}
.camp-md-moeda{font-size:13px;font-weight:620;color:var(--muted)}
.camp-reg{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:8px;font-size:12.5px}
.camp-reg li{display:flex;gap:10px;align-items:flex-start}
.camp-reg li small{display:block;color:var(--muted);margin-top:2px}
.camp-reg-i{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:700}
.camp-reg li.ok .camp-reg-i{background:var(--ok-soft);color:var(--ok)}
.camp-reg li.warn .camp-reg-i{background:var(--warn-soft);color:var(--warn)}
.camp-reg li.crit .camp-reg-i{background:var(--crit-soft);color:var(--crit)}
.camp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.camp-txt-ok{color:var(--ok)}
.camp-dobro{margin-top:12px;border-color:var(--warn)}
/* Recuperar em lote: várias contas, várias campanhas, um estado por par */
.camp-opcs-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.camp-opcs-h .camp-md-p{margin-bottom:10px}
.camp-opcs-h .camp-meta{display:inline;margin:0 0 0 4px}
.camp-opc input[type=checkbox]{border-radius:4px}
.camp-opc:has(input:disabled){opacity:.55;cursor:default}
.camp-md-nota{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.camp-md-nota b{color:var(--ink)}
.camp-md-nota:empty{display:none}
.camp-md-para{color:var(--muted);overflow-wrap:anywhere}
.camp-md-para b{color:var(--ink);font-weight:620}
.camp-lote{display:grid}
.camp-lote-i{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:14px;align-items:center;padding:9px 0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.camp-lote-i:last-child{border-bottom:0}
.camp-lote-n{font-size:12.5px;font-weight:600;overflow-wrap:anywhere;min-width:0}
.camp-lote-n small{display:block;font-weight:400;color:var(--faint);font-size:11.5px;margin-top:2px}
.camp-lote-i .camp-campo{margin:0;min-width:0}
.camp-lote-i .camp-campo-l{min-width:0}
.camp-lote-i input[type=number]{width:100%;box-sizing:border-box}
.camp-pares{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:6px}
.camp-par{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.camp-par > summary,.camp-par-s{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:12.5px}
.camp-par > summary{cursor:pointer;list-style:none;border-radius:10px}
.camp-par > summary::-webkit-details-marker{display:none}
.camp-par > summary:focus-visible{outline:2px solid var(--camp-acc);outline-offset:1px}
.camp-par > summary:hover .camp-par-chev{color:var(--ink)}
.camp-par-chev{flex:none;color:var(--faint);transition:transform .15s}
.camp-par[open] .camp-par-chev{transform:rotate(180deg)}
.camp-par .camp-spin{margin:0 0 0 2px;flex:none}
.camp-par .camp-reg-i{flex:none}
.camp-par.ok .camp-reg-i{background:var(--ok-soft);color:var(--ok)}
.camp-par.warn .camp-reg-i{background:var(--warn-soft);color:var(--warn)}
.camp-par.crit .camp-reg-i{background:var(--crit-soft);color:var(--crit)}
.camp-par.na .camp-reg-i{background:var(--surface-3);color:var(--muted)}
.camp-par.na{background:var(--surface-2)}
.camp-par.crit{border-color:color-mix(in srgb,var(--crit) 35%,var(--line))}
.camp-par-t{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.camp-par-t small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:1px}
.camp-par-e{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap}
.camp-par-t .camp-par-m{color:var(--crit);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px}
.camp-par[open] .camp-par-m{display:none}
.camp-par.ok .camp-par-e{color:var(--ok)}
.camp-par.crit .camp-par-e{color:var(--crit)}
.camp-par .camp-reg{margin:0;padding:2px 12px 12px 40px}
.camp-alts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){
  .camp-lote-i{grid-template-columns:1fr;gap:6px}
  .camp-opcs-h{flex-direction:column;gap:0}
  .camp-opcs-h .camp-lnk{margin:-4px 0 10px}
  .camp-par .camp-reg{padding-left:12px}
  .camp-par.crit:has(.camp-par-m) .camp-par-e{display:none}
  .camp-par.na .camp-par-e{white-space:normal;text-align:right;max-width:40%}
  .camp-alts .camp-btn{flex:1 1 100%}
}
@media (max-width:640px){
  .camp-modal{top:auto;bottom:0;transform:translateX(-50%);width:100vw;max-height:92vh;border-radius:16px 16px 0 0}
  .camp-md-grid{grid-template-columns:1fr;gap:0}
  .camp-passos{gap:8px 14px}
  .camp-passos li+li{border-left:0;padding-left:0;margin-left:0}
  .camp-campo input[type=number],.camp-campo select{font-size:16px}
  .camp-md-f{flex-wrap:wrap}
  .camp-md-f button{flex:1 1 auto}
}

/* ── Fotos do produto (14/out/2026) ─────────────────────────────────────────────
   Botão laranja ao lado do nome, na Fila de produção: o produto parou por ter menos de 8
   fotos com autenticidade >= 95. Laranja do miner (--miner-hi) em fundo cheio com a tinta
   escura do miner por cima — legível nos dois temas (o laranja como TEXTO sobre branco não
   passava o contraste AA). */
.mfila .qopen .tl{display:flex;align-items:center;gap:6px;min-width:0}
.mfila .qopen .tl .t{min-width:0}
.mfotos{flex:none;display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;
  border:1px solid var(--miner-hi);background:var(--miner-hi);color:var(--miner-hi-ink);
  font-family:inherit;font-weight:650;font-size:11px;line-height:1.35;white-space:nowrap;cursor:pointer;
  transition:filter .14s,box-shadow .14s}
.mfotos:hover{filter:brightness(1.08)}
.mfotos:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--miner-hi) 40%,transparent)}
.mfotos.corre{cursor:default;background:color-mix(in srgb,var(--miner-hi) 18%,var(--surface));
  color:var(--ink)}
.mfotos.corre svg{color:var(--miner-hi);animation:mfotosPulso 1.4s ease-in-out infinite}
@keyframes mfotosPulso{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.mfotos.corre svg{animation:none}}

/* Popup das fotos: duas saídas lado a lado; empilham no telemóvel. */
.mfotos-pop{width:min(720px,100%)}
.mfotos-pop .mf-intro{margin:0 0 12px;line-height:1.5}
.mfotos-pop .mf-aprov{margin:0 0 14px}
.mfotos-pop .mf-lbl{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.mfotos-pop .mf-aprov .redit-foto{width:56px;height:56px}
.mf-ops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mf-op{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface-2)}
.mf-op h3{margin:0;font-size:14px;font-weight:650}
.mf-op p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.mf-op .hint{font-size:11.5px}
.mf-op .btn{margin-top:auto;align-self:flex-start}
.mf-op .redit-foto,.mf-op .redit-add{width:64px;height:64px}
@media (max-width:700px){.mf-ops{grid-template-columns:1fr}}
/* No telemóvel a linha é estreita: o botão encolhe para ícone + «3/8» e o nome respira. */
@media (max-width:520px){.mfotos .mf-w{display:none}.mfotos{padding:2px 6px}}
/* Motivo das fotos: no máximo 3 linhas na fila; o texto inteiro fica no title. */
.mfila .qsub.qfotos{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Pré-aprovado (out/2026). Os controlos pertencem ao Nocturne; a página congelada
   mantém a apresentação da loja. O rodapé ocupa espaço próprio, incluindo com teclado. */
.mpa-fila-h{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:8px!important;align-items:center!important}
.mpa-fila-h .card-k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mpa-fila-h #mJobsRefresh{position:static!important;inset:auto!important;margin:0!important;padding:6px;min-width:28px}
.mpa-modo{justify-self:end}
.mpa-modo[hidden],.mpa-bg [hidden],.mpa-filtros[hidden]{display:none!important}
.mpa-modo button{font-size:12px;padding:6px 8px;white-space:nowrap}
.mpa-modo button.on,.mpa-bg .seg button.on,.mpa-filtros .seg button.on{color:var(--accent-300)}
.mpa-modo-aviso{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.4;flex-basis:100%}
.mpa-btn{width:28px;height:28px;flex:0 0 28px;position:relative;display:grid;place-items:center;border:1px solid var(--miner-hi-ink,#1a1300);border-radius:6px;background:var(--miner-hi,#ff8c42);color:var(--miner-hi-ink,#1a1300);font-size:21px;line-height:1;isolation:isolate}
.mpa-btn small{position:absolute;bottom:-5px;right:-5px;font-size:9px;line-height:1.2;font-weight:700;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:1px 2px}
.mpa-btn.corre{box-shadow:inset 0 0 0 2px var(--surface)}
.mpa-btn.congelado{background:var(--surface-2);color:var(--muted);border-color:var(--muted)}
.mpa-btn:focus-visible,.mpa-bg button:focus-visible,.mpa-filtros button:focus-visible{outline:2px solid var(--accent-300);outline-offset:3px}
.mfila button.qopen{border:0;background:transparent;font-family:inherit;text-align:left;cursor:pointer}
.mpa-sub,.mfila .mpa-sub{color:var(--muted);font-size:11px;line-height:1.4}
.mpa-filtros{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 9px}
.mpa-filtros .seg button{font-size:11px;padding:4px 7px}
.mpa-chip{color:var(--accent-300);border-color:var(--accent);white-space:nowrap}
/* 🔴 Rever produto mais largo (ordem do Erico, 15/out): cada vazio lateral passa a metade
   do anterior — 130px à esquerda (38px com a rail recolhida) e metade do vazio adaptável
   à direita. O popup pode sobrepor a rail escurecida; mantém 8px em cima/baixo.
   Até 900px mantém 12px de cada lado; até 700px o popup é ecrã todo. */
.mpa-bg{--miner-hi:#ff8c42;--miner-hi-ink:#1a1300;z-index:180;overscroll-behavior:contain;
  padding:8px calc((12px + clamp(0px,calc(100vw - 1172px),248px))/2) 8px 130px;
  background:rgba(4,4,8,.86);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* Os vazios são padding do fundo (e não left/right): o fundo cobre o ecrã todo, rail incluída, e
   fica quase opaco (ordem do Erico, 15/out) — o foco fica só dentro do popup. */
.app.rail-collapsed~.mpa-bg{padding-left:38px;padding-right:calc((12px + clamp(0px,calc(100vw - 988px),64px))/2)}
.mpa-pop{width:100%;height:100%;max-height:100%;min-height:0;min-width:0;position:relative;overflow:clip}
.mpa-top{display:grid;grid-template-columns:minmax(0,1fr) auto 36px;gap:3px 12px;align-items:center;padding:14px 20px 10px;border-bottom:1px solid var(--line);flex:none}
.mpa-top-l{min-width:0}
.mpa-catalogo{position:relative;margin-top:7px;min-width:0}
.mpa-catalogo-abrir{display:flex;align-items:center;gap:10px;max-width:100%;font-size:12px;text-align:left}
.mpa-catalogo-abrir [data-catalogo-rotulo]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpa-catalogo-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:min(580px,calc(100vw - 48px));max-width:calc(100vw - 48px);border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 14px 40px #0005;overflow:hidden}
.mpa-catalogo-regra{margin:10px 12px 0;font-size:12px;color:var(--muted);line-height:1.4}
.mpa-catalogo-menu>input{display:block;width:calc(100% - 20px);margin:10px;padding:11px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:16px}
.mpa-catalogo-menu [role=listbox]{max-height:min(38vh,340px);overflow:auto;overscroll-behavior:contain}
.mpa-catalogo-opcao{display:flex;align-items:center;gap:10px;min-height:60px;padding:9px 12px;cursor:pointer;border-top:1px solid var(--line);font-size:13px}
.mpa-catalogo-opcao:hover,.mpa-catalogo-opcao.ativa{background:var(--surface-2);outline:2px solid var(--accent-300);outline-offset:-2px}
.mpa-catalogo-opcao[aria-selected=true]{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.mpa-catalogo-opcao img{width:42px;height:42px;flex:none;object-fit:cover;border-radius:6px}
.mpa-catalogo-nome{min-width:0;overflow-wrap:anywhere}
.mpa-catalogo-preco{margin-left:auto;flex:none;white-space:nowrap;font-weight:650}
.mpa-catalogo-preco del,.mpa-consulta-preco del{display:block;color:var(--muted);font-size:.85em;font-weight:400}
.mpa-catalogo-fim{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.mpa-catalogo-fim .btn{flex:none}
.mpa-catalogo-status{display:flex;align-items:center;gap:8px;min-width:0}
.mpa-catalogo-carregando{width:14px;height:14px;flex:none;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:rauto-spin .8s linear infinite}
.mpa-catalogo-carregando[hidden]{display:none}
.mpa-consulta{max-width:960px;margin:0 auto;padding:22px;color:var(--ink)}
.mpa-consulta h3{font-size:24px;line-height:1.3;margin:0 0 12px;overflow-wrap:anywhere}
.mpa-consulta-preco{font-size:22px;font-weight:650;margin:0 0 12px}
.mpa-consulta-fotos{display:flex;gap:10px;overflow:auto;margin:20px 0;align-items:start;scroll-snap-type:x proximity}
.mpa-consulta-fotos img{width:110px;height:110px;object-fit:contain;border:1px solid var(--line);border-radius:9px;scroll-snap-align:start;background:#fff}
.mpa-consulta-fotos img:first-child{width:min(50vw,320px);height:min(50vw,320px)}
.mpa-consulta iframe{display:block;width:100%;height:60vh;min-height:320px;border:1px solid var(--line-2);border-radius:10px;background:white}
.mpa-em-consulta .mpa-guardado{display:none}
@media(max-width:700px){.mpa-catalogo-menu{width:calc(100vw - 32px);max-width:calc(100vw - 32px)}.mpa-catalogo-opcao{gap:8px;padding:9px;font-size:12px}.mpa-consulta{padding:16px}.mpa-consulta h3{font-size:20px}}
.mpa-top h2{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpa-guardado{grid-column:2/4;grid-row:2;color:var(--muted);font-size:12px;text-align:right;white-space:nowrap}
.mpa-nav{display:flex;gap:6px}
.mpa-x{grid-column:3;grid-row:1;font-size:24px;line-height:1;min-height:36px;padding:4px}
.mpa-faixa{margin:0;padding:10px 20px;background:var(--info-soft);color:var(--ink);font-size:13px;flex:none}
.mpa-mensagem,.mpa-conflito{padding:10px 20px;background:var(--warn-soft);color:var(--ink);font-size:13px;flex:none;max-height:160px;overflow:auto}
.mpa-mensagem.crit{background:var(--crit-soft)}
.mpa-conflito{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mpa-pop>[data-abrir-repetir]{padding:7px 20px;border-bottom:1px solid var(--line)}
.mpa-atalhos{display:none}
.mpa-scroll{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;scroll-padding:20px}
.mpa-conteudo{display:grid;grid-template-columns:minmax(0,1fr) 420px;align-items:start;min-height:100%}
.mpa-preview{min-width:0;padding:16px 24px 28px;background:var(--surface-2)}
.mpa-preview-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.mpa-preview-h small{font-size:11px;color:var(--muted)}
.mpa-pag{container:mpapag / inline-size;width:min(390px,100%);margin:auto;border:1px solid var(--line-2);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.mpa-produto{padding:18px 18px 24px;color:var(--ink)}
.mpa-loja{margin:0 0 12px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:650;color:var(--muted)}
.mpa-produto h1{font-size:25px;line-height:1.2;margin:18px 0 6px;font-weight:680}
.mpa-preco{font-size:23px;font-weight:700;display:flex;align-items:center;margin:8px 0}
.mpa-preco>.mpa-campo{max-width:150px}
.mpa-preco del{font-size:16px;font-weight:400;color:var(--muted);margin-right:12px;white-space:nowrap}
[data-precos] .mpa-campo{display:flex;font-size:18px;color:var(--ink)}
.mpa-hero{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.mpa-compra{border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:650;padding:12px;text-align:center;margin-top:16px}
.mpa-campo{display:block;position:relative;min-width:0;text-align:inherit;line-height:inherit}
.mpa-ed{display:block;resize:none;width:100%;min-height:28px;overflow:hidden;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit;font:inherit;line-height:inherit;padding:2px 4px;margin:0;box-sizing:border-box;white-space:pre-wrap}
.mpa-ed:hover:not(:read-only){border-color:var(--line-2)}
.mpa-ed:focus{outline:2px solid var(--accent-300);outline-offset:1px;border-color:transparent;background:var(--surface);color:var(--ink)}
.mpa-ed[aria-invalid=true]{border-color:var(--crit)}
.mpa-campo.alterado:before{content:"";position:absolute;left:-3px;top:4px;bottom:4px;width:2px;background:var(--accent);border-radius:2px}
.mpa-repor{display:none;position:absolute;right:4px;bottom:-12px;z-index:2;font-size:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);border-radius:4px;padding:1px 5px}
.mpa-campo.alterado:focus-within>.mpa-repor,.mpa-campo.alterado:hover>.mpa-repor{display:block}
.mpa-pag-foto{cursor:zoom-in;max-width:100%}
.mpa-lado{padding:0 18px 20px;min-width:0}
.mpa-lado>section{padding:18px 0;border-bottom:1px solid var(--line)}
.mpa-lado h3{font-size:14px;margin:0 0 12px}
.mpa-secao-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.mpa-secao-h h3{margin:0}
.mpa-fotos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mpa-foto{display:block;border:1px solid var(--line-2);border-radius:8px;position:relative;padding:0;background:var(--surface-2);color:var(--muted);overflow:hidden;aspect-ratio:1/1}
.mpa-foto.on{outline:2px solid var(--accent-300);outline-offset:1px}
.mpa-foto img{display:block;width:100%;height:100%;object-fit:cover}
.mpa-num{position:absolute;left:3px;bottom:3px;background:var(--surface);color:var(--ink);padding:1px 5px;border-radius:4px;font-size:10px;font-weight:700}
.mpa-vazio{font-size:24px;line-height:2}
.mpa-foto-nota{font-size:12px;color:var(--muted);margin:10px 0 8px}
.mpa-foto-acoes{display:flex;flex-wrap:wrap;gap:6px}
.mpa-foto-acoes .btn{padding:5px 8px;font-size:11.5px}
.mpa-desfazer{background:var(--info-soft);padding:8px;font-size:11px;margin-top:10px;overflow-wrap:anywhere}
.mpa-reserva{margin:14px 0;color:var(--muted);font-size:12px}
.mpa-reserva summary{cursor:pointer;padding:4px 0}
.mpa-reserva .mpa-fotos-grid{margin-top:8px}
.mpa-lado label{display:block;font-size:12px;color:var(--muted);margin:10px 0;min-width:0}
.mpa-lado select,.mpa-lado input{width:100%;min-width:0;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);padding:8px;font:inherit;font-size:13px}
.mpa-lado .mpa-ed{background:var(--surface-2);border-color:var(--line);color:var(--ink);font-size:13px;line-height:1.5;padding:8px;margin-top:5px}
.mpa-lado .hint{font-size:11px;color:var(--muted);margin:8px 0}
.mpa-faltam{margin:10px 0;font-size:12px;color:var(--warn)}
.mpa-lado>[data-video]{margin-top:16px}
.mpa-rod{flex:none;border-top:1px solid var(--line);background:var(--surface);padding:10px 20px 14px;z-index:3}
.mpa-rod>[data-resumo]{margin:0 0 8px;font-size:11px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.mpa-rod-acoes{display:flex;gap:10px;align-items:center}
.mpa-motivo{margin-left:auto;font:inherit;font-size:12px;color:var(--muted);background:transparent;border:0;cursor:pointer;text-align:right}
.mpa-publicar{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important;padding:11px 26px!important;font-size:15px!important;font-weight:680!important;border-radius:11px!important;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 22%,transparent);white-space:nowrap}
.mpa-publicar:disabled{opacity:1;background:var(--surface-2)!important;border-color:var(--line-2)!important;color:var(--muted)!important;box-shadow:none}
.mpa-rod>[data-descartar-confirmar],.mpa-rod>[data-fechar-confirmar]{margin-top:10px;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mpa-sucesso{padding:22px;background:var(--ok-soft);text-align:center}
/* Dois scrolls independentes (ordem do Erico, 15/out): a pré-visualização do produto e o painel
   lateral rolam cada um por si, sem um arrastar o outro. No telemóvel (≤700px) as colunas
   empilham-se e volta a haver um scroll só. */
@media(min-width:701px){
  .mpa-scroll{display:flex;flex-direction:column;overflow:hidden}
  .mpa-scroll[hidden]{display:none}
  .mpa-scroll>.mpa-sucesso{flex:none}
  .mpa-conteudo{flex:1 1 0;min-height:0;align-items:stretch}
  .mpa-preview,.mpa-lado{min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:20px;scrollbar-width:thin}
}
.mpa-ampliada{position:absolute;inset:0;z-index:8;background:var(--surface);padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.mpa-ampliada .btn{align-self:flex-end;flex:none}
.mpa-ampliada img{max-width:100%;max-height:calc(100% - 60px);min-height:0;object-fit:contain}
.mpa-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mpa-variacao{padding:24px}
.mpa-variacao h2{font-size:24px}
.mpa-variacao p{font-size:14px;color:var(--muted)}
.mpa-variacao img{width:100%;display:block;border-radius:10px;margin:18px 0}
.mpa-aviso-pronto{position:fixed;right:20px;bottom:20px;z-index:190;max-width:min(440px,calc(100% - 40px));background:var(--surface);color:var(--ink);border:1px solid var(--accent);box-shadow:var(--shadow-lg);padding:16px;border-radius:var(--radius);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mpa-aviso-pronto span{color:var(--muted);font-size:12px}
/* Só pré-visualização de telemóvel: a opção «Computador» saiu (ordem do Erico, 15/out —
   as lojas só correm anúncios para telemóvel). */
@media(max-width:999px){.mpa-conteudo{grid-template-columns:minmax(0,1fr) 360px}.mpa-preview{padding:12px}.mpa-preview-h{flex-wrap:wrap}.mpa-top{padding:12px}.mpa-rod{padding:10px 12px}}
@media(max-width:900px){.mpa-bg,.app.rail-collapsed~.mpa-bg{padding-left:12px;padding-right:12px}}
@media(max-width:700px){
  .mpa-bg,.app.rail-collapsed~.mpa-bg{padding:0}.mpa-pop{height:100%;max-height:100%;border:0;border-radius:0}
  .mpa-top{grid-template-columns:minmax(0,1fr) 32px;gap:4px 8px;padding:10px 12px}
  .mpa-top h2{font-size:16px}
  .mpa-x{grid-column:2}.mpa-nav{grid-column:1;grid-row:2}.mpa-nav .btn{font-size:11px;padding:4px 8px}
  .mpa-guardado{grid-column:1/3;grid-row:3;text-align:left;font-size:11px}
  .mpa-faixa{padding:8px 12px;font-size:12px}.mpa-mensagem,.mpa-conflito{padding:8px 12px}
  .mpa-atalhos{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
  .mpa-atalhos .btn{flex:1}
  .mpa-conteudo{display:block}.mpa-preview{padding:12px 0 20px}.mpa-preview-h{padding:0 12px}
  .mpa-pag{width:100%;border-radius:0;border-inline:0}.mpa-produto{padding:12px 16px 20px}
  .mpa-lado{padding:0 16px 24px}.mpa-ed,.mpa-lado .mpa-ed,.mpa-lado select,.mpa-lado input{font-size:16px}
  .mpa-rod{padding:8px 12px max(10px,env(safe-area-inset-bottom))}
  .mpa-rod>[data-resumo]{font-size:10px;max-height:45px;overflow:auto;margin-bottom:5px}
  .mpa-rod-acoes{display:grid;grid-template-columns:auto 1fr;gap:5px 8px}
  .mpa-rod-acoes>[data-acao=guardar]{justify-self:end}.mpa-motivo{grid-column:1/-1;text-align:left;margin:0;font-size:11px}
  .mpa-publicar{grid-column:1/-1;width:100%;padding:10px 16px!important}
}
@media(pointer:coarse){.mpa-btn:before{content:"";position:absolute;inset:-8px;z-index:-1}.mpa-btn{margin:8px}.mpa-bg button,.mpa-modo button{min-height:44px}.mpa-bg .mpa-foto-acoes .btn{padding:8px}.mpa-ed,.mpa-lado .mpa-ed,.mpa-lado input,.mpa-lado select{font-size:16px}}
@media(prefers-reduced-motion:reduce){.mpa-bg *,.mpa-btn{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Apresentação dos campos de edição. A pré-visualização usa o CSS local da loja no iframe. */

.mpa-pag .wc-product-landing{--ink:#241c17;--soft:#6b625b;--brand:#C2410C;--accent:#C2410C;--card:#fff;--line:#ece6df;--ok:#2e7d56;max-width:720px;margin:0 auto;padding:0 4px;color:var(--ink);font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55;font-size:16.5px;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.mpa-pag .wc-product-landing *{box-sizing:border-box;max-width:100%}
.mpa-pag .wc-product-landing h2{font-family:"Fraunces",Georgia,serif;font-size:1.45rem;line-height:1.22;margin:0 0 .45em;color:var(--ink);font-weight:800}
.mpa-pag .wc-product-landing h3{font-family:"Fraunces",Georgia,serif;font-size:1.12rem;line-height:1.3;margin:0 0 .3em;font-weight:700}
.mpa-pag .wc-product-landing p{margin:0 0 .75em}
.mpa-pag .wc-product-landing .sec{margin:14px 0;padding:20px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.mpa-pag .wc-product-landing .hero{background:linear-gradient(160deg,#2a211b,#3d2a1f);color:#fff;border:0;text-align:center}
.mpa-pag .wc-product-landing .hero h2{color:#fff !important;font-size:1.6rem}
.mpa-pag .wc-product-landing .hero p{color:#f3e9e2 !important;font-size:1.05rem}
.mpa-pag .wc-product-landing .ph img{display:block;width:100%;height:auto;border-radius:10px}
.mpa-pag .wc-product-landing .hero .ph img{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.mpa-pag .wc-product-landing .cta{display:block;width:100%;background:var(--accent);color:#fff;font-weight:800;font-size:1.08rem;text-decoration:none;padding:17px 20px;border-radius:14px;margin:12px 0 0;text-align:center;box-shadow:0 6px 16px rgba(194,65,12,.32)}
.mpa-pag .wc-product-landing .pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.mpa-pag .wc-product-landing .pill{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 13px;font-size:.88rem;font-weight:600}
.mpa-pag .wc-product-landing .note{font-size:.82rem;opacity:.85;margin:9px 0 0}
.mpa-pag .wc-product-landing .row{display:flex;flex-direction:column;gap:14px;margin:14px 0;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.mpa-pag .wc-product-landing .row__media,.mpa-pag .wc-product-landing .row__text{width:100%}
.mpa-pag .wc-product-landing .tag{display:inline-block;font-size:.74rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
@container mpapag (min-width:680px){
.mpa-pag .wc-product-landing{font-size:17px;padding:0 8px}
.mpa-pag .wc-product-landing h2{font-size:1.7rem}.mpa-pag .wc-product-landing .hero h2{font-size:1.95rem}
.mpa-pag .wc-product-landing .row{flex-direction:row;gap:26px;align-items:center;padding:24px}
.mpa-pag .wc-product-landing .row--rev{flex-direction:row-reverse}
.mpa-pag .wc-product-landing .row__media,.mpa-pag .wc-product-landing .row__text{width:50%}
.mpa-pag .wc-product-landing .cta{display:inline-block;width:auto;min-width:300px}
}
.mpa-pag .wc-product-landing ul.list{list-style:none;padding:0;margin:0}
.mpa-pag .wc-product-landing ul.list li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line);font-size:1rem}
.mpa-pag .wc-product-landing ul.list li:last-child{border-bottom:0}
.mpa-pag .wc-product-landing ul.list li::before{content:"✓";position:absolute;left:0;top:9px;color:var(--ok);font-weight:900}
.mpa-pag .wc-product-landing ul.pain li::before{content:"✕";color:#c0473b}
.mpa-pag .wc-product-landing .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mpa-pag .wc-product-landing table.cmp{width:100%;border-collapse:collapse;font-size:.86rem;min-width:300px}
.mpa-pag .wc-product-landing table.cmp th,.mpa-pag .wc-product-landing table.cmp td{border:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top}
.mpa-pag .wc-product-landing table.cmp th{background:var(--brand);color:#fff}
.mpa-pag .wc-product-landing table.cmp td:first-child{font-weight:700;background:#fbf7f3}
.mpa-pag .wc-product-landing ol.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.mpa-pag .wc-product-landing ol.steps li{counter-increment:s;padding:11px 0 11px 44px;position:relative}
.mpa-pag .wc-product-landing ol.steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:31px;height:31px;background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800}
.mpa-pag .wc-product-landing details.faq{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fbf7f3;overflow:hidden}
.mpa-pag .wc-product-landing details.faq summary{cursor:pointer;padding:15px 16px;font-weight:700;color:var(--brand);list-style:none;font-size:.98rem}
.mpa-pag .wc-product-landing details.faq summary::-webkit-details-marker{display:none}
.mpa-pag .wc-product-landing details.faq summary::after{content:"+";float:right;font-weight:800}
.mpa-pag .wc-product-landing details.faq[open] summary::after{content:"–"}
.mpa-pag .wc-product-landing details.faq .ans{padding:0 16px 15px}
.mpa-pag .wc-product-landing .trust{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mpa-pag .wc-product-landing .trust .it{border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;background:#fbf7f3}
.mpa-pag .wc-product-landing .trust .it h3{font-size:.98rem}
.mpa-pag .wc-product-landing .trust .it p{font-size:.85rem;margin:0;color:var(--soft)}
.mpa-pag .wc-product-landing .final{background:linear-gradient(160deg,#2a211b,#3d2a1f);color:#fff;border:0;text-align:center}
.mpa-pag .wc-product-landing .final h2,.mpa-pag .wc-product-landing .final p{color:#fff !important}
@container mpapag (max-width:760px){.mpa-pag .wc-product-landing{max-width:none;margin-left:calc(50% - 50cqw + 10px);margin-right:calc(50% - 50cqw + 10px);padding:0}}

.mpa-pag .wc-product-landing .mpa-ed{font-size:inherit;font-family:inherit}.mpa-pag .wc-product-landing .mpa-ed:focus{background:var(--card);color:var(--ink)}
/* O tema do painel não escurece a loja: revê-se a mesma página nos dois temas. */
.mpa-pag{--surface:#fff;--surface-2:#fbf7f3;--ink:#241c17;--muted:#6b625b;--accent:#C2410C;--accent-300:#C2410C;--accent-ink:#fff;--line:#ece6df;--line-2:#d2c7bd}
.mpa-preco>.mpa-campo{width:6.5ch;max-width:180px}
.mpa-rod-acoes,.mpa-atalhos{min-width:0}.mpa-rod-acoes>.btn,.mpa-atalhos>.btn{min-width:0}
.mpa-top h2:focus{outline:none}
.mpa-preview-h small{white-space:normal}
.mpa-pag{color:var(--ink)}

/* Revisão adversarial: só estes controlos precisam de tinta mais forte; os tokens
   globais e as outras vistas mantêm as cores anteriores. */
.mpa-publicar{background:var(--accent-2)!important;border-color:var(--accent-2)!important}
.mpa-secao-h .pill{color:var(--ink)}
/* A escala da loja tem etiquetas pequenas. Ao editar no móvel/toque, prevalece
   o piso de 16 px, sem encolher os títulos que já são maiores. */
@media(max-width:700px), (pointer:coarse){
  .mpa-pop .mpa-pag .wc-product-landing .mpa-ed{font-size:max(16px,1em)}
}

/* Fotos do Pré-aprovado: principal, galeria WooCommerce e descrição. */
.mpa-fotos-secao{margin:12px 0;padding:10px;border:1px solid var(--line-2);border-radius:8px}
.mpa-fotos-secao .mpa-secao-h{gap:8px;margin-bottom:8px}
.mpa-fotos-secao h4{margin:0;font-size:13px}
.mpa-fotos-secao .hint{margin:6px 0}
.mpa-fotos-secao[data-secao=principal] .mpa-fotos-grid{grid-template-columns:minmax(0,100px)}
.mpa-preview-galeria{display:flex;gap:6px;overflow-x:auto;margin:8px 0}
.mpa-preview-galeria button{flex:0 0 48px;padding:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--surface-2)}
.mpa-preview-galeria img{display:block;width:48px;height:48px;object-fit:cover}

/* Pré-aprovado: gestão direta das miniaturas, com rato, toque e teclado. */
.mpa-fotos-secao:not([data-secao=principal]) .mpa-fotos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mpa-mini{position:relative;min-width:0}.mpa-mini .mpa-foto{width:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.mpa-mini .mpa-foto img,.mpa-mini .mpa-foto video{width:100%;height:100%;object-fit:cover;pointer-events:none}.mpa-remover{position:absolute;right:2px;top:2px;z-index:2;width:32px;height:32px;border:0;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;font-size:23px;line-height:1;cursor:pointer}.mpa-remover:focus-visible,.mpa-mini .mpa-foto:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}.mpa-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-shadow:0 1px 4px #000;pointer-events:none}.mpa-fotos-secao .mpa-fotos-grid{min-height:64px}.mpa-drop{outline:2px dashed #f59e0b;outline-offset:3px;background:rgba(245,158,11,.09)}.mpa-inserir{box-shadow:-4px 0 #f59e0b}.mpa-arrastada{opacity:.35}.mpa-arrasto-fantasma{position:fixed;z-index:2147483647;width:80px;height:80px;opacity:.85;pointer-events:none;border:2px solid #f59e0b;border-radius:10px;overflow:hidden}.mpa-arrasto-fantasma img,.mpa-arrasto-fantasma video{width:100%;height:100%;object-fit:cover}.mpa-ampliada video{max-width:95%;max-height:85vh}.mpa-pag .ph video{display:block;width:100%;height:auto;border-radius:10px}.mpa-pag .hero .ph video{box-shadow:0 10px 30px rgba(0,0,0,.25)}.mpa-preview-galeria button{position:relative}.mpa-preview-galeria video{width:100%;height:100%;object-fit:cover}.mpa-preview-galeria span{position:absolute;inset:0;display:grid;place-items:center;z-index:1;color:white;pointer-events:none}
@media(pointer:coarse){.mpa-remover{width:44px;height:44px}.mpa-mini{min-width:64px}.mpa-fotos-secao:not([data-secao=principal]) .mpa-fotos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mpa-inserir-depois{box-shadow:4px 0 #f59e0b}.mpa-mini{-webkit-touch-callout:none}.mpa-ampliada video{min-height:0;flex:1;object-fit:contain}

/* Edição de publicados e ações por bloco (15/out/2026). */
.mpa-publicar-bloco{padding:18px;display:flex;justify-content:flex-end;border-top:1px solid var(--border,#e8ded5)}
.mpa-html-editor{padding:16px}.mpa-html-editor textarea{min-height:180px;font-family:monospace;font-size:13px}.mpa-html-editor iframe{width:100%;min-height:420px;border:1px solid #e8ded5;border-radius:10px;background:white}
.mpa-lado [data-acao="publicar-campanha"]{width:100%;margin-top:14px;min-height:44px}
@media(max-width:700px){.mpa-publicar-bloco .mpa-publicar{width:100%;min-height:44px}.mpa-rod-acoes{flex-wrap:wrap}.mpa-rod .mpa-publicar{white-space:normal}}

/* Chat IA do editor (out/2026): âmbito próprio, Nocturne. */
.mpa-tem-chat .mpa-pop{container:mpachat / inline-size}
.mpac-toggle{float:right;margin-top:7px}
.mpac{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;background:var(--surface);color:var(--ink);border-right:1px solid var(--line);font-size:13px}
.mpac-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);gap:8px;flex:none}
.mpac-head strong{font-size:14px}.mpac-head .btn{font-size:11px}
.mpac-pay{padding:8px 14px;border-bottom:1px solid var(--line);font-size:12px}.mpac-pay select{max-width:100%;width:100%;margin-top:4px;padding:6px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:8px}
.mpac-mensagens{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;scrollbar-width:thin;overflow-wrap:anywhere}
.mpac-msg{margin:0 0 22px;min-width:0}.mpac-user{max-width:90%;margin-left:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:10px 12px;width:fit-content}
.mpac-texto p{margin:0 0 8px;white-space:pre-wrap;line-height:1.6}.mpac-texto li{margin:3px 0 3px 18px;line-height:1.6}.mpac-texto code{font-family:var(--mono);background:var(--surface-2);padding:1px 4px;border-radius:4px}
.mpac-pensamento{color:var(--muted);font-size:12px;margin:0 0 10px}.mpac-pensamento summary{cursor:pointer}.mpac-pensamento>div{white-space:pre-wrap;padding:8px 0;line-height:1.5}
.mpac-cartao{--surface:#2A1F4D;--surface-2:#352863;--ink:#F1EEFF;--muted:#C9C0EE;--line:#4A3A86;--line-2:#4A3A86;color:var(--ink);border:1px solid var(--line-2);border-radius:12px;padding:12px;margin:12px 0;background:var(--surface);min-width:0}.mpac-cartao>strong{display:block;font-size:12px;font-weight:640;line-height:1.5}
.mpac-cartao .btn{background:#352863;border-color:#5B4A9E;color:#F1EEFF}.mpac-cartao .btn:hover{background:#40307A}.mpac-cartao .btn.pri{background:#C4B5FD;border-color:#C4B5FD;color:#24143E}.mpac-cartao .btn.pri:hover{background:#DDD3FF}
.mpac-result{display:block;width:100%;max-height:210px;object-fit:contain;margin:10px 0;border-radius:8px;background:var(--surface-2)}
.mpac-acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.mpac-acoes .btn{border-radius:20px;padding:5px 9px;font-size:11px}.mpac-detalhes{font-size:12px;white-space:pre-wrap;margin-top:10px;color:var(--muted)}.mpac-detalhes p{margin:0 0 8px}
.mpac-progresso,.mpac-meta,.mpac-vazio{color:var(--muted);font-size:12px}.mpac-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mpac-meta .btn{font-size:11px}.mpac-erro{color:var(--crit);font-size:12px}
.mpac-aviso{flex:none;color:var(--warn);font-size:12px;line-height:1.5;margin:0;padding:0 14px;max-height:100px;overflow:auto}.mpac-aviso:empty{display:none}.mpac-aviso a{display:block;color:var(--accent-300)}
.mpac-form{flex:none;padding:12px;border-top:1px solid var(--line);background:var(--surface)}.mpac-form textarea{resize:vertical;min-height:72px;max-height:180px;width:100%;box-sizing:border-box;color:var(--ink);background:var(--surface-2);font:inherit;padding:10px;border:1px solid var(--line-2);border-radius:12px;outline-offset:2px}
.mpac-controlos{display:flex;align-items:center;gap:6px;margin-top:8px}.mpac-controlos .btn{font-size:11px;padding:6px 8px}.mpac-controlos>.pri{margin-left:auto}.mpac-controlos>button:first-child{font-size:19px;line-height:1}.mpac-notificacao{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.mpac-notificacao small{font-size:9px;color:var(--muted,#a1a1aa)}.mpac-notificacao[aria-pressed="true"]{border-color:var(--accent,#8b5cf6)}.mpac-notificacao[aria-pressed="true"] small{color:inherit}.mpac-notificacao svg{display:block}
.mpac-estimativa{font-size:11px;line-height:1.5;color:var(--muted);margin:8px 0 0;overflow-wrap:anywhere}.mpac-estimativa[hidden]{display:none}
.mpac-confirmar-imagem{display:flow-root;margin:10px 0;font-size:12px}.mpac-confirmar-imagem img{float:left;width:48px;height:48px;object-fit:cover;border-radius:8px;margin-right:8px}.mpac-confirmar-imagem p{margin:4px 0;white-space:pre-wrap}.mpac-cartao>p{font-size:12px;line-height:1.5;margin:8px 0}
.mpac-anexos{display:flex;gap:6px;overflow:auto;margin-bottom:6px}.mpac-anexo{position:relative;flex:0 0 64px}.mpac-anexo img{width:64px;height:64px;object-fit:cover;border-radius:8px}.mpac-anexo button{position:absolute;right:0;top:0;padding:0 5px}.mpac-anexo small{display:block;font-size:10px}
.mpa-tem-chat [data-chat-host]{position:absolute;left:0;top:0;bottom:0;z-index:15;width:min(390px,100%);box-shadow:var(--shadow-lg);display:none}
.mpa-chat-aberto [data-chat-host]{display:flex}.mpa-tem-chat .mpa-scroll{position:relative}
.mpac-lightbox{position:fixed;inset:0;z-index:190;background:#070710f5;display:flex;flex-direction:column;align-items:center;padding:20px;gap:12px}.mpac-lightbox img{max-width:100%;height:calc(100% - 60px);object-fit:contain}
@container mpachat (min-width:1172px){
  .mpa-conteudo{grid-template-columns:minmax(320px,400px) minmax(400px,1fr) 420px}
  .mpa-tem-chat [data-chat-host]{display:flex;position:relative;inset:auto;width:auto;box-shadow:none}
  .mpa-tem-chat .mpa-preview{padding-left:5px;padding-right:5px}.mpac-close,.mpac-toggle{display:none}
}
@media(max-width:700px){
  .mpa-tem-chat [data-chat-host]{position:fixed;inset:0;top:0;bottom:0;width:100%;z-index:25;height:100%}
  .mpac-form textarea{font-size:16px}.mpac-controlos .btn,.mpac-acoes .btn,.mpac-close,.mpac-parar{min-height:44px}.mpac-toggle{display:none}
  .mpa-tem-chat .mpa-atalhos{gap:4px}.mpa-tem-chat .mpa-atalhos .btn{flex:1;padding-left:6px;padding-right:6px}
}

.mpa-tem-chat .mpa-top-l{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
.mpa-tem-chat .mpa-top-l h2{grid-column:1/-1}
.mpa-tem-chat .mpac-toggle{grid-column:2;grid-row:2;float:none}
.mpa-tem-chat .mpa-catalogo{grid-column:1;grid-row:2}

/* Chat: plano e escolha de conversa (não altera o editor ou os filtros). */
.mpac-conversas{padding:8px 12px 0}.mpac-conversas:empty{display:none}.mpac-conversas label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}.mpac-conversas select{min-width:0;flex:1;max-width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px}
.mpac-plano-seccao{display:block;margin:10px 0 6px}.mpac-confirmar-imagem{display:flow-root;margin:7px 0}.mpac-confirmar-imagem span,.mpac-plano-site>span{display:block;line-height:1.4}.mpac-plano-site{margin:8px 0}.mpac-plano-site details{margin-top:4px}.mpac-plano-site summary{cursor:pointer;color:var(--muted);font-size:11px}.mpac-plano-site details p{max-height:160px;overflow:auto;white-space:pre-wrap}.mpac-contexto{font-size:11px;color:var(--ink);padding:8px 10px}.mpac-confirmar-acoes{flex-wrap:wrap}

/* Trabalho em curso, limitado ao chat e à pré-visualização deste editor. */
.mpac-viva{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;font-size:11px}.mpac-verbo{font-weight:600;color:var(--ink)}.mpac-contadores{font-variant-numeric:tabular-nums}.mpac-estrela{display:inline-block;font-style:normal;color:var(--accent-300,#8b5cf6);font-size:21px;animation:mpac-girar 3s linear infinite}.mpac-esqueleto{height:30px;margin-top:8px;border-radius:6px;background:linear-gradient(100deg,#352863 25%,#4A3A86 50%,#352863 75%);background-size:200% 100%;animation:mpac-brilhar 1.5s ease-in-out infinite}.mpac-parar{margin-left:auto}
.mpa-em-edicao{position:relative;outline:3px solid #8B5CF6!important;outline-offset:3px;animation:mpa-edicao 1.5s ease-in-out infinite}.mpa-editar-etiqueta{display:block;width:fit-content;position:relative;z-index:2;background:#2A1F4D;color:#F1EEFF;border:1px solid #8B5CF6;border-radius:5px;padding:2px 6px;font-size:11px;line-height:1.5}.mpa-em-edicao>.mpa-editar-etiqueta{position:absolute;right:0;top:0}
@keyframes mpac-girar{to{transform:rotate(360deg)}}@keyframes mpac-brilhar{to{background-position:-200% 0}}@keyframes mpa-edicao{50%{outline-color:#C4B5FD;box-shadow:0 0 0 5px #8b5cf62b}}
@media(prefers-reduced-motion:reduce){.mpac-estrela,.mpac-esqueleto,.mpa-em-edicao{animation:none}}

/* Pré-visualização da descrição: viewport real, com scroll local para larguras grandes. */
.mpa-preview-controles{display:flex;gap:8px;flex-wrap:wrap}
.mpa-preview-controles [aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px}
.mpa-preview-loja{min-width:0;margin-bottom:24px}
.mpa-preview-loja [role=status]{font-size:12px;color:var(--muted);margin:8px 0}
.mpa-preview-viewport{width:fit-content;max-width:100%;overflow:auto;border:1px solid var(--line-2);background:white;overscroll-behavior:contain;margin:8px auto}
.mpa-preview-viewport iframe{display:block;max-width:none;border:0;background:white}
/* Sem max-width no iframe de 393 px: o popup encaixa o dispositivo com transform:scale (ajustarViewport)
   e o contentor corta com overflow:clip; limitar a largura encolhia a loja duas vezes (356 px a 0,906). */
.mpa-preview-viewport iframe[hidden]{display:none}
.mpa-editor-label{font-size:14px;font-weight:650;margin:20px 0 10px;color:var(--ink)}

/* Editor de fotografia. Tokens e estilos confinados a .mfe; o painel exterior não muda. */
.mpa-ampliada.mfe-aberta{padding:0;align-items:stretch;justify-content:stretch;z-index:210;background:var(--bg)}
.mfe{--mfe-bg:#f8f9fc;--mfe-surface:#fff;--mfe-raised:#f3f4f9;--mfe-work:#eceef5;--mfe-ink:#252b40;--mfe-muted:#596279;--mfe-line:#dce0ec;--mfe-border:#7b8296;--mfe-accent:#7040cd;--mfe-tint:#f0e9fc;--mfe-danger:#b42345;--mfe-selection:#7040cd;--mfe-shadow:0 16px 48px #25304a16;--surface:var(--mfe-surface);--surface-2:var(--mfe-raised);--ink:var(--mfe-ink);--muted:var(--mfe-muted);--line:var(--mfe-line);--accent:var(--mfe-accent);--accent-soft:var(--mfe-tint);--accent-300:var(--mfe-accent);--crit:var(--mfe-danger);--mfe-control:32px;position:fixed;inset:0;z-index:220;display:grid;grid-template-rows:72px 56px minmax(0,1fr) 56px;background:var(--mfe-bg);color:var(--mfe-ink);font:13px/1.5 var(--sans,system-ui);text-align:left;overflow:hidden;isolation:isolate;color-scheme:light;-webkit-tap-highlight-color:transparent}
:root[data-theme="dark"] .mfe{--mfe-bg:#181923;--mfe-surface:#1e1f2c;--mfe-raised:#292a3b;--mfe-work:#13141e;--mfe-ink:#f0f0fa;--mfe-muted:#b7bbd0;--mfe-line:#393b50;--mfe-border:#82849f;--mfe-accent:#c1a1ff;--mfe-tint:#35294d;--mfe-danger:#ff9eb4;--mfe-selection:#8352df;--mfe-shadow:0 16px 48px #0004;color-scheme:dark}
.mfe *{box-sizing:border-box}.mfe :is(textarea,input)::placeholder{color:var(--mfe-muted);opacity:1}.mfe [hidden]{display:none!important}.mfe button,.mfe input,.mfe textarea,.mfe select,.mfe summary{font:inherit;font-variant-numeric:tabular-nums}.mfe button,.mfe summary,.mfe input,.mfe select,.mfe textarea{touch-action:manipulation}.mfe .btn,.mfe summary.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--mfe-control);min-height:var(--mfe-control);padding:0 12px;border:1px solid var(--mfe-border);border-radius:8px;background:var(--mfe-surface);color:var(--mfe-ink);font-size:12px;line-height:1.25;font-weight:550;white-space:nowrap;box-shadow:none;cursor:pointer;transition:background-color 80ms,border-color 80ms,color 80ms}
.mfe .btn:hover,.mfe summary.btn:hover{background:var(--mfe-raised);border-color:var(--mfe-accent)}.mfe .btn:active,.mfe .mfe-feedback{transition:none!important;background:var(--mfe-tint)!important;border-color:var(--mfe-accent)!important;box-shadow:inset 0 0 0 1px var(--mfe-accent)!important}.mfe :is(button,input,textarea,select,summary,a):focus-visible{outline:2px solid var(--mfe-accent);outline-offset:2px}.mfe button:disabled{opacity:.42;cursor:default}.mfe .btn[aria-pressed=true]{border-color:var(--mfe-accent);background:var(--mfe-tint);color:var(--mfe-accent)}.mfe .btn.pri{transition:border-color 80ms;background:#7040cd;border-color:#7040cd;color:#fff}.mfe .btn.pri:hover{background:#6032b9}:root[data-theme="dark"] .mfe .btn.pri{transition:border-color 80ms;background:#8352df;border-color:#8352df;color:#fff}.mfe .mpac-cartao .btn.pri{background:#c4b5fd;border-color:#c4b5fd;color:#24143e}.mfe .btn.pri.mfe-feedback,.mfe .btn.pri:active{color:var(--mfe-accent)!important}:root[data-theme="dark"] .mfe .btn.pri:hover{background:#7443ce;border-color:var(--mfe-accent)}.mfe .mpac-cartao .btn.pri:hover{background:#ddd3ff;border-color:#ddd3ff}.mfe .mfe-danger{color:var(--mfe-danger);margin-left:8px}.mfe .mfe-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mfe-top{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--mfe-line);background:var(--mfe-surface);min-width:0}.mfe-brand{display:grid;gap:0;min-width:184px}.mfe-brand strong{font-size:18px;line-height:24px;letter-spacing:-.4px}.mfe-brand small{color:var(--mfe-muted);font-size:12px;line-height:16px}.mfe-top-acoes{display:flex;gap:8px;align-items:center;margin-left:auto;min-width:0}.mfe-top-acoes>button:last-child{margin-left:8px}.mfe-guardar{position:relative}.mfe-guardar summary{list-style:none;cursor:pointer;flex-direction:row-reverse}.mfe-guardar summary::-webkit-details-marker{display:none}.mfe-guardar[open]{z-index:30}.mfe-guardar[open] summary{border-color:var(--mfe-accent);background:var(--mfe-tint)}.mfe-guardar>button{position:absolute;top:calc(100% + 8px);right:0;width:216px;justify-content:flex-start!important;background:var(--mfe-surface);box-shadow:var(--mfe-shadow);z-index:30}.mfe-guardar>button+button{top:calc(100% + 48px)}
.mfe-contextual{display:flex;align-items:center;gap:16px;min-width:0;padding:8px 24px;border-bottom:1px solid var(--mfe-line);background:var(--mfe-bg)}.mfe-contextual>strong{font-size:12px;min-width:48px;color:var(--mfe-muted)}.mfe-context-group{display:flex;align-items:center;gap:8px;min-width:0;flex:none}.mfe-context-group+.mfe-context-group{border-left:1px solid var(--mfe-line);padding-left:16px}.mfe-contextual .btn{background:transparent}.mfe-contextual label{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}.mfe-contextual input{width:72px;accent-color:var(--mfe-accent)}
.mfe-body{display:grid;grid-template-columns:320px 80px 272px minmax(0,1fr);min-height:0;min-width:0}.mfe-chat{min-height:0;border-right:1px solid var(--mfe-line);background:var(--mfe-surface);display:flex}.mfe-chat.mpac{width:auto;max-width:none;min-width:0;border-radius:0}.mfe-chat .mpac-head{height:56px;min-height:56px;padding:16px;border-bottom:1px solid var(--mfe-line)}.mfe-chat .mpac-head strong{font-size:14px;line-height:24px}.mfe-chat .mpac-close{display:none}.mfe-chat .mpac-conversas,.mfe-chat .mpac-pay{padding:8px 16px;gap:8px}.mfe-chat :is(select,textarea){width:100%;border:1px solid var(--mfe-border);border-radius:8px;background:var(--mfe-bg);color:var(--mfe-ink);padding:4px 8px;min-height:var(--mfe-control);font-size:12px}.mfe-chat .mpac-conversas{font-size:12px;align-items:center}.mfe-chat .mpac-pay label{font-size:12px;line-height:20px}.mfe-chat .mpac-form{padding:16px;border-top:1px solid var(--mfe-line);gap:8px;background:var(--mfe-surface)}.mfe-chat .mpac-form textarea{min-height:88px;resize:vertical;padding:12px;font-size:13px}.mfe-chat .mpac-controlos{gap:8px}.mfe-chat .mpac-controlos .btn{font-size:12px;padding:0 8px}.mfe-chat .mpac-controlos>.btn:first-child{width:var(--mfe-control);padding:0}.mfe-chat .mpac-mensagens{padding:16px;font-size:13px;line-height:1.6}.mfe-chat :is(.mpac-vazio,.mpac-meta,.mpac-estimativa,.mpac-pensamento,.mpac-notificacao small){font-size:12px;color:var(--mfe-muted)}.mfe-chat small{font-size:12px}.mfe-chat .mpac-texto p{font-size:13px}.mfe-chat .mpac-pensamento summary{display:flex;align-items:center;min-height:var(--mfe-control);border-radius:8px}.mfe-chat .mpac-acoes{gap:8px;flex-wrap:wrap}.mfe-chat .mpac-acoes .btn{white-space:normal;height:auto;min-height:var(--mfe-control);padding:8px}.mfe-chat .mpac-cartao{border-radius:8px}.mfe-chat .mpac-notificacao{gap:4px}.mfe-chat .mpac-notificacao svg{width:18px;height:18px}.mfe-chat .mpac-aviso{font-size:12px;color:var(--mfe-muted);max-height:180px}.mfe-chat .mpac-aviso .btn{margin:8px 0}.mfe-chat .mpac-aviso a{display:flex;align-items:center;min-height:var(--mfe-control);padding:0 8px;margin:8px 0;border:1px solid var(--mfe-border);border-radius:8px}.mfe-chat .mpac-anexo button{min-width:var(--mfe-control)}
.mfe-nav{display:flex;flex-direction:column;gap:8px;padding:16px 8px;border-right:1px solid var(--mfe-line);background:var(--mfe-bg);overflow:auto}.mfe-nav .btn{display:flex;width:100%;flex-direction:column;justify-content:center;gap:4px;border:1px solid transparent;border-radius:8px;padding:8px 0;background:transparent;flex-shrink:0;height:64px;min-height:64px}.mfe-nav .mfe-button-label:empty{display:none}.mfe-nav .mfe-icon{width:18px;height:18px}.mfe-nav small{font-size:11px;line-height:16px;font-weight:550}.mfe-nav [data-tab=chat]{display:none}
.mfe-panel{min-height:0;overflow:auto;background:var(--mfe-surface);border-right:1px solid var(--mfe-line);padding:0 16px 16px;overscroll-behavior:contain;scrollbar-gutter:stable}.mfe-panel-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;height:56px;min-height:56px;margin:0 -16px 16px;padding:16px;border-bottom:1px solid var(--mfe-line);background:var(--mfe-surface)}.mfe-panel-head strong{font-size:14px;line-height:24px}.mfe .mfe-panel-head button{display:none}.mfe-panel>.btn{margin:0 8px 16px 0}.mfe-panel textarea{width:100%;min-height:96px;padding:12px;background:var(--mfe-bg);color:var(--mfe-ink);border:1px solid var(--mfe-border);border-radius:8px;margin:0 0 16px;resize:vertical;font-size:13px}.mfe-control{display:grid;grid-template-columns:1fr 64px;gap:8px;margin:0 0 16px;align-items:center}.mfe-control>span{font-size:12px}.mfe-control input[type=number]{height:var(--mfe-control);width:64px;background:var(--mfe-bg);color:var(--mfe-ink);border:1px solid var(--mfe-border);border-radius:8px;text-align:center;padding:4px;font-size:12px;font-variant-numeric:tabular-nums}.mfe input[type=range]{accent-color:var(--mfe-accent);cursor:pointer;height:var(--mfe-control);margin:0}.mfe-control input[type=range]{grid-column:1/-1;width:100%}.mfe-field{display:grid;gap:8px;font-size:12px;margin:0 0 16px}.mfe-field select{width:100%;height:var(--mfe-control);padding:0 8px;background:var(--mfe-bg);color:var(--mfe-ink);border:1px solid var(--mfe-border);border-radius:8px}.mfe-color{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px;font-size:12px;min-height:var(--mfe-control)}.mfe-color input{width:64px;height:var(--mfe-control);padding:4px;border:1px solid var(--mfe-border);background:var(--mfe-bg);border-radius:8px}.mfe-help{font-size:12px;color:var(--mfe-muted);line-height:1.7;margin:0 0 16px}.mfe-layers{display:grid;gap:8px;border-top:1px solid var(--mfe-line);margin-top:24px;padding-top:16px}.mfe-layers>strong{font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:1px;color:var(--mfe-muted)}.mfe-layers .btn{justify-content:flex-start;overflow:hidden;text-overflow:ellipsis}.mfe-layers .btn:before{content:'';width:16px;height:16px;border:1px solid var(--mfe-border);border-radius:4px;background:var(--mfe-raised);flex:none}.mfe-layers .btn[aria-pressed=true]:before{background:var(--mfe-accent);border-color:var(--mfe-accent)}
.mfe-panel-actions,.mfe-ia-acoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}.mfe-panel-actions>.btn,.mfe-ia-acoes>.btn{width:100%;margin:0;padding:0 8px}.mfe-panel-actions>.btn{padding:0 4px;gap:4px}.mfe-ia-acoes>.btn:nth-child(3){grid-column:1/-1}
.mfe-filtros,.mfe-elementos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.mfe-filtros .btn{height:88px;min-height:88px;display:flex;flex-direction:column;padding:4px;gap:4px;white-space:normal}.mfe-filter-preview{display:block;width:100%;height:48px;border-radius:4px;background:radial-gradient(ellipse at 60% 50%,#ffffffa0,transparent 60%),linear-gradient(145deg,var(--mfe-filter),#242b48)}.mfe-elementos .btn{height:48px;min-height:48px;white-space:normal}
.mfe-work{min-width:0;min-height:0;position:relative;overflow:hidden;background:var(--mfe-work);background-image:radial-gradient(var(--mfe-line) .75px,transparent .75px);background-size:16px 16px}.mfe-viewport{height:100%;width:100%;overflow:auto;overscroll-behavior:contain}.mfe-surface{width:max-content;min-width:100%;min-height:100%;padding:24px;display:flex;align-items:center;justify-content:center}.mfe-stage{position:relative;flex:none;touch-action:none;box-shadow:0 8px 32px #0002;outline:1px solid #0001;background:repeating-conic-gradient(#e5e7eb 0% 25%,#fff 0% 50%) 50% / 16px 16px}.mfe-canvas{display:block;width:100%;height:100%;max-height:none;max-width:none;touch-action:none}.mfe-scale{position:absolute;bottom:16px;right:16px;pointer-events:none;min-width:48px;padding:4px 8px;background:#252b40;color:#fff;font-size:12px;line-height:24px;border-radius:8px;font-variant-numeric:tabular-nums}.mfe-selection{position:absolute;border:2px solid var(--mfe-selection);pointer-events:auto;cursor:move;transform-origin:center}.mfe-selection.mfe-crop{border:2px dashed #fff;box-shadow:0 0 0 1px #333,0 0 0 5000px #0005}.mfe-selection.mfe-crop:before{content:'';position:absolute;inset:33.33%;border:1px solid #ffffff7a;pointer-events:none}.mfe .mfe-handle{position:absolute;width:16px;height:16px;padding:0;border:2px solid #7040cd;border-radius:50%;background:white;z-index:3;min-height:0;touch-action:none;pointer-events:auto}.mfe-nw{left:-9px;top:-9px;cursor:nwse-resize}.mfe-ne{right:-9px;top:-9px;cursor:nesw-resize}.mfe-sw{left:-9px;bottom:-9px;cursor:nesw-resize}.mfe-se{right:-9px;bottom:-9px;cursor:nwse-resize}.mfe-rodar{left:calc(50% - 8px);top:-32px;cursor:grab}.mfe-guide-x:before,.mfe-guide-y:after{content:'';position:absolute;background:#a33cff;z-index:5;pointer-events:none}.mfe-guide-x:before{height:100%;width:1px;left:50%}.mfe-guide-y:after{width:100%;height:1px;top:50%}
.mfe-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;padding:8px 24px;border-top:1px solid var(--mfe-line);background:var(--mfe-surface)}.mfe-footer>small{margin-right:auto;color:var(--mfe-muted);font-size:12px}.mfe-footer input{width:120px}.mfe-footer output{min-width:48px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.mfe-footer select{max-width:160px;height:var(--mfe-control);background:var(--mfe-bg);color:var(--mfe-ink);border:1px solid var(--mfe-border);border-radius:8px;padding:0 8px;font-size:12px}.mfe-notice{pointer-events:none;position:absolute;bottom:72px;right:24px;max-width:544px;padding:16px;border:1px solid var(--mfe-border);border-radius:8px;background:var(--mfe-surface);color:var(--mfe-ink);box-shadow:var(--mfe-shadow);font-size:13px;z-index:40;white-space:pre-wrap}.mfe-notice:empty{display:none}.mfe-confirm{position:absolute;inset:0;background:#10121cdd;z-index:50;display:flex;align-content:center;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:24px;color:#fff}.mfe-confirm p{flex-basis:100%;text-align:center;font-size:16px}.mfe [data-crop-status]{font-size:12px;line-height:1.6}.mfe [data-crop-status][role=alert]{color:var(--mfe-danger);font-weight:600}.mfe[aria-busy=true] .mfe-brand small:before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--mfe-accent);animation:mfe-saving .8s ease-in-out infinite alternate}@keyframes mfe-saving{to{opacity:.3}}
@media(min-width:701px) and (max-width:1500px){.mfe-contextual{gap:8px;padding-left:24px;padding-right:24px}.mfe-context-group+.mfe-context-group{padding-left:8px}.mfe-contextual .btn{padding:0 8px}.mfe-contextual .mfe-icon{display:none}.mfe-brand{min-width:168px}.mfe-top-acoes .btn{padding:0 8px}.mfe-tem-publicacao .mfe-top-acoes :is(button:nth-child(1),button:nth-child(2),button:nth-child(3)) .mfe-button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.mfe-tem-publicacao .mfe-top-acoes :is(button:nth-child(1),button:nth-child(2),button:nth-child(3)){width:32px}}
@media(max-width:700px){
 .mfe{--mfe-control:44px;--mfe-head-size:104px;--mfe-foot-size:104px;grid-template-rows:var(--mfe-head-size) 104px minmax(0,1fr) var(--mfe-foot-size) 72px;font-size:13px}.mfe.mfe-tem-publicacao{--mfe-head-size:156px}.mfe-top{display:block;padding:8px 16px}.mfe-brand{height:44px;min-width:0;max-width:none;padding-right:104px}.mfe-brand strong{font-size:16px}.mfe-brand small{font-size:12px}.mfe-top-acoes{display:grid;grid-template-columns:44px 44px 44px minmax(0,1fr);gap:8px;height:44px;overflow:visible}.mfe-top-acoes>.btn{width:44px;padding:0}.mfe-top-acoes>button:nth-child(-n+3) .mfe-button-label,.mfe-top-acoes>button:last-child .mfe-button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.mfe-top-acoes>button:last-child{position:absolute;top:8px;right:16px;margin:0}.mfe-top-acoes>button:nth-last-child(3){position:absolute;top:8px;right:68px;width:44px}.mfe-top-acoes>button:nth-last-child(3) .mfe-button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.mfe-top-acoes>.mfe-publish-all{grid-row:2;grid-column:1/-1;width:100%;white-space:normal;padding:4px 8px}.mfe-tem-publicacao .mfe-top-acoes{height:96px}.mfe-guardar summary{width:100%;height:44px}.mfe-guardar>button{position:fixed;right:16px;top:108px;width:240px}.mfe-guardar>button+button{top:160px}
 .mfe-contextual{display:flex;flex-wrap:wrap;align-content:center;gap:4px 8px;padding:4px 16px}.mfe-contextual>strong{display:none}.mfe-context-group{gap:4px}.mfe-context-group:first-of-type{flex-basis:100%}.mfe-context-group+.mfe-context-group{border:0;padding:0}.mfe-contextual .btn{width:44px;padding:0}.mfe-contextual .mfe-button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.mfe-contextual label{font-size:0;gap:0}.mfe-contextual input{width:88px;min-width:88px}.mfe-contextual .mfe-danger{margin:0}.mfe-contextual .mfe-icon{display:block;width:18px;height:18px}
 .mfe-body{display:block;position:static}.mfe-work{height:100%;width:100%}.mfe-surface{padding:24px;align-items:center}.mfe[data-panel-open=true] .mfe-surface{align-items:flex-start;padding-top:48px}.mfe-chat{display:none}.mfe-chat-aberto .mfe-chat{display:flex;position:absolute;height:auto;top:var(--mfe-head-size);bottom:72px;left:0;right:0;z-index:20}.mfe-tem-publicacao.mfe-chat-aberto .mfe-chat{top:var(--mfe-head-size)}.mfe-chat .mpac-close{display:flex}.mfe-chat .mpac-head{height:64px;min-height:64px;padding:8px 16px}.mfe-chat-aberto .mfe-contextual,.mfe-chat-aberto .mfe-footer,.mfe-chat-aberto .mfe-work{visibility:hidden}.mfe-chat :is(select,textarea){font-size:16px}.mfe-chat .mpac-form{padding:8px 16px}.mfe-chat .mpac-form textarea{min-height:72px;font-size:16px}.mfe-chat .mpac-mensagens{padding:16px}.mfe-chat .mpac-controlos .btn{font-size:12px}.mfe-chat .mpac-head .mpac-close{font-size:12px}
 .mfe-panel{display:none;position:absolute;bottom:calc(var(--mfe-foot-size) + 72px);left:0;right:0;z-index:12;border:1px solid var(--mfe-border);border-radius:16px 16px 0 0;max-height:min(34vh,max(144px,calc(100dvh - var(--mfe-head-size) - 104px - var(--mfe-foot-size) - 72px - 200px)));box-shadow:0 -8px 32px #0002;padding:0 16px 16px;scrollbar-gutter:auto}.mfe[data-panel-open=true] .mfe-panel{display:block}.mfe-panel-head{position:sticky;top:0;z-index:3;height:64px;min-height:64px;margin-bottom:16px;padding:8px 16px}.mfe .mfe-panel-head button{display:flex;width:44px;padding:0}.mfe-panel-head .mfe-button-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.mfe-panel :is(textarea,select,input[type=number]){font-size:16px}.mfe-panel .mfe-control{margin-bottom:16px}.mfe-panel .mfe-help{font-size:12px}
 .mfe-nav{position:absolute;bottom:0;left:0;right:0;height:72px;z-index:25;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;overflow:hidden;border-right:0;border-top:1px solid var(--mfe-line);padding:8px 4px;background:var(--mfe-surface)}.mfe-nav .btn{min-width:44px;width:100%;height:56px;min-height:56px;padding:4px 0;gap:4px;border-radius:8px}.mfe-nav .mfe-icon{width:18px;height:18px}.mfe-nav small{font-size:11px;line-height:16px;letter-spacing:-.8px}.mfe-nav [data-tab=chat]{display:flex}
 .mfe-footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 8px;padding:4px 16px;overflow:visible;white-space:nowrap}.mfe-footer>small{display:none}.mfe-footer input{width:100%;grid-column:1/3;min-width:0}.mfe-footer output{min-width:0}.mfe-footer .btn{min-width:0;width:100%;padding:0 4px;font-size:12px;gap:4px}.mfe-footer .mfe-icon{display:none}.mfe-footer select{width:100%;max-width:none;min-width:0;padding:0 4px;font-size:12px}.mfe-footer input{grid-row:1;grid-column:1/3}.mfe-footer output{grid-row:1;grid-column:3}.mfe-footer>button:nth-of-type(3){grid-row:1;grid-column:4}.mfe-footer>button:nth-of-type(1){grid-row:2;grid-column:1}.mfe-footer>button:nth-of-type(2){grid-row:2;grid-column:2}.mfe-footer [aria-pressed]{grid-row:2;grid-column:3/5}.mfe-footer [aria-label="Versões guardadas"]{grid-row:3;grid-column:1/-1}.mfe:has(.mfe-footer select:not([hidden])){--mfe-foot-size:156px}
 .mfe-notice{bottom:calc(var(--mfe-foot-size) + 88px);left:16px;right:16px;max-height:144px;overflow:auto;font-size:12px;padding:16px}.mfe .mfe-handle{width:44px;height:44px;border:0;background:transparent;border-radius:50%}.mfe-handle:after{content:'';position:absolute;inset:14px;border:2px solid #7040cd;border-radius:50%;background:#fff;pointer-events:none}.mfe-nw,.mfe-sw{left:-23px}.mfe-ne,.mfe-se{right:-23px}.mfe-nw,.mfe-ne{top:-23px}.mfe-sw,.mfe-se{bottom:-23px}.mfe-rodar{left:calc(50% - 22px);top:-48px}.mfe-scale{right:8px;bottom:8px;font-size:12px;padding:0 8px}
}
/* Editor visual da descrição — isolado do CSS da loja. */
.mpd{border:1px solid var(--line,#8885);border-radius:12px;padding:10px;margin:8px 0;background:var(--surface,#fff);color:var(--ink,inherit)}
.mpd-bar,.mpd nav,.mpd-paletas{display:flex;gap:6px;flex-wrap:wrap}.mpd .btn{white-space:normal}.mpd-panel{padding-top:12px}.mpd-panel[hidden]{display:none}.mpd nav{margin-bottom:12px}.mpd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px}.mpd label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600}.mpd input,.mpd select{min-width:0;width:100%;max-width:100%;border:1px solid var(--line,#8885);border-radius:7px;padding:7px;background:var(--bg,#fff);color:inherit}.mpd input[type=checkbox]{width:18px;height:18px}.mpd p{font-size:12px;margin:8px 0}.mpd-paletas{margin-top:10px}.mpd-paletas i{display:inline-block;width:18px;height:18px;border-radius:50%;margin-left:5px}.mpd-versoes{padding-left:20px;max-height:230px;overflow:auto}.mpd-versoes li{margin:8px 0}.mpd-versoes button{margin-left:8px}.mpd [aria-pressed=true]{box-shadow:inset 0 0 0 2px #328963}

.mpd-panel{max-height:300px;overflow:auto;overscroll-behavior:contain}.mpd nav{position:sticky;top:0;background:var(--surface,#fff);padding:4px 0;z-index:1}@media(max-width:700px){.mpd-panel{max-height:220px}.mpd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mpd{padding:8px}.mpd p{margin:5px 0}}
.mpd pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;max-height:140px;overflow:auto}.mpd details{font-size:12px;margin:8px 0}
@media(prefers-reduced-motion:reduce){.mfe *{transition:none!important;animation:none!important}}

/* Erro dentro do cartão roxo: contraste AA nos dois temas (gate r7). */
.mpac-cartao .mpac-erro{color:#FFC2C2}

/* Miner review workspace — 16 Oct. Scoped away from the separate photo editor.
   Shared values with its UI: 8 px grid/radius, 32/36 px controls, 44 px touch. */
.mpa-pop{--popup-bg:#f8f9fc;--popup-surface:#fff;--popup-raised:#f3f4f9;--popup-ink:#252b40;--popup-muted:#596279;--popup-line:#dce0ec;--popup-border:#7b8296;--popup-accent:#7040cd;--popup-tint:#f0e9fc;--surface:var(--popup-surface);--surface-2:var(--popup-raised);--ink:var(--popup-ink);--muted:var(--popup-muted);--line:var(--popup-line);--line-2:var(--popup-border);--accent:var(--popup-accent);--accent-300:var(--popup-accent);--accent-ink:#fff;--warn:#815300;--warn-soft:#fff3d6;--crit:#b42345;--crit-soft:#fff0f3;--info-soft:#eef0fa;--popup-control:32px;background:var(--popup-surface);color:var(--popup-ink);border:1px solid var(--popup-line);border-radius:16px;box-shadow:0 24px 80px #0003;font:13px/1.5 var(--sans,system-ui);color-scheme:light}
:root[data-theme=dark] .mpa-pop:where(:not(.mfe, .mfe *)){--popup-bg:#181923;--popup-surface:#1e1f2c;--popup-raised:#292a3b;--popup-ink:#f0f0fa;--popup-muted:#b7bbd0;--popup-line:#393b50;--popup-border:#82849f;--popup-accent:#c1a1ff;--popup-tint:#35294d;--accent-ink:#21152f;--warn:#ffd37c;--warn-soft:#3b301e;--crit:#ff9eb4;--crit-soft:#3e2431;--info-soft:#292b40;color-scheme:dark}
.mpa-pop *:where(:not(.mfe, .mfe *)){box-sizing:border-box}.mpa-pop [hidden]:where(:not(.mfe, .mfe *)){display:none!important}
.mpa-pop :is(button,input,select,textarea,summary):where(:not(.mfe, .mfe *)){touch-action:manipulation;font-variant-numeric:tabular-nums}
.mpa-pop .btn:where(:not(.mfe, .mfe *)){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--popup-control);height:var(--popup-control);padding:0 12px;border:1px solid var(--popup-border);border-radius:8px;background:var(--popup-surface);color:var(--popup-ink);font:550 12px/1.25 var(--sans,system-ui);white-space:nowrap;box-shadow:none;transition:background-color 80ms,border-color 80ms,color 80ms;cursor:pointer}
.mpa-pop .btn:hover:where(:not(.mfe, .mfe *)){background:var(--popup-raised);border-color:var(--popup-accent)}
.mpa-pop .btn:active:where(:not(.mfe, .mfe *)),.mpa-pop .popup-feedback:where(:not(.mfe, .mfe *)){background:var(--popup-tint);border-color:var(--popup-accent);box-shadow:inset 0 0 0 1px var(--popup-accent)}
.mpa-pop :is(button,input,textarea,select,summary):focus-visible:where(:not(.mfe, .mfe *)){outline:2px solid var(--popup-accent);outline-offset:2px}
.mpa-pop button:disabled:where(:not(.mfe, .mfe *)){opacity:.48;cursor:default}.mpa-pop .btn[aria-pressed=true]:where(:not(.mfe, .mfe *)){background:var(--popup-tint);border-color:var(--popup-accent);color:var(--popup-accent)}
.mpa-top:where(:not(.mfe, .mfe *)){padding:16px 24px;gap:8px 16px;grid-template-columns:minmax(0,1fr) auto 32px;min-height:104px;background:var(--popup-surface)}
.mpa-top h2:where(:not(.mfe, .mfe *)){font-size:18px;line-height:24px;font-weight:650;letter-spacing:-.3px;margin:0}.mpa-catalogo:where(:not(.mfe, .mfe *)){margin-top:8px}.mpa-nav:where(:not(.mfe, .mfe *)){gap:8px}.mpa-pop .mpa-x:where(:not(.mfe, .mfe *)){width:32px;padding:0;font-size:24px;border-color:transparent;background:transparent}.mpa-guardado:where(:not(.mfe, .mfe *)){font-size:12px;line-height:16px;min-height:16px}.mpa-faixa:where(:not(.mfe, .mfe *)){padding:8px 24px;min-height:36px;font-size:12px;line-height:20px;border-bottom:1px solid var(--popup-line)}
.mpa-preview:where(:not(.mfe, .mfe *)){padding:0 16px 24px;background:var(--popup-bg)}.mpa-lado:where(:not(.mfe, .mfe *)){padding:0 16px 24px;background:var(--popup-surface)}
.mpa-preview-h:where(:not(.mfe, .mfe *)),.mpa-lado-head:where(:not(.mfe, .mfe *)),.mpa-pop .mpac-head:where(:not(.mfe, .mfe *)){display:flex;align-items:center;justify-content:space-between;gap:8px;height:56px;min-height:56px;padding:16px;margin:0 -16px 16px;border-bottom:1px solid var(--popup-line);background:var(--popup-surface)}
.mpa-preview-h small:where(:not(.mfe, .mfe *)){font-size:12px;color:var(--popup-muted);line-height:24px}.mpa-lado-head strong:where(:not(.mfe, .mfe *)),.mpa-pop .mpac-head strong:where(:not(.mfe, .mfe *)){font-size:14px;line-height:24px;font-weight:650}.mpa-lado-head span:where(:not(.mfe, .mfe *)){font-size:12px;color:var(--popup-muted)}
.mpa-lado>section:where(:not(.mfe, .mfe *)){padding:16px 0;border-bottom:1px solid var(--popup-line)}.mpa-lado>[data-precos]:where(:not(.mfe, .mfe *)){padding-top:0}.mpa-lado h3:where(:not(.mfe, .mfe *)){font-size:14px;line-height:24px;margin:0 0 16px;font-weight:650}.mpa-lado label:where(:not(.mfe, .mfe *)){margin:0 0 16px;font-size:12px;line-height:20px;color:var(--popup-muted)}.mpa-lado label:last-child:where(:not(.mfe, .mfe *)){margin-bottom:0}
.mpa-lado :is(select,input):where(:not(.mfe, .mfe *)),.mpa-pop .mpac :is(select):where(:not(.mfe, .mfe *)){min-height:36px;border:1px solid var(--popup-border);border-radius:8px;background:var(--popup-bg);color:var(--popup-ink);padding:7px 8px;font:13px/20px var(--sans,system-ui)}
.mpa-lado .mpa-ed:where(:not(.mfe, .mfe *)){font-size:13px;line-height:20px;min-height:36px;padding:7px 8px;margin-top:8px;border-color:var(--popup-border);border-radius:8px;background:var(--popup-bg)}.mpa-lado .hint:where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px;margin:8px 0}.mpa-pop .mpa-repor:where(:not(.mfe, .mfe *)){font-size:12px;min-height:32px;bottom:0;right:0;border-radius:8px;color:var(--popup-ink)}
.mpa-fotos-secao:where(:not(.mfe, .mfe *)){padding:12px;margin:0 0 16px;border:1px solid var(--popup-line);border-radius:8px;background:var(--popup-bg)}.mpa-secao-h:where(:not(.mfe, .mfe *)){gap:8px;margin-bottom:8px;min-height:32px}.mpa-secao-h h4:where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px;margin:0}.mpa-fotos-grid:where(:not(.mfe, .mfe *)){gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));min-height:0}.mpa-fotos-secao[data-secao=principal] .mpa-fotos-grid:where(:not(.mfe, .mfe *)){grid-template-columns:repeat(3,minmax(0,1fr))}.mpa-mini:where(:not(.mfe, .mfe *)){border-radius:8px;min-width:0}.mpa-pop .mpa-remover:where(:not(.mfe, .mfe *)){width:32px;height:32px;min-height:32px;border:1px solid #fff8;background:#252b40;color:white;font-size:22px;line-height:1;border-radius:50%;right:0;top:0}.mpa-foto:where(:not(.mfe, .mfe *)){width:100%;border-radius:8px}.mpa-num:where(:not(.mfe, .mfe *)){font-size:12px;line-height:16px;min-width:16px;padding:0 4px;left:4px;bottom:4px}.mpa-foto img:where(:not(.mfe, .mfe *)){aspect-ratio:1;object-fit:cover}
.mpa-pop .mpac:where(:not(.mfe, .mfe *)){background:var(--popup-surface);color:var(--popup-ink)}.mpa-pop .mpac-head:where(:not(.mfe, .mfe *)){margin:0;padding:16px}.mpa-pop .mpac :is(.mpac-conversas,.mpac-pay):where(:not(.mfe, .mfe *)){padding:8px 16px}.mpa-pop .mpac-conversas label:where(:not(.mfe, .mfe *)),.mpa-pop .mpac-pay label:where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px;gap:8px}.mpa-pop .mpac-conversas select:where(:not(.mfe, .mfe *)){flex:1}.mpa-pop .mpac-pay:where(:not(.mfe, .mfe *)){border-bottom:1px solid var(--popup-line)}
.mpa-pop .mpac-mensagens:where(:not(.mfe, .mfe *)){padding:16px;overflow-anchor:none;scrollbar-gutter:stable;font-size:13px;line-height:1.6}.mpa-pop .mpac-texto p:where(:not(.mfe, .mfe *)){font-size:13px;line-height:20px;margin:0 0 8px}.mpa-pop .mpac :is(.mpac-meta,.mpac-vazio,.mpac-estimativa,.mpac-pensamento,.mpac-notificacao small):where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px}.mpa-pop .mpac-form:where(:not(.mfe, .mfe *)){padding:16px;background:var(--popup-surface)}.mpa-pop .mpac-form textarea:where(:not(.mfe, .mfe *)){min-height:88px;padding:12px;border:1px solid var(--popup-border);border-radius:8px;background:var(--popup-bg);font:13px/20px var(--sans,system-ui)}.mpa-pop .mpac-controlos:where(:not(.mfe, .mfe *)){gap:8px;margin-top:8px}.mpa-pop .mpac-controlos>.btn:first-child:where(:not(.mfe, .mfe *)){width:32px;padding:0;font-size:20px}.mpa-pop .mpac-controlos .btn:where(:not(.mfe, .mfe *)){padding:0 8px;font-size:12px}.mpa-pop .mpac-notificacao small:where(:not(.mfe, .mfe *)){font-size:12px}.mpa-pop .mpac-acoes:where(:not(.mfe, .mfe *)){gap:8px;margin-top:8px}.mpa-pop .mpac-acoes .btn:where(:not(.mfe, .mfe *)){border-radius:8px;padding:0 8px;font-size:12px}.mpa-pop .mpac-cartao:where(:not(.mfe, .mfe *)){border-radius:8px;padding:12px;background:#2a1f4d;border-color:#4a3a86;color:#f1eeff}.mpa-pop .mpac-cartao .btn:where(:not(.mfe, .mfe *)){background:#352863;border-color:#5b4a9e;color:#f1eeff}.mpa-pop .mpac-cartao .btn:hover:where(:not(.mfe, .mfe *)){background:#40307a}.mpa-pop .mpac-cartao .btn.pri:where(:not(.mfe, .mfe *)){background:#c4b5fd;border-color:#c4b5fd;color:#24143e}.mpa-pop .mpac-confirmar-imagem:where(:not(.mfe, .mfe *)){margin:8px 0}.mpa-pop .mpac-confirmar-imagem img:where(:not(.mfe, .mfe *)){width:48px;height:48px;border-radius:8px;margin-right:8px}.mpa-pop .mpac-plano-seccao:where(:not(.mfe, .mfe *)){margin:16px 0 8px}.mpa-pop .mpac-cartao :is(small,.mpac-plano-site summary):where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px}.mpa-pop .mpac-result:where(:not(.mfe, .mfe *)){height:176px;max-height:176px;object-fit:contain;background:#251a43;border-radius:8px}.mpa-pop .mpac-viva:where(:not(.mfe, .mfe *)){display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:0 8px;min-height:48px;width:100%}.mpa-pop .mpac-viva .mpac-estrela:where(:not(.mfe, .mfe *)){grid-column:1;grid-row:1/3}.mpa-pop .mpac-verbo:where(:not(.mfe, .mfe *)){grid-column:2;grid-row:1;font-size:12px;line-height:20px}.mpa-pop .mpac-contadores:where(:not(.mfe, .mfe *)){grid-column:2;grid-row:2;font-size:12px;line-height:20px;white-space:nowrap}.mpa-pop .mpac-parar:where(:not(.mfe, .mfe *)){grid-column:3;grid-row:1/3;margin:0}.mpa-pop .mpac-detalhes:where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px}.mpa-pop .mpac-anexo button:where(:not(.mfe, .mfe *)){min-width:32px;min-height:32px}.mpa-pop .mpac-estimativa:where(:not(.mfe, .mfe *)){min-height:20px}.mpa-pop .mpac-aviso:where(:not(.mfe, .mfe *)){font-size:12px;padding:0 16px}
.mpa-pop .mpd:where(:not(.mfe, .mfe *)){margin:0 0 8px;padding:8px;border:1px solid var(--popup-line);border-radius:8px;background:var(--popup-surface)}.mpa-pop .mpd-bar:where(:not(.mfe, .mfe *)),.mpa-pop .mpd nav:where(:not(.mfe, .mfe *)),.mpa-pop .mpd-paletas:where(:not(.mfe, .mfe *)){gap:8px}.mpa-pop .mpd .btn:where(:not(.mfe, .mfe *)){font-size:12px}.mpa-pop .mpd-grid:where(:not(.mfe, .mfe *)){gap:8px}.mpa-pop .mpd input:where(:not(.mfe, .mfe *)),.mpa-pop .mpd select:where(:not(.mfe, .mfe *)){min-height:36px;border:1px solid var(--popup-border);border-radius:8px;background:var(--popup-bg);padding:7px 8px;line-height:20px}.mpa-pop .mpd input[type=checkbox]:where(:not(.mfe, .mfe *)){min-height:20px;width:20px;height:20px}.mpa-pop .mpd-panel:where(:not(.mfe, .mfe *)){padding-top:16px}.mpa-pop .mpd p:empty:where(:not(.mfe, .mfe *)){display:none}
.mpa-preview-controles:where(:not(.mfe, .mfe *)){gap:8px}.mpa-preview-controles [aria-pressed=true]:where(:not(.mfe, .mfe *)){outline:0}.mpa-preview-loja [role=status]:where(:not(.mfe, .mfe *)){min-height:20px;line-height:20px;font-size:12px;margin:8px 0}.mpa-preview-viewport:where(:not(.mfe, .mfe *)){border-color:var(--popup-line);margin:8px auto 16px;box-shadow:0 8px 24px #252b4010}.mpa-preview-viewport:has(iframe[hidden]):where(:not(.mfe, .mfe *)){min-height:852px;width:393px;background:linear-gradient(100deg,var(--popup-raised),var(--popup-surface),var(--popup-raised))}.mpa-editor-label:where(:not(.mfe, .mfe *)){font-size:14px;line-height:24px;margin:24px 0 16px}.mpa-pag:where(:not(.mfe, .mfe *)){border-radius:8px;box-shadow:none}.mpa-pop .mpa-em-edicao:where(:not(.mfe, .mfe *)){animation:none}.mpa-pop .mpa-editar-etiqueta:where(:not(.mfe, .mfe *)){border-radius:4px;font-size:12px;line-height:16px;padding:4px 8px}
.mpa-rod:where(:not(.mfe, .mfe *)){padding:12px 24px 16px;background:var(--popup-surface)}.mpa-rod>[data-resumo]:where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px;min-height:20px;margin:0 0 8px}.mpa-rod-acoes:where(:not(.mfe, .mfe *)){gap:8px}.mpa-motivo:where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px;min-height:32px}.mpa-pop .mpa-publicar:where(:not(.mfe, .mfe *)){height:36px;min-height:36px;padding:0 16px!important;font-size:13px!important;border-radius:8px!important;font-weight:650!important;box-shadow:none;background:var(--popup-surface)!important;color:var(--popup-ink)!important;border-color:var(--popup-border)!important}.mpa-pop [data-acao=publicar]:where(:not(.mfe, .mfe *)),.mpa-pop .mpac-controlos>.pri:where(:not(.mfe, .mfe *)){background:#7040cd!important;border-color:#7040cd!important;color:white!important}.mpa-pop [data-acao=publicar]:hover:where(:not(.mfe, .mfe *)),.mpa-pop .mpac-controlos>.pri:hover:where(:not(.mfe, .mfe *)){background:#6032b9!important}.mpa-pop .mpa-publicar:disabled:where(:not(.mfe, .mfe *)){background:var(--popup-raised)!important;color:var(--popup-muted)!important;border-color:var(--popup-line)!important}.mpa-publicar-bloco:where(:not(.mfe, .mfe *)){margin-top:16px}.mpa-pop .mpa-publicar-bloco .btn:where(:not(.mfe, .mfe *)){width:100%}
.mpa-pop .mpa-catalogo-menu:where(:not(.mfe, .mfe *)){border-radius:8px;border-color:var(--popup-border)}.mpa-pop .mpa-catalogo-menu>input:where(:not(.mfe, .mfe *)){font-size:13px;min-height:36px;padding:8px;margin:16px;width:calc(100% - 32px)}.mpa-pop .mpa-catalogo-opcao:where(:not(.mfe, .mfe *)){padding:8px 16px;gap:8px;min-height:64px}.mpa-pop .mpa-catalogo-opcao img:where(:not(.mfe, .mfe *)){width:48px;height:48px;border-radius:8px}.mpa-pop .mpa-catalogo-fim:where(:not(.mfe, .mfe *)){padding:8px 16px}.mpa-pop .mpa-catalogo-regra:where(:not(.mfe, .mfe *)){margin:16px 16px 0;font-size:12px;line-height:20px}
@container mpachat (min-width:1000px){.mpa-conteudo:where(:not(.mfe, .mfe *)){grid-template-columns:minmax(288px,320px) minmax(360px,1fr) minmax(304px,352px);align-items:stretch}.mpa-tem-chat [data-chat-host]:where(:not(.mfe, .mfe *)){display:flex;position:relative;inset:auto;width:auto;box-shadow:none}.mpa-tem-chat .mpa-preview:where(:not(.mfe, .mfe *)){padding-left:16px;padding-right:16px}.mpa-pop .mpac-close:where(:not(.mfe, .mfe *)),.mpa-pop .mpac-toggle:where(:not(.mfe, .mfe *)){display:none}.mpa-tem-chat .mpa-lado:where(:not(.mfe, .mfe *)),.mpa-tem-chat .mpa-preview:where(:not(.mfe, .mfe *)){overflow-y:auto;min-height:0;scrollbar-gutter:stable}.mpa-tem-chat .mpa-preview:where(:not(.mfe, .mfe *)){border-right:1px solid var(--popup-line)}.mpa-tem-chat .mpa-scroll:where(:not(.mfe, .mfe *)){overflow:hidden}.mpa-tem-chat .mpa-conteudo:where(:not(.mfe, .mfe *)){height:100%;min-height:0}}
@media(max-width:700px){.mpa-bg:where(:not(.mfe, .mfe *)){padding:0}.mpa-pop:where(:not(.mfe, .mfe *)){border:0;border-radius:0;--popup-control:44px}.mpa-top:where(:not(.mfe, .mfe *)){padding:12px 16px;gap:8px;grid-template-columns:minmax(0,1fr) auto 44px;min-height:112px}.mpa-top h2:where(:not(.mfe, .mfe *)){font-size:16px;line-height:24px;max-height:48px;white-space:normal}.mpa-pop .mpa-x:where(:not(.mfe, .mfe *)){width:44px;height:44px;min-height:44px}.mpa-nav:where(:not(.mfe, .mfe *)){gap:4px}.mpa-nav .btn:where(:not(.mfe, .mfe *)){padding:0 8px}.mpa-guardado:where(:not(.mfe, .mfe *)){grid-column:1/-1;font-size:12px;grid-row:3}.mpa-faixa:where(:not(.mfe, .mfe *)){padding:8px 16px;min-height:36px}.mpa-pop .mpa-atalhos:where(:not(.mfe, .mfe *)){display:flex;padding:8px 16px;gap:8px;background:var(--popup-surface);border-bottom:1px solid var(--popup-line)}.mpa-pop .mpa-atalhos .btn:where(:not(.mfe, .mfe *)){flex:1;min-width:44px;padding:0 8px}.mpa-preview:where(:not(.mfe, .mfe *)),.mpa-lado:where(:not(.mfe, .mfe *)){padding:0 16px 24px}.mpa-preview-h:where(:not(.mfe, .mfe *)),.mpa-lado-head:where(:not(.mfe, .mfe *)){height:56px;min-height:56px;padding:16px}.mpa-preview-h small:where(:not(.mfe, .mfe *)){font-size:12px;line-height:20px}.mpa-pop .mpac-head:where(:not(.mfe, .mfe *)){height:64px;min-height:64px;padding:8px 16px}.mpa-pop .mpac-close:where(:not(.mfe, .mfe *)){display:flex}.mpa-pop .mpac :is(select,textarea):where(:not(.mfe, .mfe *)){font-size:16px;min-height:44px}.mpa-pop .mpac-conversas label:where(:not(.mfe, .mfe *)){flex-wrap:wrap}.mpa-pop .mpac-conversas select:where(:not(.mfe, .mfe *)){width:100%;flex-basis:100%}.mpa-pop .mpac-controlos>.btn:first-child:where(:not(.mfe, .mfe *)){width:44px}.mpa-pop .mpac-notificacao small:where(:not(.mfe, .mfe *)){font-size:12px}.mpa-pop .mpac-acoes .btn:where(:not(.mfe, .mfe *)){height:auto;min-height:44px;padding:8px}.mpa-pop .mpac-form:where(:not(.mfe, .mfe *)){padding:12px 16px}.mpa-pop .mpac-form textarea:where(:not(.mfe, .mfe *)){min-height:88px;font-size:16px}.mpa-pop .mpa-remover:where(:not(.mfe, .mfe *)){width:44px;height:44px;min-height:44px}.mpa-pop .mpa-repor:where(:not(.mfe, .mfe *)){min-height:44px}.mpa-pop .mpa-lado :is(input,select,textarea):where(:not(.mfe, .mfe *)),.mpa-pop .mpd :is(input,select):where(:not(.mfe, .mfe *)){font-size:16px;min-height:44px}.mpa-pop .mpd input[type=checkbox]:where(:not(.mfe, .mfe *)){width:44px;height:44px}.mpa-pop .mpa-fotos-grid:where(:not(.mfe, .mfe *)){gap:8px}.mpa-secao-h:where(:not(.mfe, .mfe *)){min-height:44px}.mpa-pop .mpd:where(:not(.mfe, .mfe *)){padding:8px}.mpa-pop .mpd-bar .btn:where(:not(.mfe, .mfe *)){white-space:normal;flex:1;padding:4px 8px}.mpa-pop .mpd-grid:where(:not(.mfe, .mfe *)){grid-template-columns:repeat(2,minmax(0,1fr))}.mpa-pop .mpd nav .btn:where(:not(.mfe, .mfe *)){flex:1}.mpa-pop .mpa-preview-controles .btn:where(:not(.mfe, .mfe *)){flex:1;padding:0 8px}.mpa-preview-viewport:where(:not(.mfe, .mfe *)){max-width:100%;margin:8px 0 16px}.mpa-rod:where(:not(.mfe, .mfe *)){padding:8px 16px 12px}.mpa-rod>[data-resumo]:where(:not(.mfe, .mfe *)){max-height:40px;overflow:auto;font-size:12px;line-height:20px}.mpa-rod-acoes:where(:not(.mfe, .mfe *)){display:grid;grid-template-columns:1fr 1fr;gap:8px}.mpa-pop .mpa-rod-acoes>.btn:where(:not(.mfe, .mfe *)){width:100%;min-height:44px;height:44px}.mpa-pop .mpa-rod-acoes>[data-acao=publicar]:where(:not(.mfe, .mfe *)){grid-column:1/-1;grid-row:3;white-space:normal;font-size:14px!important}.mpa-motivo:where(:not(.mfe, .mfe *)){grid-column:1/-1;text-align:left;min-height:24px;margin:0;line-height:20px}.mpa-pop .mpa-catalogo-menu:where(:not(.mfe, .mfe *)){max-width:calc(100vw - 32px);width:calc(100vw - 32px)}.mpa-pop .mpa-catalogo-menu>input:where(:not(.mfe, .mfe *)){font-size:16px;min-height:44px}.mpa-pop .mpac-contadores:where(:not(.mfe, .mfe *)){white-space:normal}.mpa-pop .mpac-anexo button:where(:not(.mfe, .mfe *)){min-width:44px;min-height:44px}}

@media(max-width:700px){.mpa-pop .mpa-publicar:where(:not(.mfe, .mfe *)){height:44px;min-height:44px}}
/* Reserve the response status above the growing text/cards. Streaming changes
   only the last response's content; the live counter and earlier messages stay put. */
.mpa-pop .mpac-assistant:where(:not(.mfe, .mfe *)){display:flex;flex-direction:column}
.mpa-pop .mpac-meta:where(:not(.mfe, .mfe *)){order:-1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:64px 32px;align-content:start;gap:8px;height:104px;min-height:104px;margin-bottom:8px}
.mpa-pop .mpac-meta>span:where(:not(.mfe, .mfe *)){grid-column:1/-1;grid-row:1;max-height:64px;overflow:auto}
.mpa-pop .mpac-meta>.btn:where(:not(.mfe, .mfe *)){grid-row:2;justify-self:start}
@media(max-width:700px){.mpa-pop .mpac-meta:where(:not(.mfe, .mfe *)){grid-template-rows:64px 44px;height:116px;min-height:116px}}
/* The estimate has a reserved two-line slot; its arrival cannot move the composer. */
.mpa-pop .mpac-estimativa:where(:not(.mfe, .mfe *)){height:40px;min-height:40px;margin:8px 0 0;overflow:auto}
.mpa-pop .mpac-estimativa[hidden]:where(:not(.mfe, .mfe *)){display:block!important;visibility:hidden}
.mpa-pop .mpac-msg:where(:not(.mfe, .mfe *)){margin-bottom:24px}
.mpa-pop .mpac-user:where(:not(.mfe, .mfe *)){padding:12px;border-radius:8px}
.mpa-pop .mpac-pensamento:where(:not(.mfe, .mfe *)){margin-bottom:8px}
.mpa-pop .mpa-publicar-bloco:where(:not(.mfe, .mfe *)){padding:16px}
.mpa-pop .mpa-produto:where(:not(.mfe, .mfe *)){padding:16px 16px 24px}
.mpa-pop .mpac-controlos>.pri:where(:not(.mfe, .mfe *)){background:var(--popup-surface)!important;color:var(--popup-accent)!important;border-color:var(--popup-accent)!important}
.mpa-pop .mpac-controlos>.pri:hover:where(:not(.mfe, .mfe *)){background:var(--popup-tint)!important}
.mpa-pop :is(input,textarea):where(:not(.mfe, .mfe *))::placeholder{color:var(--popup-muted);opacity:1}
.mpa-pop .mpa-preview-viewport:where(:not(.mfe, .mfe *)){overflow:clip;min-height:0}
.mpa-pop .mpa-preview-viewport iframe:where(:not(.mfe, .mfe *)){transform-origin:0 0}
@media(max-width:700px){.mpa-pop .mpa-top:where(:not(.mfe, .mfe *)){grid-template-columns:minmax(0,1fr) 44px}.mpa-pop .mpa-x:where(:not(.mfe, .mfe *)){align-self:start}.mpa-pop .mpa-top h2:where(:not(.mfe, .mfe *)){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
.mpa-pop .mpac-viva .mpac-contadores:where(:not(.mfe, .mfe *)){grid-column:2/-1}
.mpa-pop .mpac-viva .mpac-parar:where(:not(.mfe, .mfe *)){grid-row:1;align-self:start}
.mpa-pop [data-catalogo-lista]:where(:not(.mfe, .mfe *)){min-height:min(38vh,340px)}
.mpa-pop .mpa-media-em-edicao:where(:not(.mfe, .mfe *)){position:relative}
.mpa-pop :is(.mpac-pensamento,.mpac-plano-site,.mpd) summary:where(:not(.mfe, .mfe *)){min-height:32px;padding:6px 8px;border-radius:8px;line-height:20px;cursor:pointer}
.mpa-pop :is(.mpac-pensamento,.mpac-plano-site,.mpd) summary:hover:where(:not(.mfe, .mfe *)){background:var(--surface-2)}
.mpa-pop .mpd label:has(input[type=checkbox]):where(:not(.mfe, .mfe *)){flex-direction:row;align-items:center;justify-content:space-between;min-height:36px;gap:8px}
.mpa-pop .mpd input[type=checkbox]:where(:not(.mfe, .mfe *)){accent-color:var(--popup-accent)}
@media(max-width:700px){.mpa-pop :is(.mpac-pensamento,.mpac-plano-site,.mpd) summary:where(:not(.mfe, .mfe *)){min-height:44px;padding:12px 8px}.mpa-pop .mpd label:has(input[type=checkbox]):where(:not(.mfe, .mfe *)){min-height:44px}}

/* Miner: pré-visualização móvel fluida e um único seletor de pagamento. */
.mpac-pay label{display:flex;align-items:center;gap:8px;white-space:nowrap}
.mpac-pay label select{flex:1;min-width:0;width:0;margin-top:0}
.mpa-pop .mpac-pay label:where(:not(.mfe, .mfe *)){display:flex;flex-wrap:nowrap}
.mpa-pop .mpac-pay select:where(:not(.mfe, .mfe *)){flex:1;min-width:0;width:0;margin-top:0;font-size:12px}
.mpa-pop .mpa-preview:where(:not(.mfe, .mfe *)){padding-top:16px}
.mpa-pop .mpa-preview-viewport:has(iframe[hidden]):where(:not(.mfe, .mfe *)){width:min(100%,430px)}
.mpa-preview-loja [data-preview-status][hidden]{display:none}

.mpa-preview-acoes{display:flex;justify-content:flex-end;align-items:center;min-height:36px;margin:0 0 12px}
.mpa-preview-acoes[hidden]{display:none}