/* ============================================================
   NERO — tema + chrome compartilhado (cockpit-mac-api)
   Carregado por todas as páginas. 5 temas + sidebar/topnav.
   ============================================================ */
:root{--bg:#0b0b0d;--panel:#161619;--panel2:#1f1f23;--border:#27272a;--text:#e4e4e7;--muted:#71717a;--accent:#00875A;--accent2:#00A870;--radius:16px;--glow:none;--sidebar:#0e0e11;--chip:#18181b;--c-ok:#34d399;--c-warn:#fbbf24;--c-bad:#f87171;
  /* PLASMA: gradiente-assinatura do Nero (KPI, destaque). SOLAR: energia/positivo. Tokens oficiais (antes só hardcoded no KPI). */
  --plasma-a:#5EEAD4;--plasma-b:#38BDF8;--plasma-c:#8FD0FF;--plasma:linear-gradient(90deg,#5EEAD4,#38BDF8,#8FD0FF);--solar:#FF9E2C}
/* Cores semânticas (ok/aviso/erro). Default acima = tons brilhantes p/ FUNDO
   ESCURO; o tema CLARO (branco) sobrescreve com tons mais ESCUROS/legíveis
   (amarelo no branco lê mal). Use var(--c-ok|--c-warn|--c-bad) em vez de hexes. */
/* Contraste medido no BRANCO (AA >= 4.5:1 pra texto normal):
   #15803d 5.1:1 · #b45309 5.1:1 · #dc2626 4.8:1 · #00875A (marca) 4.6:1. */
body.theme-light{--c-ok:#15803d;--c-warn:#b45309;--c-bad:#dc2626}

/* ============================================================
   NERO — design APROVADO (Mauro 21/06): cor secundária = PRETO +
   tratamento "B" (faixa + tinte) nos cards de loja/marketplace.
   Tokens globais (cor secundária, hierarquia de texto preta, cores
   oficiais de cada marketplace). Cabeçalho do card = cor forte da
   marca; corpo = branco com hierarquia preta; borda-topo na marca.
   ============================================================ */
:root{
  --nero-secundaria:#111111;      /* cor secundária oficial = preto (accent-color dos checkbox) */
  --nero-text-forte:#14171c;      /* títulos/labels/checks (font-weight:700) */
  --nero-text-claro:#5b5f66;      /* secundário/descrições (preto suave, NÃO cinza-azulado) */
  /* ══ A COR DO NERO (Mauro 14/08): PRETO + AZUL-BEBÊ ══
     "conseguimos deixar a cor oficial do nero como preta e azul bebê? logo,
     cards e tudo mais... e na versão clara uma cor ESCURA de destaque."
     Tema escuro: acento azul-bebê #8FD0FF sobre preto (definido no bloco dos
     temas escuros abaixo). Tema claro: azul-PETRÓLEO escuro #0A5388 — azul
     bebê puro some no branco, então o claro usa o irmão escuro da mesma
     família (AA ~7:1 sobre branco). Laranja=Shopee e amarelo=ML seguem sendo
     LOGO DE MARKETPLACE, nunca decoração de UI.
     (História: índigo 22/06 → verde #00875A 08/08 → preto+azul-bebê 14/08.) */
  --nero-accent:#0A5388;          --nero-accent-700:#083F6A;   --nero-accent-50:#E8F3FB;
  /* TINTA que fica POR CIMA do acento cheio. No claro o acento é escuro
     (#0A5388) → tinta branca; no escuro o acento é azul-bebê → tinta quase
     preta (o bloco dos temas escuros troca). Existia só como o `#07222f`
     cravado na regra de botão logo abaixo — virou token porque agora tem
     mais de um componente com fundo de acento (ver .n-passo do
     nero-componentes.css). */
  --nero-accent-ink:#ffffff;
  /* 🩵 informativo (pedido em aberto "aguardando envio" etc.): azul, não
     vermelho — vermelho ficou reservado pro ATRASADO/erro (14/08). */
  --c-info:#0A6EBD;
  --mk-shopee:#ED4D2D;        --mk-shopee-txt:#ffffff;
  --mk-mercadolivre:#F9D30A;  --mk-mercadolivre-txt:#0A0080;   /* amarelo claro -> texto navy */
  --mk-amazon:#FF9900;        --mk-amazon-txt:#0a0a0a;
  --mk-shein:#000000;         --mk-shein-txt:#ffffff;
  --mk-magalu:#C41E3A;        --mk-magalu-txt:#ffffff;
  --mk-tiktokshop:#000000;    --mk-tiktokshop-txt:#ffffff;
}

body.theme-dark{--bg:#0b0b0d;--panel:#161619;--panel2:#1f1f23;--border:#27272a;--text:#e4e4e7;--muted:#71717a;--accent:#10b981;--accent2:#34d399;--sidebar:#0e0e11;--chip:#18181b}
body.theme-neon{--bg:#07070c;--panel:rgba(20,18,33,.6);--panel2:rgba(255,255,255,.05);--border:rgba(255,255,255,.09);--text:#e7e5f0;--muted:#8b8ba7;--accent:#a78bfa;--accent2:#22d3ee;--sidebar:rgba(12,10,22,.6);--chip:rgba(255,255,255,.05);--glow:0 0 22px -6px rgba(124,58,237,.55)}
body.theme-neon{background:radial-gradient(900px 500px at 85% -10%,rgba(124,58,237,.22),transparent 60%),radial-gradient(700px 480px at 0% 100%,rgba(34,211,238,.15),transparent 55%),#07070c}
/* ===== TEMA CLARO = PADRÃO (Mauro 07/08) ==========================
   Fundo BRANCO · superfícies cinza-claro · texto quase-preto · UMA cor
   de marca (o VERDE do Nero) pra ação/destaque/foco. Nada de segunda
   cor decorativa: laranja/amarelo aqui é logo de marketplace, não UI.
   Card branco sobre fundo branco se separa por BORDA + sombra fina. */
body.theme-light{--bg:#ffffff;--panel:#ffffff;--panel2:#f4f5f7;--border:#d8dce2;--text:#101114;--muted:#5b6270;--accent:#00875A;--accent2:#00A870;--sidebar:#ffffff;--chip:#f1f3f5}
body.theme-light .panel{box-shadow:0 1px 2px rgba(16,24,40,.07)}
/* 🟢 NERO Verde (Mauro 07/08: "branco inteiro com a cor secundária verde,
   mais parecido com a Shopee"): base branca igual ao claro, marca VERDE e
   o laranja reservado pro que exige ação — a mesma gramática da Shopee
   (título forte em quase-preto, apoio em cinza, destaque em laranja). */
body.theme-verde{--bg:#ffffff;--panel:#ffffff;--panel2:#f6f8f7;--border:#dfe3e6;--text:#0f1419;--muted:#5f6b76;
  --accent:#00875A;--accent2:#00A870;--sidebar:#ffffff;--chip:#f2f5f4;
  --c-ok:#00875A;--c-warn:#C4491A;--c-bad:#D0342C}
body.theme-verde .panel{box-shadow:0 1px 2px rgba(15,20,25,.06)}
/* selecionado/ativo em LARANJA, como na Shopee */
body.theme-verde .chip.on,body.theme-verde .btn.sel,body.theme-verde .tab.on{
  background:#FFF3EC;border-color:#EE4D2D;color:#EE4D2D;font-weight:700}
body.theme-verde .lojacard.on,body.theme-verde .card.on{outline:2px solid #EE4D2D;outline-offset:-2px}
/* hierarquia de texto: título forte, apoio cinza, número em destaque */
body.theme-verde .h1,body.theme-verde h1,body.theme-verde h2{color:#0f1419;font-weight:800}
body.theme-verde .sub,body.theme-verde .mini,body.theme-verde .muted{color:#5f6b76;font-weight:400}
body.theme-slate{--bg:#0b1220;--panel:#111827;--panel2:#172033;--border:#2b3a51;--text:#e5edf6;--muted:#8fa3bc;--accent:#38bdf8;--accent2:#a7f3d0;--sidebar:#080f1c;--chip:#162033;--glow:0 16px 38px -28px rgba(56,189,248,.75)}
body.theme-slate{background:linear-gradient(135deg,#080f1c 0%,#0f172a 56%,#132235 100%)}
body.theme-bordo{--bg:#16080b;--panel:#211014;--panel2:#2d171c;--border:#543038;--text:#f7ece4;--muted:#b69b91;--accent:#d4af37;--accent2:#f59e0b;--sidebar:#100508;--chip:#2b151a;--glow:0 18px 42px -30px rgba(212,175,55,.8)}
body.theme-bordo{background:radial-gradient(800px 420px at 84% -12%,rgba(212,175,55,.14),transparent 62%),linear-gradient(145deg,#100508 0%,#1a0a0e 54%,#2b1217 100%)}

/* IDENTIDADE NERO: a cor-acento é o VERDE igual em TODOS os temas (a marca vem antes do tema).
   Sobrescreve o --accent de cada tema acima (mesma especificidade, vem depois -> vence).
   ⚠ EXCEÇÃO (07/08): o tema 🟢 Verde e as versões 2.0 (`nv-v1|v2|v3`) trazem a
   PRÓPRIA cor de marca — o verde. Sem o :not() abaixo esta linha reindigava os
   dois em silêncio (era exatamente o bug do 1.285: o Verde nascia com acento
   índigo e ninguém entendia por quê). Desde 08/08 a marca É verde, então o
   :not() virou redundante — fica porque o Verde traz o próprio --accent2. */
body[class*="theme-"]:not(.theme-verde):not([class*="nv-"]){ --accent:var(--nero-accent); --accent2:#0E6EB8; }

/* ══ MOLDURA CLARA = PADRÃO (Mauro 08/08) ══
   Era PRETA em todos os temas (a identidade "Nero preto" de 22/06). Como esta
   regra vem DEPOIS do `body.theme-light` e tem a MESMA especificidade (0,1,1),
   o tema claro pedia `--sidebar:#ffffff` e levava `#15171c` de volta — por isso
   o conteúdo era branco e a lateral/topo continuavam pretos.

   Agora a moldura ACOMPANHA o tema: clara por padrão, escura só nos temas
   escuros. Contrastes medidos no branco (AA ≥ 4,5:1 pra texto pequeno). */
body[class*="theme-"]{
  --sidebar:#ffffff;            /* moldura branca — igual ao conteúdo */
  --sidebar-text:#3f4a55;       /* item de menu inativo — 8,6:1 */
  --sidebar-strong:#0f1419;     /* hover / nome NERO / item ativo */
  --sidebar-muted:#5f6b76;      /* mutes do menu — 5,5:1 */
  --sidebar-head:#5f6b76;       /* TÍTULOS de grupo (uppercase 11px: precisa de 4,5:1) */
  --sidebar-border:#e3e7ea;     /* divisórias */
  /* ⚠ RÓTULO PEQUENO NÃO USA --muted (handoff v9, 17/08) ⚠
     O `--muted` foi medido pra texto de apoio em corpo normal. Abaixo de
     18px ele REPROVA AA no escuro (#71717a sobre #0b0b0d = 4,0:1, e o piso
     é 4,5:1) — é por isso que os rótulos de bloco saíam apagados nos prints
     e o bloco inteiro parecia recuado em relação ao mock.
     `--muted-forte` é o cinza CLARO da mesma escala: 7,7:1 no escuro.
     No CLARO ele empata com o --muted (#5b6270 já passa com folga sobre
     branco) — a variável existe pra tela não ter que perguntar qual tema
     está valendo. Use em kicker, label de campo, <th> e afins. */
  --muted-forte:#5b6270;
}
/* temas ESCUROS mantêm a moldura escura (vêm depois: mesma especificidade, ganham) */
body.theme-dark,body.theme-neon,body.theme-slate,body.theme-bordo{
  --sidebar:#15171c;
  --sidebar-text:#d6d9df;
  --sidebar-strong:#ffffff;
  --sidebar-muted:#a9aeb7;
  --sidebar-head:#cdd2da;
  --sidebar-border:#2a2d35;
  /* 🖤🩵 14/08 — no escuro a marca é o AZUL-BEBÊ sobre preto (a regra da
     linha do --accent lê o --nero-accent; redefinir AQUI troca só o escuro) */
  --nero-accent:#8FD0FF; --nero-accent-700:#5FB8F5; --nero-accent-50:#10202e;
  --nero-accent-ink:#07222f;
  --accent2:#BFE5FF;
  --c-info:#8FD0FF;
  /* o cinza de rótulo pequeno do escuro (ver o bloco claro acima) */
  --muted-forte:#a1a1aa;
}
/* :root nasce com a paleta ESCURA (linha 5) — o rótulo pequeno acompanha,
   senão a tela que esquecer a classe de tema herda o cinza do claro. */
:root{--muted-forte:#a1a1aa}
/* botão de ação com fundo azul-bebê precisa de TEXTO ESCURO (branco sobre
   azul-bebê não passa em contraste nenhum). Ghost fica fora — texto do tema.
   ⚠ `.contorno` fica fora PELO MESMO MOTIVO ao contrário (15/08): ele não tem
   fundo, então o texto escuro cairia direto sobre o preto do tema — foi
   exatamente assim que "Conectar pasta ARTES" saiu ilegível. Esta regra é
   (0,3,0) e ganha de qualquer `.btn.x` da tela: quem cria variante SEM fundo
   precisa entrar aqui, não tentar vencer lá. */
body.theme-dark .btn:not(.ghost):not(.contorno),body.theme-neon .btn:not(.ghost):not(.contorno),
body.theme-slate .btn:not(.ghost):not(.contorno),body.theme-bordo .btn:not(.ghost):not(.contorno){color:#07222f}

/* 🔵 o par ação + secundário (15/08): o principal é o acento CHEIO (texto
   branco no claro, escuro no azul-bebê); o secundário ao lado dele é o MESMO
   azul em contorno. O `.ghost` cinza continua servindo pro botão solto —
   ao lado de uma ação cheia, cinza lê como desabilitado. */
.btn.contorno{background:transparent;color:var(--accent);
  border:1.5px solid var(--accent);font-weight:600}

/* o JS remove bg-zinc-950 do body; garantimos o fundo do tema */
body[class*="theme-"]{background-color:var(--bg);color:var(--text)}

/* ---- fontes + legibilidade (SÓ fontes locais do Windows — sem CDN externo, nada sai do PC) ---- */
:root{--font:system-ui,'Segoe UI',Roboto,Arial,sans-serif}
body[class*="theme-"]{font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.005em}
body.font-sistema{--font:system-ui,'Segoe UI',Roboto,Arial,sans-serif}
body.font-verdana{--font:Verdana,Geneva,'DejaVu Sans',sans-serif}
body.font-calibri{--font:Calibri,'Segoe UI',Candara,sans-serif}
body.font-georgia{--font:Georgia,'Times New Roman',serif}
body[class*="font-"] input,body[class*="font-"] select,body[class*="font-"] textarea,body[class*="font-"] button{font-family:inherit}

/* ---- tamanho do texto: escala tudo proporcionalmente (Chromium/Electron) ---- */
body.nsize-2{zoom:1.10}
body.nsize-3{zoom:1.22}

/* ⚠ As regras de "menu com cara de nave" abaixo listavam os temas ESCUROS como
   `body:not(.theme-light)`. Com a moldura clara virando padrão (08/08) isso
   pegava o 🟢 Verde — que é CLARO — e pintava item de menu com texto branco e
   degradê ciano/violeta (uma segunda e uma terceira cor) sobre fundo branco.
   Agora os temas escuros são nomeados um a um. */

/* ---- chrome ---- */
.nero-app{display:flex;min-height:100vh}
/* Quem ROLA é a <nav> do meio, não a barra inteira (10/08). Com 45 itens no
   menu do Mauro, a barra toda rolando levava a marca e o pé embora — e o pé é
   onde mora o 🧩 Organizar o menu. Marca fixa em cima, lista rolando no meio,
   ferramenta + versão fixas embaixo: o padrão de app shell.
   ⚠ `min-height:0` no filho flex é obrigatório — sem ele o <nav> se recusa a
   encolher abaixo do conteúdo e nada rola. */
/* 264px (14/08, print: "CADASTRO GERAL ficou um em cima do outro") — o
   título de grupo mais largo cabe numa linha só */
.nero-sidebar{width:264px;flex-shrink:0;background:var(--sidebar);color:var(--sidebar-text);border-right:1px solid var(--sidebar-border);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;z-index:30}
.nero-sidebar>nav{overflow-y:auto;overflow-x:hidden;min-height:0}
.nero-sidebar .muted,.nero-topnav .muted{color:var(--sidebar-muted)}
.nero-topnav{display:none;align-items:center;gap:4px;padding:9px 18px;border-bottom:1px solid var(--sidebar-border);flex-wrap:wrap;background:var(--sidebar);color:var(--sidebar-text);position:sticky;top:0;z-index:30}
.nero-main{flex:1;min-width:0}
.nero-head{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 22px;border-bottom:1px solid var(--sidebar-border);position:sticky;top:0;background:var(--sidebar);color:var(--sidebar-text);z-index:25;flex-wrap:wrap}
body.theme-neon .nero-topnav,body.theme-light .nero-topnav{}
.nero-content{display:block}

.nero-brand{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--sidebar-border);color:var(--sidebar-strong)}
.nero-badge{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
body.theme-neon .nero-badge{box-shadow:var(--glow)}
.nero-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sidebar-head);font-weight:800;padding:9px 20px 4px}
/* grupos colapsáveis do menu (módulos) */
.nero-group{margin-bottom:1px}
.nero-gh{width:100%;text-align:left;background:none;border:0;color:var(--sidebar-head);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px 6px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-family:inherit}
.nero-gh:hover{color:var(--sidebar-strong)}
.nero-chev{font-size:9px;transition:transform .15s;transform:rotate(90deg)}
.nero-group.collapsed .nero-chev{transform:rotate(0deg)}
.nero-group.collapsed .nero-gi{display:none}
.nero-nav{display:flex;align-items:center;gap:11px;padding:9px 20px;color:var(--sidebar-text);text-decoration:none;font-size:14px;border-left:2px solid transparent;transition:.15s;white-space:nowrap}
/* ÍCONE DE LINHA do menu (bloco 1, 08/08). currentColor: fica cinza parado e
   verde no item ativo sozinho — sem uma regra de cor a mais pra manter. O
   .nero-ico-em é o mesmo box pro emoji das telas que ainda não converteram,
   pra a coluna de texto alinhar igual nos dois casos. */
.nero-ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:opacity .15s}
.nero-nav:hover .nero-ico,.nero-nav.active .nero-ico{opacity:1}
/* ⚠ 17/08: com o emoji fora do menu (handoff v9) este span nasce VAZIO — ele
   virou só o espaçador que mantém a coluna de texto alinhada entre item com
   ícone de linha e item sem nenhum. Sem `display:inline-block` um span vazio
   tem largura zero e o alinhamento some justo nos itens sem ícone. */
.nero-ico-em{display:inline-block;width:18px;flex:none;text-align:center;font-size:14px;line-height:1}
/* selo "lab" do item ainda não promovido pro app oficial — era um 🧪.
   Palavra em caixa alta miúda, do jeito que os mocks dizem estado. */
.nero-selo-lab{font:700 8.5px var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:var(--sidebar-muted);border:1px solid var(--sidebar-border);border-radius:999px;
  padding:1px 5px;line-height:1.5;flex:none}
.nero-nav:hover{background:color-mix(in srgb,var(--sidebar-strong) 7%,transparent);color:var(--sidebar-strong)}
.nero-nav.active{color:var(--accent);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-weight:700}
body.theme-dark .nero-nav.active,body.theme-neon .nero-nav.active,body.theme-slate .nero-nav.active,body.theme-bordo .nero-nav.active{color:#fff;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.nero-topnav .nero-nav{border-left:0;padding:6px 11px;border-radius:8px}
/* 🧩 "Organizar o menu" — pé da barra, abaixo da <nav>. Menor e mais apagado
   de propósito: é a FERRAMENTA da barra, não mais um card de trabalho. */
.nero-organizar{font-size:12.5px;opacity:.7;padding-top:11px;padding-bottom:11px;
  border-top:1px solid var(--sidebar-border);margin-top:6px}
.nero-organizar:hover{opacity:1}
body.dens-compacto .nero-organizar{font-size:11.5px;padding-top:7px;padding-bottom:7px}
/* 🔔 contador de avisos não lidos, no item 🔔 Avisos do menu. `margin-left:
   auto` empurra pra direita da barra; vermelho porque é pendência, não
   marca. Nasce escondido e só aparece com número > 0 (badge "0" é ruído). */
.nero-badge{margin-left:auto;background:var(--c-bad);color:#fff;font-size:10px;
  font-weight:800;line-height:1;border-radius:999px;padding:3px 6px;min-width:17px;
  text-align:center;flex:none}
body.dens-compacto .nero-badge{font-size:9.5px;padding:2px 5px;min-width:15px}
.nero-livedot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:neroPulse 2.4s ease-in-out infinite}
@keyframes neroPulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.5)}50%{box-shadow:0 0 0 8px rgba(79,70,229,0)}}

/* Botões da barra de CIMA (🎨 Aparência, 👁, ✨ Novidades, conta). Era um
   `var btn = "background:rgba(...)"` inline dentro do nero-shell.js — virou
   classe pra que um tema/versão consiga repintá-los (estilo inline não se
   sobrescreve por CSS). Mesmos valores de antes: pílula clara sobre o topo. */
.nero-topbtn{background:var(--chip);color:var(--sidebar-text);border:1px solid var(--sidebar-border);border-radius:9px;cursor:pointer;font-family:inherit}
.nero-topbtn:hover{color:var(--sidebar-strong);border-color:var(--accent)}

.nero-seg{display:flex;gap:3px;background:var(--chip);border:1px solid var(--border);border-radius:10px;padding:3px;flex-wrap:wrap}
.nero-seg button{border:none;background:transparent;color:var(--muted);font-size:12px;padding:5px 9px;border-radius:7px;cursor:pointer}
.nero-seg button.on{background:var(--accent);color:#fff;font-weight:600}

/* link do conteúdo = cor da MARCA (o padrão do navegador é azul/roxo, fora da
   identidade). Especificidade baixinha de propósito: qualquer regra da própria
   página (.sub a{...}) continua mandando.

   ⚠ MENOS QUEM É BOTÃO (10/08). A promessa acima — "regra da própria página
   continua mandando" — era falsa pro caso mais comum: `.nero-content a`
   (0,1,1) GANHA de `.btn{color:#fff}` (0,1,0), que é como 20 telas escrevem
   botão-link. Resultado: `<a class="btn">` com fundo `var(--accent)` ficava
   VERDE SOBRE VERDE — texto invisível, botão que ninguém vê.
   Achado no 🔔 sino: o "abrir →" do aviso de conta vencida, que é justamente
   a ação que o alarme existe pra provocar, não dava pra ler.
   `[class~="btn"]` casa o TOKEN inteiro, então pega `class="btn"` e
   `class="btn ghost"` — e devolve a decisão de cor pra página, que é onde ela
   sempre devia estar.

   ⚠⚠ E o `:not()` vai DENTRO de `:where()` porque `:where()` não conta pra
   especificidade. `a:not([class~="btn"])` sozinho seria (0,2,1) e passaria a
   GANHAR de regras de página como `.sug a` / `.reset a` (0,2,0) — quebrando
   em silêncio a promessa do parágrafo acima, num raio muito maior que o
   conserto. Com `:where()` a regra continua exatamente (0,1,1), igual antes:
   só deixou de casar botão. */
.nero-content a:not(:where([class~="btn"])){color:var(--accent)}

/* componentes reutilizáveis (caso a página adote) */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.muted{color:var(--muted)}.accent{color:var(--accent)}

/* layout: L1 = sidebar | L2/L3 = nav no topo */
body.layout-1 .nero-topnav{display:none}
body.layout-1 .nero-sidebar{display:flex}
body.layout-2 .nero-sidebar,body.layout-3 .nero-sidebar{display:none}
body.layout-2 .nero-topnav,body.layout-3 .nero-topnav{display:flex}

@media(max-width:980px){
  .nero-sidebar{display:none!important}
  .nero-topnav{display:flex!important}
}

/* ===== TELA CHEIA (pedido do Mauro): os cards usam toda a largura da tela ===== */
.nero-content .wrap{max-width:none!important}


/* ============================================================
   DENSIDADE (Mauro 07/08) — "Compacto" é o PADRÃO. Referência:
   Shopee Seller Centre / UpSeller — cabe MUITO mais linha na
   mesma tela sem apertar o clique.

   COMO FUNCIONA (importante pra quem for mexer): cada .html tem o
   próprio <style> no <head>, carregado DEPOIS deste arquivo. Por
   isso toda regra daqui é escopada em `body.dens-compacto ...`:
   `body.dens-compacto .wrap` (0,2,0) vence o `.wrap` (0,1,0) da
   página SEM precisar de !important. Se você criar uma tela nova,
   use as classes .wrap/.panel/.toolbar/.kpis e ela entra na
   densidade de graça.

   PISO DE CLIQUE: 28px de altura mínima em botão/input/select —
   compactar não pode virar alvo de agulha.
   ============================================================ */
:root{--d-fs:14px;--d-pad:20px;--d-gap:14px;--d-row:8px;--d-ctrl:8px;--d-h:34px}
body.dens-compacto{--d-fs:13px;--d-pad:12px;--d-gap:8px;--d-row:4px;--d-ctrl:5px;--d-h:28px}

/* -- moldura da página -- */
body.dens-compacto .wrap{padding:12px 16px}
body.dens-compacto .nero-head{padding:5px 14px;gap:7px}
body.dens-compacto .nero-topnav{padding:5px 12px}
body.dens-compacto .nero-sidebar{width:206px}
body.dens-compacto .nero-brand{padding:10px 14px}
body.dens-compacto .nero-nav{padding:5px 14px;font-size:13px;gap:9px}
body.dens-compacto .nero-gh{padding:7px 14px 3px}
body.dens-compacto .nero-kicker{padding:6px 14px 2px}

/* -- títulos e blocos: menos margem entre as coisas -- */
body.dens-compacto .h1,body.dens-compacto h1{font-size:19px;margin:0 0 2px}
body.dens-compacto h2{font-size:16px;margin:0 0 4px}
body.dens-compacto h3{font-size:14px;margin:0 0 4px}
body.dens-compacto .sub{margin-bottom:9px;font-size:12.5px;line-height:1.45}
body.dens-compacto .toolbar{gap:7px;margin-bottom:8px}
body.dens-compacto .kpis{gap:8px;margin-bottom:9px}
body.dens-compacto .kpi{padding:9px 11px}
body.dens-compacto .kpi .big{font-size:20px}

/* -- cards -- */
body.dens-compacto .panel,body.dens-compacto .card,body.dens-compacto .box{border-radius:10px}
body.dens-compacto .card,body.dens-compacto .box{padding:var(--d-pad)}
body.dens-compacto .mkb-card .mkb-head{padding:8px 12px}
body.dens-compacto .mkb-card .mkb-body{padding:10px 12px}

/* -- tabelas: linha fina, tipografia tabular, cabeçalho baixinho -- */
body.dens-compacto table{font-size:12.5px}
body.dens-compacto table th,body.dens-compacto table td{padding:var(--d-row) 8px;line-height:1.35}
body.dens-compacto table th{font-size:10.5px}

/* -- controles: baixos, mas nunca abaixo do piso de clique -- */
body.dens-compacto input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
body.dens-compacto select,
body.dens-compacto textarea,
body.dens-compacto button,
body.dens-compacto .btn{padding:var(--d-ctrl) 9px;font-size:12.5px}
body.dens-compacto input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
body.dens-compacto select,
body.dens-compacto button,
body.dens-compacto .btn{min-height:var(--d-h)}
body.dens-compacto textarea{min-height:auto}
/* o menu 🎨 Aparência e os segmentados do topo têm tamanho próprio (já são miúdos) */
body.dens-compacto .nero-seg{padding:2px}
body.dens-compacto .nero-seg button{min-height:auto;padding:4px 8px;font-size:11.5px}

/* ===== Dropdown nativo do <select> (12/06): opções saíam cinza-claro em fundo BRANCO (ilegível).
   color-scheme faz o popup nativo seguir o tema; option ganha fundo/letra explícitos. ===== */
body{color-scheme:dark}
body.theme-light{color-scheme:light}
select option{background-color:#16161a;color:#e4e4e7}
select option:disabled{color:#71717a}
body.theme-light select option{background-color:#ffffff;color:#27272a}
body.theme-light select option:disabled{color:#9499a3}

/* ===== CARA PREMIUM (Mauro 17/06): o visual "bonito" do Cockpit (vidro nos cards,
   KPI em gradiente, sidebar/cabeçalho de vidro, menu techy) agora vale pra TODAS as
   telas — assim navegar não muda o design, só o conteúdo. Camada visual; dados intactos. ===== */
body.theme-dark{background:#05060c}
body.theme-dark .panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 60px -42px #000;transition:transform .28s,border-color .28s,box-shadow .28s}
body.theme-dark .panel:hover{transform:translateY(-3px);border-color:rgba(94,234,212,.4);box-shadow:0 30px 72px -34px rgba(56,189,248,.45)}
.kpi-val{font-weight:800;line-height:1.05}
body.theme-dark .kpi-val,body.theme-neon .kpi-val{background:linear-gradient(90deg,#5eead4,#38bdf8,#8FD0FF);-webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-dark .nero-sidebar{background:rgba(9,11,17,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid rgba(255,255,255,.08)}
body.theme-dark .nero-head{background:rgba(7,8,13,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
/* O menu agora é PRETO em TODOS os temas (#636) -> o texto é SEMPRE claro. As regras antigas
   (Mauro 19/06) punham texto ESCURO no tema claro, quando o menu ainda era branco -> ficavam
   invisíveis no menu preto. Unificado nos tokens claros do menu (--sidebar-head/--sidebar-text). */
.nero-gh{color:var(--sidebar-head);font-weight:800;letter-spacing:.16em}
body.theme-light .nero-gh{color:var(--sidebar-head);font-weight:800}
body.theme-light .nero-nav{color:var(--sidebar-text)}
body.theme-dark .nero-gh::before,body.theme-neon .nero-gh::before,body.theme-slate .nero-gh::before,body.theme-bordo .nero-gh::before{content:"";width:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,#5eead4,#38bdf8,#8FD0FF);box-shadow:0 0 9px rgba(56,189,248,.85);margin-right:8px}
body.theme-dark .nero-nav,body.theme-neon .nero-nav,body.theme-slate .nero-nav,body.theme-bordo .nero-nav{font-family:'Bahnschrift','Segoe UI Variable Display','Segoe UI',sans-serif;font-weight:500;letter-spacing:.015em;border-radius:0 12px 12px 0;margin-right:12px;transition:transform .2s,background .2s,color .2s,border-color .2s}
body.theme-dark .nero-nav:hover,body.theme-neon .nero-nav:hover,body.theme-slate .nero-nav:hover,body.theme-bordo .nero-nav:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(5px);border-left-color:rgba(94,234,212,.6)}
body.theme-dark .nero-nav.active,body.theme-neon .nero-nav.active,body.theme-slate .nero-nav.active,body.theme-bordo .nero-nav.active{font-weight:700;color:#eafff9;border-left-color:#38bdf8;text-shadow:0 0 18px rgba(56,189,248,.55);background:linear-gradient(90deg,rgba(94,234,212,.20),transparent)}

/* ===== Cards de marketplace — tratamento "B" (Mauro 21/06): faixa colorida + corpo branco =====
   Reutilizável. A cor da marca entra via classe .mk-<canal> (mapeia --mk-* nas variáveis locais
   --mk-c / --mk-ct). Cabeçalho na cor forte da marca; corpo branco com hierarquia preta;
   borda-topo 3px na cor da marca. Canal sem cor = cinza neutro (não quebra). */
.mkb-card{--mk-c:#6b7280;--mk-ct:#ffffff;background:#fff;border:1px solid #e3e8ef;border-top:3px solid var(--mk-c);
  border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(16,23,42,.06)}
.mkb-card .mkb-head{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--mk-c);color:var(--mk-ct)}
/* chip BRANCO atrás da logo — a logo (ex.: Shopee laranja) precisa aparecer sobre a faixa da mesma cor */
.mkb-card .mkb-head .mkb-logo{display:inline-flex;align-items:center;background:#fff;border-radius:7px;padding:4px 8px;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.mkb-card .mkb-head .mkb-logo img{display:block}
.mkb-card .mkb-head .mkb-title{color:var(--mk-ct);font-weight:700;font-size:15px;line-height:1.2;margin:0}
.mkb-card .mkb-head .mkb-sub{color:var(--mk-ct);opacity:.85;font-size:12px;font-weight:500}
.mkb-card .mkb-body{background:#fff;padding:15px 16px}
/* hierarquia de texto preta DENTRO do card (cirúrgico, escopado em .mkb-card) */
.mkb-card .mkb-body .mkb-strong,.mkb-card .mkb-body label{color:var(--nero-text-forte);font-weight:700}
.mkb-card .mkb-body .mkb-soft{color:var(--nero-text-claro)}
.mkb-card .mkb-body code{color:var(--nero-text-forte)}
.mkb-card .mkb-body input[type=checkbox],.mkb-card .mkb-body input[type=radio]{accent-color:var(--nero-secundaria)}
/* mapeamento canal -> cor da marca */
.mk-shopee{--mk-c:var(--mk-shopee);--mk-ct:var(--mk-shopee-txt)}
.mk-ml,.mk-mercadolivre,.mk-mercado_livre{--mk-c:var(--mk-mercadolivre);--mk-ct:var(--mk-mercadolivre-txt)}
.mk-amazon{--mk-c:var(--mk-amazon);--mk-ct:var(--mk-amazon-txt)}
.mk-shein{--mk-c:var(--mk-shein);--mk-ct:var(--mk-shein-txt)}
.mk-magalu{--mk-c:var(--mk-magalu);--mk-ct:var(--mk-magalu-txt)}
.mk-tiktokshop,.mk-tiktok{--mk-c:var(--mk-tiktokshop);--mk-ct:var(--mk-tiktokshop-txt)}

/* ☀/🌙 (14/08, referência meu.pluggy): a troca claro↔escuro pelo botão do
   topo cruza com fade. A classe entra SÓ durante a troca (o shell tira em
   ~0,5s) — transition permanente em tudo pesaria a tela. */
.nero-tema-suave, .nero-tema-suave * {
  transition: background-color .35s ease, color .35s ease,
              border-color .35s ease, fill .35s ease, box-shadow .35s ease !important;
}