/* ============================================================================
   IDENTIDADE VISUAL V2 — COMPOSIÇÕES POR ROTA · Central de edição
   Depende de design-identity-v2-foundation.css (tokens e componentes compartilhados).
   Cada seção é escopada por html[data-screen="<rota>"] (nunca data-route na raiz).

   A identidade é compartilhada; a composição responde à função de cada tela:
   - Oportunidades (catalog / track): decisão — descobrir → avaliar → decidir → revelar. O trabalho é
     protagonista; a cota é restrição contextual; sem par cliente+editor antes do reveal; sem
     ilustrações de vídeo (play, timeline) — a zona visual da V1 sai, o briefing entra.
   - Pedir edição (request / success / review): comercial e guiada — duas maneiras claras de começar,
     formulário em blocos claros; a atmosfera escura/monumental da V1 deixa de ser autoridade.
   - Encontrar editor (editors): pessoas protagonistas — nome, retrato (fallback de iniciais),
     especialidade, contexto e ação para conhecer.
   - Operação (admin): superfície de trabalho — mesma identidade, mais densidade, semânticas claras.
   Meus contatos (workspace) vive em design-identity-v2-meus-contatos.css (Versão 5 preservada).
============================================================================ */

/* ============================================================
   A. OPORTUNIDADES — rota catalog (e track, que reaproveita a casca .demands-pilot)
   ============================================================ */
/* casca: a página inteira é o canvas — sem caixa, sem borda, sem sombra */
html[data-screen] .demands-pilot{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
html[data-screen] .demands-pilot .pilot-top{grid-template-columns:minmax(0,1fr) 250px 200px;gap:32px;align-items:start;padding:0 0 24px;margin-bottom:0;border-bottom:1px solid var(--v2-hairline)}
html[data-screen] .demands-pilot .eyebrow{color:var(--v2-ink-3);font-size:12.5px;letter-spacing:0;text-transform:none}
html[data-screen] .demands-pilot .pilot-title h1{margin:6px 0 8px;font-size:clamp(30px,2.9vw,40px);line-height:1.1;letter-spacing:-.025em;color:var(--v2-ink-hi);font-weight:600}
html[data-screen] .demands-pilot .pilot-title p{font-size:15px;max-width:44ch;color:var(--v2-ink-2)}
/* cota: restrição contextual, escrita — não um widget */
html[data-screen] .demands-pilot .quota-panel{padding:4px 0 0 24px;border:0;border-left:1px solid var(--v2-hairline);border-radius:0;background:none;box-shadow:none}
html[data-screen] .demands-pilot .quota-panel .eyebrow{font-size:12px}
html[data-screen] .demands-pilot .quota-slots{gap:6px;margin:6px 0 10px}
html[data-screen] .demands-pilot .quota-slot{width:26px;height:6px;border-radius:999px;background:var(--v2-blue);border:0}
html[data-screen] .demands-pilot .quota-slot.is-used{background:var(--v2-hairline);border:0}
html[data-screen] .demands-pilot .quota-headline{font-size:14px;font-weight:var(--v2-w-label);color:var(--v2-ink)}
html[data-screen] .demands-pilot .quota-panel .small{font-size:12px;color:var(--v2-ink-3)}
html[data-screen] .demands-pilot .pilot-history{gap:6px;padding:4px 0 0 24px;border-left:1px solid var(--v2-hairline)}
html[data-typo-system][data-screen] .demands-pilot .pilot-history button{min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--v2-blue);font-size:14px;font-weight:var(--v2-w-strong);text-align:left;box-shadow:none;justify-content:flex-start}
html[data-screen] .demands-pilot .pilot-history button:hover{background:transparent;color:var(--v2-blue-hover);text-decoration:underline;text-underline-offset:4px}
html[data-screen] .demands-pilot .pilot-history span{font-size:12px;color:var(--v2-ink-3)}
/* aviso de modo de desenvolvimento */
html[data-screen] .demands-pilot #catalogStatus{margin:0 0 20px}
/* modalidade: abas de texto (foundation) com respiro próprio */
html[data-screen] .demands-pilot .tabs{margin:20px 0 0}
/* filtros: um bloco branco com borda, campos claros */
html[data-screen] .demands-pilot .filter-strip{gap:16px;margin-top:20px;padding:16px 18px;border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);box-shadow:none}
html[data-screen] .demands-pilot .filter-strip label{font-size:12.5px;color:var(--v2-ink-3);font-weight:var(--v2-w-label)}
html[data-typo-system][data-screen] .demands-pilot .filter-strip select{min-height:44px;padding:9px 34px 9px 12px;border-radius:var(--v2-radius-control);background-color:var(--v2-surface);border-color:var(--v2-hairline);color:var(--v2-ink);font-size:14px}
html[data-screen] .demands-pilot .filter-strip select:focus{border-color:var(--v2-hairline-active)}
html[data-screen] .demands-pilot #resultCount{font-size:13px;margin:18px 0 12px;color:var(--v2-ink-3)}
/* lista: blocos brancos com borda; o trabalho é protagonista; sem zona ilustrada */
html[data-screen] .demands-pilot .opportunity-list .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card{
  position:relative;overflow:visible;padding:20px 22px 18px;
  border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);box-shadow:none;
  transition:background var(--motion-fast),border-color var(--motion-fast);
}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card::before,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card::after{content:none;display:none}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card:hover,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card:focus-within{background:var(--v2-tint);border-color:var(--v2-hairline-active);transform:none;box-shadow:none}
/* IDENTIDADE VISUAL V2.1 — HIERARQUIA DE OBJETOS: título, descrição, metadados e rodapé do card real de
   oportunidade. design-premium-oportunidades-v1.css define estas cores em hex literal (pensadas para o
   cartão escuro da V1); como o remapeamento de tokens da V2 só alcança regras que usam var(--token), essas
   cores nunca foram sobrepostas — o título e vários campos renderizavam quase invisíveis sobre a superfície
   branca da V2 (bug real, encontrado e corrigido nesta prova; não afeta .sample-opportunity, que já tinha
   sobreposição própria). O título replica o primitivo de objeto já aprovado em Meus contatos
   (.relation-name) e em Encontrar editor (.editor-card h2): 19px / 600 / -.015em / 1.3 / var(--v2-ink). */
html[data-typo-system][data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-meta{
  display:flex;flex-wrap:wrap;gap:2px 8px;margin:0 0 10px;font-size:12.5px;font-weight:var(--v2-w-label);color:var(--v2-ink-3);
}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-meta span,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .technical{color:var(--v2-ink-3);font-family:inherit;letter-spacing:0}
html[data-typo-system][data-screen] .demands-pilot .opportunity-list .opportunity-card h3{
  margin:0 0 6px;font-size:19px;line-height:1.3;letter-spacing:-.015em;color:var(--v2-ink);font-weight:var(--v2-w-strong);
}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-context{font-size:14px;line-height:1.55;color:var(--v2-ink-2);font-weight:var(--v2-w-body)}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-duration{margin:10px 0 0;font-size:13px;color:var(--v2-ink-3)}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-footer small{display:block;font-size:12.5px;color:var(--v2-ink-3);font-weight:var(--v2-w-label)}
html[data-typo-system][data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-footer strong{font-size:17px;color:var(--v2-ink);font-weight:var(--v2-w-strong);letter-spacing:-.005em;font-variant-numeric:tabular-nums}
/* Todos os cards seguem a mesma ordem, sem display:contents (a versão V1 do card-piloto usava display:contents
   para subir o estado; a técnica confunde ferramentas de acessibilidade e não é necessária aqui): natureza →
   título → contexto → duração → condições → linha final com estado à esquerda e ação à direita. */
html[data-screen] .demands-pilot .opportunity-list .opportunity-card,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card.card-pilot{display:flex;flex-direction:column;padding:20px 22px 18px}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-action,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card.card-pilot .opportunity-action{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:14px 0 0;order:0}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-meta,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card.card-pilot .opportunity-meta{order:0}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-action .tag,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card.card-pilot .opportunity-action .tag{order:0;margin:0}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .opportunity-action .tag+.tag{margin-left:10px}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .briefing-link,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .preview-caption{margin-left:auto}
/* o estado volta para o fluxo (na V1 subia para a zona ilustrada, que não existe mais): ponto + texto */
html[data-typo-system][data-screen] .demands-pilot .opportunity-list .opportunity-action .tag{
  position:static;top:auto;left:auto;z-index:auto;padding:0;border:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--v2-ink-2);font-size:13px;font-weight:var(--v2-w-label);letter-spacing:0;
}
html[data-screen] .demands-pilot .opportunity-list .opportunity-action .tag.status-negotiating{color:var(--v2-amber-text)}
html[data-screen] .demands-pilot .opportunity-list .opportunity-action .tag.status-closed{color:var(--v2-ink-3)}
/* aviso de modo de desenvolvimento: bloco âmbar suave, sem gradiente */
html[data-typo-system][data-screen] .demands-pilot #catalogStatus .tag.state-warning{position:relative;display:block;margin:0 0 20px;padding:10px 14px;border:1px solid #EAD9A8;border-left:3px solid var(--v2-amber-dot);border-radius:8px;background:var(--v2-amber-tint);color:var(--v2-amber-text);font-size:13px;line-height:1.5}
html[data-screen] .demands-pilot #catalogStatus .tag.state-warning::before{content:none;display:none}
/* estado no painel de briefing: em fluxo, sem fundo escuro */
html[data-typo-system][data-screen] .demands-pilot .briefing-panel .briefing-identity .tag{position:static;top:auto;left:auto;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border:0;color:var(--v2-ink-2)}
html[data-screen] .demands-pilot .briefing-panel .briefing-identity .tag.status-negotiating{color:var(--v2-amber-text)}
/* CTA do card: ação tipográfica azul (a lista é de avaliação; o reveal acontece no briefing) */
html[data-typo-system][data-screen] .demands-pilot .opportunity-card .briefing-link,
html[data-typo-system][data-screen] .demands-pilot .opportunity-list .opportunity-card:has(.opportunity-action>.tag.status-published:only-of-type) .briefing-link{
  min-height:44px;margin:0 -10px 0 auto;padding:10px 12px;border:0;border-radius:8px;background:transparent;box-shadow:none;
  color:var(--v2-blue);font-size:15px;font-weight:var(--v2-w-strong);
}
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .briefing-link:hover,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card:has(.opportunity-action>.tag.status-published:only-of-type) .briefing-link:hover{background:rgba(13,82,201,.08);color:var(--v2-blue-hover);transform:none;box-shadow:none}
/* Referência 4/5 — Estados/Feedback: auditoria encontrou .briefing-link sem NENHUM estado :active (pressionar
   ficava visualmente idêntico a passar o mouse). Correção mínima e consistente com a linguagem "Tertiary
   flat" da Referência 3/5: só aprofunda o mesmo tingimento azul já usado no hover — sem elevação, sem
   sombra, sem transform — mantendo a coerência de que este é um botão de ação tipográfica, não um Button V2. */
html[data-screen] .demands-pilot .opportunity-list .opportunity-card .briefing-link:active,
html[data-screen] .demands-pilot .opportunity-list .opportunity-card:has(.opportunity-action>.tag.status-published:only-of-type) .briefing-link:active{background:rgba(13,82,201,.14);color:var(--v2-blue-hover);transform:none;box-shadow:none}
@media(prefers-reduced-motion:no-preference){html[data-screen] .demands-pilot .opportunity-list .opportunity-card .briefing-link{transition:background var(--motion-fast),color var(--motion-fast)}}
html[data-screen] .demands-pilot .preview-caption{font-size:12.5px;color:var(--v2-ink-3)}
/* avaliação: trilho + painel de briefing */
html[data-screen] .demands-pilot.is-evaluating .workspace{grid-template-columns:280px minmax(0,1fr);gap:24px}
html[data-screen] .demands-pilot.is-evaluating .opportunity-list .grid{gap:8px}
html[data-typo-system][data-screen] .demands-pilot .rail-item{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:44px;padding:14px 16px;text-align:left;
  border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);color:var(--v2-ink);box-shadow:none;
}
html[data-screen] .demands-pilot .rail-item:hover{background:var(--v2-tint);border-color:var(--v2-hairline-active)}
/* Seleção real (d.id===selectedOpportunity, ver central-app.js): único lugar das três entidades desta prova
   com um estado de seleção persistente de verdade — por isso é o único a ganhar o indicador de seleção
   circular (✓). Ele nunca aparece só com hover: a regra é exclusiva de .is-selected. Borda passa a azul
   (não o mesmo fio de hover) para diferenciar claramente "passando o mouse" de "selecionado". */
html[data-screen] .demands-pilot .rail-item.is-selected{background:var(--v2-tint);border-color:var(--v2-blue);box-shadow:none}
html[data-screen] .demands-pilot .rail-item.is-selected::after{
  content:"";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;
  background-color:var(--v2-blue);border:2px solid var(--v2-surface);box-shadow:0 1px 2px rgba(15,23,42,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:9px 9px;
}
@media(prefers-reduced-motion:no-preference){html[data-screen] .demands-pilot .rail-item{transition:background var(--motion-fast),border-color var(--motion-fast)}}
html[data-screen] .demands-pilot .rail-title{font-size:15px;font-weight:var(--v2-w-strong);color:var(--v2-ink);line-height:1.3}
html[data-screen] .demands-pilot .rail-meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;color:var(--v2-ink-3);font-variant-numeric:tabular-nums}
html[data-screen] .demands-pilot .rail-flag{font-size:12px;color:var(--v2-amber-text);font-weight:var(--v2-w-label)}
html[data-screen] .demands-pilot .briefing-panel{padding:24px 26px;border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);box-shadow:none}
html[data-typo-system][data-screen] .demands-pilot .rail-back{min-height:40px;margin:0 0 14px -8px;padding:8px;border:0;background:transparent;color:var(--v2-ink-2);font-size:13.5px;font-weight:var(--v2-w-label);box-shadow:none}
html[data-screen] .demands-pilot .rail-back:hover{background:transparent;color:var(--v2-ink);text-decoration:underline;text-underline-offset:4px}
html[data-screen] .demands-pilot .briefing-panel .briefing-identity{display:block;padding:0;border:0;background:transparent}
html[data-screen] .demands-pilot .briefing-panel .briefing-identity::before{content:none;display:none}
html[data-screen] .demands-pilot .briefing-panel .briefing-identity h2{margin:8px 0 6px;font-size:24px;line-height:1.2;letter-spacing:-.02em;color:var(--v2-ink-hi)}
html[data-screen] .demands-pilot .briefing-panel .briefing-identity p{font-size:15px;line-height:1.6;color:var(--v2-ink-2);max-width:64ch}
html[data-screen] .demands-pilot .briefing-conditions{margin:20px 0 0;padding:18px 20px;border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-canvas);box-shadow:none}
html[data-screen] .demands-pilot .conditions-primary{display:flex;flex-wrap:wrap;gap:12px 40px}
html[data-screen] .demands-pilot .condition-label{display:block;font-size:12.5px;color:var(--v2-ink-3);font-weight:var(--v2-w-label);text-transform:none;letter-spacing:0;margin-bottom:4px}
html[data-screen] .demands-pilot .conditions-primary strong{font-size:22px;color:var(--v2-ink);font-weight:var(--v2-w-strong);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
html[data-screen] .demands-pilot .conditions-secondary{margin:12px 0 0;font-size:13px;color:var(--v2-ink-3)}
html[data-screen] .demands-pilot .briefing-decision,html[data-screen] .demands-pilot .contact{margin:18px 0 0;padding:20px;border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);color:var(--v2-ink);box-shadow:none}
html[data-screen] .demands-pilot .briefing-decision p{color:var(--v2-ink-2)}
html[data-screen] .demands-pilot .briefing-decision .revealed-label{margin:0 0 6px;font-size:12.5px;font-weight:var(--v2-w-label);color:var(--v2-green-text);text-transform:uppercase;letter-spacing:.04em}
html[data-screen] .demands-pilot .briefing-decision strong{font-size:17px;color:var(--v2-ink)}
html[data-screen] .demands-pilot .briefing-decision .primary{margin-top:12px}
/* Oportunidades em telas médias e mobile */
@media(max-width:1120px){
  html[data-screen] .demands-pilot .pilot-top{grid-template-columns:minmax(0,1fr) 230px;gap:24px}
  html[data-screen] .demands-pilot .pilot-history{grid-column:1/-1;padding:14px 0 0;border-left:0;border-top:1px solid var(--v2-hairline)}
  html[data-screen] .demands-pilot.is-evaluating .workspace{grid-template-columns:240px minmax(0,1fr)}
}
@media(max-width:760px){
  html[data-screen] .demands-pilot .pilot-top{grid-template-columns:1fr;gap:16px;padding-bottom:18px}
  html[data-screen] .demands-pilot .quota-panel{padding:14px 0 0;border-left:0;border-top:1px solid var(--v2-hairline)}
  html[data-screen] .demands-pilot .pilot-history{padding-top:12px}
  html[data-screen] .demands-pilot .filter-strip{padding:14px 16px;gap:12px}
  html[data-screen] .demands-pilot .filter-strip>div{flex:1 1 100%}
  html[data-screen] .demands-pilot .opportunity-list .grid{grid-template-columns:1fr;gap:12px}
  html[data-screen] .demands-pilot .opportunity-list .opportunity-card{padding:16px 16px 14px}
  html[data-screen] .demands-pilot.is-evaluating .workspace{grid-template-columns:1fr;gap:14px}
  html[data-screen] .demands-pilot .briefing-panel{padding:18px 16px}
  html[data-screen] .demands-pilot .conditions-primary{gap:10px 28px}
  html[data-screen] .demands-pilot .conditions-primary strong{font-size:19px}
}

/* ============================================================
   B. PEDIR EDIÇÃO — rota request (escolha, projeto, recorrente), success, review
   ============================================================ */
/* REFERÊNCIA 2/5 — a entrada de "Pedir edição" vira uma landing de decisão: sem atmosfera escura/
   monumental, sem seletor/tag duplicando a escolha (os dois Cutout Cards SÃO a escolha), sem sidebar —
   só o mínimo de navegação que já existia de verdade. Ver
   IDENTIDADE-VISUAL-REFERENCIA-2-CUTOUT-PEDIR-EDICAO-RELATORIO.md. */
html[data-screen] body:has(.intent-select){background:var(--v2-canvas)}
html[data-screen] body:has(.intent-select) .app-shell{background:var(--v2-surface)}
html[data-screen] .intent-select{padding:0;background:transparent;max-width:1040px;margin:0 auto}
html[data-screen] .intent-hero{max-width:660px;margin:0 auto 26px;text-align:center}
html[data-screen] .intent-select h1{margin:0 0 8px;font-size:clamp(34px,4.6vw,50px);line-height:1.06;letter-spacing:-.026em;color:var(--v2-ink-hi);font-weight:600}
html[data-screen] .intent-subheadline{margin:0 0 10px;font-size:20px;line-height:1.4;color:var(--v2-ink-2);font-weight:var(--v2-w-label)}
html[data-screen] .intent-support{margin:0 auto;font-size:14.5px;line-height:1.55;color:var(--v2-ink-3);max-width:52ch}
/* Cutout Card: IMAGEM (recorte no topo, sangrando até as bordas arredondadas) → RÓTULO → TÍTULO →
   DESCRIÇÃO → ATRIBUTOS → CTA. Geometria só com HTML/CSS nativo (sem Cutout Card da Cult UI, sem lib
   nova) — .cutout-frame concentra o overflow:hidden/border-radius do recorte para que o anel de foco do
   <button> (.cutout-card) nunca seja cortado por ele. CORREÇÃO: o rótulo agora é um "chip" com fundo
   próprio e margem negativa que invade a base da imagem (a superfície de conteúdo recortando o retrato),
   reforçando a geometria de recorte sem clip-path — só posição + fundo sólido, dentro do próprio
   .cutout-frame, então nunca é cortado pelo overflow:hidden do recorte. */
html[data-screen] .cutout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0 0 28px}
html[data-typo-system][data-screen] .cutout-card{
  position:relative;display:block;padding:0;border:1px solid var(--v2-hairline);border-radius:20px;
  background:var(--v2-surface);color:var(--v2-ink);box-shadow:none;text-align:left;
  transition:background var(--motion-fast),border-color var(--motion-fast);
}
html[data-screen] .cutout-card:hover,
html[data-screen] .cutout-card:focus-visible{background:var(--v2-tint);border-color:var(--v2-hairline-active);transform:none;box-shadow:none}
html[data-screen] .cutout-frame{display:flex;flex-direction:column;border-radius:19px;overflow:hidden}
html[data-screen] .cutout-media{display:block;width:100%;aspect-ratio:16/10;background:var(--v2-ink)}
html[data-screen] .cutout-media svg{display:block;width:100%;height:100%}
html[data-screen] .cutout-body{display:flex;flex-direction:column;align-items:flex-start;padding:0 28px 30px}
html[data-screen] .cutout-label{
  align-self:flex-start;margin:-16px 0 0;padding:7px 14px;border-radius:9px 9px 3px 3px;
  background:var(--v2-surface);box-shadow:0 6px 14px rgba(11,27,51,.16);
  font-size:13px;font-weight:var(--v2-w-strong);color:var(--v2-blue);text-transform:uppercase;letter-spacing:.05em;
}
html[data-screen] .cutout-card:hover .cutout-label,
html[data-screen] .cutout-card:focus-visible .cutout-label{background:var(--v2-surface)}
html[data-screen] .cutout-title{display:block;width:100%;margin:16px 0 8px;font-size:23px;line-height:1.24;letter-spacing:-.016em;color:var(--v2-ink);font-weight:var(--v2-w-strong)}
html[data-screen] .cutout-desc{display:block;width:100%;font-size:15px;line-height:1.58;color:var(--v2-ink-2);font-weight:var(--v2-w-body)}
html[data-screen] .cutout-attrs{display:flex;flex-direction:column;width:100%;gap:10px;margin:18px 0 0}
html[data-screen] .cutout-attr{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--v2-ink-2);font-weight:var(--v2-w-label)}
html[data-screen] .cutout-attr-icon{display:inline-flex;flex:none;color:var(--v2-blue)}
html[data-screen] .cutout-attr-icon svg{display:block;width:16px;height:16px}
/* CTA — Button V2 (Referência 3/5): a mesma receita de .btn-v2-primary em design-identity-v2-foundation.css
   (highlight+sombra quase imperceptíveis, resposta física no press), reaplicada aqui sem herdar a classe
   para não acoplar o Cutout (já aprovado) a uma folha de prova controlada. .cutout-cta é um <span> — quem
   recebe :hover/:active/:focus-visible de verdade é o <button> pai (.cutout-card, o cartão inteiro). */
html[data-typo-system][data-screen] .cutout-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;min-height:48px;padding:14px 22px;
  border-radius:999px;color:#fff;font-size:15.5px;font-weight:var(--v2-w-strong);width:100%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--v2-blue) 88%,white 12%) 0%,var(--v2-blue) 55%,color-mix(in srgb,var(--v2-blue) 94%,black 6%) 100%);
  box-shadow:var(--btn-v2-highlight),var(--btn-v2-shadow-rest);
  transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast);
}
html[data-screen] .cutout-card:hover .cutout-cta{
  background:linear-gradient(180deg,color-mix(in srgb,var(--v2-blue-hover) 85%,white 15%) 0%,var(--v2-blue-hover) 55%,color-mix(in srgb,var(--v2-blue-hover) 92%,black 8%) 100%);
  box-shadow:var(--btn-v2-highlight),var(--btn-v2-shadow-hover);
}
html[data-screen] .cutout-card:focus-visible .cutout-cta{
  background:linear-gradient(180deg,color-mix(in srgb,var(--v2-blue-hover) 85%,white 15%) 0%,var(--v2-blue-hover) 55%,color-mix(in srgb,var(--v2-blue-hover) 92%,black 8%) 100%);
  box-shadow:var(--btn-v2-highlight); /* sem sombra externa: o anel de foco do card não compete com o brilho do botão */
}
html[data-screen] .cutout-card:active .cutout-cta{
  background:color-mix(in srgb,var(--v2-blue-hover) 100%,black 8%);
  box-shadow:inset 0 1px 3px rgba(6,20,50,.4),inset 0 -1px 0 0 rgba(255,255,255,.05);
  transform:translateY(1px);
  transition-duration:40ms;
}
html[data-screen] .cutout-cta-arrow{transition:transform var(--motion-fast)}
html[data-screen] .cutout-card:hover .cutout-cta-arrow,
html[data-screen] .cutout-card:focus-visible .cutout-cta-arrow{transform:translateX(3px)}
/* confiança — secundária, os protagonistas continuam os dois cards */
html[data-screen] .intent-trust{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--v2-hairline);color:var(--v2-ink-2)}
html[data-screen] .intent-trust-title{color:var(--v2-ink);font-weight:var(--v2-w-label)}
html[data-screen] .intent-trust-text,html[data-screen] .intent-trust-micro{color:var(--v2-ink-3)}
html[data-screen] .intent-trust-icon{color:var(--v2-green-text)}
/* formulários (projeto / recorrente) */
html[data-typo-system][data-screen] .change-intent,html[data-typo-system][data-screen] .change-intent-btn{min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--v2-ink-2);font-size:13.5px;font-weight:var(--v2-w-label);box-shadow:none}
html[data-screen] .change-intent:hover,html[data-screen] .change-intent-btn:hover{background:transparent;color:var(--v2-ink);text-decoration:underline;text-underline-offset:4px}
html[data-screen] .request-hero{gap:56px;padding:8px 0 32px}
html[data-screen] .request-intro h1{font-size:clamp(30px,3vw,40px);line-height:1.1;letter-spacing:-.025em;color:var(--v2-ink-hi)}
html[data-screen] .request-intro p{font-size:15px;color:var(--v2-ink-2)}
html[data-screen] .sample-caption{font-size:12.5px;color:var(--v2-ink-3)}
html[data-screen] .sample-opportunity{border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);box-shadow:none;overflow:hidden}
html[data-screen] .sample-opportunity .opportunity-card{padding:20px 22px 18px;border:0;border-radius:0;background:transparent;box-shadow:none}
html[data-screen] .sample-opportunity .opportunity-card::before,html[data-screen] .sample-opportunity .opportunity-card::after{content:none;display:none}
html[data-screen] .sample-opportunity .opportunity-meta{display:flex;flex-wrap:wrap;gap:2px 8px;margin:0 0 10px;font-size:12.5px;color:var(--v2-ink-3)}
html[data-screen] .sample-opportunity .opportunity-meta span,html[data-screen] .sample-opportunity .technical{color:var(--v2-ink-3);font-family:inherit;letter-spacing:0}
html[data-screen] .sample-opportunity h3{margin:0 0 6px;font-size:18px;line-height:1.3;color:var(--v2-ink)}
html[data-screen] .sample-opportunity .opportunity-context{font-size:14px;color:var(--v2-ink-2)}
html[data-screen] .sample-opportunity .opportunity-duration{margin:10px 0 0;font-size:13px;color:var(--v2-ink-3)}
html[data-screen] .sample-opportunity .opportunity-footer{display:flex;gap:24px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--v2-hairline)}
html[data-screen] .sample-opportunity .opportunity-footer small{display:block;font-size:12.5px;color:var(--v2-ink-3);font-weight:var(--v2-w-label)}
html[data-screen] .sample-opportunity .opportunity-footer strong{font-size:16px;color:var(--v2-ink);font-weight:var(--v2-w-label)}
html[data-screen] .sample-opportunity .opportunity-footer span{font-size:14px;color:var(--v2-ink)}
html[data-screen] .sample-opportunity .opportunity-action{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:12px}
html[data-typo-system][data-screen] .sample-opportunity .opportunity-action .tag{position:static;top:auto;left:auto;padding:0;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--v2-ink-2);font-size:13px}
html[data-screen] .sample-opportunity .steps-list li{color:var(--v2-ink-2)}
html[data-screen] .briefing-flow{gap:16px;padding:18px 0;border-top:1px solid var(--v2-hairline);border-bottom:1px solid var(--v2-hairline);font-size:13.5px;color:var(--v2-ink-2)}
html[data-screen] .briefing-section{gap:48px;padding-top:32px}
html[data-screen] .briefing-aside .section-label{font-size:12.5px;color:var(--v2-ink-3)}
html[data-screen] .briefing-aside h2{font-size:24px;letter-spacing:-.02em;color:var(--v2-ink-hi)}
html[data-screen] .briefing-aside p{font-size:14.5px;color:var(--v2-ink-2)}
html[data-screen] .form-heading{padding-bottom:14px;border-bottom:1px solid var(--v2-hairline);margin-bottom:22px}
html[data-screen] .form-heading h2{margin:0 0 4px;font-size:22px;letter-spacing:-.015em;color:var(--v2-ink-hi)}
html[data-screen] .form-heading p{margin:0;font-size:14px;color:var(--v2-ink-3)}
/* o formulário é um bloco branco; cada fieldset é um grupo separado por fio (não caixa dentro de caixa) */
html[data-screen] form.briefing-form,html[data-screen] form.recurring-form,html[data-screen] form.fields{padding:22px 24px 8px;border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);box-shadow:none}
html[data-screen] .briefing-form fieldset,html[data-screen] .recurring-form fieldset,html[data-screen] form.fields fieldset{margin:0 0 8px;padding:0 0 12px;border:0;border-bottom:1px solid var(--v2-hairline);border-radius:0;background:transparent;box-shadow:none}
html[data-screen] .briefing-form fieldset:last-of-type,html[data-screen] .recurring-form fieldset:last-of-type,html[data-screen] form.fields fieldset:last-of-type{border-bottom:0}
html[data-screen] .briefing-form legend,html[data-screen] .recurring-form legend,html[data-screen] form.fields legend{float:left;width:100%;margin:0 0 12px;padding:0;color:var(--v2-ink);font-size:15px;font-weight:var(--v2-w-strong)}
html[data-screen] .briefing-form fieldset>.fields,html[data-screen] .recurring-form fieldset>.fields,html[data-screen] form.fields fieldset>.fields{clear:both;gap:14px 20px;padding-bottom:6px}
html[data-screen] .fields label{color:var(--v2-ink-2);font-weight:var(--v2-w-label)}
html[data-screen] .request-summary{margin:0 0 18px;padding:14px 18px;border:1px solid var(--v2-hairline-active);border-left:3px solid var(--v2-blue);border-radius:var(--v2-radius-control);background:var(--v2-tint);color:var(--v2-ink-2);font-size:14px}
html[data-screen] .request-summary strong{color:var(--v2-ink)}
html[data-typo-system][data-screen] .fullbutton{min-height:48px;padding:12px 24px}
html[data-screen] .check{display:flex;gap:10px;align-items:flex-start;color:var(--v2-ink-2);font-size:14px}
html[data-screen] #formStatus,html[data-screen] #recurringFormStatus{color:var(--v2-red-text)}
/* pedido enviado / revisão / acompanhamento */
html[data-screen="success"] .actions,html[data-screen="review"] .actions{display:flex;flex-wrap:wrap;gap:10px}
html[data-screen] .timeline{margin:0;padding:0 0 0 18px;border-left:2px solid var(--v2-hairline)}
html[data-screen] .timeline li{padding:6px 0;color:var(--v2-ink-3)}
html[data-screen] .timeline li.current{color:var(--v2-ink);font-weight:var(--v2-w-strong)}
@media(max-width:900px){
  html[data-screen] .cutout-grid{grid-template-columns:1fr;gap:16px}
  html[data-screen] .request-hero{grid-template-columns:1fr;gap:24px}
  html[data-screen] .briefing-section{grid-template-columns:1fr;gap:24px;padding-top:24px}
}
@media(max-width:760px){
  /* mobile não é o desktop espremido: hero primeiro, depois Projeto único, depois Apoio recorrente,
     depois confiança — a própria ordem do DOM já entrega isso; aqui só ajustamos medidas. A imagem do
     Cutout Card usa altura fixa (menor que a proporção 16:10 do desktop) para que título/descrição/CTA
     apareçam cedo — o card continua sendo uma decisão, não uma galeria de imagem. */
  html[data-screen] .intent-hero{margin:0 auto 22px}
  html[data-screen] .intent-select h1{font-size:28px;letter-spacing:-.02em}
  html[data-screen] .intent-subheadline{font-size:17px}
  html[data-screen] .cutout-media{aspect-ratio:auto;height:150px}
  html[data-screen] .cutout-body{padding:0 18px 20px}
  html[data-screen] .cutout-label{margin-top:-14px;padding:6px 12px;font-size:12px}
  html[data-screen] .cutout-title{margin-top:12px;font-size:19px}
  html[data-screen] .fields{grid-template-columns:1fr;padding:16px;gap:14px}
  html[data-screen] .briefing-flow{flex-wrap:wrap;gap:8px 14px;font-size:13px}
}

/* ============================================================
   C. ENCONTRAR EDITOR — rota editors (e o card de perfil reaproveitado no modal e em Meu perfil)
   ============================================================ */
/* Design Premium 5/5 — coerência global: "Encontrar editor" herdava o peso/tamanho genérico do
   token --type-display (700/30px) em vez do tratamento já usado nas outras rotas de diretório
   (Oportunidades, Meus contatos: 600/clamp(30,2.9vw,40)px) — trocar de aba dentro do mesmo contexto
   "Contratar" (Pedir edição -> Encontrar editor) fazia o título mudar de peso sem motivo de conteúdo. */
html[data-screen="editors"] h1{font-size:clamp(30px,2.9vw,40px);letter-spacing:-.025em;font-weight:600}
html[data-screen="editors"] .grid{gap:16px}
html[data-typo-system][data-screen] .editor-card{
  display:flex;flex-direction:column;gap:10px;padding:22px 24px 20px;
  border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);color:var(--v2-ink);box-shadow:none;
  transition:background var(--motion-fast),border-color var(--motion-fast);
}
/* .editor-card não tem estado de seleção real (é uma lista simples, sem seleção persistente) — por isso o
   hover/foco aqui é só troca sutil de superfície, sem a barra azul que antes imitava seleção (V2.1). */
html[data-screen="editors"] .editor-card:hover,
html[data-screen="editors"] .editor-card:focus-within{background:var(--v2-tint);border-color:var(--v2-hairline-active);transform:none;box-shadow:none}
html[data-screen] .editor-card .row{gap:14px}
html[data-screen] .editor-card .portrait{width:52px;height:52px;border:0;border-radius:50%;background:#E4ECF7;color:var(--v2-ink);font-weight:var(--v2-w-strong);font-size:16px;box-shadow:none;display:grid;place-items:center}
/* título do objeto (mesmo primitivo de .relation-name e do h3 de oportunidade): 19px / 600 / -.015em / ink */
html[data-screen] .editor-card h2{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.015em;color:var(--v2-ink);font-weight:var(--v2-w-strong)}
html[data-screen] .editor-card>strong{font-size:15px;color:var(--v2-ink-2);font-weight:var(--v2-w-label)}
html[data-screen] .editor-card>p{font-size:14px;line-height:1.55;color:var(--v2-ink-2)}
html[data-screen] .editor-card>p.small{color:var(--v2-ink-3)}
html[data-screen] .editor-card .badge{font-size:13px}
html[data-screen] .editor-card .actions{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:8px}
html[data-typo-system][data-screen] .editor-card .actions button{min-height:44px}
@media(max-width:760px){
  html[data-screen="editors"] .grid{grid-template-columns:1fr;gap:12px}
  html[data-typo-system][data-screen] .editor-card{padding:16px}
}

/* ------------------------------------------------------------------------
   ENCONTRAR EDITOR — MODAL V1.1 aplicado à rota real (NEXUS "Implementar no
   Artifact a versão visual aprovada"). Classes .ed-* próprias, sem tocar em
   .editor-card/.portrait acima (reaproveitados em Operação e Meu perfil —
   ver comentário no topo desta seção). Alvo visual: os screenshots aprovados
   de editor-marketplace-modal-v1-1.html — ver
   ENCONTRAR-EDITOR-ARTIFACT-V1-RELATORIO.md para o que é dado real (nome,
   headline, bio, especialidades, disponibilidade, portfólio) x decorativo
   (preço, avaliação, selo, localização, experiência, projetos entregues,
   cenas de portfólio — calculados por edExtras() em central-app.js, nunca
   persistidos). O modal reaproveita o <dialog id="modal"> nativo já usado
   em toda a Central (foco/Escape grátis do navegador); .is-wide é a única
   classe nova no dialog compartilhado e não afeta nenhum outro uso dele. */
html[data-screen="editors"] .ed-grid{grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:14px;align-items:start}
html[data-screen="editors"] .ed-card{position:relative;min-width:0;border:1px solid var(--v2-hairline);border-radius:var(--v2-radius);background:var(--v2-surface);overflow:visible;transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
html[data-screen="editors"] .ed-card:hover{border-color:var(--v2-hairline-active);box-shadow:0 4px 14px rgba(11,27,51,.08)}
html[data-screen="editors"] .ed-card:has(button.ed-toggle:focus-visible){box-shadow:0 0 0 2px var(--v2-surface),0 0 0 4px var(--v2-blue)}
html[data-screen="editors"] button.ed-toggle{display:block;width:100%;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left;color:inherit;font:inherit;cursor:pointer;min-height:44px}
html[data-screen="editors"] button.ed-toggle:hover{background:transparent;border:0}
html[data-screen="editors"] .ed-media{display:block;position:relative;overflow:hidden;border-radius:var(--v2-radius) var(--v2-radius) 0 0}
html[data-screen="editors"] .ed-media-inner{display:block;position:relative;width:100%;padding-top:58%}
html[data-screen="editors"] .ed-media-art{position:absolute;inset:0;display:block}
html[data-screen="editors"] .ed-media-art svg.ed-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
html[data-screen="editors"] .ed-badge-chip{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--v2-ink);font-size:10.5px;font-weight:var(--v2-w-strong);letter-spacing:.01em;box-shadow:0 1px 3px rgba(11,27,51,.16)}
html[data-screen="editors"] .ed-price-chip{position:absolute;right:10px;top:10px;padding:5px 9px;border-radius:10px;background:rgba(11,27,51,.55);color:#fff;font-size:10px;line-height:1.25;text-align:right}
html[data-screen="editors"] .ed-price-chip b{display:block;font-size:13px;font-weight:var(--v2-w-strong)}
html[data-screen="editors"] .ed-media-avatar{position:absolute;left:12px;bottom:-18px;width:44px;height:44px;border-radius:50%;border:3px solid var(--v2-surface);box-shadow:0 1px 4px rgba(11,27,51,.22);background:var(--v2-tint);z-index:2}
html[data-screen="editors"] .ed-media-avatar svg{display:block;width:100%;height:100%;border-radius:50%}
html[data-screen="editors"] .ed-avatar-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--v2-surface);z-index:3}
html[data-screen="editors"] .ed-avatar-dot.is-on{background:var(--v2-green-dot)}
html[data-screen="editors"] .ed-avatar-dot.is-off{background:#B7C3D4}
html[data-screen="editors"] .ed-compact-info{display:block;padding:22px 12px 12px}
html[data-screen="editors"] .ed-name{display:block;font-size:14px;font-weight:var(--v2-w-strong);letter-spacing:-.01em;color:var(--v2-ink);line-height:1.25}
html[data-screen="editors"] .ed-specialty{display:block;margin-top:1px;font-size:11.5px;color:var(--v2-ink-2);line-height:1.3}
html[data-screen="editors"] .ed-stars{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;color:var(--v2-ink-3)}
html[data-screen="editors"] .ed-stars svg{width:12px;height:12px;color:#E8A73C;flex:none}
html[data-screen="editors"] .ed-stars b{color:var(--v2-ink-2);font-weight:var(--v2-w-label)}
@media(max-width:760px){
  html[data-screen="editors"] .ed-grid{grid-template-columns:1fr 1fr;gap:12px}
  html[data-screen="editors"] .ed-compact-info{padding:24px 11px 12px}
  html[data-screen="editors"] .ed-name{font-size:13.5px}
  html[data-screen="editors"] .ed-specialty{font-size:11.5px}
}
@media(max-width:400px){html[data-screen="editors"] .ed-grid{grid-template-columns:1fr 1fr;gap:10px}}

/* ---- Modal de perfil: conteúdo de edProfileBody() dentro de #modalBody. O cabeçalho genérico do diálogo
   (h2#modalTitle com o nome do editor + #closeModal, ambos já estilizados globalmente) fica ACIMA de .ed-head —
   por isso .ed-head não repete o nome, só selo/especialidade/localização·avaliação/preço. */
html[data-screen="editors"] dialog.is-wide{max-width:800px;max-height:82vh;border-radius:20px;border:1px solid var(--v2-hairline)}
html[data-screen="editors"] dialog.is-wide::backdrop{background:rgba(11,27,51,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* mobile: página quase-tela-cheia (sheet), igual ao screenshot aprovado — sem margens, sem blur no véu */
@media(max-width:600px){
  html[data-screen="editors"] dialog.is-wide{max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0;border:0;padding:20px 16px 22px}
  html[data-screen="editors"] dialog.is-wide::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}
html[data-screen="editors"] .ed-modal-avatar{width:68px;height:68px;border-radius:50%;position:relative;flex:none;box-shadow:0 2px 6px rgba(11,27,51,.18)}
html[data-screen="editors"] .ed-modal-avatar svg{display:block;width:100%;height:100%;border-radius:50%}
html[data-screen="editors"] .ed-modal-avatar .ed-avatar-dot{width:13px;height:13px;border-width:3px}
html[data-screen="editors"] .ed-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
html[data-screen="editors"] .ed-head-main{flex:1 1 220px;min-width:0}
html[data-screen="editors"] .ed-head-badge{display:inline-flex;padding:3px 9px;border-radius:999px;background:var(--v2-tint);color:var(--v2-blue);font-size:10.5px;font-weight:var(--v2-w-strong);margin-bottom:7px}
html[data-screen="editors"] .ed-head-specialty{font-size:13.5px;color:var(--v2-ink-2)}
html[data-screen="editors"] .ed-head-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px;font-size:12.5px;color:var(--v2-ink-3)}
html[data-screen="editors"] .ed-head-meta svg.ed-pin{width:12px;height:12px;flex:none}
html[data-screen="editors"] .ed-head-meta svg.ed-star{width:12px;height:12px;color:#E8A73C;flex:none}
html[data-screen="editors"] .ed-head-meta b{color:var(--v2-ink-2);font-weight:var(--v2-w-label)}
html[data-screen="editors"] .ed-head-meta-sep{opacity:.5}
html[data-screen="editors"] .ed-head-price{flex:0 0 auto;align-self:center;text-align:right;font-size:11.5px;color:var(--v2-ink-3)}
html[data-screen="editors"] .ed-head-price b{display:block;font-size:19px;color:var(--v2-ink);font-weight:var(--v2-w-strong);letter-spacing:-.01em}
html[data-screen="editors"] .ed-head-bio{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--v2-ink-2);max-width:62ch}
html[data-screen="editors"] .ed-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
html[data-screen="editors"] button.ed-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 20px;border:0;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--v2-blue) 88%,white 12%) 0%,var(--v2-blue) 55%,color-mix(in srgb,var(--v2-blue) 94%,black 6%) 100%);color:#fff;font-size:14.5px;font-weight:var(--v2-w-strong);box-shadow:var(--btn-v2-highlight),var(--btn-v2-shadow-rest);transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
html[data-screen="editors"] button.ed-cta:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--v2-blue-hover) 85%,white 15%) 0%,var(--v2-blue-hover) 55%,color-mix(in srgb,var(--v2-blue-hover) 92%,black 8%) 100%);box-shadow:var(--btn-v2-highlight),var(--btn-v2-shadow-hover)}
html[data-screen="editors"] button.ed-cta:active{background:color-mix(in srgb,var(--v2-blue-hover) 100%,black 8%);box-shadow:inset 0 1px 3px rgba(6,20,50,.4),inset 0 -1px 0 0 rgba(255,255,255,.05);transform:translateY(1px);transition-duration:40ms}
html[data-screen="editors"] button.ed-cta:focus-visible,html[data-screen="editors"] button.ed-cta-ghost:focus-visible{outline:none;box-shadow:0 0 0 2px var(--v2-surface),0 0 0 4px var(--v2-blue)}
html[data-screen="editors"] button.ed-cta-ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--v2-ink-2);font-size:13.5px;font-weight:var(--v2-w-label);cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
html[data-screen="editors"] button.ed-cta-ghost:hover{background:var(--v2-tint);border-color:var(--v2-hairline)}
html[data-screen="editors"] .ed-cta-note{width:100%;margin:6px 0 0;font-size:12px;color:var(--v2-ink-3)}
html[data-screen="editors"] .ed-tabs{display:flex;gap:2px;margin:16px 0 0;border-bottom:1px solid var(--v2-hairline);overflow-x:auto}
html[data-screen="editors"] button.ed-tab{padding:8px 3px;margin-right:18px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--v2-ink-3);font:inherit;font-size:13px;font-weight:var(--v2-w-label);cursor:pointer;white-space:nowrap;min-height:40px}
html[data-screen="editors"] button.ed-tab[aria-selected="true"]{color:var(--v2-blue);border-bottom-color:var(--v2-blue);font-weight:var(--v2-w-strong)}
html[data-screen="editors"] button.ed-tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--v2-blue);border-radius:4px}
html[data-screen="editors"] .ed-tabpanel{padding-top:16px}
html[data-screen="editors"] .ed-tabpanel[hidden]{display:none}
html[data-screen="editors"] .ed-concept-note{padding:20px 18px;text-align:center;border:1px dashed var(--v2-hairline);border-radius:12px;color:var(--v2-ink-3);font-size:13px;line-height:1.6}
html[data-screen="editors"] .ed-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
html[data-screen="editors"] .ed-section-title h3{margin:0;font-size:13.5px;font-weight:var(--v2-w-strong);color:var(--v2-ink)}
html[data-screen="editors"] .ed-section-title .ed-concept-link{font-size:12px;color:var(--v2-blue);font-weight:var(--v2-w-label);white-space:nowrap}
html[data-screen="editors"] .ed-works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
html[data-screen="editors"] .ed-work{border:1px solid var(--v2-hairline);border-radius:9px;overflow:hidden;background:var(--v2-surface)}
html[data-screen="editors"] .ed-work-media{position:relative;padding-top:68%;overflow:hidden}
html[data-screen="editors"] .ed-work-media svg{position:absolute;inset:0;width:100%;height:100%}
html[data-screen="editors"] .ed-work-caption{padding:6px 8px 7px;margin:0;font-size:11px;color:var(--v2-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-screen="editors"] .ed-fact-strip{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--v2-hairline);font-size:12.5px;color:var(--v2-ink-3)}
html[data-screen="editors"] .ed-fact-strip b{color:var(--v2-ink-2);font-weight:var(--v2-w-label)}
html[data-screen="editors"] .ed-fact-sep{opacity:.45}
html[data-screen="editors"] .ed-style-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
html[data-screen="editors"] .ed-style-tag{padding:4px 10px;border-radius:999px;background:var(--v2-tint);color:var(--v2-ink-2);font-size:11.5px;font-weight:var(--v2-w-label)}
html[data-screen="editors"] .ed-panel-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--v2-hairline);font-size:12.5px;color:var(--v2-ink-3)}
html[data-screen="editors"] .ed-panel-foot .ed-avail-dot{width:8px;height:8px;border-radius:50%;flex:none}
html[data-screen="editors"] .ed-panel-foot .ed-avail-dot.is-on{background:var(--v2-green-dot)}
html[data-screen="editors"] .ed-panel-foot .ed-avail-dot.is-off{background:#B7C3D4}
html[data-screen="editors"] .ed-panel-foot .ed-avail-text{color:var(--v2-ink-2);font-weight:var(--v2-w-label)}
@media(max-width:900px){html[data-screen="editors"] .ed-works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  html[data-screen="editors"] .ed-head-price{flex-basis:100%;text-align:left;margin-top:6px}
  html[data-screen="editors"] .ed-head-price b{font-size:18px}
  html[data-screen="editors"] .ed-works{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   D. OPERAÇÃO — rota admin: mesma identidade, mais densidade
   ============================================================ */
/* Design Premium 5/5 — coerência global: o tamanho já era intencionalmente menor (densidade
   administrativa, decisão deliberada e documentada), mas o peso ficava no padrão genérico do token
   --type-display (700) em vez do peso 600 usado em todos os outros h1 do produto. Ajuste só do peso —
   tamanho e densidade permanecem exatamente como estavam. */
html[data-screen="admin"] h1{font-size:clamp(28px,2.6vw,34px);letter-spacing:-.022em;font-weight:600}
html[data-screen="admin"] .tabs{margin-top:16px}
html[data-screen="admin"] select#adminFilter{min-height:44px;padding:6px 34px 6px 12px;font-size:14px}
html[data-screen="admin"] #adminList{margin-top:16px}
html[data-screen="admin"] #adminList .card{margin:0 0 8px;padding:12px 16px;border:1px solid var(--v2-hairline);border-radius:8px;background:var(--v2-surface);box-shadow:none}
html[data-screen="admin"] #adminList .card .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
html[data-screen="admin"] #adminList .card h3{margin:4px 0 2px;font-size:15.5px;line-height:1.3;color:var(--v2-ink)}
html[data-screen="admin"] #adminList .card p{margin:0;font-size:13px;color:var(--v2-ink-2)}
html[data-screen="admin"] #adminList .card p.small{font-size:12.5px;color:var(--v2-ink-3)}
html[data-screen="admin"] #adminList .card .tag{font-size:12.5px}
html[data-screen="admin"] #adminList .card .tag+.tag{margin-left:10px}
html[data-screen="admin"] #adminList .actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:none}
html[data-typo-system][data-screen="admin"] #adminList .actions button,html[data-typo-system][data-screen="admin"] #adminList .row>div>button{min-height:36px;padding:6px 12px;font-size:13px;border-radius:7px}
html[data-screen="admin"] #adminList .history-item{padding:10px 0;border-bottom:1px solid var(--v2-hairline)}
html[data-screen="admin"] #adminList .history-item+.history-item{border-top:0}
html[data-screen="admin"] #adminList .history-item strong{font-size:14px;color:var(--v2-ink)}
html[data-screen="admin"] #adminList .history-item p.small{margin:2px 0 0;font-size:12.5px;color:var(--v2-ink-3)}
@media(max-width:760px){
  html[data-screen="admin"] #adminList .card .row{flex-direction:column;align-items:stretch;gap:10px}
  html[data-screen="admin"] #adminList .actions{justify-content:flex-start}
  html[data-typo-system][data-screen="admin"] #adminList .actions button,html[data-typo-system][data-screen="admin"] #adminList .row>div>button{min-height:44px;padding:8px 14px;font-size:14px}
}