body{background:#f4f7f5}.app-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem max(1rem,calc((100vw - 1180px)/2));border-bottom:0}.app-header .brand{display:flex;align-items:center;gap:.7rem}.app-header .brand small{display:block}.app-install{display:flex;gap:1rem;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap}.seller-nav{overflow-x:auto;white-space:nowrap;padding:.6rem 0}.seller-nav a{min-height:48px;display:inline-flex;align-items:center}.button,input,select{min-height:48px}.app-profile{max-width:820px;margin:auto}.app-profile .field{margin-bottom:1rem}.app-profile input,.app-profile select,.app-profile textarea{width:100%}.app-profile small{display:block;margin-top:.4rem}.app-install small{max-width:65ch}.page-content{min-height:65vh}.app-header form{margin:0}@media(max-width:600px){.app-header{padding:1rem}.seller-hero h1{font-size:1.7rem}.client-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.table-wrap{overflow-x:auto}.app-profile{padding:1rem}}

/* A classe topbar compartilha o fundo e os temas do cabeçalho do sistema. */
.app-header {
  min-height: 62px;
  padding-block: 10px;
  color: #fff;
}
.app-header .brand { color: #fff; gap: 9px; }
.app-header .brand small { font-size: .68rem; }
.app-header .button-ghost {
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: .78rem;
}
.client-login-card {
  background: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}
.client-login-card .client-card-intro,
.client-login-card .auth-note {
  color: var(--theme-text-soft);
}
.client-login-card .auth-note,
.client-request-card .client-contact-note {
  font-size: .9rem;
}
html[data-contrast="high"] .client-request-card {
  background: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}
html[data-contrast="high"] .client-request-card .eyebrow,
html[data-contrast="high"] .client-request-card .client-contact-note,
html[data-contrast="high"] .client-access-list li::before {
  color: var(--theme-text);
}
html[data-contrast="high"] .button-client-contact {
  border: 2px solid var(--theme-border);
  background: var(--theme-surface-soft);
  color: var(--theme-text);
}

/* Mesmo símbolo do painel, sem a margem do ícone de instalação do aplicativo. */
.app-header .brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
}
.app-header .brand strong { font-size: .86rem; line-height: 1.15; }