/*
 * Camada visual inspirada em apps de planejamento de eventos.
 * Não altera o DOM dos módulos nem o estado salvo: somente apresenta a mesma
 * operação com ritmo, contraste e áreas de toque consistentes.
 */
:root {
  --kit-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, sans-serif;
  --kit-ink: #2f2927;
  --kit-muted: #6f6764;
  --kit-surface: #ffffff;
  --kit-surface-soft: #f7f4f3;
  --kit-control-surface: #fbf9f8;
  --kit-search-surface: #f1eeee;
  --kit-control-idle: #fdf9f7;
  --kit-border: #e7dfdc;
  --kit-radius-card: 18px;
  --kit-radius-control: 12px;
  --kit-shadow: 0 1px 2px rgba(48, 34, 31, .04), 0 10px 26px rgba(48, 34, 31, .055);
}

/* Acesso da equipe: função e situação são campos legíveis mesmo sem hover. */
.pro-modal .pro-access-form > label.pro-access-select {
  background: color-mix(in srgb, var(--wl-primary) 5%, var(--kit-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 24%, var(--kit-border)) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wl-primary) 7%, transparent) !important;
  gap: 6px !important;
  min-height: 64px;
  padding: 11px 12px !important;
}
.pro-modal .pro-access-form > label.pro-access-select select {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--wl-primary) !important;
  font-weight: 720 !important;
  min-height: 28px !important;
  padding: 0 30px 0 0 !important;
}
.pro-modal .pro-access-form > label.pro-access-select:hover,
.pro-modal .pro-access-form > label.pro-access-select:focus-within {
  background: var(--kit-surface) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 12%, transparent) !important;
}

/* Auditoria: cada registro ganha uma separação para leitura rápida. */
.pro-access-audit ul {
  margin: 14px 0 0 !important;
}
.pro-access-audit li {
  border-bottom: 1px solid color-mix(in srgb, var(--wl-primary) 20%, var(--kit-border)) !important;
  padding: 14px 0 !important;
}
.pro-access-audit li:first-child {
  padding-top: 0 !important;
}
.pro-access-audit li:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.pro-access-audit-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.pro-access-audit-heading .eyebrow { margin-bottom: 5px !important; }
.pro-access-audit-heading h3 { margin: 0 !important; }
.pro-access-audit-heading .pro-button { flex: 0 0 auto; min-height: 36px; padding-inline: 12px; }

.pro-app,
.pro-login,
.pro-app button,
.pro-app input,
.pro-app select,
.pro-app textarea,
.pro-login button,
.pro-login input { font-family: var(--kit-font) !important; }

/* A página funciona como um app, sem fundos concorrentes ou sombras pesadas. */
.pro-main { background: var(--wl-page) !important; }
.pro-view { animation: kit-view-in .18s ease both; }
.pro-view > :first-child { margin-top: 0; }
@keyframes kit-view-in { from { opacity: .01; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.pro-app-heading,
.pro-heading { align-items: flex-end !important; gap: 16px !important; }
.pro-app-heading h2,
.pro-heading h2 { color: var(--kit-ink) !important; font-weight: 740 !important; letter-spacing: -.038em !important; }
.pro-app-heading p,
.pro-heading p { color: var(--kit-muted) !important; max-width: 62ch; }
.eyebrow { color: var(--wl-accent) !important; font-weight: 760 !important; letter-spacing: .035em !important; text-transform: none !important; }

/* Cartões, estatísticas e listas usam uma mesma superfície e raio. */
.pro-card,
.pro-stat-grid article,
.pro-finance article,
.pro-event-card,
.pro-module-grid article,
.pro-kanban section,
.pro-task-column,
.pro-table,
.pro-client-list,
.pro-guest-list,
.pro-supplier-list,
.pro-music-list,
.pro-profile-card,
.pro-settings-card,
.pro-brand-preview,
.pro-media-grid figure {
  background: var(--kit-surface) !important;
  border: 1px solid var(--kit-border) !important;
  border-radius: var(--kit-radius-card) !important;
  box-shadow: var(--kit-shadow) !important;
}
.pro-card,
.pro-event-card,
.pro-module-grid article { overflow: hidden; }
.pro-card h3,
.pro-event-card h3,
.pro-module-grid h3,
.pro-task-card h3 { color: var(--kit-ink) !important; font-weight: 720 !important; letter-spacing: -.025em !important; }
.pro-stat-grid article,
.pro-finance article { min-height: 128px !important; }
.pro-stat-grid b,
.pro-finance b { font-variant-numeric: tabular-nums; }
.pro-stat-grid small,
.pro-finance small,
.pro-card small { color: var(--kit-muted) !important; }

/* Controles: altura fixa, contraste de foco no contêiner e estados táteis. */
.pro-button,
.pro-icon-button,
.pro-row-actions button,
.pro-event-actions button,
.pro-heading-actions button,
.pro-form-actions button {
  border-radius: var(--kit-radius-control) !important;
  font-weight: 720 !important;
}
.pro-button.primary { box-shadow: 0 8px 18px color-mix(in srgb, var(--wl-primary) 18%, transparent) !important; }
.pro-button.primary:hover { filter: brightness(.96); }
.pro-button.secondary,
.pro-button.light { border-color: var(--kit-border) !important; }
.pro-button:active,
.pro-icon-button:active,
.pro-mobile-nav button:active { transform: scale(.98) !important; }
.pro-app input:not([type="checkbox"]):not([type="radio"]),
.pro-app select,
.pro-app textarea,
.pro-login input { border-color: var(--kit-border) !important; }
.pro-app input:focus,
.pro-app select:focus,
.pro-app textarea:focus,
.pro-login input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important; }

/* Busca continua sendo uma única superfície: sem borda ou fundo no input. */
.pro-search,
.pro-mobile-menu-search {
  background: var(--kit-surface-soft) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.pro-search:hover,
.pro-mobile-menu-search:hover { background: color-mix(in srgb, var(--kit-surface-soft) 76%, var(--kit-surface)) !important; }
.pro-search:focus-within,
.pro-mobile-menu-search:focus-within {
  background: var(--kit-surface-soft) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 15%, transparent) !important;
}
.pro-search input,
.pro-search input:focus,
.pro-search input:focus-visible,
.pro-mobile-menu-search input,
.pro-mobile-menu-search input:focus,
.pro-mobile-menu-search input:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Navegação de desktop: discreta, porém com item ativo inequivocamente visível. */
@media (min-width: 901px) {
  .pro-sidebar { border-right-color: var(--kit-border) !important; }
  .pro-nav { color: var(--kit-muted) !important; font-weight: 650 !important; }
  .pro-nav:hover { background: var(--wl-primary-softer) !important; color: var(--wl-primary) !important; }
  .pro-nav.active { background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; }
  .pro-nav.active::before { border-radius: 99px !important; height: 22px !important; }
  .pro-topbar { background: color-mix(in srgb, var(--wl-page) 92%, transparent) !important; backdrop-filter: blur(14px); }
}

/* Grades de trabalho: cartões e linhas sem excesso de contrastes. */
.pro-kanban section,
.pro-task-column { background: var(--kit-surface-soft) !important; box-shadow: none !important; }
.pro-kanban-cards article,
.pro-task-card { border-color: var(--kit-border) !important; border-radius: 14px !important; box-shadow: 0 1px 1px rgba(48, 34, 31, .04) !important; }
.pro-kanban-cards article:hover,
.pro-task-card:hover,
.pro-event-card:hover,
.pro-module-grid article:hover { border-color: color-mix(in srgb, var(--wl-primary) 30%, var(--kit-border)) !important; box-shadow: 0 10px 22px rgba(48, 34, 31, .08) !important; transform: translateY(-1px); }
.pro-table > article:hover,
.pro-client-row:hover,
.pro-guest-row:hover { background: var(--kit-surface-soft) !important; }
.pro-status,
.pro-task-event,
.pro-installment-state { border-radius: 999px !important; font-weight: 700 !important; }

/* Modais do planner: cabeçalho claro e fechamento com área de toque previsível. */
.pro-modal { border-color: var(--kit-border) !important; border-radius: 22px !important; }
.pro-modal-header { background: var(--kit-surface) !important; border-bottom-color: var(--kit-border) !important; }
.pro-modal-body { background: var(--kit-surface) !important; }
.pro-modal-close { background: var(--kit-surface-soft) !important; border-color: transparent !important; color: var(--wl-primary) !important; }
.pro-modal-close:hover,
.pro-modal-close:focus-visible { background: var(--wl-primary-soft) !important; border-color: var(--wl-primary) !important; }

/* Compacto: margem mínima, leitura ampla e navegação inferior com rótulos estáveis. */
@media (max-width: 900px) {
  .pro-main { padding-inline: 16px !important; }
  .pro-topbar { margin-inline: -16px !important; max-width: calc(100% + 32px) !important; padding-inline: 16px !important; width: calc(100% + 32px) !important; }
  .pro-app-heading,
  .pro-heading { align-items: stretch !important; margin-bottom: 20px !important; }
  .pro-card { padding: 20px !important; }
  .pro-stat-grid article,
  .pro-finance article { min-height: 116px !important; padding: 16px !important; }
  .pro-stat-grid b,
  .pro-finance b { font-size: clamp(22px, 7vw, 28px) !important; }
  .pro-mobile-menu-head { padding-inline: 4px !important; }
  .pro-mobile-menu-search { border-radius: 14px !important; min-height: 54px !important; }
  .pro-mobile-menu-group { border-color: var(--kit-border) !important; }
  .pro-mobile-menu-item { border-radius: 14px !important; }
  .pro-mobile-menu-item:active { background: var(--wl-primary-softer) !important; }
  .pro-mobile-nav {
    background: color-mix(in srgb, var(--kit-surface) 94%, transparent) !important;
    border-color: var(--kit-border) !important;
    box-shadow: 0 8px 28px rgba(48, 34, 31, .14) !important;
  }
  .pro-mobile-nav button { color: var(--kit-muted) !important; font-weight: 700 !important; }
  .pro-mobile-nav button.active { background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; }
  .pro-modal-backdrop { padding: 12px !important; }
}

@media (max-width: 520px) {
  .pro-app-heading h2,
  .pro-heading h2 { font-size: clamp(25px, 8vw, 31px) !important; }
  .pro-hero { border-radius: 18px !important; padding: 24px 20px !important; }
  .pro-modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .pro-modal { border-radius: 22px 22px 0 0 !important; }
}

/* Seleção em lote pertence à própria lista — não fica como elemento solto. */
.pro-budget-table { overflow: hidden !important; padding: 0 !important; }
.pro-budget-toolbar--inside {
  align-items: center;
  background: var(--kit-surface) !important;
  border-bottom: 1px solid var(--kit-border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 !important;
  min-height: 60px;
  padding: 10px 20px;
}
.pro-budget-select-all {
  align-items: center;
  background: color-mix(in srgb, var(--wl-primary) 7%, var(--kit-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 32%, var(--kit-border)) !important;
  border-radius: 10px;
  color: var(--kit-ink) !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px !important;
  font-weight: 700 !important;
  gap: 9px;
  min-height: 38px;
  padding: 7px 10px;
}
.pro-budget-select-all input,
.pro-budget-row-check input {
  appearance: none;
  background: var(--kit-surface) !important;
  border: 1.5px solid color-mix(in srgb, var(--wl-primary) 60%, var(--kit-border)) !important;
  border-radius: 4px;
  cursor: pointer;
  height: 18px !important;
  margin: 0;
  position: relative;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
  width: 18px !important;
}
.pro-budget-select-all input:checked,
.pro-budget-row-check input:checked { background: var(--wl-primary) !important; border-color: var(--wl-primary) !important; box-shadow: 0 2px 7px color-mix(in srgb, var(--wl-primary) 28%, transparent); }
.pro-budget-select-all input:checked::after,
.pro-budget-row-check input:checked::after { border: solid #fff; border-width: 0 2px 2px 0; content: ''; height: 8px; left: 5px; position: absolute; top: 2px; transform: rotate(45deg); width: 4px; }
.pro-budget-select-all input:focus-visible,
.pro-budget-row-check input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 24%, transparent); outline: none; }
.pro-budget-row-check { align-items: center; background: color-mix(in srgb, var(--wl-primary) 7%, var(--kit-surface)); border: 1px solid color-mix(in srgb, var(--wl-primary) 22%, var(--kit-border)); border-radius: 9px; display: flex; justify-content: center; min-height: 34px; min-width: 34px; }
.pro-budget-table > article > div:nth-child(2) b { color: var(--kit-ink) !important; font-weight: 780 !important; }
.pro-budget-table > article > div:nth-child(2) small { color: var(--kit-muted) !important; font-weight: 600; }
.pro-budget-table .pro-table-head {
  background: var(--kit-surface-soft) !important;
  border-bottom: 1px solid var(--kit-border) !important;
  color: var(--kit-muted) !important;
  min-height: 44px;
  padding-block: 10px !important;
}
.pro-budget-table > article { border-bottom-color: var(--kit-border) !important; }

@media (max-width: 760px) {
  .pro-budget-toolbar--inside {
    align-items: center !important;
    flex-direction: row !important;
    min-height: 58px;
    padding: 10px 14px;
  }
  .pro-budget-toolbar--inside .pro-button { width: auto !important; }
  .pro-budget-table .pro-table-head { display: none !important; }
  .pro-budget-table > article { min-height: 72px; padding-inline: 14px !important; }
}

/* Estado de repouso com contraste: opções não dependem mais do hover para aparecer. */
.pro-app input:not([type="checkbox"]):not([type="radio"]),
.pro-app select,
.pro-app textarea,
.pro-login input,
.pro-event-context-trigger,
.pro-time-picker-trigger,
.pro-select-picker-trigger,
.pro-calendar-controls button,
.pro-workspace-tabs button,
.pro-settings-select,
.pro-theme-current,
.pro-theme-preset {
  background-color: var(--kit-control-idle) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 20%, var(--kit-border)) !important;
}
.pro-app .pro-form input:not([type="checkbox"]):not([type="radio"]),
.pro-app .pro-form select,
.pro-app .pro-form textarea,
.pro-app .pro-supplier-form input,
.pro-app .pro-supplier-form select,
.pro-app .pro-supplier-form textarea,
.pro-profile-card.pro-form input,
.pro-profile-card.pro-form select,
#accountSettingsForm input,
#accountSettingsForm select {
  background-color: var(--kit-control-idle) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 20%, var(--kit-border)) !important;
}
.pro-app input:not([type="checkbox"]):not([type="radio"]):hover,
.pro-app select:hover,
.pro-app textarea:hover,
.pro-login input:hover,
.pro-event-context-trigger:hover,
.pro-time-picker-trigger:hover,
.pro-select-picker-trigger:hover,
.pro-calendar-controls button:hover,
.pro-workspace-tabs button:hover,
.pro-settings-select:hover,
.pro-theme-current:hover,
.pro-theme-preset:hover {
  background-color: var(--kit-surface) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 42%, var(--kit-border)) !important;
}
.pro-app input:not([type="checkbox"]):not([type="radio"]):focus,
.pro-app select:focus,
.pro-app textarea:focus,
.pro-login input:focus { background-color: var(--kit-surface) !important; }

/* Opções de pagamento e linhas de escolha recebem o mesmo nível visual já no repouso. */
.pro-supplier-payment-checklist span,
.pro-supplier-payment-summary article,
.pro-list article,
.pro-client-detail > div,
.pro-guest-detail > div { background: var(--kit-control-idle) !important; border-color: color-mix(in srgb, var(--wl-primary) 16%, var(--kit-border)) !important; }
.pro-supplier-payment-checklist label:hover span,
.pro-supplier-payment-summary article:hover,
.pro-list article:hover { background: var(--kit-surface) !important; border-color: color-mix(in srgb, var(--wl-primary) 38%, var(--kit-border)) !important; }

/* Portal do cliente: lista contínua com separadores, sem caixas individuais. */
.pro-portal-share-list { display: block !important; margin: 12px 0 0 !important; }
.pro-portal-share-list article,
.pro-portal-share-list article:hover {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--kit-border) !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 62px;
  padding: 12px 0 !important;
}
.pro-portal-share-list article:last-child { border-bottom: 1px solid var(--kit-border) !important; }
.pro-portal-share-list article > div { min-width: 0; }
.pro-portal-share-list article > div b { color: var(--wl-primary) !important; }
.pro-portal-share-list article > div small { color: var(--kit-muted) !important; }
@media (max-width: 520px) {
  .pro-portal-share-list article { gap: 12px; padding: 12px 0 !important; }
  .pro-portal-share-list article .pro-button { min-width: 68px; }
}

/* Modo Evento: cartões de execução podem ser editados diretamente. */
.pro-event-mode-timeline,
.pro-event-mode-task { cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.pro-event-mode-timeline:hover,
.pro-event-mode-timeline:focus-visible,
.pro-event-mode-task:hover,
.pro-event-mode-task:focus-visible { border-color: color-mix(in srgb, var(--wl-primary) 52%, var(--kit-border)) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--wl-primary) 12%, transparent); outline: none; transform: translateY(-1px); }

/* Ocorrências: Evento e Status são decisões operacionais e precisam de contraste constante. */
.pro-modal .pro-incident-form label:has(> select[name="eventId"]),
.pro-modal .pro-incident-form label:has(> select[name="status"]) {
  background: color-mix(in srgb, var(--wl-primary) 18%, var(--kit-surface)) !important;
  border: 1.5px solid color-mix(in srgb, var(--wl-primary) 58%, var(--kit-border)) !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 13%, transparent), 0 3px 8px color-mix(in srgb, var(--wl-primary) 11%, transparent) !important;
  padding-inline: 12px;
}
.pro-modal .pro-incident-form label:has(> select) > select { background: transparent !important; border: 0 !important; color: var(--wl-primary) !important; font-weight: 760 !important; }
.pro-modal .pro-incident-form label:has(> select):hover,
.pro-modal .pro-incident-form label:has(> select):focus-within { background: color-mix(in srgb, var(--wl-primary) 8%, var(--kit-surface)) !important; border-color: var(--wl-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 18%, transparent) !important; }

/* A busca continua sendo uma única caixa: o campo interno nunca ganha fundo próprio. */
.pro-app .pro-search input,
.pro-app .pro-search input:hover,
.pro-app .pro-search input:focus,
.pro-app .pro-search input:focus-visible,
.pro-app .pro-mobile-menu-search input,
.pro-app .pro-mobile-menu-search input:hover,
.pro-app .pro-mobile-menu-search input:focus,
.pro-app .pro-mobile-menu-search input:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Superfícies de entrada: o mesmo contraste do cadastro de fornecedores. */
.pro-supplier-form,
.pro-modal-body .pro-form,
.pro-profile-card.pro-form,
#accountSettingsForm,
.pro-theme-custom,
.pro-upload-field,
.pro-photo-upload-field,
.pro-client-photo-field,
.pro-budget-attachment,
.pro-installment-editor,
.pro-event-photo-form {
  background: var(--kit-control-surface) !important;
  border-color: var(--kit-border) !important;
}
.pro-supplier-form,
.pro-modal-body .pro-form,
.pro-profile-card.pro-form,
#accountSettingsForm,
.pro-event-photo-form {
  border: 1px solid var(--kit-border) !important;
  border-radius: var(--kit-radius-card) !important;
  padding: 20px !important;
}
.pro-app .pro-form input:not([type="checkbox"]):not([type="radio"]),
.pro-app .pro-form select,
.pro-app .pro-form textarea,
.pro-app .pro-supplier-form input,
.pro-app .pro-supplier-form select,
.pro-app .pro-supplier-form textarea,
.pro-profile-card.pro-form input,
.pro-profile-card.pro-form select,
#accountSettingsForm input,
#accountSettingsForm select {
  background: var(--kit-surface) !important;
  border-color: var(--kit-border) !important;
}
.pro-app .pro-form input:hover,
.pro-app .pro-form select:hover,
.pro-app .pro-form textarea:hover,
.pro-app .pro-supplier-form input:hover,
.pro-app .pro-supplier-form select:hover,
.pro-app .pro-supplier-form textarea:hover { border-color: color-mix(in srgb, var(--wl-primary) 32%, var(--kit-border)) !important; }

/* Upload da marca: área de envio claramente interativa em todos os tamanhos. */
.pro-profile-card.pro-form .pro-upload-field {
  background: color-mix(in srgb, var(--wl-primary) 8%, var(--kit-surface)) !important;
  border: 1px dashed color-mix(in srgb, var(--wl-primary) 34%, var(--kit-border)) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--wl-primary) 8%, transparent) !important;
  cursor: pointer;
  min-height: 98px;
  padding: 12px !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.pro-profile-card.pro-form .pro-upload-field:hover,
.pro-profile-card.pro-form .pro-upload-field:focus-within {
  background: var(--kit-surface) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 12%, transparent) !important;
}
.pro-profile-card.pro-form .pro-upload-field .pro-upload-trigger {
  box-shadow: 0 2px 5px color-mix(in srgb, var(--wl-primary) 20%, transparent) !important;
  cursor: pointer;
}
.pro-profile-card.pro-form .pro-upload-copy b {
  color: var(--wl-primary) !important;
}

/* Evento: Tipo e Status deixam claro que são escolhas disponíveis. */
.pro-modal .pro-event-form label.pro-event-select {
  background: color-mix(in srgb, var(--wl-primary) 8%, var(--kit-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 30%, var(--kit-border)) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wl-primary) 8%, transparent) !important;
  gap: 6px !important;
  min-height: 64px;
  padding: 11px 12px !important;
}
.pro-modal .pro-event-form label.pro-event-select select {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--wl-primary) !important;
  cursor: pointer;
  font-weight: 720 !important;
  min-height: 28px !important;
  padding: 0 30px 0 0 !important;
}
.pro-modal .pro-event-form label.pro-event-select:hover,
.pro-modal .pro-event-form label.pro-event-select:focus-within {
  background: var(--kit-surface) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 12%, transparent) !important;
}
.pro-modal .pro-event-form label.pro-event-status-select {
  background: color-mix(in srgb, var(--wl-primary) 13%, var(--kit-surface)) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 46%, var(--kit-border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 10%, transparent), 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
}
.pro-modal .pro-event-form label.pro-event-status-select:hover,
.pro-modal .pro-event-form label.pro-event-status-select:focus-within {
  background: color-mix(in srgb, var(--wl-primary) 7%, var(--kit-surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 15%, transparent) !important;
}

/* Busca é uma única faixa neutra e acessível em qualquer tela. */
.pro-search,
.pro-mobile-menu-search {
  background: var(--kit-search-surface) !important;
  border: 1px solid transparent !important;
  color: var(--kit-muted) !important;
}
.pro-search:hover,
.pro-mobile-menu-search:hover { background: color-mix(in srgb, var(--kit-search-surface) 84%, var(--kit-surface)) !important; }
.pro-search:focus-within,
.pro-mobile-menu-search:focus-within {
  background: var(--kit-surface) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important;
}
.pro-search input::placeholder,
.pro-mobile-menu-search input::placeholder { color: color-mix(in srgb, var(--kit-muted) 82%, var(--kit-surface)) !important; opacity: 1 !important; }
.pro-search-results { background: var(--kit-surface) !important; border-color: var(--kit-border) !important; }
.pro-search-result:hover,
.pro-search-result:focus-visible { background: var(--kit-control-surface) !important; }

/* Filtros, abas e seletores seguem o mesmo sistema de fundo. */
.pro-event-context-trigger,
.pro-calendar-controls button,
.pro-workspace-tabs button,
.pro-settings-select,
.pro-theme-current,
.pro-theme-preset,
.pro-filter-control {
  background: var(--kit-control-surface) !important;
  border-color: var(--kit-border) !important;
}
.pro-event-context-trigger:hover,
.pro-calendar-controls button:hover,
.pro-workspace-tabs button:hover,
.pro-workspace-tabs button.is-active,
.pro-theme-preset.is-active { background: var(--wl-primary-softer) !important; border-color: color-mix(in srgb, var(--wl-primary) 30%, var(--kit-border)) !important; }

/* Setas do kit de navegação: controles de período mais claros e sem glifos. */
.pro-calendar-controls .pro-calendar-nav {
  align-items: center;
  display: inline-flex;
  font-size: 0 !important;
  height: 40px;
  justify-content: center;
  min-width: 40px;
  padding: 0 !important;
  width: 40px;
}
.pro-calendar-controls .pro-calendar-nav svg {
  display: block;
  height: 21px;
  width: 21px;
}
.pro-calendar-controls .pro-calendar-nav svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

@media (max-width: 760px) {
  .pro-supplier-form,
  .pro-modal-body .pro-form,
  .pro-profile-card.pro-form,
  #accountSettingsForm,
  .pro-event-photo-form { border-radius: 16px !important; padding: 16px !important; }
}

/* Regra final da busca: fundo e foco pertencem somente ao contêiner externo. */
.pro-app .pro-search,
.pro-app .pro-mobile-menu-search {
  background: var(--kit-surface) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 24%, var(--kit-border)) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.pro-app .pro-search {
  flex: 1 1 460px !important;
  max-width: 720px !important;
  min-height: 50px !important;
  padding-inline: 18px !important;
}
.pro-app .pro-mobile-menu-search { min-height: 52px !important; padding-inline: 16px !important; }
.pro-app .pro-search > span,
.pro-app .pro-mobile-menu-search > span { color: var(--wl-primary) !important; }
.pro-app .pro-search:focus-within,
.pro-app .pro-mobile-menu-search:focus-within {
  background: var(--kit-surface) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important;
}
.pro-app #proSearch,
.pro-app #proSearch:hover,
.pro-app #proSearch:focus,
.pro-app #proSearch:focus-visible,
.pro-app label.pro-mobile-menu-search input[type="search"],
.pro-app label.pro-mobile-menu-search input[type="search"]:hover,
.pro-app label.pro-mobile-menu-search input[type="search"]:focus,
.pro-app label.pro-mobile-menu-search input[type="search"]:focus-visible {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.pro-app #proSearch::placeholder,
.pro-app label.pro-mobile-menu-search input[type="search"]::placeholder { color: color-mix(in srgb, var(--kit-muted) 66%, var(--kit-surface)) !important; }

/* CRM: cartões e filtros com contraste claro, inclusive antes do hover. */
.pro-crm-label-filters {
  align-items: center;
  background: var(--kit-control-surface) !important;
  border: 1px solid var(--kit-border) !important;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
}
.pro-crm-label-filters > span {
  color: var(--wl-primary) !important;
  font: 750 12px/1 Inter, Arial, sans-serif;
  white-space: nowrap;
}
.pro-crm-label-filters > div { display: flex; flex: 1 1 420px; flex-wrap: wrap; gap: 8px; }
.pro-crm-label-filters button {
  align-items: center;
  background: var(--crm-label-color, var(--kit-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 16%, var(--kit-border)) !important;
  border-radius: 999px;
  color: var(--kit-text) !important;
  cursor: pointer;
  display: inline-flex;
  font: 700 12px/1 Inter, Arial, sans-serif;
  gap: 7px;
  min-height: 34px;
  padding: 8px 11px;
}
.pro-crm-label-filters button b {
  align-items: center;
  background: color-mix(in srgb, var(--kit-surface) 72%, transparent);
  border-radius: 999px;
  display: inline-flex;
  font: 800 10px/1 Inter, Arial, sans-serif;
  justify-content: center;
  min-width: 18px;
  padding: 3px 5px;
}
.pro-crm-label-filters button:hover,
.pro-crm-label-filters button:focus-visible,
.pro-crm-label-filters button.is-active {
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wl-primary) 14%, transparent);
  outline: 0;
}
.pro-crm-label-filters button.is-active { color: var(--wl-primary) !important; }
.pro-empty-column { color: var(--kit-muted) !important; font: 600 12px/1.45 Inter, Arial, sans-serif; padding: 14px 2px; }

/* Detalhe do lead: cada área tem superfície própria e campos fáceis de distinguir. */
.pro-modal-body .pro-lead-detail .pro-form {
  background: var(--kit-control-surface) !important;
  border: 1px solid var(--kit-border) !important;
  border-radius: var(--kit-radius-card) !important;
}
.pro-modal-body .pro-lead-detail-grid > section {
  background: var(--kit-surface) !important;
  border: 1px solid var(--kit-border) !important;
  border-radius: 14px;
  padding: 14px;
}
.pro-modal-body .pro-lead-detail .pro-form select,
.pro-modal-body .pro-lead-detail .pro-form textarea,
.pro-modal-body .pro-lead-comment-box textarea,
.pro-modal-body .pro-lead-upload input[type="file"] {
  background: var(--kit-surface) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 20%, var(--kit-border)) !important;
}
.pro-modal-body .pro-lead-labels { gap: 9px; }
.pro-modal-body .pro-lead-label-option span {
  background: var(--label-color) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 14%, var(--kit-border)) !important;
  min-height: 34px;
  padding: 9px 11px;
}
.pro-modal-body .pro-lead-label-option input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 18%, transparent) !important;
}
.pro-modal-body .pro-lead-label-option input:checked + span {
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important;
  color: var(--wl-primary) !important;
}
.pro-modal-body .pro-lead-upload {
  background: var(--kit-surface) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 28%, var(--kit-border)) !important;
}
@media (max-width: 640px) {
  .pro-crm-label-filters { align-items: stretch; padding: 12px; }
  .pro-crm-label-filters > div { flex-basis: 100%; }
  .pro-crm-label-filters button { flex: 1 1 auto; justify-content: space-between; }
  .pro-modal-body .pro-lead-detail-grid > section { padding: 12px; }
}

/* Ícones preenchidos: cor vem do próprio estado do botão, em desktop e mobile. */
.pro-nav-icon {
  background: currentColor;
  display: inline-block;
  flex: 0 0 auto;
  height: 20px;
  -webkit-mask: var(--pro-icon) center / contain no-repeat;
  mask: var(--pro-icon) center / contain no-repeat;
  width: 20px;
}
.pro-sidebar .pro-nav .pro-nav-icon { color: currentColor !important; margin-right: 10px; opacity: .92; }
.pro-sidebar .pro-nav.active .pro-nav-icon,
.pro-sidebar .pro-nav:hover .pro-nav-icon { opacity: 1; }
.pro-mobile-nav .pro-nav-icon { height: 19px; margin: 0 auto 3px; width: 19px; }
.pro-mobile-nav .pro-nav-icon-menu {
  -webkit-mask: url("assets/ui-icons/filled-menu.svg") center / contain no-repeat;
  mask: url("assets/ui-icons/filled-menu.svg") center / contain no-repeat;
}
.pro-mobile-menu-item .pro-nav-icon { color: var(--wl-primary) !important; height: 20px; width: 20px; }
@media (min-width: 721px) and (max-width: 1180px) { .pro-sidebar .pro-nav .pro-nav-icon { height: 19px; margin: 0; width: 19px; } }

/* Listas do painel: cada registro respira dentro do cartão, sem faixas encostadas. */
.pro-app .pro-two-columns > .pro-card {
  padding: 22px !important;
}
.pro-app .pro-two-columns > .pro-card .pro-list {
  display: grid;
  gap: 9px;
  margin: 16px 0 18px;
  padding: 0;
}
.pro-app .pro-two-columns > .pro-card .pro-list article,
.pro-app .pro-two-columns > .pro-card .pro-list article:not(:last-child) {
  background: var(--kit-control-idle) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 15%, var(--kit-border)) !important;
  border-radius: 12px;
  margin: 0;
  padding: 13px 14px;
}
.pro-app .pro-two-columns > .pro-card .pro-list article:hover {
  background: var(--kit-surface) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 36%, var(--kit-border)) !important;
}
@media (max-width: 640px) {
  .pro-app .pro-two-columns > .pro-card { padding: 18px !important; }
  .pro-app .pro-two-columns > .pro-card .pro-list { gap: 8px; margin-block: 14px 16px; }
  .pro-app .pro-two-columns > .pro-card .pro-list article { padding: 12px; }
}

/* Agenda mobile: navegação de período forma um único grupo visual alinhado. */
/* Formulários: qualquer seletor é uma escolha com superfície, borda e foco próprios. */
.pro-modal .pro-form label:has(> select) {
  background: color-mix(in srgb, var(--wl-primary) 9%, var(--kit-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 34%, var(--kit-border)) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wl-primary) 8%, transparent) !important;
  gap: 6px !important;
  min-height: 64px;
  padding: 11px 12px !important;
}
.pro-modal .pro-form label:has(> select) > select {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--wl-primary) !important;
  cursor: pointer;
  font-weight: 720 !important;
  min-height: 28px !important;
  padding: 0 30px 0 0 !important;
}
.pro-modal .pro-form label:has(> select):hover,
.pro-modal .pro-form label:has(> select):focus-within {
  background: var(--kit-surface) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 13%, transparent) !important;
}
/* Etapas: Evento e Status são as escolhas operacionais principais. */
.pro-modal .pro-form label:has(> select[name="eventId"]),
.pro-modal .pro-form label:has(> select[name="status"]) {
  background: color-mix(in srgb, var(--wl-primary) 16%, var(--kit-surface)) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 50%, var(--kit-border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 12%, transparent), 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
}
.pro-modal .pro-form label:has(> select[name="eventId"]):hover,
.pro-modal .pro-form label:has(> select[name="eventId"]):focus-within,
.pro-modal .pro-form label:has(> select[name="status"]):hover,
.pro-modal .pro-form label:has(> select[name="status"]):focus-within {
  background: color-mix(in srgb, var(--wl-primary) 8%, var(--kit-surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important;
}
/* Construtor de briefing: escolhas e comandos claros, com arraste fora do campo. */
.pro-modal .pro-briefing-builder label:has(> select[name="category"]) {
  background: color-mix(in srgb, var(--wl-primary) 16%, var(--kit-surface)) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 50%, var(--kit-border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 12%, transparent), 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
}
.pro-modal .pro-briefing-builder [data-add-faq-step] {
  background: color-mix(in srgb, var(--wl-primary) 10%, var(--kit-surface)) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 44%, var(--kit-border)) !important;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
  color: var(--wl-primary) !important;
  font-weight: 750 !important;
}
/* Criação de briefing: vínculo e modelo são escolhas prioritárias. */
.pro-modal .pro-form label:has(> select[name="templateId"]),
.pro-modal .pro-form label:has(> select[name="eventId"]):has(+ label > select[name="templateId"]) {
  background: color-mix(in srgb, var(--wl-primary) 16%, var(--kit-surface)) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 50%, var(--kit-border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 12%, transparent), 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
}
.pro-modal .pro-form label:has(> select[name="templateId"]):hover,
.pro-modal .pro-form label:has(> select[name="templateId"]):focus-within,
.pro-modal .pro-form label:has(> select[name="eventId"]):has(+ label > select[name="templateId"]):hover,
.pro-modal .pro-form label:has(> select[name="eventId"]):has(+ label > select[name="templateId"]):focus-within {
  background: color-mix(in srgb, var(--wl-primary) 8%, var(--kit-surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important;
}
/* Vínculo de evento: seletor prioritário nos cadastros do sistema. */
.pro-modal .pro-form label:has(> select[name="eventId"]) {
  background: color-mix(in srgb, var(--wl-primary) 15%, var(--kit-surface)) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 48%, var(--kit-border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 11%, transparent), 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
}
.pro-modal .pro-form label:has(> select[name="eventId"]):hover,
.pro-modal .pro-form label:has(> select[name="eventId"]):focus-within {
  background: color-mix(in srgb, var(--wl-primary) 7%, var(--kit-surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important;
}
/* Cadastro direto de fornecedores: o vínculo do evento também deve parecer uma ação clara. */
.pro-supplier-form label:has(> select[name="eventId"]) {
  background: color-mix(in srgb, var(--wl-primary) 15%, var(--kit-surface)) !important;
  border: 1.5px solid color-mix(in srgb, var(--wl-primary) 54%, var(--kit-border)) !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 13%, transparent), 0 3px 8px color-mix(in srgb, var(--wl-primary) 11%, transparent) !important;
  padding-inline: 12px;
}
.pro-supplier-form label:has(> select[name="eventId"]) > select {
  background: transparent !important;
  border: 0 !important;
  color: var(--wl-primary) !important;
  font-weight: 760 !important;
}
.pro-supplier-form label:has(> select[name="eventId"]):hover,
.pro-supplier-form label:has(> select[name="eventId"]):focus-within {
  background: color-mix(in srgb, var(--wl-primary) 8%, var(--kit-surface)) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 17%, transparent) !important;
}
/* Roteiro musical: escolhas de prioridade, status e evento são ações, não campos neutros. */
.pro-modal .pro-form label:has(> select[name="priority"]),
.pro-modal .pro-form label:has(> select[name="status"]),
.pro-modal .pro-form label:has(> select[name="eventId"]) {
  background: color-mix(in srgb, var(--wl-primary) 17%, var(--kit-surface)) !important;
  border: 1.5px solid color-mix(in srgb, var(--wl-primary) 56%, var(--kit-border)) !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 12%, transparent), 0 3px 8px color-mix(in srgb, var(--wl-primary) 11%, transparent) !important;
  padding-inline: 12px;
}
.pro-modal .pro-form label:has(> select[name="priority"]) > select,
.pro-modal .pro-form label:has(> select[name="status"]) > select,
.pro-modal .pro-form label:has(> select[name="eventId"]) > select {
  background: transparent !important;
  border: 0 !important;
  color: var(--wl-primary) !important;
  font-weight: 760 !important;
}
.pro-modal .pro-form label:has(> select[name="priority"]):hover,
.pro-modal .pro-form label:has(> select[name="priority"]):focus-within,
.pro-modal .pro-form label:has(> select[name="status"]):hover,
.pro-modal .pro-form label:has(> select[name="status"]):focus-within,
.pro-modal .pro-form label:has(> select[name="eventId"]):hover,
.pro-modal .pro-form label:has(> select[name="eventId"]):focus-within {
  background: color-mix(in srgb, var(--wl-primary) 8%, var(--kit-surface)) !important;
  border-color: var(--wl-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 18%, transparent) !important;
}
/* Lista musical: leitura rápida com somente faixa, artista e ações. */
.pro-music-list--compact .pro-music-row {
  align-items: center !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  min-height: 76px;
  padding: 14px 18px !important;
}
.pro-music-list--compact .pro-music-icon {
  align-items: center;
  background: color-mix(in srgb, var(--wl-primary) 10%, var(--kit-surface));
  border-radius: 10px;
  color: var(--wl-primary);
  display: flex;
  font-size: 17px;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.pro-music-list--compact .pro-music-main { display: grid; gap: 4px; min-width: 0; }
.pro-music-list--compact .pro-music-main b { color: var(--kit-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-music-list--compact .pro-music-main small { color: var(--kit-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-music-list--compact .pro-music-actions { align-items: center; display: flex; gap: 8px; }
.pro-music-list--compact .pro-music-actions .pro-icon-button { flex: 0 0 40px; height: 40px; min-height: 40px; min-width: 40px; width: 40px; }
@media (max-width: 720px) {
  .pro-music-list--compact .pro-music-row { grid-template-columns: 34px minmax(0, 1fr) auto !important; padding: 14px !important; }
  .pro-music-list--compact .pro-music-actions { gap: 6px; }
  .pro-music-list--compact .pro-music-actions .pro-icon-button { flex-basis: 38px; height: 38px; min-height: 38px; min-width: 38px; width: 38px; }
}
/* Lançamentos: Tipo e Evento precisam se diferenciar dos campos de preenchimento. */
.pro-modal .pro-form label:has(> select[name="type"]) {
  background: color-mix(in srgb, var(--wl-primary) 15%, var(--kit-surface)) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 48%, var(--kit-border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 11%, transparent), 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
}
.pro-modal .pro-form label:has(> select[name="type"]):hover,
.pro-modal .pro-form label:has(> select[name="type"]):focus-within {
  background: color-mix(in srgb, var(--wl-primary) 7%, var(--kit-surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important;
}
/* Orçamento: formulário e escolhas financeiras ganham uma hierarquia visual clara. */
.pro-modal .pro-form:has([name="planned"]):has([name="contracted"]) {
  background: color-mix(in srgb, var(--wl-primary) 5%, var(--kit-surface)) !important;
  border-color: color-mix(in srgb, var(--wl-primary) 28%, var(--kit-border)) !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--wl-primary) 8%, transparent) !important;
}
.pro-modal .pro-form label:has(> select[name="paymentType"]),
.pro-modal .pro-form label:has(> select[name="paymentMethod"]) {
  background: color-mix(in srgb, var(--wl-primary) 15%, var(--kit-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--wl-primary) 48%, var(--kit-border)) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-primary) 11%, transparent), 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
  padding: 11px 12px !important;
}
.pro-modal .pro-form label:has(> select[name="paymentType"]):hover,
.pro-modal .pro-form label:has(> select[name="paymentType"]):focus-within,
.pro-modal .pro-form label:has(> select[name="paymentMethod"]):hover,
.pro-modal .pro-form label:has(> select[name="paymentMethod"]):focus-within {
  background: color-mix(in srgb, var(--wl-primary) 7%, var(--kit-surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 16%, transparent) !important;
}
.pro-faq-question-item { align-items:stretch; display:grid; gap:8px; grid-template-columns:32px minmax(0, 1fr); }
.pro-faq-question-item .pro-faq-question-row { background:color-mix(in srgb, var(--wl-primary) 5%, var(--kit-surface))!important; border-color:color-mix(in srgb, var(--wl-primary) 28%, var(--kit-border))!important; grid-template-columns:minmax(0, 1fr) 40px!important; }
.pro-faq-question-item .pro-faq-question-drag { align-self:center; background:color-mix(in srgb, var(--wl-primary) 9%, var(--kit-surface)); border:1px solid color-mix(in srgb, var(--wl-primary) 32%, var(--kit-border)); border-radius:9px; color:var(--wl-primary); height:40px; justify-self:center; padding:0; width:32px; }
.pro-faq-question-item .pro-faq-question-drag:hover,.pro-faq-question-item .pro-faq-question-drag:focus-visible { background:var(--wl-primary-softer); border-color:var(--wl-primary); outline:0; }
@media (max-width:480px) { .pro-faq-question-item { grid-template-columns:30px minmax(0, 1fr); } .pro-faq-question-item .pro-faq-question-drag { width:30px; } }
/* Resumo de fornecedores: texto e total nunca disputam a mesma linha no celular. */
@media (max-width:720px) {
  .pro-supplier-summary { align-items:stretch !important; flex-direction:column !important; gap:10px; }
  .pro-supplier-summary > div { min-width:0; }
  .pro-supplier-summary span { display:block; line-height:1.45!important; max-width:100%; }
  .pro-supplier-summary b { display:block; font-size:26px!important; line-height:1.1!important; overflow-wrap:anywhere; text-align:left; }
}
/* Aba, checkbox e setas: ação evidente mesmo sem hover. */
.pro-workspace-tabs button {
  border: 1px solid color-mix(in srgb, var(--wl-primary) 24%, var(--kit-border)) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wl-primary) 7%, transparent) !important;
}
.pro-workspace-tabs button.is-active { background: var(--wl-primary-softer) !important; border-color: var(--wl-primary) !important; color: var(--wl-primary) !important; }
.pro-appointment-whole { align-items:center; background:color-mix(in srgb, var(--wl-primary) 7%, var(--kit-surface)); border:1px solid color-mix(in srgb, var(--wl-primary) 30%, var(--kit-border)); border-radius:12px; cursor:pointer; display:flex!important; gap:10px!important; min-height:48px; padding:10px 12px; }
.pro-appointment-whole input[type="checkbox"] { accent-color:var(--wl-primary); cursor:pointer; height:20px; margin:0; width:20px; }
.pro-calendar-controls button { box-shadow:0 1px 3px color-mix(in srgb, var(--wl-primary) 9%, transparent) !important; }
.pro-calendar-controls button.is-active { background:var(--wl-primary-softer)!important; border-color:var(--wl-primary)!important; color:var(--wl-primary)!important; font-weight:750!important; }
.pro-calendar-controls .pro-calendar-nav svg path { fill:currentColor !important; stroke:none !important; }
/* Ícones das linhas nunca comprimem no layout mobile. */
.pro-client-actions button,.pro-guest-actions .pro-icon-button,.pro-timeline-actions .pro-icon-button { aspect-ratio:1 / 1; flex:0 0 42px!important; height:42px!important; line-height:1!important; min-width:42px!important; padding:0!important; width:42px!important; }
.pro-client-actions button::before,.pro-guest-actions .pro-icon-button::before,.pro-timeline-actions .pro-icon-button::before { flex:0 0 18px; height:18px; width:18px; }
/* Grupos: uma única ação de excluir, representada pela lixeira. */
[data-remove-group] { background:color-mix(in srgb, var(--wl-primary) 8%, var(--kit-surface))!important; border:1px solid color-mix(in srgb, var(--wl-primary) 28%, var(--kit-border))!important; border-radius:8px!important; color:var(--wl-primary)!important; height:34px!important; width:34px!important; }
[data-remove-group]::before { background:currentColor; content:''; display:block; height:16px; -webkit-mask:url("assets/ui-icons/trash.svg") center / contain no-repeat; mask:url("assets/ui-icons/trash.svg") center / contain no-repeat; width:16px; }
@media (max-width: 720px) {
  /* Lista de convidados: ações ao lado do nome, sem espaço vazio no topo. */
  .pro-guest-list .pro-guest-row { gap:8px 10px!important; padding:12px 14px!important; }
  .pro-guest-list .pro-guest-actions { align-self:start; grid-column:auto!important; grid-row:1 / span 2; justify-content:end; }
  .pro-guest-list .pro-guest-actions .pro-icon-button { flex-basis:38px!important; height:38px!important; min-width:38px!important; width:38px!important; }
  /* Cronograma: cada etapa alterna uma superfície leve e recebe uma divisória clara. */
  .pro-timeline .pro-timeline-item { border-bottom:1px solid color-mix(in srgb, var(--wl-primary) 24%, var(--kit-border))!important; border-radius:12px; margin:0 0 10px!important; padding:14px 12px!important; }
  .pro-timeline .pro-timeline-item:nth-child(even) { background:color-mix(in srgb, var(--wl-primary) 5%, var(--kit-surface))!important; }
  .pro-timeline .pro-timeline-item:last-child { border-bottom:0!important; margin-bottom:0!important; }
  /* O resumo principal do evento não deve começar com uma divisória interna. */
  .pro-event-list-row > .pro-event-name-cell {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .pro-calendar-controls > div:first-child {
    align-items: center !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 40px minmax(112px, 1fr) 40px !important;
    justify-content: center !important;
    margin-inline: auto !important;
    width: min(100%, 212px) !important;
  }
  .pro-calendar-controls > div:first-child > button {
    height: 40px !important;
    min-height: 40px !important;
  }
  .pro-calendar-controls > div:first-child > .pro-calendar-nav {
    justify-self: center;
  }

  /* Cartões de configurações: campos, upload e ações respeitam a mesma coluna útil. */
  .pro-settings-grid > .pro-profile-card,
  .pro-settings-grid > .pro-profile-card.pro-form {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .pro-profile-card.pro-form > label,
  .pro-profile-card.pro-form > .pro-help,
  .pro-profile-card.pro-form > .pro-settings-actions {
    box-sizing: border-box !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    max-width: calc(100% - 40px) !important;
    min-width: 0 !important;
    width: calc(100% - 40px) !important;
  }
  .pro-profile-card.pro-form input:not([type="file"]),
  .pro-profile-card.pro-form select,
  .pro-profile-card.pro-form textarea,
  .pro-profile-card.pro-form .pro-upload-field {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .pro-profile-card.pro-form .pro-upload-copy {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .pro-profile-card.pro-form > .pro-settings-actions {
    margin-top: 16px !important;
    padding-inline: 0 !important;
  }

  /* Preferências: cada seletor é uma superfície própria, legível no repouso. */
  #accountSettingsForm > label.pro-settings-select {
    background: color-mix(in srgb, var(--wl-primary) 5%, var(--kit-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--wl-primary) 24%, var(--kit-border)) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--wl-primary) 7%, transparent) !important;
    gap: 6px !important;
    min-height: 64px;
    padding: 11px 12px !important;
  }
  #accountSettingsForm > label.pro-settings-select select {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--wl-primary) !important;
    font-weight: 720 !important;
    min-height: 28px !important;
    padding: 0 30px 0 0 !important;
  }
  #accountSettingsForm > label.pro-settings-select:hover,
  #accountSettingsForm > label.pro-settings-select:focus-within {
    background: var(--kit-surface) !important;
    border-color: var(--wl-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 12%, transparent) !important;
  }

  /* Backup: separa o conteúdo da divisória do cabeçalho. */
  .pro-backup-settings > .pro-backup-content {
    padding-top: 16px !important;
  }

  /* Atalhos mobile: cada escolha ganha um bloco com contraste próprio. */
  .pro-mobile-shortcut-grid > label {
    background: color-mix(in srgb, var(--wl-primary) 10%, var(--kit-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--wl-primary) 32%, var(--kit-border)) !important;
    border-radius: 12px;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--wl-primary) 10%, transparent) !important;
    cursor: pointer;
    gap: 6px !important;
    padding: 11px 12px 9px;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .pro-mobile-shortcut-grid > label select {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--wl-primary) !important;
    cursor: pointer;
    font-weight: 720 !important;
    min-height: 28px !important;
    padding: 0 28px 0 0 !important;
  }
  .pro-mobile-shortcut-grid > label:hover,
  .pro-mobile-shortcut-grid > label:focus-within {
    background: var(--kit-surface) !important;
    border-color: var(--wl-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 12%, transparent) !important;
    transform: translateY(-1px);
  }

  /* Tipos de evento: divisórias evidenciam a leitura de cada linha. */
  .pro-event-types-list {
    background: transparent !important;
    border: 0 !important;
    margin: 14px 8px !important;
    padding: 0 !important;
  }
  .pro-event-types-list li,
  .pro-event-types-list li:last-child {
    border-bottom: 0 !important;
    margin: 0 !important;
    padding: 14px 10px !important;
  }
  .pro-event-types-list li:not(:last-child) {
    border-bottom: 1px solid color-mix(in srgb, var(--wl-primary) 24%, var(--kit-border)) !important;
  }

  /* Indicadores da equipe: leitura em lista, com divisória após cada dado. */
  .pro-access-summary {
    gap: 0 !important;
    margin-bottom: 20px !important;
  }
  .pro-access-summary article {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--wl-primary) 22%, var(--kit-border)) !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    padding: 15px 14px !important;
  }
  .pro-access-summary article:last-child { border-bottom: 0 !important; }

  /* Lista da equipe: uma linha completa separa cada pessoa cadastrada. */
  .pro-access-members .pro-access-member {
    border-bottom: 1px solid color-mix(in srgb, var(--wl-primary) 22%, var(--kit-border)) !important;
    padding: 16px 14px !important;
  }
  .pro-access-members .pro-access-member:last-child { border-bottom: 0 !important; }
  .pro-access-block-icon::before {
    background: currentColor;
    content: '';
    display: block;
    height: 18px;
    -webkit-mask: url("assets/ui-icons/block.svg") center / contain no-repeat;
    mask: url("assets/ui-icons/block.svg") center / contain no-repeat;
    width: 18px;
  }
  .pro-access-block-icon {
    background: color-mix(in srgb, var(--wl-primary) 9%, var(--kit-surface)) !important;
    border-color: color-mix(in srgb, var(--wl-primary) 24%, var(--kit-border)) !important;
    color: var(--wl-primary) !important;
  }
  .pro-access-reactivate-icon::before {
    content: '↺';
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }
}