/* ═══════════════════════════════════════════════════════════════════════════
   KARAMELOO — MEU PERFIL (edição do perfil do editor, prefixo .epc-) · v2
   ═══════════════════════════════════════════════════════════════════════════
   Dono único desta tela. Carrega por último no index.html.

   Medido antes de mexer:
     • 5 elementos reprovavam contraste, três deles em 1.00 e 1.01 — os rótulos
       "Nome profissional (opcional)", "Bio (curta e forte)" e "Tags (selecione
       até 12)" eram literalmente da cor do fundo, invisíveis;
     • "Live preview", "Public view" e "This is how your profile appears to
       others" em inglês no meio de uma tela em português;
     • o preview mostrava um cartão que não existe no produto: avatar de
       iniciais, @usuario e ícones www/x/in/gh. Quem editava o perfil não fazia
       ideia do que o cliente veria — que é exatamente para isso que um preview
       serve.

   Agora o preview é o perfil público em miniatura: capa, avatar sobre a capa,
   nome com selo de disponibilidade, barra de nível/preço/local, bio e tags.
   Mesma linguagem visual do #profilePage (ppv2).

   Cérebro: LEIS/01 - Design Anti-IA · 30 - Marketplace/Guia - Card Perfil
   Portfolio e Pacotes (o editor precisa ver o que o cliente vê).
   ═══════════════════════════════════════════════════════════════════════════ */

#screenEditorProfileConfig, .epc-shell{
  --e-papel:#ffffff;
  --e-papel2:#faf7f1;
  --e-tinta:#111827;
  --e-mut:#4b5563;
  --e-soft:#5c6573;
  --e-linha:rgba(17,24,39,.12);
  --e-ouro:#fcbc1d;
  --e-ouro-ink:#7a5d10;
  --e-ok:#1f7a45;
  --e-r:4px;
  --e-dur:200ms;
  --e-ease:cubic-bezier(.16,1,.3,1);
}

/* ── a tela não rolava ───────────────────────────────────────────────────── */
/* Medido: o painel é `position:fixed` mas tinha 1.491px de ALTURA numa janela
   de 900. Como ele é maior que a tela, o `overflow:auto` dele nunca tinha o que
   rolar — e o body, em .lockScroll (overflow:hidden), simplesmente cortava os
   670px que sobravam. Metade do formulário ficava inalcançável.
   Preso à janela, o overflow do próprio painel passa a funcionar. */
#screenEditorProfileConfig{
  inset:0 !important;
  height:100dvh !important; max-height:100dvh !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* o conteúdo cresce à vontade; quem rola é o painel */
#screenEditorProfileConfig > main,
#screenEditorProfileConfig .epc-shell{
  height:auto !important; max-height:none !important; min-height:0 !important;
  padding-bottom:56px;   /* respiro no fim, senão o último campo cola na borda */
}

/* ── largura: a coluna da esquerda estava espremida ─────────────────────── */
/* Medido em 1920: o painel usava 1.320px (297 de margem à esquerda, 303 à
   direita) e a grade era `908px 390px` fixos. Enquanto isso a barra do topo do
   site ocupa 1.680 com 120 de recuo — o formulário ficava estreito no meio de
   600px de margem morta, e o preview parecia esticado ao lado dele.
   Agora o painel segue o mesmo ritmo do site e a sobra vai toda para o
   formulário; o preview fica com largura fixa, porque ele imita um perfil e
   não deve esticar junto. */
/* O redesign.css usa `width: min(1320px, …)` — WIDTH, não max-width. Por isso
   um `max-width` aqui não muda nada: a largura já está resolvida. É preciso
   sobrescrever a mesma propriedade. E sem padding lateral: a própria largura
   já produz a margem, somar padding só espremeria o conteúdo por dentro.
   `min(1680px, 100vw - 84px)` é exatamente a conta da barra do topo do site. */
#screenEditorProfileConfig .epc-shell{
  width:min(1680px, calc(100vw - 84px)) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding-inline:0 !important;
}
/* A sobra vai para o PREVIEW. Com 390px ele ficava estreito e alto — a capa
   espremia o nome, as linhas de dado quebravam em três e o cartão parecia
   esticado no sentido vertical. Mais largura devolve a proporção de um perfil
   de verdade, que é o que ele existe para imitar. O formulário fica com o
   resto e continua confortável. */
#screenEditorProfileConfig .epc-layout{
  grid-template-columns:minmax(0, 1fr) 560px !important;
  gap:28px !important;
  align-items:start !important;
}
@media (max-width:1400px){
  #screenEditorProfileConfig .epc-layout{ grid-template-columns:minmax(0,1fr) 460px !important }
}
@media (max-width:1150px){
  #screenEditorProfileConfig .epc-layout{ grid-template-columns:minmax(0,1fr) 380px !important }
}
@media (max-width:980px){
  #screenEditorProfileConfig .epc-layout{ grid-template-columns:1fr !important }
}
/* O atributo `hidden` funciona por uma regra do NAVEGADOR (`[hidden]{display:
   none}`) com a menor prioridade que existe. Qualquer `display` de autor
   ganha dela — e o `display:grid !important` acima é exatamente isso. Efeito:
   `kmlTrocarPerfil('cliente')` marcava hidden, o formulário de editor
   continuava na tela inteirinho, e as duas telas apareciam empilhadas.
   Toda regra de `display` com !important precisa deste par. */
#screenEditorProfileConfig .epc-layout[hidden],
#screenEditorProfileConfig .epc-clientePainel[hidden]{
  display:none !important;
}

/* ── rótulos que estavam invisíveis ──────────────────────────────────────── */
/* Contraste medido: 1.01 — cor do próprio fundo. São os <label> de "Nome
   profissional", "Bio" e "Tags" em #screenEditor (index.html:2477+), fora do
   bloco .epc-. Escopei só no .epc- primeiro e não alcancei nenhum deles: o
   formulário do perfil vive nas DUAS telas. */
#screenEditor label,
#screenEditor .field > label,
#screenEditor .mini > label,
.epc-shell label,
.epc-field label,
.epc-shell .epc-label{
  color:#111827 !important;
  font-size:.82rem; font-weight:700; letter-spacing:-.005em;
}
#screenEditor .hint,
#screenEditor .field .hint,
.epc-shell .epc-hint,
.epc-shell .epc-count,
.epc-shell small{ color:#5c6573 !important }
#screenEditor .edTagGroup strong{ color:#111827 !important }

/* badge de contagem nas abas: texto da cor do próprio fundo, contraste 1.00 */
#screenEditor .edPkgTabBadge,
.epc-shell .edPkgTabBadge,
.epc-shell .epc-tabBadge{
  background:#faf7f1 !important;
  border:1px solid rgba(17,24,39,.12) !important;
  color:#4b5563 !important;
  font-weight:800;
}

/* ── superfície e cartões ────────────────────────────────────────────────── */
.epc-shell{ color:var(--e-tinta) !important }
.epc-shell .epc-card,
.epc-shell .epc-panel,
.epc-shell .card{
  background:var(--e-papel) !important;
  border:1px solid var(--e-linha) !important;
  border-radius:var(--e-r) !important;
  box-shadow:none !important;
}
.epc-shell .epc-cardTitle,
.epc-shell h2,
.epc-shell h3{ color:var(--e-tinta) !important; font-weight:800; letter-spacing:-.02em }
.epc-shell .epc-cardSub{ color:var(--e-mut) !important }

/* ── campos ──────────────────────────────────────────────────────────────── */
.epc-shell input[type="text"],
.epc-shell input[type="number"],
.epc-shell input[type="url"],
.epc-shell textarea,
.epc-shell select{
  background:var(--e-papel) !important;
  border:1px solid var(--e-linha) !important;
  border-radius:var(--e-r) !important;
  color:var(--e-tinta) !important;
  box-shadow:none !important;
}
.epc-shell input::placeholder,
.epc-shell textarea::placeholder{ color:var(--e-soft) !important }
.epc-shell input:focus-visible,
.epc-shell textarea:focus-visible,
.epc-shell select:focus-visible{
  outline:2px solid var(--e-ouro-ink); outline-offset:1px;
  border-color:rgba(17,24,39,.3) !important;
}

.epc-shell .epc-chip{
  background:var(--e-papel) !important; color:var(--e-mut) !important;
  border:1px solid var(--e-linha) !important; border-radius:var(--e-r) !important;
  font-weight:700;
}
/* contador de tags: 7/12 ao lado do rótulo */
#screenEditorProfileConfig .epc-tagCount{
  color:var(--e-soft) !important; font-size:.72rem; font-weight:700;
  font-variant-numeric:tabular-nums; margin-left:6px;
}
#screenEditorProfileConfig .epc-tagCount.is-cheio{ color:var(--e-ouro-ink) !important }
/* pisca quando o clique é recusado por limite — sem isso o chip parece morto */
#screenEditorProfileConfig .epc-tagCount.piscou{ animation:epcPisca 620ms var(--e-ease) }
@keyframes epcPisca{
  0%,100%{ transform:none }
  20%{ transform:translateX(-3px) }
  40%{ transform:translateX(3px) }
  60%{ transform:translateX(-2px) }
}
@media (prefers-reduced-motion:reduce){
  #screenEditorProfileConfig .epc-tagCount.piscou{ animation:none }
}
.epc-shell .epc-chip[aria-pressed="true"]{
  background:var(--e-tinta) !important; color:#fff !important; border-color:var(--e-tinta) !important;
}

/* ── caixa dentro de caixa dentro de caixa ───────────────────────────────── */
/* Medido: a coluna tem 560px, mas o preview chegava com 486. O caminho era
   `.epc-rail` (18+18 de padding) → `.epc-previewFrame` (18+18 mais 1px de
   borda de cada lado) → preview. Setenta e quatro pixels gastos em moldura de
   moldura, e a moldura de fora nem é visível de propósito: o preview já tem
   borda própria.
   A coluna passa a ser só coluna; quem desenha cartão é o preview e a
   completude, cada um com a própria borda — igual aos cartões da esquerda. */
#screenEditorProfileConfig .epc-rail{
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  display:flex; flex-direction:column; gap:14px;
}
#screenEditorProfileConfig .epc-previewFrame{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#screenEditorProfileConfig .epc-previewHead{ padding:0 0 10px !important }

/* ── coluna do preview ───────────────────────────────────────────────────── */
.epc-shell .epc-previewTitulo{
  margin:0; color:var(--e-tinta) !important;
  font-size:.76rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
}
.epc-shell .epc-modBtn{
  background:var(--e-papel2) !important; color:var(--e-mut) !important;
  border:1px solid var(--e-linha) !important; border-radius:100px !important;
  padding:4px 11px; font-size:.72rem; font-weight:700;
}
.epc-shell .epc-modBtn.isActive{
  background:var(--e-tinta) !important; color:#fff !important; border-color:var(--e-tinta) !important;
}
/* --e-soft (#5c6573) dava 4.39 aqui, logo abaixo do mínimo de 4.5 — o fundo
   desta faixa é mais claro que o dos cartões. Um tom acima resolve. */
.epc-shell .epc-previewCaption,
#screenEditorProfileConfig .epc-previewCaption{
  color:var(--e-mut) !important; font-size:.74rem; text-align:center; margin-top:10px;
}

/* ── PREVIEW = perfil público em miniatura ───────────────────────────────── */
.epc-shell .epc-publicPreview{
  background:var(--e-papel) !important;
  border:1px solid var(--e-linha) !important;
  border-radius:var(--e-r) !important;
  overflow:hidden; padding:0 !important;
}

/* capa: mesmo tratamento do #profilePage — véu por cima para o branco sobreviver */
.epc-shell .epc-pubCapa{
  position:relative; min-height:112px;
  background-size:cover; background-position:center;
  background-color:#1b1f27;
  display:flex; align-items:flex-end;
}
.epc-shell .epc-pubCapa.semCapa::before{
  content:"Sem capa"; position:absolute; top:10px; right:12px; z-index:3;
  color:rgba(255,255,255,.72); font-size:.68rem; font-weight:700;
}
.epc-shell .epc-pubVeu{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,12,16,.35), rgba(10,12,16,.85));
}
/* O preview antigo era um cartão centralizado, e o text-align:center dele
   empurrava nome e título para a direita da capa, longe do avatar. */
.epc-shell .epc-pubTopo,
#screenEditorProfileConfig .epc-pubTopo{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; gap:10px; padding:12px;
  width:100%; min-width:0;
  text-align:left !important;
}
.epc-shell .epc-pubIdent,
#screenEditorProfileConfig .epc-pubIdent{ flex:1 1 auto; text-align:left !important }
.epc-shell .epc-pubCorpo,
#screenEditorProfileConfig .epc-pubCorpo{ text-align:left !important }
/* Estava saindo 46 de largura por 68 de ALTURA — um ovo, não um círculo.
   A altura vinha de outra folha; `height` sozinho não vencia. Trava dos dois
   lados mais `aspect-ratio`, e `min-height:0` porque em item de flex o
   min-height:auto impede o encolhimento até o tamanho pedido. */
.epc-shell .epc-pubAvatar,
#screenEditorProfileConfig .epc-pubAvatar{
  width:46px !important; height:46px !important;
  min-width:46px !important; max-width:46px !important;
  min-height:0 !important; max-height:46px !important;
  aspect-ratio:1 / 1 !important;
  flex:0 0 46px !important;
  align-self:flex-end !important;
  border-radius:50% !important; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#2a2f3a; color:#fff !important; font-weight:800; font-size:1rem;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
  padding:0 !important;
}
.epc-shell .epc-pubAvatar img{ width:100%; height:100%; object-fit:cover }
.epc-shell .epc-pubIdent{ min-width:0 }
.epc-shell .epc-pubNomeLinha{ display:flex; align-items:center; gap:7px; flex-wrap:wrap }
/* O nome e o título ficam SOBRE a capa escura, então precisam ser brancos.
   `#screenEditorProfileConfig .epc-pubName{color:#111214!important}` (1 ID +
   1 classe) vencia o meu `.epc-shell .epc-pubName` (2 classes) e pintava o
   nome de grafite sobre grafite — invisível. Repito o prefixo com ID para
   empatar e ganhar por ordem de carga. */
.epc-shell .epc-pubName,
#screenEditorProfileConfig .epc-pubName{
  color:#fff !important; font-weight:800; font-size:1rem !important; letter-spacing:-.02em;
  text-shadow:0 1px 8px rgba(10,12,16,.8);
}
.epc-shell .epc-pubBadge{
  background:var(--e-ok) !important; color:#fff !important;
  border-radius:100px; padding:2px 8px; font-size:.62rem; font-weight:800;
}
.epc-shell .epc-pubBadge.off{ background:rgba(255,255,255,.24) !important }
/* âmbar = "aceita trabalho, mas agora está fora do expediente". Estado
   diferente de "não aceitando", então cor diferente — e o texto diz qual é,
   porque status nunca pode depender só de cor. */
.epc-shell .epc-pubBadge.fora{ background:#9c6512 !important }
.epc-shell .epc-pubTitle,
#screenEditorProfileConfig .epc-pubTitle{
  color:rgba(255,255,255,.92) !important; font-size:.76rem !important;
  text-shadow:0 1px 8px rgba(10,12,16,.85);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* mesma precaução no avatar e no selo, que também vivem sobre a capa */
.epc-shell .epc-pubAvatar,
#screenEditorProfileConfig .epc-pubAvatar{ color:#fff !important }
.epc-shell .epc-pubBadge,
#screenEditorProfileConfig .epc-pubBadge{ color:#fff !important }

/* ── as duas linhas de dentro da capa ────────────────────────────────────── */
/* Repetem a ordem exata do perfil público. Ficam sobre a capa escura, então
   herdam branco; o marcador de campo vago fica apagado, para a pessoa VER o
   espaço que ficará vazio se não preencher. */
.epc-shell .epc-pubSub,
#screenEditorProfileConfig .epc-pubSub{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px;
  margin-top:3px;
  color:rgba(255,255,255,.93) !important; font-size:.72rem;
  text-shadow:0 1px 8px rgba(10,12,16,.85);
}
/* O reset global `span{color:#111!important}` pinta os FILHOS: pôr a cor só no
   pai deixava "iniciante", "★ 5.0/10" e "0 seguidores" em grafite sobre a capa
   escura — contraste 1.14, medido. A cor tem de ir no span. */
.epc-shell .epc-pubSub span,
#screenEditorProfileConfig .epc-pubSub span,
.epc-shell .epc-pubTrust span,
#screenEditorProfileConfig .epc-pubTrust span{
  color:rgba(255,255,255,.93) !important;
}
.epc-shell .epc-pubDot,
#screenEditorProfileConfig .epc-pubDot{ color:rgba(255,255,255,.45) !important }
/* estes dois voltam a ter cor própria depois da regra acima */
.epc-shell .epc-pubSub span.epc-vago,
#screenEditorProfileConfig .epc-pubSub span.epc-vago,
.epc-shell .epc-pubTrust span.epc-vago,
#screenEditorProfileConfig .epc-pubTrust span.epc-vago{
  color:rgba(255,255,255,.6) !important;
}
.epc-shell .epc-pubTrust span.epc-pubPort,
#screenEditorProfileConfig .epc-pubTrust span.epc-pubPort{ color:#14181f !important }
.epc-shell .epc-pubTrust span.epc-pubPort.epc-vago,
#screenEditorProfileConfig .epc-pubTrust span.epc-pubPort.epc-vago{
  color:rgba(255,255,255,.8) !important;
}

.epc-shell .epc-pubTrust,
#screenEditorProfileConfig .epc-pubTrust{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  margin-top:6px;
  color:rgba(255,255,255,.9) !important; font-size:.72rem;
  text-shadow:0 1px 8px rgba(10,12,16,.85);
}
.epc-shell .epc-pubTrust b,
#screenEditorProfileConfig .epc-pubTrust b{ color:#fff !important; font-weight:800 }
.epc-shell .epc-pubPort,
#screenEditorProfileConfig .epc-pubPort{
  background:rgba(255,255,255,.94) !important; color:#14181f !important;
  border-radius:100px; padding:2px 9px; font-size:.66rem; font-weight:800;
  text-shadow:none;
}
/* campo ainda não preenchido: presente, mas visivelmente incompleto */
.epc-shell .epc-vago,
#screenEditorProfileConfig .epc-vago{
  color:rgba(255,255,255,.55) !important; font-style:italic; font-weight:400;
  text-shadow:none;
}
.epc-shell .epc-pubPort.epc-vago,
#screenEditorProfileConfig .epc-pubPort.epc-vago{
  background:rgba(255,255,255,.16) !important; color:rgba(255,255,255,.72) !important;
}

/* ── corpo do preview ────────────────────────────────────────────────────── */
.epc-shell .epc-pubCorpo{ padding:14px }
.epc-shell .epc-pubSecHd,
#screenEditorProfileConfig .epc-pubSecHd{
  color:var(--e-ouro-ink) !important;
  font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:6px;
}
.epc-shell .epc-pubSecHd + *{ margin-top:0 }
.epc-shell .epc-pubBio{
  color:var(--e-mut) !important; font-size:.8rem; line-height:1.55;
}

/* ── texto que a PESSOA escreve tem que caber ───────────────────────────────
   O navegador só quebra linha onde há espaço. Uma bio de 180 caracteres sem
   nenhum espaço (ou um link colado, que é o caso realista) é UM token: não há
   onde quebrar, e ele sai por cima da borda do cartão. Medido: 1.018px de
   texto para fora da caixa da bio.

   `anywhere` e não `break-all`: break-all quebra qualquer palavra no meio,
   inclusive as normais, e destrói a leitura de um texto em português.
   `anywhere` só entra em ação quando o token sozinho não cabe. */
.epc-shell .epc-pubBio,
.epc-shell .epc-pubName,
.epc-shell .epc-pubTitle,
.epc-shell .epc-pubTrust,
.epc-shell .epc-pubSub,
.epc-shell .epc-pubTags span,
.epc-shell .epc-pubPort,
#screenEditorProfileConfig .epc-pubBio,
#screenEditorProfileConfig .epc-pubTitle{
  overflow-wrap:anywhere;
  min-width:0;   /* sem isto, dentro de flex/grid o item se recusa a encolher */
}
/* Ferramentas no preview: mesma tipografia da bio, porque no perfil público
   também é texto e não etiqueta.
   O cabeçalho precisa de respiro próprio: ele vem logo depois de "Nenhum
   trabalho publicado ainda", e sem margem os dois ficam colados — parecia
   legenda da miniatura, não seção nova. */
#screenEditorProfileConfig #epcPubFerrHd{ margin-top:16px !important }
.epc-shell .epc-pubFerr,
#screenEditorProfileConfig .epc-pubFerr{
  color:var(--e-mut) !important; font-size:.8rem; line-height:1.55;
  margin-bottom:14px;
  overflow-wrap:anywhere; min-width:0;
}
/* `.epc-vago` genérico é BRANCO — foi escrito para a área escura da capa.
   Aqui o fundo é o papel branco do corpo do preview, então o estado vazio
   saía branco no branco: contraste 1:1, texto invisível. Escurece só dentro
   deste bloco, sem mexer na regra que a capa depende. */
.epc-shell .epc-pubFerr .epc-vago,
#screenEditorProfileConfig .epc-pubFerr .epc-vago{
  color:var(--e-soft) !important;
}
.epc-shell .epc-pubTags{ display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 16px }
.epc-shell .epc-pubTags span{
  background:var(--e-papel2) !important; border:1px solid var(--e-linha) !important;
  color:var(--e-mut) !important; border-radius:var(--e-r);
  padding:3px 8px; font-size:.68rem; font-weight:700;
}

/* miniatura dos trabalhos: mesma proporção 4:5 do perfil público */
.epc-shell .epc-pubTrabalhos{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
}
.epc-shell .epc-pubTrab{
  aspect-ratio:4/5; border-radius:3px; overflow:hidden;
  background:var(--e-papel2); border:1px solid var(--e-linha);
  display:block;
}
.epc-shell .epc-pubTrab img{ width:100%; height:100%; object-fit:cover; display:block }
/* vazio: contorno tracejado, para ler como "espaço a preencher" e não como erro */
.epc-shell .epc-pubTrab.epc-vago{
  border:1px dashed rgba(17,24,39,.25); background:transparent;
}
.epc-shell .epc-pubTrabNota{
  grid-column:1 / -1; color:var(--e-soft) !important;
  font-size:.68rem; font-style:normal; margin-top:2px;
}
.epc-shell .epc-pubHandleLinha{
  color:var(--e-soft) !important; font-size:.7rem; margin-top:14px;
  padding-top:10px; border-top:1px solid var(--e-linha);
}

/* ── completude ──────────────────────────────────────────────────────────── */
.epc-shell .epc-checklist{
  background:var(--e-papel) !important;
  border:1px solid var(--e-linha) !important;
  border-radius:var(--e-r) !important;
}
.epc-shell .epc-checkTop strong{ color:var(--e-tinta) !important }
.epc-shell .epc-progressText{ color:var(--e-ouro-ink) !important; font-weight:800 }
.epc-shell .epc-progressBar{ background:rgba(17,24,39,.08) !important }
.epc-shell .epc-progressFill{ background:var(--e-ouro) !important }
.epc-shell .epc-checkItem{ color:var(--e-mut) !important }
.epc-shell .epc-checkItem.isDone{ color:var(--e-tinta) !important }

/* ── ações ───────────────────────────────────────────────────────────────── */
.epc-shell .btn{
  border-radius:var(--e-r) !important; font-weight:700 !important; box-shadow:none !important;
}
.epc-shell .btn.primary,
.epc-shell .epc-save{
  background:var(--e-ouro) !important; color:#1c1405 !important;
  border:1px solid var(--e-ouro) !important; font-weight:800 !important;
}
.epc-shell .btn.secondary{
  background:var(--e-papel) !important; color:var(--e-tinta) !important;
  border:1px solid var(--e-linha) !important;
}
.epc-shell .epc-dirtyText{ color:var(--e-soft) !important }

@media (prefers-reduced-motion:reduce){
  .epc-shell .epc-chip,
  .epc-shell .epc-modBtn{ transition:none }
}

/* ── limites: preco fora da faixa e bio no teto ─────────────────────────────
   Estado nunca so por cor: o texto do aviso ja diz qual e o limite, a cor so
   reforca. #a3341f sobre branco da 6.4:1. */
#screenEditorProfileConfig .epc-hintErro,
.epc-shell .epc-hintErro{
  color:#a3341f !important;
  font-weight:800 !important;
}

#screenEditorProfileConfig .epc-counterFull,
.epc-shell .epc-counterFull{
  color:#a3341f !important;
  font-weight:800 !important;
}

/* o campo tambem avisa, para quem le pelo campo e nao pelo rodape */
#screenEditorProfileConfig .epc-priceField:has(.epc-hintErro) input{
  border-color:#a3341f !important;
}

/* ── Seletor de perfil: editor x cliente ─────────────────────────────────────
   Duas abas, nao um dropdown: sao dois lugares que a pessoa alterna com
   frequencia, e dropdown esconde a existencia do segundo. */
#screenEditorProfileConfig .epc-perfilSeletor{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin:0 0 22px !important;
}
#screenEditorProfileConfig .epc-perfilSeletor button{
  padding:14px 16px !important;
  text-align:left !important;
  border:1px solid rgba(17,24,39,.12) !important;
  border-radius:4px !important;
  background:#fff !important;
  cursor:pointer !important;
  font:inherit !important;
  transition:border-color .22s cubic-bezier(.16,1,.3,1), background .22s cubic-bezier(.16,1,.3,1) !important;
}
#screenEditorProfileConfig .epc-perfilSeletor button:hover{
  border-color:rgba(17,24,39,.28) !important;
}
#screenEditorProfileConfig .epc-perfilSeletor button b{
  display:block !important;
  color:#111827 !important;
  font-size:14px !important; font-weight:900 !important;
}
#screenEditorProfileConfig .epc-perfilSeletor button span{
  display:block !important; margin-top:3px !important;
  color:#4b5563 !important; font-size:12.5px !important; font-weight:600 !important;
}
/* aba ativa: barra dourada + fundo, nunca so a cor da borda */
#screenEditorProfileConfig .epc-perfilSeletor button.is-ativo{
  border-color:rgba(201,160,42,.5) !important;
  border-left:3px solid #fcbc1d !important;
  background:#faf7f1 !important;
}
#screenEditorProfileConfig .epc-perfilSeletor button:focus-visible{
  outline:2px solid #111827 !important; outline-offset:2px !important;
}

/* ── Perfil de cliente ── */
#screenEditorProfileConfig .epc-clientePainel[hidden]{ display:none !important }
#screenEditorProfileConfig .epc-clientePainel{
  display:grid !important; gap:16px !important;
  max-width:900px !important;
  /* Centralizado. A aba de editor usa a largura toda porque tem o preview na
     direita; esta não tem, e 900px encostados à esquerda numa casca de 1516
     deixavam 616px de vazio que lia como "faltou carregar alguma coisa".
     Formulário sozinho quer medida confortável, não largura total. */
  margin-inline:auto !important;
}
#screenEditorProfileConfig .epc-clHistorico{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:1px !important;
  border:1px solid rgba(17,24,39,.12) !important;
  border-radius:4px !important;
  background:rgba(17,24,39,.12) !important;
  overflow:hidden !important;
}
#screenEditorProfileConfig .epc-clHistorico > div{
  background:#fff !important; padding:16px 18px !important;
}
#screenEditorProfileConfig .epc-clHistorico b{
  display:block !important; color:#111827 !important;
  font-size:24px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  font-variant-numeric:tabular-nums !important;
}
#screenEditorProfileConfig .epc-clHistorico span{
  display:block !important; margin-top:4px !important;
  color:#4b5563 !important; font-size:12.5px !important; font-weight:600 !important;
}

/* ── Horario de atendimento ── */
#screenEditorProfileConfig .epc-horarioLinha{
  display:flex !important; align-items:center !important; gap:9px !important;
  margin-top:8px !important; flex-wrap:wrap !important;
}
#screenEditorProfileConfig .epc-horarioLinha span{
  color:#4b5563 !important; font-size:13px !important; font-weight:700 !important;
}
#screenEditorProfileConfig .epc-horarioLinha select{
  width:auto !important; min-width:104px !important; margin-top:0 !important;
}
#screenEditorProfileConfig .epc-horarioDias{
  display:flex !important; flex-wrap:wrap !important; gap:7px !important;
  margin-top:12px !important;
}
#screenEditorProfileConfig .epc-horarioDias button{
  min-width:52px !important; min-height:34px !important;
  padding:0 11px !important;
  border:1px solid rgba(17,24,39,.16) !important;
  border-radius:100px !important;
  background:#fff !important;
  color:#4b5563 !important;
  font:inherit !important; font-size:12.5px !important; font-weight:800 !important;
  cursor:pointer !important;
  transition:background .22s cubic-bezier(.16,1,.3,1), color .22s cubic-bezier(.16,1,.3,1) !important;
}
/* dia marcado: preenchimento dourado + tinta escura (7.2:1) */
#screenEditorProfileConfig .epc-horarioDias button[aria-pressed="true"]{
  border-color:#b08d20 !important;
  background:#fcbc1d !important;
  color:#111827 !important;
}
#screenEditorProfileConfig .epc-horarioDias button:focus-visible{
  outline:2px solid #111827 !important; outline-offset:2px !important;
}

@media (max-width:640px){
  #screenEditorProfileConfig .epc-perfilSeletor{ grid-template-columns:1fr !important }
}

@media (prefers-reduced-motion:reduce){
  #screenEditorProfileConfig .epc-perfilSeletor button,
  #screenEditorProfileConfig .epc-horarioDias button{ transition:none !important }
}
/* Campo "medido": valor que vem do sistema, nao de digitar. Fundo diferente
   do input de proposito — quem olha precisa saber na hora que ali nao se
   escreve. */
#screenEditorProfileConfig .epc-medido{
  margin-top:8px !important;
  padding:11px 12px !important;
  border:1px solid rgba(17,24,39,.12) !important;
  border-left:3px solid #fcbc1d !important;
  border-radius:4px !important;
  background:#faf7f1 !important;
}
#screenEditorProfileConfig .epc-medido b{
  display:block !important;
  color:#111827 !important;
  font-size:16px !important; font-weight:900 !important;
  font-variant-numeric:tabular-nums !important;
}
#screenEditorProfileConfig .epc-medido small{
  display:block !important; margin-top:3px !important;
  color:#4b5563 !important; font-size:12px !important;
  font-weight:600 !important; line-height:1.4 !important;
}
/* ── Link publico do editor ────────────────────────────────────────────────
   E um valor para copiar, nao um campo para digitar — por isso monoespacado
   e com fundo diferente do input. */
#screenEditorProfileConfig .epc-linkPublico{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:8px !important;
  padding:8px 8px 8px 12px !important;
  border:1px solid rgba(17,24,39,.12) !important;
  border-radius:4px !important;
  background:#faf7f1 !important;
}
#screenEditorProfileConfig .epc-linkPublico code{
  flex:1 1 auto !important;
  min-width:0 !important;
  color:#111827 !important;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size:12.5px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#screenEditorProfileConfig .epc-linkPublico button{
  flex:0 0 auto !important;
  min-height:30px !important;
  padding:0 12px !important;
  border:1px solid #d1d5db !important;
  border-radius:4px !important;
  background:#fff !important;
  color:#111827 !important;
  font:inherit !important;
  font-size:12.5px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
#screenEditorProfileConfig .epc-linkPublico button:hover{ background:#f4f5f7 !important }
#screenEditorProfileConfig .epc-linkPublico button:focus-visible{
  outline:2px solid #111827 !important; outline-offset:2px !important;
}
/* ── Titulo/especialidade no preview ────────────────────────────────────────
   Espelha .ppv2Headline do perfil publico: entre o nome e a linha de nivel.
   Some quando vazio — linha em branco no preview vira duvida ("faltou algo?"). */
#screenEditorProfileConfig .epc-pubTitulo{
  margin-top:3px !important;
  color:rgba(255,255,255,.86) !important;
  font-size:13px !important;
  font-weight:750 !important;
  line-height:1.3 !important;
  /* A classe aqui é pubTitulo (com U) e não pubTitle — a primeira regra de
     quebra que escrevi passou reto por ela. O título tem 70 caracteres de
     limite e no perfil público quebra em duas linhas; se aqui ele fosse
     cortado com reticências, o preview mentiria sobre o perfil real. */
  overflow-wrap:anywhere;
  min-width:0;
}
#screenEditorProfileConfig .epc-pubTitulo:empty{ display:none !important }

/* ── TRABALHOS RECENTES ─────────────────────────────────────────────────────
   A seção que faltava. O perfil público mostra a galeria desde sempre e o
   preview exibia três molduras vazias — mas não havia onde publicar nada.

   Mora DENTRO de "Informações básicas", como campo do formulário e não como
   cartão próprio: quando o preview mostra as molduras vazias, é para este
   bloco que a pessoa olha. Como cartão separado mais abaixo, ele não era
   encontrado — medido a 1.598px do topo na primeira tentativa.

   Grade com auto-fill em vez de contar colunas na mão: o painel muda de
   largura em três breakpoints e regra fixa `repeat(3,...)` travaria onde
   caberiam quatro. */
#screenEditorProfileConfig .epc-trabCampo{
  /* ocupa a linha inteira da grade de dois campos */
  grid-column:1 / -1;
}
#screenEditorProfileConfig .epc-trabTopo{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:8px;
}
#screenEditorProfileConfig #epcTrabLabel{
  display:flex; align-items:center; gap:8px; margin:0;
}
/* AÇÃO, não campo. Antes herdava `.epc-fileBtn`: branco, borda cinza, largura
   total — visualmente igual a um input vazio, e o Kauan olhou direto para ele
   sem reconhecer. Dourado da logo, do tamanho do conteúdo, com o "+" na
   frente. `#1c1405` no texto porque dourado puro com branco reprova. */
#screenEditorProfileConfig .epc-trabAdd{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  flex:0 0 auto; width:auto; min-height:32px; padding:0 14px;
  /* Preenchimento dourado da marca, mas a BORDA no dourado-tinta: o
     `#fcbc1d` contra o papel branco dá 2.46:1 e reprova o mínimo de 3:1 que
     um limite de componente exige — medido. `#7a5d10` dá 6.0:1 e ainda
     recorta o botão contra o formulário. */
  border:1px solid #7a5d10 !important;
  border-radius:var(--e-r) !important;
  background:#fcbc1d !important; color:#1c1405 !important;
  font-size:.78rem; font-weight:800; letter-spacing:-.005em;
  cursor:pointer; margin:0 !important;
  transition:background var(--e-dur) var(--e-ease);
}
#screenEditorProfileConfig .epc-trabAdd:hover{ background:#b89123 !important }
#screenEditorProfileConfig .epc-trabAdd:focus-within{
  outline:2px solid #7a5d10; outline-offset:2px;
}
#screenEditorProfileConfig .epc-trabAdd input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
/* Contador ao lado do rótulo, no mesmo padrão do contador de tags. */
#screenEditorProfileConfig .epc-trabCount{
  color:var(--e-soft) !important; font-size:.72rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
#screenEditorProfileConfig .epc-trabGrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap:12px !important;
  margin-top:4px;
}
#screenEditorProfileConfig .epc-trabItem{
  position:relative;
  border:1px solid var(--e-linha) !important;
  border-radius:var(--e-r) !important;
  background:var(--e-papel) !important;
  overflow:hidden;
  min-width:0;   /* sem isto o item de grid não encolhe e a grade vaza */
}
/* 16:9 é a proporção do que estes editores entregam. Reservar a caixa antes
   da imagem chegar evita o pulo de layout quando ela carrega. */
#screenEditorProfileConfig .epc-trabImg{
  position:relative;
  aspect-ratio:16/9;
  background:var(--e-papel2) !important;
}
#screenEditorProfileConfig .epc-trabImg img{
  width:100%; height:100%; object-fit:cover; display:block;
}
#screenEditorProfileConfig .epc-trabDestaque{
  position:absolute; left:7px; bottom:7px;
  background:#fcbc1d !important; color:#1c1405 !important;
  border-radius:3px; padding:2px 7px;
  font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
/* Remover é ação destrutiva: fica discreto até a pessoa se aproximar do card,
   e sempre alcançável por teclado. */
#screenEditorProfileConfig .epc-trabX{
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:100px;
  background:rgba(17,24,39,.72) !important; color:#fff !important;
  font-size:16px; line-height:1; font-weight:700;
  cursor:pointer; opacity:0;
  transition:opacity var(--e-dur) var(--e-ease), background var(--e-dur) var(--e-ease);
}
/* `:focus` e não só `:focus-visible`. Um controle escondido em opacity:0 que
   recebe o foco e continua invisível é um alvo fantasma: a pessoa navegando
   por Tab não vê onde está. Medido — com foco, opacidade continuava 0. */
#screenEditorProfileConfig .epc-trabItem:hover .epc-trabX,
#screenEditorProfileConfig .epc-trabItem:focus-within .epc-trabX,
#screenEditorProfileConfig .epc-trabX:focus{ opacity:1 }
#screenEditorProfileConfig .epc-trabX:hover{ background:#a3341f !important }
#screenEditorProfileConfig .epc-trabX:focus-visible{
  outline:2px solid #fff; outline-offset:1px;
}

/* Um campo só por peça. "Canal" e "Resultado" saíram: com três campos, seis
   trabalhos viravam dezoito preenchimentos e a pessoa parava no segundo. */
#screenEditorProfileConfig .epc-trabCampos{ padding:9px 9px 10px }
#screenEditorProfileConfig .epc-trabCampos input{
  width:100%; min-width:0;
  border:1px solid var(--e-linha) !important;
  border-radius:var(--e-r) !important;
  background:var(--e-papel) !important;
  color:var(--e-tinta) !important;
  padding:6px 8px; font-size:.76rem;
}
#screenEditorProfileConfig .epc-trabTitulo{ font-weight:700 }
#screenEditorProfileConfig .epc-trabCampos input::placeholder{ color:var(--e-soft) !important }
#screenEditorProfileConfig .epc-trabCampos input:focus-visible{
  outline:2px solid var(--e-ouro-ink); outline-offset:1px;
}
#screenEditorProfileConfig .epc-trabSubir{
  position:absolute; top:6px; left:6px;
  width:24px; height:24px; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:100px;
  background:rgba(17,24,39,.72) !important; color:#fff !important;
  font-size:13px; cursor:pointer; opacity:0;
  transition:opacity var(--e-dur) var(--e-ease);
}
#screenEditorProfileConfig .epc-trabItem:hover .epc-trabSubir,
#screenEditorProfileConfig .epc-trabItem:focus-within .epc-trabSubir,
#screenEditorProfileConfig .epc-trabSubir:focus{ opacity:1 }
#screenEditorProfileConfig .epc-trabSubir:focus-visible{
  outline:2px solid #fff; outline-offset:1px;
}

/* Vazio que ensina o próximo passo — não um "sem itens" que só constata. */
#screenEditorProfileConfig .epc-trabVazio{
  grid-column:1/-1;
  border:1px dashed var(--e-linha) !important;
  border-radius:var(--e-r) !important;
  background:var(--e-papel2) !important;
  padding:20px 18px; display:grid; gap:5px;
}
#screenEditorProfileConfig .epc-trabVazio strong{
  color:var(--e-tinta) !important; font-size:.86rem; font-weight:800;
}
#screenEditorProfileConfig .epc-trabVazio span{
  color:var(--e-mut) !important; font-size:.78rem; line-height:1.55; max-width:62ch;
}
#screenEditorProfileConfig .epc-trabDemo{
  grid-column:1/-1; margin:0;
  color:var(--e-ouro-ink) !important; font-size:.74rem; font-weight:700;
}
/* Dentro do formulário o vazio não precisa do mesmo peso que tinha como
   cartão: menos altura, mesma frase que ensina o próximo passo. */
#screenEditorProfileConfig .epc-trabCampo .epc-trabVazio{ padding:14px 14px }
/* Cheio: o botão não some (sumir vira "cadê?"), fica visivelmente inerte. */
#screenEditorProfileConfig .epc-trabAdd--cheio{
  opacity:.45; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  #screenEditorProfileConfig .epc-trabX,
  #screenEditorProfileConfig .epc-trabSubir{ transition:none !important; opacity:1 }
}
/* ══════════════════════════════════════════════════════════════════════════
   CAMPO OBRIGATÓRIO E ESTADO DE ERRO
   ══════════════════════════════════════════════════════════════════════════
   Perfil sem foto, sem nome, sem categoria ou sem valor mínimo entrava no
   marketplace como card vazio. Agora o painel trava o salvar — e travar sem
   dizer o quê é a mesma coisa que botão quebrado, então cada peça daqui tem
   função: o asterisco avisa ANTES, a borda mostra ONDE, a frase diz O QUÊ e o
   resumo acima do botão diz QUANTO falta.

   #a3341f sobre branco dá 6.4:1 — é a mesma tinta de erro que o painel já usa
   em .epc-hintErro. Cor nunca sozinha: sempre acompanha texto. */

#screenEditorProfileConfig .epc-obrig{
  color:#a3341f !important;
  font-weight:900;
  margin-left:1px;
}

#screenEditorProfileConfig .epc-field input.epc-erro,
#screenEditorProfileConfig .epc-field textarea.epc-erro,
#screenEditorProfileConfig .epc-field select.epc-erro,
#screenEditorProfileConfig input.epc-erro,
#screenEditorProfileConfig textarea.epc-erro{
  border-color:#a3341f !important;
  background:#fffaf9 !important;
  box-shadow:0 0 0 2px rgba(163,52,31,.13) !important;
}
/* O foco NÃO apaga o vermelho: a regra base pinta a borda de dourado com
   !important, então sem este par o campo errado ficava normal justo quando a
   pessoa clicava nele para consertar. */
#screenEditorProfileConfig .epc-field input.epc-erro:focus,
#screenEditorProfileConfig .epc-field textarea.epc-erro:focus,
#screenEditorProfileConfig .epc-field select.epc-erro:focus,
#screenEditorProfileConfig input.epc-erro:focus,
#screenEditorProfileConfig textarea.epc-erro:focus{
  border-color:#a3341f !important;
  box-shadow:0 0 0 3px rgba(163,52,31,.2) !important;
}

/* Rótulo do campo com pendência. Na linha da foto o rótulo é um <strong>,
   não um <label> — por isso os dois seletores. */
#screenEditorProfileConfig .epc-campoErro > label,
#screenEditorProfileConfig .epc-campoErro > label[for],
#screenEditorProfileConfig .epc-photoText.epc-campoErro > strong{
  color:#a3341f !important;
}

/* Categorias: o erro não é num input, é no grupo de chips. Moldura em vez de
   borda de campo, para não fingir que o bloco inteiro é um controle. */
#screenEditorProfileConfig #epcChipGroups.epc-erro{
  outline:1px solid #a3341f !important;
  outline-offset:6px;
  border-radius:var(--e-r) !important;
}

/* Foto: a linha inteira acende, porque o alvo do clique é o botão dentro dela. */
#screenEditorProfileConfig .epc-photoRow.epc-erro{
  border:1px solid #a3341f !important;
  background:#fffaf9 !important;
  border-radius:var(--e-r) !important;
  padding:12px !important;
}
#screenEditorProfileConfig .epc-photoRow.epc-erro .epc-photoPreview{
  box-shadow:0 0 0 2px rgba(163,52,31,.35) !important;
}

/* A frase do que está faltando, embaixo do próprio campo. */
#screenEditorProfileConfig .epc-erroMsg{
  display:block;
  margin-top:6px;
  color:#a3341f !important;
  font-size:.76rem;
  font-weight:700;
  line-height:1.45;
}
#screenEditorProfileConfig .epc-erroMsg[hidden]{ display:none !important }

/* Estado do upload: "Enviando…", "A foto já está no ar", ou o motivo da recusa.
   Antes o upload falhava dentro de um console.warn e a tela não dizia nada —
   era assim que o editor saía achando que a foto tinha subido. */
#screenEditorProfileConfig .epc-uploadMsg{
  display:block;
  margin-top:6px;
  font-size:.76rem;
  font-weight:700;
  line-height:1.45;
  color:var(--e-mut) !important;
}
#screenEditorProfileConfig .epc-uploadMsg[hidden]{ display:none !important }
#screenEditorProfileConfig .epc-uploadMsg--erro{ color:#a3341f !important }
#screenEditorProfileConfig .epc-uploadMsg--ok{ color:#1a6b3c !important }
#screenEditorProfileConfig .epc-uploadMsg--indo{ color:var(--e-mut) !important }

/* Resumo logo acima da barra de salvar: é para onde a pessoa olha quando
   clica em "Salvar" e a tela não fecha. */
#screenEditorProfileConfig .epc-resumoErro{
  margin:18px 0 0;
  padding:12px 14px;
  border:1px solid #a3341f !important;
  border-left-width:3px !important;
  border-radius:var(--e-r) !important;
  background:#fffaf9 !important;
  color:#a3341f !important;
  font-size:.82rem;
  font-weight:700;
  line-height:1.5;
}
#screenEditorProfileConfig .epc-resumoErro[hidden]{ display:none !important }