:root, .default, .light {
  --color-accent-primary: #C6FF2D;
  --color-accent-primary-muted: #272C20;
  --color-accent-secondary: #ACDF26;
  --color-accent-tertiary: #96B800;
  --color-accent-quaternary: #F4FFC7;
  --color-accent-action: #C6FF2D;
  --color-accent-action-hover: #ACDF26;
  --oidc-login-background: #C6FF2D;
}

.default {
  --color-background-primary: #141617;
  --color-background-secondary: #202223;
  --color-background-tertiary: #202223;
  --color-background-quaternary: #2C2E2F;
  --color-background-default: #141617;
  --color-background-disabled: #383B3C;
  --low-emphasis-background: #202223;
  --color-foreground-primary: #F0F0EC;
  --color-foreground-secondary: #A4A8B5;
  --color-icon-default: #A4A8B5;
  --color-accent-default: #272C20;
}

.light {
  /* Lime puro é ilegível sobre claro: no claro o primário é o lime escurecido. */
  --color-accent-primary: #5C7A00;
  --color-accent-action: #5C7A00;
  --color-accent-action-hover: #272C20;
  --color-accent-primary-muted: #F4FFC7;
  --color-foreground-secondary: #6E7280;
}

/* ————— Tela de entrada: a mesma moldura do app (app.especialistasia.com.br/entrar)
   Cartão centralizado, painel de marca à esquerda com a MESMA arte, formulário à
   direita. As classes do Penpot não têm hash, então dá para mirar nelas; se uma
   versão nova renomear alguma, a tela volta ao layout dele (degrada, não quebra). */

body, #app { background: #141617; }
/* A tela de entrada do Penpot trava a altura em 100vh; deixamos rolar. */
#app { height: auto !important; min-height: 100vh; overflow-y: auto !important; }

main.main_ui_auth__auth-section {
  /* !important: o Penpot declara o próprio grid da tela de entrada com regras
     mais específicas; sem isto as colunas voltam para o layout dele. */
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: stretch;
  gap: 40px;
  width: min(1090px, calc(100vw - 64px));
  /* Altura pelo conteúdo: em tela baixa a página rola, em vez de cortar. */
  height: auto !important;
  min-height: 0 !important;
  margin: max(3vh, 24px) auto;
  padding: 22px;
  background: #202223;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  font-family: 'Manrope', system-ui, sans-serif;
}

/* Logo: canto superior do painel de marca, como no app. */
.main_ui_auth__logo-container {
  position: absolute;
  top: 46px;
  left: 46px;
  z-index: 2;
  width: 42px;
  height: auto;
  margin: 0;
}
.main_ui_auth__logo-container svg { width: 42px; height: auto; color: #F0F0EC; }

/* O Penpot usa um grid de 5 colunas e dá spans aos filhos (1/4 e 4/6). Sem
   zerar esses spans, eles criam colunas implícitas e a divisão volta a ser
   desigual, por mais que o template diga 1fr 1fr. */
.main_ui_auth__login-illustration {
  grid-column: 1 !important;
  /* O Penpot dá largura fixa aos dois lados; fixo dentro de coluna fluida
     transborda para fora do cartão. */
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch;
}
.main_ui_auth__auth-content {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch;
  /* Sem esticar na altura, o formulário fica colado no topo em vez de
     centralizado ao lado da arte. */
  align-self: stretch;
  height: 100% !important;
}

.main_ui_auth__login-illustration {
  /* Nas telas de cadastro o Penpot esconde o painel; aqui ele é a marca, então
     aparece em toda tela de auth. */
  display: block !important;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #141617;
  /* Altura fixa: sem isto a coluna cresce com a proporção da arte e empurra
     o cartão para fora da tela. */
  height: min(620px, calc(100vh - 120px));
  padding: 0;
}
/* A arte entra como BACKGROUND do painel: as telas de auth do Penpot nem sempre
   trazem a mesma <img> (register/validate não traz), e assim a marca aparece em
   todas elas. */
.main_ui_auth__login-illustration {
  background-image: url("../images/brand-auth.jpg");
  background-size: cover;
  background-position: center;
}
.main_ui_auth__login-illustration img { display: none; }
/* Véu para o texto respirar sobre a arte. */
.main_ui_auth__login-illustration::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,0.72) 100%);
  pointer-events: none;
}
/* Chamada (inserida por js/brand.js). */
.brand-painel-texto {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  z-index: 2;
  color: #F0F0EC;
}
.brand-painel-texto .eyebrow {
  font-size: 13px;
  color: rgba(240, 240, 236, 0.72);
  margin-bottom: 10px;
}
.brand-painel-texto .headline {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.brand-painel-texto .headline em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: #C6FF2D;
}

.main_ui_auth__auth-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(16px, 4vw, 56px);
  background: transparent;
}
main.main_ui_auth__auth-section [class*="auth-form-wrapper"] {
  display: flex;
  flex-direction: column;
  width: min(390px, 100%);
  margin: auto 0;
}
/* No app o formulário vem primeiro e os provedores depois ("ou continue com"). */
/* Ordem explícita em TODOS os filhos: quem fica sem `order` vai para 0 e
   aparece antes do título (foi o que jogou o "VOLTAR" para cima na tela de
   recuperação de senha). */
/* Todas as regras de ordem descem do wrapper, senão a do `> *` (mais
   específica) vence as individuais e tudo volta para a ordem do DOM. */
main.main_ui_auth__auth-section [class*="auth-form-wrapper"] > * { order: 4; }
main.main_ui_auth__auth-section [class*="auth-form-wrapper"] > [class*="auth-title"] { order: 1; }
main.main_ui_auth__auth-section [class*="auth-form-wrapper"] > [class*="auth-tagline"] { order: 2; }
main.main_ui_auth__auth-section [class*="auth-form-wrapper"] > form { order: 3; }
main.main_ui_auth__auth-section [class*="auth-form-wrapper"] > hr { order: 5; margin: 22px 0; }
main.main_ui_auth__auth-section [class*="auth-form-wrapper"] > [class*="auth-buttons"] { order: 6; }
main.main_ui_auth__auth-section [class*="auth-form-wrapper"] > [class*="__links"] { order: 7; margin-top: 18px; }

/* register/validate agrupa título + explicação num wrapper próprio, e o CSS do
   Penpot os empilha na ordem inversa da do DOM. */
main.main_ui_auth__auth-section [class*="auth-title-wrapper"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 26px;
}
main.main_ui_auth__auth-section [class*="auth-subtitle"] {
  font-size: 14px;
  line-height: 1.5;
  color: #A4A8B5;
}

/* Botão do SSO: largura toda, secundário (o primário é o Acessar). */
main.main_ui_auth__auth-section [class*="auth-buttons"] a,
main.main_ui_auth__auth-section [class*="auth-buttons"] button {
  width: 100%;
  justify-content: center;
  background: #2C2E2F;
  border: 1px solid rgba(255,255,255,0.12);
  color: #F0F0EC;
}
main.main_ui_auth__auth-section [class*="auth-buttons"] a:hover,
main.main_ui_auth__auth-section [class*="auth-buttons"] button:hover { border-color: rgba(255,255,255,0.28); }
main.main_ui_auth__auth-section [class*="auth-buttons"] a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  text-decoration: none;
}
/* O ícone do OpenID vem com width/height de 500 no atributo. */
main.main_ui_auth__auth-section [class*="auth-buttons"] svg { width: 18px; height: 18px; }
/* São dois <hr> em volta do formulário; com a nova ordem, um basta. */
main.main_ui_auth__auth-section hr:last-of-type { display: none; }

/* Rótulos em caixa alta são do Penpot; o app usa frase normal. */
main.main_ui_auth__auth-section label {
  text-transform: none;
  font-size: 13px;
  letter-spacing: 0;
  color: #A4A8B5;
}
main.main_ui_auth__auth-section button[type="submit"] { text-transform: none; }
main.main_ui_auth__auth-section [class*="auth-title"] {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #F0F0EC;
  margin-bottom: 26px;
}
/* O app não explica o que a ferramenta é na tela de entrada. */
.main_ui_auth_login__auth-tagline { display: none; }
main.main_ui_auth__auth-section hr { border-color: rgba(255,255,255,0.08); }

/* Campos e botões no acabamento do app. */
main.main_ui_auth__auth-section input:not([type="checkbox"]) {
  background: #2C2E2F;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: #F0F0EC;
}
main.main_ui_auth__auth-section button,
main.main_ui_auth__auth-section .btn-primary { border-radius: 10px; }
main.main_ui_auth__auth-section button[type="submit"] {
  background: #C6FF2D;
  color: #0A0A0A;
  font-weight: 600;
  border: none;
}
main.main_ui_auth__auth-section button[type="submit"]:hover { background: #ACDF26; }

@media (max-width: 900px) {
  main.main_ui_auth__auth-section { grid-template-columns: minmax(0, 1fr); }
  .main_ui_auth__login-illustration { display: none; }
  .main_ui_auth__logo-container { position: static; margin: 8px 0 24px 8px; }
}

/* ————— Painel: cartões de ação do projeto vazio
   O Penpot oferece três: criar arquivo, importar .penpot e adicionar biblioteca
   ou modelo. Os dois últimos falam de um ecossistema que o nosso cliente não
   tem (arquivo .penpot vindo de fora, galeria de templates), então fica só o
   de criar. Os três são irmãos com a MESMA classe, sem nada que os distinga a
   não ser a ordem, daí o :not(:first-child): também cobre qualquer cartão que
   uma versão nova acrescente. Se um dia o Penpot trocar a ordem e criar deixar
   de ser o primeiro, some o cartão errado (some, não quebra). */
.main_ui_dashboard_placeholder__empty-project-card:not(:first-child) {
  display: none !important;
}

/* ————— Uso individual: sem equipes
   O cliente é uma pessoa, não um time: o seletor de equipe (e o menu que ele
   abre, com "criar nova equipe", convites e configurações do time) não tem
   função aqui. O conteúdo original some por inteiro e o js/brand.js monta no
   lugar o cabeçalho da marca (símbolo + "Especialistas IA | Designer"). */
.main_ui_dashboard_sidebar__sidebar-team-switch .main_ui_dashboard_sidebar__switch-content {
  display: none !important;
}
.brand-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
}
.brand-sidebar-logo svg {
  width: 24px;
  height: 21px;
  flex: none;
  color: #C6FF2D;
}
.brand-sidebar-logo .nome {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #F0F0EC;
  white-space: nowrap;
}
.brand-sidebar-logo .nome .produto { color: #6E7280; }
.light .brand-sidebar-logo svg { color: #5C7A00; }
.light .brand-sidebar-logo .nome { color: #0A0A0A; }

/* ————— Rodapé da barra: só a identidade do usuário
   A conta é gerida no Especialistas IA, então o menu de perfil do Penpot
   ("Sua conta", Help & Learning, comunidade, "Sobre o Penpot", sair) não
   existe aqui: o botão deixa de responder e o dropdown some por garantia.
   O sino de notificações de comentários também sai (o aviso chega pelo app). */
.main_ui_dashboard_sidebar__profile {
  pointer-events: none !important;
  cursor: default !important;
}
.main_ui_dashboard_sidebar__profile-dropdown { display: none !important; }
.main_ui_dashboard_comments__dashboard-comments-section { display: none !important; }
/* A foto vem da conta do app (js/brand.js); a inicial gerada fica de reserva. */
.main_ui_dashboard_sidebar__profile-img { object-fit: cover; }

/* ————— Cabeçalho do arquivo aberto
   O SVG do símbolo vinha com `height: 500px` dentro de uma caixa de 32px (o
   desenho é nosso, a regra de tamanho é do Penpot), o que deixava o logo
   desproporcional ao lado do nome do arquivo. Tamanho fixo nos dois, e mais ar
   antes do texto. */
.main_ui_workspace_left_header__main-icon {
  width: 22px !important;
  height: 20px !important;
  margin-right: 14px !important;
}
.main_ui_workspace_left_header__main-icon svg {
  width: 22px !important;
  height: 20px !important;
}

/* ————— Menu do arquivo aberto
   Fora: "Plugins" (com o separador que vem junto) e "Ajuda e informações", que
   levam para a documentação e a comunidade do Penpot. Os itens são irmãos de
   mesma classe, distinguidos só pela ordem: do 5º em diante some, o que também
   engole qualquer item novo que uma versão futura acrescente no fim. */
.main_ui_workspace_main_menu__menu > *:nth-child(n+5) { display: none !important; }

/* No submenu "Arquivo" fica só "Exportar" (6º filho). Saem biblioteca
   compartilhada, fixar versão, histórico de versões e baixar .penpot. */
.main_ui_workspace_main_menu__sub-menu.main_ui_workspace_main_menu__pos-1 > *:not(:nth-child(6)) {
  display: none !important;
}

/* ————— "+ Novo projeto": ação primária do painel, na cor da marca */
.main_ui_dashboard_projects__dashboard-header .main_ui_dashboard_projects__btn-secondary {
  background: #C6FF2D !important;
  border-color: #C6FF2D !important;
  color: #0A0A0A !important;
  font-weight: 600;
}
.main_ui_dashboard_projects__dashboard-header .main_ui_dashboard_projects__btn-secondary:hover {
  background: #ACDF26 !important;
  border-color: #ACDF26 !important;
}
.main_ui_dashboard_projects__dashboard-header .main_ui_dashboard_projects__btn-secondary svg {
  stroke: #0A0A0A !important;
}

/* ————— Avatar de presença no editor (canto direito do cabeçalho)
   Uso individual: o avatar é só identidade, não abre nada; sem mão de clique. */
.main_ui_workspace_presence__active-users,
.main_ui_workspace_presence__active-users * {
  pointer-events: none !important;
  cursor: default !important;
}

/* ————— Aba "Inspecionar" vazia: sem a central de ajuda do Penpot
   Fica só a instrução de selecionar algo; o bloco "se quiser saber mais" e o
   botão MORE INFO levam para a documentação do Penpot, que não é a conversa
   com o nosso cliente. */
.main_ui_inspect_right_sidebar__empty .main_ui_ds_product_empty_state__group:nth-child(2) {
  display: none !important;
}
.main_ui_inspect_right_sidebar__empty-button { display: none !important; }

/* ————— Painel de ativos: biblioteca pessoal, sem a aba Tokens (fora por
   enquanto, decisão de 07/08/2026; reverter = apagar a regra). O botão
   "Adicionar biblioteca" VOLTOU em 08/08/2026 a pedido do Fabio, como ação
   SECUNDÁRIA (cinza, sem caixa alta): anexar biblioteca é apoio, não o ato
   principal da tela. */
button[data-id="tokens"][class*="tab_switcher__tab"] { display: none !important; }
/* O botão tem DUAS classes conforme o estado: add-library-button (arquivo sem
   biblioteca conectada) e libraries-button (com). Mesma cara nos dois. */
.main_ui_workspace_sidebar_assets__add-library-button,
.main_ui_workspace_sidebar_assets__libraries-button {
  background-color: #2C2E2F !important;
  color: #EDEFE6 !important;
  text-transform: none !important;
}
.main_ui_workspace_sidebar_assets__add-library-button:hover,
.main_ui_workspace_sidebar_assets__libraries-button:hover {
  background-color: #383B3C !important;
}

/* ————— Modal de bibliotecas: só a lista das compartilhadas do time
   (decisão de 08/08/2026). Saem as abas Bibliotecas/Atualizações, a seção
   "neste arquivo" (com o Publicar) e a busca: sobra o título da seção e a
   listagem com o + de anexar. Publicar biblioteca não é fluxo do cliente. */
.main_ui_workspace_libraries__modal-dialog nav[class*="tab_switcher__tab-nav"] {
  display: none !important;
}
.main_ui_workspace_libraries__lib-section { display: none !important; }
.main_ui_workspace_libraries__shared-section [class*="search_bar__search-box"] {
  display: none !important;
}
/* Estado vazio: sem o convite a templates da comunidade Penpot (link e os
   três exemplos). Fica só a frase, trocada na tradução. */
.main_ui_workspace_libraries__sample-libraries-link { display: none !important; }
.main_ui_workspace_libraries__sample-libraries-container { display: none !important; }

/* ————— Telas estáticas de erro (bad gateway, não encontrado, sem permissão)
   Sem a ilustração de lápis e sem o rodapé de créditos; fica título, texto e
   as ações. */
[class*="main_ui_static__deco"],
.main_ui_static__image,
.main_ui_static__sign-info {
  display: none !important;
}

/* Véu da entrada automática (js/brand.js): cobre a tela de cadastro do Penpot
   enquanto concluímos o registro pela API. Sem ele o formulário pisca antes do
   redirecionamento. */
.brand-entrando {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #141617;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  justify-content: center;
  color: #A4A8B5;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.brand-entrando svg { width: 52px; height: 46px; }

/* Botão de voltar no lugar do logo do arquivo aberto (conteúdo trocado pelo
   js/brand.js): a seta diz o que o clique sempre fez, voltar ao painel. */
.main_ui_workspace_left_header__main-icon svg { color: #F0F0EC; }
.main_ui_workspace_left_header__main-icon:hover svg { color: #C6FF2D; }