/* Shared visual language for the existing application screens. */
:root {
  font-family: var(--events-fonte-corpo);
  font-size: var(--events-corpo);
  line-height: var(--events-altura-corpo);
  background: var(--neblina);
  color: var(--tinta);
  --paper: var(--neblina);
  --sheet: var(--events-branco);
  --inset: var(--neblina);
  --ink: var(--tinta);
  --secondary: var(--events-texto-suave);
  --muted: var(--events-texto-suave);
  --line: var(--events-borda-suave);
  --accent: var(--uva);
  --accent-soft: var(--neblina);
  --on-accent: var(--events-branco);
  --warning: var(--tinta);
  --warning-bg: var(--sol);
  --danger: var(--tinta);
  --danger-bg: var(--rosa);
  --success: var(--tinta);
  --success-bg: var(--ceu);
  --control: var(--events-branco);
  --hero: var(--sol);
  --focus: var(--uva);
  --radius: var(--events-raio-painel);
  --feature: var(--sol);
  --feature-ink: var(--tinta);
  --feature-muted: var(--tinta);
  --feature-accent: var(--tinta);
  --display: var(--events-fonte-titulo);
}

:root[data-theme=dark] {
  --paper: var(--tinta);
  --sheet: var(--uva);
  --inset: var(--tinta);
  --ink: var(--events-branco);
  --secondary: var(--events-branco);
  --muted: var(--events-branco);
  --line: var(--events-borda-suave);
  --accent: var(--sol);
  --accent-soft: var(--tinta);
  --on-accent: var(--tinta);
  --warning: var(--tinta);
  --warning-bg: var(--sol);
  --danger: var(--tinta);
  --danger-bg: var(--rosa);
  --success: var(--tinta);
  --success-bg: var(--ceu);
  --control: var(--tinta);
  --hero: var(--sol);
  --focus: var(--sol);
  --feature: var(--sol);
  --feature-ink: var(--tinta);
  --feature-muted: var(--tinta);
  --feature-accent: var(--tinta);
  --display: var(--events-fonte-titulo);
}

:is(.app-frame, .auth-shell, .business-page, .privacy-page) {
  font-family: var(--events-fonte-corpo);
  font-size: var(--events-corpo);
  line-height: var(--events-altura-corpo);
}

:is(.app-frame, .auth-shell, .business-page, .privacy-page) :is(h1, h2, h3) {
  font-family: var(--events-fonte-titulo);
  font-weight: var(--events-peso-titulo);
  line-height: var(--events-altura-titulo);
  letter-spacing: var(--events-espaco-titulo);
}

:is(.app-frame, .auth-shell, .business-page, .privacy-page) :is(button, a, input, select, textarea, summary):focus-visible,
dialog.modal :is(button, a, input, select, textarea, summary):focus-visible {
  outline: var(--events-borda-foco) solid var(--uva);
  outline-offset: var(--events-offset-foco);
}
.app-frame :is(.topbar, .sidebar, .site-footer) :is(button, a, summary):focus-visible,
:root[data-theme=dark] .auth-shell .auth-hero :is(button, a):focus-visible {
  outline-color: var(--sol);
}

.app-frame {
  --app-header-height: var(--events-cabecalho);
  min-width: 0;
  background: var(--neblina);
  color: var(--tinta);
}

.app-frame .topbar {
  min-height: var(--events-cabecalho);
  height: auto;
  padding-inline: var(--events-respiro-lateral);
  border: 0;
  background: var(--tinta);
  color: var(--events-branco);
}

.app-frame .brand-wordmark {
  color: var(--events-branco);
  font-family: var(--events-fonte-titulo);
  font-size: var(--events-corpo-grande);
  font-weight: var(--events-peso-titulo);
  letter-spacing: var(--events-espaco-titulo);
}

.app-frame .topbar .theme-toggle {
  min-height: var(--events-altura-toque);
  border: var(--events-borda) solid var(--events-branco);
  border-radius: var(--events-raio-botao);
  color: var(--events-branco);
  font-size: var(--events-corpo-pequeno);
}

.app-frame .topbar .theme-toggle:hover,
.app-frame .topbar .account-info:hover,
.app-frame .topbar .account-menu[open] .account-info {
  border-color: var(--sol);
  background: var(--sol);
  color: var(--tinta);
}

.app-frame .topbar .account-name,
.app-frame .topbar .account-role,
.app-frame .topbar .account-chevron { color: inherit; }
.app-frame .topbar .account-name { font-size: var(--events-corpo-pequeno); }
.app-frame .topbar .account-role { font-size: var(--events-rotulo); }
.app-frame .topbar .avatar {
  background: var(--sol);
  color: var(--tinta);
  border: 0;
}

.app-frame .account-dropdown {
  border: var(--events-borda) solid var(--tinta);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
  box-shadow: none;
}
.app-frame .account-dropdown button { color: var(--tinta); }
.app-frame .account-dropdown button:hover { background: var(--neblina); }

.app-frame .layout {
  grid-template-columns: var(--events-largura-sidebar) minmax(0, 1fr);
  background: var(--neblina);
}

.app-frame .sidebar {
  top: var(--events-cabecalho);
  height: calc(100dvh - var(--events-cabecalho));
  max-height: none;
  min-width: 0;
  padding: var(--events-espaco-6) var(--events-espaco-4);
  gap: var(--events-espaco-4);
  overflow-y: auto;
  overflow-x: hidden;
  border: 0;
  background: var(--tinta);
  color: var(--events-branco);
  scrollbar-width: thin;
}

.app-frame .sidebar .nav {
  overflow: visible;
  min-height: auto;
  gap: var(--events-espaco-1);
}

.app-frame .sidebar .nav-label {
  color: var(--events-branco);
  font-size: var(--events-rotulo);
  letter-spacing: var(--events-espaco-rotulo);
}

.app-frame .sidebar .nav button {
  min-height: var(--events-altura-toque);
  padding: var(--events-espaco-3) var(--events-espaco-4);
  border-radius: var(--events-raio-botao);
  color: var(--events-branco);
  font-size: var(--events-corpo-medio);
  font-weight: var(--events-peso-medio);
}

.app-frame .sidebar .nav button:hover { background: var(--uva); }
.app-frame .sidebar .nav button.active {
  background: var(--sol);
  color: var(--tinta);
  font-weight: var(--events-peso-forte);
}
.app-frame .sidebar .nav button.active::before { display: none; }
.app-frame .sidebar-tools {
  gap: var(--events-espaco-2);
  border-color: var(--uva);
  padding-top: var(--events-espaco-4);
}
.app-frame .sidebar-tools :is(.btn, a) {
  min-height: var(--events-altura-toque);
  justify-content: center;
  border-radius: var(--events-raio-botao);
  border-color: var(--uva);
  color: var(--events-branco);
  text-decoration: none;
}
.app-frame .sidebar-tools :is(.btn, a):hover {
  background: var(--sol);
  color: var(--tinta);
  border-color: var(--sol);
}

.app-frame .content {
  max-width: none;
  min-width: 0;
  padding: var(--events-painel-respiro);
  background: var(--neblina);
}
.app-frame .content > * { max-width: var(--events-largura-conteudo); margin-inline: auto; }
.app-frame .content > .page-head,
.app-frame .content > .toolbar { width: 100%; }
.app-frame .page-head { gap: var(--events-espaco-6); margin-bottom: var(--events-espaco-8); }
.app-frame .page-head h1 {
  font-size: var(--events-titulo-painel);
  color: var(--tinta);
}
.app-frame .page-head p { font-size: var(--events-corpo-medio); color: var(--events-texto-suave); }
.app-frame .eyebrow { color: var(--uva); font-size: var(--events-rotulo); font-weight: var(--events-peso-forte); }

.app-frame .welcome-panel {
  padding: var(--events-respiro-painel);
  border: 0;
  border-radius: var(--events-raio-painel);
  background: var(--sol);
  color: var(--tinta);
  box-shadow: none;
}
.app-frame .welcome-panel h2 {
  font-size: var(--events-titulo-painel);
  color: var(--tinta);
}
.app-frame .welcome-panel p,
.app-frame .welcome-panel .eyebrow,
.app-frame .welcome-stamp span { color: var(--tinta); }
.app-frame .welcome-stamp { border-color: var(--tinta); }

.app-frame .grid { gap: var(--events-espaco-4); }
.app-frame .card,
.app-frame .stat,
.app-frame .stat:first-child,
.app-frame .event-card {
  border: 0;
  border-radius: var(--events-raio-painel);
  background: var(--events-branco);
  color: var(--tinta);
  box-shadow: none;
}
.app-frame .card { padding: var(--events-respiro-painel); }
.app-frame .card > h2,
.app-frame .section-header h2 { font-size: var(--events-painel-subtitulo); }
.app-frame .stat,
.app-frame .stat:first-child { padding: var(--events-espaco-6); margin: 0; }
.app-frame .stat:first-child { background: var(--sol); }
.app-frame .stat:nth-child(3n) { background: var(--ceu); }
.app-frame .stat .muted { color: var(--tinta); font-size: var(--events-corpo-pequeno); }
.app-frame .stat .num,
.app-frame .stat:first-child .num {
  color: var(--tinta);
  font-family: var(--events-fonte-titulo);
  font-size: var(--events-analises-metrica);
  font-weight: var(--events-peso-titulo);
}
.app-frame .stat-link:hover { outline: var(--events-borda) solid var(--uva); }
.app-frame .stat-link { color: var(--tinta); }

.app-frame .company-public-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--events-espaco-8);
  background: white;
  color: var(--tinta);
}
.app-frame .company-public-card > div:first-child { min-width: 0; }
.app-frame .company-public-card :is(h2, p, .small, .muted) { color: var(--tinta); }
.app-frame .company-public-card .eyebrow { color: var(--uva); }
.app-frame .company-public-card input {
  display: block;
  width: 100%;
  max-width: var(--events-largura-painel);
  min-height: var(--events-altura-toque);
  padding: var(--events-espaco-3);
  border: var(--events-borda) solid var(--events-borda-suave);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
  font-size: var(--events-corpo-pequeno);
  text-overflow: ellipsis;
}
.app-frame .company-public-card .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--events-espaco-2);
  flex-wrap: wrap;
  margin: 0;
}

.app-frame .btn,
dialog.modal .btn,
.business-page .btn {
  min-height: var(--events-altura-toque);
  padding: var(--events-espaco-3) var(--events-espaco-5);
  border: var(--events-borda) solid var(--tinta);
  border-radius: var(--events-raio-botao);
  background: var(--tinta);
  color: var(--events-branco);
  font-size: var(--events-corpo-medio);
  font-weight: var(--events-peso-forte);
  box-shadow: none;
}
.app-frame .btn.sm,
dialog.modal .btn.sm { min-height: var(--events-altura-toque); font-size: var(--events-corpo-pequeno); }
.app-frame .btn.secondary,
dialog.modal .btn.secondary { border-color: var(--sol); background: var(--sol); color: var(--tinta); }
.app-frame .btn.ghost,
dialog.modal .btn.ghost { border-color: var(--tinta); background: transparent; color: var(--tinta); }
.app-frame .btn.danger,
dialog.modal .btn.danger { border-color: var(--rosa); background: var(--rosa); color: var(--tinta); }
.app-frame .content .btn:hover:not(:disabled),
dialog.modal .btn:hover:not(:disabled) { border-color: var(--uva); background: var(--uva); color: var(--events-branco); opacity: 1; transform: none; }
.app-frame .sidebar-tools .btn.ghost { border-color: var(--uva); background: transparent; color: var(--events-branco); }

.app-frame .event-list { gap: var(--events-espaco-4); }
.app-frame .event-card { overflow: hidden; transition: none; }
.app-frame .event-card:hover { transform: none; box-shadow: none; outline: var(--events-borda) solid var(--uva); }
.app-frame .event-cover {
  position: relative;
  isolation: isolate;
  align-items: flex-start;
  min-height: var(--events-imagem-card-altura);
  padding: var(--events-espaco-4);
  border: 0;
  background: var(--neblina) url('/images/events-default.svg?v=2') center / cover no-repeat;
}
.app-frame .event-cover > :not(.event-cover-image) { position: relative; z-index: 1; }
.app-frame .event-cover .date-stamp {
  min-width: var(--events-espaco-16);
  padding: var(--events-espaco-2) var(--events-espaco-3);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
}
.app-frame .event-cover-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.app-frame .date-stamp strong { color: var(--tinta); font-family: var(--events-fonte-titulo); }
.app-frame .date-stamp span { color: var(--tinta); }
.app-frame .event-body { padding: var(--events-espaco-6); }
.app-frame .event-body h3 { font-size: var(--events-corpo-grande); }
.app-frame .event-meta { font-size: var(--events-corpo-pequeno); color: var(--events-texto-suave); }
.app-frame .event-card .event-business { color: var(--events-texto-suave); }
.app-frame .event-detail-image { border-radius: var(--events-raio-imagem); }
/* The selected accent belongs to the event detail, never to the list card. */
.app-frame:has(.event-page-head) .event-page-head {
  padding: var(--events-espaco-6);
  border-top: var(--events-espaco-3) solid var(--event-accent);
  border-radius: var(--events-raio-painel);
  background: var(--events-branco);
}
.app-frame:has(.event-page-head) .event-page-head .eyebrow {
  display: inline-flex;
  padding: var(--events-espaco-2) var(--events-espaco-3);
  border-radius: var(--events-raio-botao);
  background: var(--event-accent);
  color: var(--event-accent-ink);
}
dialog.modal .event-detail-view .event-detail-image { width: auto; max-width: 100%; height: auto; max-height: var(--events-imagem-detalhe-altura); margin-inline: auto; }
dialog.modal .event-detail-view .event-detail-description {
  padding: var(--events-espaco-5);
  border-radius: var(--events-raio-campo);
  background: var(--event-accent);
  color: var(--event-accent-ink);
}

.app-frame .field label,
.app-frame .finance-filters label { color: var(--tinta); font-size: var(--events-corpo-pequeno); font-weight: var(--events-peso-forte); }
.app-frame :is(.field, .toolbar, .finance-filters) :is(input, select, textarea),
dialog.modal :is(input, select, textarea) {
  min-height: var(--events-altura-toque);
  border: var(--events-borda) solid var(--events-borda-suave);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
  font-size: var(--events-corpo-medio);
}
.app-frame :is(.field, .toolbar, .finance-filters) :is(input, select, textarea):focus-visible,
dialog.modal :is(input, select, textarea):focus-visible { border-color: var(--uva); }
.app-frame .form-grid { column-gap: var(--events-espaco-6); row-gap: var(--events-espaco-5); }
:is(.app-frame, dialog.modal) .event-appearance {
  display: grid;
  gap: var(--events-espaco-4);
  min-width: 0;
  padding: var(--events-espaco-5);
  border: 0;
  border-radius: var(--events-raio-campo);
  background: var(--neblina);
  color: var(--tinta);
}
:is(.app-frame, dialog.modal) .event-appearance h3 {
  margin: 0;
  color: var(--tinta);
  font-family: var(--events-fonte-corpo);
  font-size: var(--events-corpo);
  font-weight: var(--events-peso-forte);
  line-height: var(--events-altura-corpo);
}
:is(.app-frame, dialog.modal) .event-appearance p { margin: 0; color: var(--tinta); }
:is(.app-frame, dialog.modal) .event-color-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--events-espaco-2);
}
:is(.app-frame, dialog.modal) .event-color-option {
  display: flex;
  align-items: center;
  gap: var(--events-espaco-2);
  min-height: var(--events-altura-toque);
  padding: var(--events-espaco-2);
  border: var(--events-borda) solid var(--events-borda-suave);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
  cursor: pointer;
}
:is(.app-frame, dialog.modal) .event-color-option:has(input:checked) { border-color: var(--uva); }
:is(.app-frame, dialog.modal) .event-color-option:focus-within { outline: var(--events-borda-foco) solid var(--uva); outline-offset: var(--events-offset-foco); }
:is(.app-frame, dialog.modal) .event-color-option input[type=radio] {
  flex: none;
  width: var(--events-espaco-5);
  height: var(--events-espaco-5);
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--uva);
}
:is(.app-frame, dialog.modal) .event-color-swatch {
  flex: none;
  width: var(--events-espaco-6);
  height: var(--events-espaco-6);
  border-radius: 50%;
}
.event-color-yellow { background: var(--sol); }
.event-color-purple { background: var(--uva); }
.event-color-pink { background: var(--rosa); }
.event-color-cyan { background: var(--ceu); }
.event-color-green { background: var(--events-verde); }
.event-color-orange { background: var(--events-laranja); }
.event-color-navy { background: var(--events-azul-escuro); }
.event-color-lilac { background: var(--events-lilas); }
/* Personalizar origem: opções livres do organizador e limite do sorteio por opção. */
:is(.app-frame, dialog.modal) .event-origin { gap: var(--events-espaco-5); }
:is(.app-frame, dialog.modal) .event-origin-head { display: grid; gap: var(--events-espaco-1); }
:is(.app-frame, dialog.modal) .event-origin :is(.event-origin-question, .event-origin-options) { display: grid; gap: var(--events-espaco-2); min-width: 0; }
:is(.app-frame, dialog.modal) .event-origin-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--events-espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.app-frame, dialog.modal) .event-origin-item {
  display: inline-flex;
  align-items: center;
  gap: var(--events-espaco-1);
  max-width: 100%;
  min-height: var(--events-altura-toque);
  padding: var(--events-espaco-1) var(--events-espaco-1) var(--events-espaco-1) var(--events-espaco-4);
  border: var(--events-borda) solid var(--events-borda-suave);
  border-radius: var(--events-raio-botao);
  background: var(--events-branco);
  color: var(--tinta);
  font-size: var(--events-corpo-medio);
  font-weight: var(--events-peso-medio);
}
:is(.app-frame, dialog.modal) .event-origin-item > span { min-width: 0; overflow-wrap: anywhere; }
:is(.app-frame, dialog.modal) .event-origin-item .btn { min-height: 36px; padding-inline: var(--events-espaco-3); border-color: transparent; }
:is(.app-frame, dialog.modal) .event-origin-item .btn:hover { border-color: var(--rosa); }
:is(.app-frame, dialog.modal) .event-origin-empty { color: var(--events-texto-suave); }
:is(.app-frame, dialog.modal) .event-origin-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--events-espaco-2); align-items: center; }
:is(.app-frame, dialog.modal) .event-origin-add .btn { min-height: var(--events-altura-toque); }
:is(.app-frame, dialog.modal) .event-origin-feedback:empty { display: none; }
:is(.app-frame, dialog.modal) .event-origin-raffle {
  display: grid;
  gap: var(--events-espaco-3);
  padding-top: var(--events-espaco-5);
  border-top: var(--events-borda) solid var(--events-borda-suave);
}
:is(.app-frame, dialog.modal) .event-origin-raffle[hidden] { display: none; }
:is(.app-frame, dialog.modal) .event-origin-raffle h4 { margin: 0; font-size: var(--events-corpo-medio); font-weight: var(--events-peso-forte); }
:is(.app-frame, dialog.modal) .event-origin-raffle p { max-width: 65ch; }
:is(.app-frame, dialog.modal) .event-origin-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--events-espaco-2); }
:is(.app-frame, dialog.modal) .event-origin-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  align-items: center;
  gap: var(--events-espaco-3);
  padding: var(--events-espaco-2) var(--events-espaco-2) var(--events-espaco-2) var(--events-espaco-4);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
}
:is(.app-frame, dialog.modal) .event-origin-rule > span { overflow-wrap: anywhere; font-size: var(--events-corpo-medio); font-weight: var(--events-peso-medio); }
:is(.app-frame, dialog.modal) .event-origin-rule input { font-variant-numeric: tabular-nums; text-align: right; }
:is(.app-frame, dialog.modal) .event-origin-rule input:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 520px) {
  :is(.app-frame, dialog.modal) .event-origin-add { grid-template-columns: minmax(0, 1fr); }
}
.analytics-origin-table td:not(:first-child), .analytics-origin-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.app-frame .toolbar { gap: var(--events-espaco-3); margin-bottom: var(--events-espaco-6); }
.app-frame .actions { gap: var(--events-espaco-2); }

.app-frame .table-wrap { max-width: 100%; overflow-x: auto; }
.app-frame .table th {
  background: var(--neblina);
  color: var(--tinta);
  font-size: var(--events-tabela-rotulo);
  font-weight: var(--events-peso-forte);
}
.app-frame .table td { color: var(--tinta); font-size: var(--events-tabela-celula); }
.app-frame .table th,
.app-frame .table td { border-color: var(--events-borda-suave); }
.app-frame .table tbody tr:hover { background: var(--neblina); }
.app-frame .pagination { gap: var(--events-espaco-4); border-color: var(--events-borda-suave); }
.app-frame .pagination .btn:disabled { background: var(--neblina); border-color: var(--neblina); color: var(--events-texto-suave); }
.app-frame .empty { color: var(--events-texto-suave); font-size: var(--events-corpo-medio); }
.app-frame .table:has(.event-row-actions) th:last-child,
.app-frame .table td:has(.event-row-actions) {
  min-width: calc(var(--events-acoes-largura) + var(--events-espaco-6));
  white-space: normal;
}
.app-frame .event-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--events-espaco-2);
  width: var(--events-acoes-largura);
  max-width: 100%;
}
.app-frame .event-row-actions .btn,
.app-frame .event-row-actions .btn.sm {
  width: 100%;
  min-width: 0;
  min-height: var(--events-altura-toque);
  padding: var(--events-espaco-2) var(--events-espaco-3);
  gap: var(--events-espaco-2);
  justify-content: flex-start;
  border-radius: var(--events-raio-botao);
  font-size: var(--events-corpo-pequeno);
  line-height: var(--events-altura-corpo);
  text-align: left;
  white-space: normal;
}
.app-frame .event-row-actions .btn span { min-width: 0; }
.app-frame .event-row-actions .event-row-delete {
  border-color: var(--rosa);
  background: var(--rosa);
  color: var(--tinta);
}

.app-frame .badge {
  min-height: var(--events-espaco-6);
  padding: var(--events-espaco-1) var(--events-espaco-3);
  border-radius: var(--events-raio-botao);
  background: var(--neblina);
  color: var(--tinta);
  font-size: var(--events-rotulo);
}
.app-frame .badge.ok { background: var(--events-verde); color: var(--tinta); }
.app-frame .badge.info { background: var(--ceu); color: var(--tinta); }
.app-frame .badge.warn { background: var(--sol); color: var(--tinta); }
.app-frame .badge.bad { background: var(--events-vermelho); color: var(--tinta); }
.app-frame .notice,
.app-frame .detail-card,
.app-frame .school-group-section,
.app-frame .profile-prompt {
  border: 0;
  border-radius: var(--events-raio-aviso);
  background: var(--ceu);
  color: var(--tinta);
  padding: var(--events-espaco-5);
}
.app-frame .notice.error { background: var(--events-vermelho); color: var(--tinta); }
.app-frame .notice.success { background: var(--events-verde); color: var(--tinta); }
.app-frame .school-group-section { background: var(--neblina); }
.app-frame .school-group-section :is(p, .small) { color: var(--tinta); }
.app-frame .profile-prompt .eyebrow { color: var(--tinta); }
/* Cadastro X% preenchido: barra de progresso e campos que ainda faltam no perfil. */
.app-frame .profile-prompt-body { flex: 1; min-width: 0; }
.app-frame .profile-progress { display: block; width: 100%; max-width: 420px; height: 10px; margin: var(--events-espaco-2) 0 var(--events-espaco-3); border: 0; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 14%, transparent); accent-color: var(--accent); overflow: hidden; }
.app-frame .profile-progress::-webkit-progress-bar { background: color-mix(in srgb, var(--tinta) 14%, transparent); border-radius: 999px; }
.app-frame .profile-progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.app-frame .profile-progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
/* No tema escuro o aviso continua claro; a barra mantém o roxo forte para ter contraste. */
:root[data-theme="dark"] .app-frame .profile-progress { accent-color: var(--uva); }
:root[data-theme="dark"] .app-frame .profile-progress::-webkit-progress-value { background: var(--uva); }
:root[data-theme="dark"] .app-frame .profile-progress::-moz-progress-bar { background: var(--uva); }
.app-frame .profile-field-missing :is(input:not([type="hidden"]), select) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.app-frame .profile-appearance { display:flex;align-items:center;justify-content:space-between;gap:var(--events-espaco-6);margin-top:var(--events-espaco-6); }
.app-frame .profile-appearance h2 { margin:var(--events-espaco-1) 0 var(--events-espaco-2); }
.app-frame .profile-appearance p { margin:0; }
.app-frame .profile-appearance .theme-toggle { flex:none;min-height:var(--events-altura-toque);padding:var(--events-espaco-3) var(--events-espaco-5);border:var(--events-borda) solid var(--tinta);border-radius:var(--events-raio-botao);background:var(--sol);color:var(--tinta);font-size:var(--events-corpo-pequeno);font-weight:var(--events-peso-forte); }
.app-frame .profile-appearance .theme-toggle:hover { border-color:var(--uva);background:var(--uva);color:var(--events-branco); }
:root[data-theme=dark] .app-frame .profile-appearance .theme-toggle { border-color:var(--sol);background:var(--sol);color:var(--tinta); }
:root[data-theme=dark] .app-frame .profile-appearance .theme-toggle:hover { border-color:var(--neblina);background:var(--neblina);color:var(--tinta); }
@media(max-width:600px) { .app-frame .profile-appearance { align-items:stretch;flex-direction:column; } .app-frame .profile-appearance .theme-toggle { width:100%; } }

dialog.modal {
  border: 0;
  border-radius: var(--events-raio-painel);
  background: var(--events-branco);
  color: var(--tinta);
  box-shadow: none;
}
dialog.modal :is(h2, h3) { font-family: var(--events-fonte-titulo); font-weight: var(--events-peso-titulo); }
.toast { border: 0; border-radius: var(--events-raio-aviso); background: var(--tinta); color: var(--events-branco); }
.toast.error { background: var(--rosa); color: var(--tinta); }

.app-frame .finance-hero {
  gap: var(--events-espaco-6);
  padding: var(--events-respiro-painel);
  border-radius: var(--events-raio-painel);
  background: var(--sol);
  color: var(--tinta);
}
.app-frame .finance-hero strong { font-family: var(--events-fonte-titulo); font-weight: var(--events-peso-titulo); }
.app-frame .finance-hero :is(.eyebrow, span:last-child) { color: var(--tinta); }
.app-frame .finance-metric {
  border: 0;
  border-radius: var(--events-raio-painel);
  background: var(--events-branco);
  color: var(--tinta);
}
.app-frame .finance-metric:nth-child(3n+2) { background: var(--ceu); }
.app-frame .finance-metric strong { font-family: var(--events-fonte-titulo); }
.app-frame .finance-track { border-radius: var(--events-raio-botao); background: var(--neblina); }
.app-frame .finance-track span { background: red; border-radius: var(--events-raio-botao); }
.app-frame .finance-track span.receita { background: green; }

.app-frame .raffle-result-code {
  border-radius: var(--events-raio-campo);
  background: var(--sol);
  color: var(--tinta);
  font-weight: var(--events-peso-forte);
}

.app-frame .site-footer,
.privacy-page + .site-footer {
  min-height: var(--events-espaco-16);
  padding: var(--events-espaco-4) var(--events-respiro-lateral);
  border: 0;
  background: var(--uva);
  color: var(--events-branco);
  font-size: var(--events-corpo-pequeno);
}
.app-frame .site-footer :is(a, span),
.privacy-page + .site-footer :is(a, span) { color: var(--events-branco); font-size: var(--events-corpo-pequeno); }
.app-frame .site-footer a[href*="orbtexbrasil"],
.privacy-page + .site-footer a[href*="orbtexbrasil"] {
  color: var(--events-branco);
  text-decoration: underline;
  text-underline-offset: var(--events-espaco-1);
}

/* Registration, recovery and account selection share the same entry layout. */
.auth-shell:not(:has(#forgotPassword)) { background: var(--neblina); color: var(--tinta); }
.auth-shell:not(:has(#forgotPassword)) .auth-hero { border: 0; background: var(--sol); color: var(--tinta); }
.auth-shell:not(:has(#forgotPassword)) .auth-story h1 { color: var(--tinta); font-size: var(--events-login-titulo); }
.auth-shell:not(:has(#forgotPassword)) .auth-story h1 em { color: var(--tinta); }
.auth-shell:not(:has(#forgotPassword)) .auth-story p,
.auth-shell:not(:has(#forgotPassword)) .auth-foot { color: var(--tinta); }
.auth-shell:not(:has(#forgotPassword)) .admission-ticket {
  border: 0;
  border-radius: var(--events-raio-painel);
  background: var(--uva);
  color: var(--events-branco);
  box-shadow: none;
}
.auth-shell:not(:has(#forgotPassword)) .admission-ticket :is(.eyebrow, .ticket-caption, strong) { color: var(--events-branco); }
.auth-shell:not(:has(#forgotPassword)) .ticket-stub { background: var(--rosa); color: var(--tinta); }
.auth-shell:not(:has(#forgotPassword)) .auth-side { background: var(--neblina); }
.auth-shell:not(:has(#forgotPassword)) .auth-card {
  max-width: var(--events-largura-painel);
  padding: var(--events-respiro-painel);
  border: 0;
  border-radius: var(--events-raio-painel);
  background: var(--events-branco);
  color: var(--tinta);
  box-shadow: none;
}
.auth-shell:not(:has(#forgotPassword)) .auth-card h2 { font-size: var(--events-login-subtitulo); color: var(--tinta); }
.auth-shell:not(:has(#forgotPassword)) .auth-card .field label { color: var(--tinta); font-size: var(--events-corpo-pequeno); }
.auth-shell:not(:has(#forgotPassword)) .auth-card .field input {
  min-height: var(--events-altura-toque);
  border: var(--events-borda) solid var(--events-borda-suave);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
}
.auth-shell:not(:has(#forgotPassword)) .auth-card .btn,
.auth-shell:not(:has(#forgotPassword)) .auth-side .btn {
  min-height: var(--events-altura-toque);
  border-radius: var(--events-raio-botao);
  background: var(--tinta);
  color: var(--events-branco);
}
.auth-shell:not(:has(#forgotPassword)) .role-tabs { border-radius: var(--events-raio-botao); background: var(--neblina); box-shadow: none; }
.auth-shell:not(:has(#forgotPassword)) .role-tabs button { min-height: var(--events-altura-toque); border-radius: var(--events-raio-botao); }
.auth-shell:not(:has(#forgotPassword)) .role-tabs button.active { background: var(--sol); color: var(--tinta); box-shadow: none; }
.auth-shell.auth-register .auth-hero { justify-content: flex-start; }
.auth-shell.auth-register .auth-story { margin-top: var(--events-espaco-8); }
.auth-shell.auth-register .admission-ticket {
  width: 100%;
  max-width: var(--events-cadastro-cartaz-largura);
  min-height: var(--events-cadastro-cartaz-altura);
  grid-template-columns: minmax(0, 1fr) var(--events-cadastro-cartaz-selo);
  margin-top: var(--events-espaco-6);
}
.auth-shell.auth-register .admission-ticket > div:first-child { align-content: center; }
.auth-shell.auth-register .admission-ticket strong { font-size: var(--events-login-subtitulo); }
.auth-shell.auth-register .ticket-stub .icon { width: var(--events-espaco-12); height: var(--events-espaco-12); }
.auth-shell.auth-register .auth-foot { margin-top: auto; }
.auth-shell.auth-register .auth-card { color-scheme: light; }
.auth-shell.auth-register .auth-card .form-grid { align-items: start; }
.auth-shell.auth-register .auth-card .field { align-content: start; }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-progress,
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-stage,
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-navigation { grid-column: 1 / -1; min-width: 0; }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-progress { display: grid; gap: var(--events-espaco-3); color: var(--tinta); font-size: var(--events-corpo-pequeno); font-weight: var(--events-peso-forte); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) progress { display: block; width: 100%; height: var(--events-espaco-2); border: 0; border-radius: var(--events-raio-botao); overflow: hidden; accent-color: var(--uva); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) progress::-webkit-progress-bar { background: var(--neblina); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) progress::-webkit-progress-value { background: var(--uva); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) progress::-moz-progress-bar { background: var(--uva); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--events-espaco-5) var(--events-espaco-4); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-stage-title,
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-stage-copy { grid-column: 1 / -1; margin: 0; }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) #authFeedback { grid-column: 1 / -1; }
/* No login a mensagem fica dentro do formulário, logo acima do botão, e ocupa a largura toda. */
.auth-shell form #authFeedback { grid-column: 1 / -1; }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .privacy-inline { grid-column: 1 / -1; margin: 0; color: var(--events-texto-suave); font-size: var(--events-corpo-pequeno); line-height: var(--events-altura-corpo); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .privacy-inline a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) #authFeedback:empty { display: none; }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-stage-title { color: var(--tinta); font-family: var(--events-fonte-titulo); font-size: var(--events-painel-subtitulo); line-height: var(--events-altura-titulo); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-stage-copy { color: var(--events-texto-suave); font-size: var(--events-corpo-pequeno); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-navigation { display: flex; gap: var(--events-espaco-3); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-navigation .btn { min-height: var(--events-altura-toque); }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-navigation #registrationNext { flex: 1; }
.auth-shell.auth-register :is(.participant-registration, .organizer-registration) [hidden] { display: none !important; }
.auth-shell.auth-register .auth-card .field :is(input, select) {
  min-height: var(--events-altura-botao);
  padding: var(--events-espaco-3) var(--events-espaco-4);
  border: var(--events-borda) solid var(--events-borda-suave);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
}
.auth-shell.auth-register .role-tabs {
  gap: var(--events-espaco-2);
  padding: var(--events-espaco-2);
  border-radius: var(--events-raio-painel);
}
.auth-shell.auth-register .role-tabs button {
  min-height: var(--events-altura-botao);
  border: var(--events-borda) solid var(--events-borda-suave);
  border-radius: var(--events-raio-botao);
  background: var(--events-branco);
  color: var(--tinta);
  font-size: var(--events-corpo-pequeno);
  font-weight: var(--events-peso-forte);
  line-height: var(--events-altura-corpo);
}
.auth-shell.auth-register .role-tabs button:hover:not(.active) { background: var(--ceu); color: var(--tinta); }
.auth-shell.auth-register .role-tabs button.active { border-color: var(--sol); background: var(--sol); color: var(--tinta); }
.auth-shell.auth-register .auth-registration-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--events-espaco-1) var(--events-espaco-2);
  margin: 0 0 var(--events-espaco-5);
  color: var(--events-texto-suave);
  font-size: var(--events-corpo-pequeno);
}
.auth-shell.auth-register .auth-registration-switch a {
  color: var(--uva);
  font-weight: var(--events-peso-forte);
  text-decoration: underline;
  text-underline-offset: var(--events-espaco-1);
}
.auth-shell.auth-register .auth-switch {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--events-espaco-1);
  margin-top: var(--events-espaco-6);
  text-align: center;
}
.auth-shell.auth-register .auth-switch a {
  color: var(--uva);
  font-weight: var(--events-peso-forte);
  text-decoration: underline;
  text-underline-offset: var(--events-espaco-1);
}
.auth-shell.auth-register :is(a, button, input, select):focus-visible {
  outline: var(--events-borda-foco) solid var(--uva);
  outline-offset: var(--events-offset-foco);
}

/* Public organizer page and the privacy document use the same palette. */
.business-page { padding-inline: var(--events-respiro-lateral); background: var(--neblina); color: var(--tinta); }
.business-page .invite-topbar { max-width: var(--events-largura-conteudo); background: var(--sol); }
.business-page-hero,
.business-page-list,
.business-page-pagination,
.business-page .invite-footer { max-width: var(--events-largura-conteudo); }
.business-page-hero { border: 0; }
.business-page-hero h1 { color: var(--tinta); font-size: var(--events-titulo); }
.business-page-hero p { color: var(--tinta); font-size: var(--events-corpo); }
.business-page-hero img,
.business-page-monogram { border: 0; border-radius: var(--events-raio-painel); background: var(--ceu); color: var(--tinta); }
.business-list-heading h2 { font-size: var(--events-titulo-painel); }
.business-event-card { border: 0; border-radius: var(--events-raio-painel); background: var(--events-branco); color: var(--tinta); }
.business-event-card h2 { font-size: var(--events-painel-subtitulo); }
.business-event-card p,
.business-event-foot { color: var(--events-texto-suave); }
.business-event-image { border-radius: var(--events-raio-imagem); }
.business-page .btn { border-color: var(--tinta); }
.business-page .invite-footer { color: var(--tinta); }

.privacy-header {
  max-width: var(--events-largura-conteudo);
  padding: var(--events-espaco-5) var(--events-respiro-lateral);
  border: 0;
  background: var(--sol);
  color: var(--tinta);
}
.privacy-header .brand-wordmark { font-family: var(--events-fonte-titulo); font-weight: var(--events-peso-titulo); }
.privacy-page { max-width: var(--events-largura-conteudo); color: var(--tinta); }
.privacy-page .privacy-document {
  padding: var(--events-respiro-painel);
  border-radius: var(--events-raio-painel);
  background: var(--events-branco);
  color: var(--tinta);
}
.privacy-page .privacy-document :is(h1, h2, h3) { color: var(--tinta); }
.privacy-page .privacy-document h1 { font-size: var(--events-titulo-painel); }
.privacy-page .privacy-document h2 { font-size: var(--events-painel-subtitulo); border-color: var(--events-borda-suave); }
.privacy-draft { border-radius: var(--events-raio-aviso); background: var(--sol); color: var(--tinta); }
.privacy-page a,
.privacy-header > a:last-child { color: var(--uva); }

/* The seven group measures need room to breathe at desktop and become cards on narrow screens. */
.app-frame:has(.event-page-head) .layout,
.app-frame:has(.analytics-page) .layout { grid-template-columns: var(--events-largura-sidebar) minmax(0, 1fr); }
.app-frame:has(.event-page-head) .content > .event-share {
  width: 100%;
  max-width: var(--events-largura-conteudo);
  margin: var(--events-espaco-6) auto;
}
.app-frame:has(.event-page-head) .content .card.reception-form {
  background: var(--events-branco);
  color: var(--tinta);
}
.app-frame:has(.event-page-head) .content .card:has(#groupSummary) { background: var(--ceu); color: var(--tinta); }
.app-frame:has(.event-page-head) .content .card:has(#groupSummary) .eyebrow { color: var(--tinta); }
.app-frame:has(.event-page-head) #groupSummary .table-wrap { overflow-x: visible; }
.app-frame:has(.event-page-head) #groupSummary .table { width: 100%; min-width: 0; table-layout: fixed; }
.app-frame:has(.event-page-head) #groupSummary .table :is(th, td) {
  min-width: 0;
  padding: var(--events-espaco-3) var(--events-espaco-2);
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.app-frame:has(.event-page-head) #groupSummary .table th { line-height: var(--events-altura-corpo); }
.app-frame:has(.event-page-head) #groupSummary .table th:first-child,
.app-frame:has(.event-page-head) #groupSummary .table td:first-child { width: 22%; }
.app-frame:has(.event-page-head) #groupSummary .table td:not(:first-child) { font-variant-numeric: tabular-nums; }

:root:not([data-theme=dark]) .app-frame .topbar,
:root:not([data-theme=dark]) .app-frame .sidebar {
  background: var(--events-branco);
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .brand-wordmark,
:root:not([data-theme=dark]) .app-frame .topbar :is(.account-name, .account-role, .account-chevron),
:root:not([data-theme=dark]) .app-frame .sidebar .nav-label,
:root:not([data-theme=dark]) .app-frame .sidebar .nav button { color: var(--tinta); }
:root:not([data-theme=dark]) .app-frame .topbar .theme-toggle {
  border-color: var(--tinta);
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .topbar .theme-toggle:hover,
:root:not([data-theme=dark]) .app-frame .topbar .account-info:hover,
:root:not([data-theme=dark]) .app-frame .topbar .account-menu[open] .account-info {
  border-color: var(--uva);
  background: var(--neblina);
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .sidebar .nav button:hover { background: var(--neblina); }
:root:not([data-theme=dark]) .app-frame .sidebar .nav button.active {
  background: var(--sol);
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .content .btn:not(.secondary):not(.ghost):not(.danger),
:root:not([data-theme=dark]) dialog.modal .btn:not(.secondary):not(.ghost):not(.danger) {
  border-color: var(--sol);
  background: var(--sol);
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .content .btn.secondary,
:root:not([data-theme=dark]) dialog.modal .btn.secondary {
  border-color: var(--tinta);
  background: var(--events-branco);
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .content .btn:not(.secondary):not(.ghost):not(.danger):hover:not(:disabled),
:root:not([data-theme=dark]) dialog.modal .btn:not(.secondary):not(.ghost):not(.danger):hover:not(:disabled) {
  border-color: var(--uva);
  background: var(--uva);
  color: var(--events-branco);
}
:root:not([data-theme=dark]) .app-frame .content .btn.secondary:hover:not(:disabled),
:root:not([data-theme=dark]) dialog.modal .btn.secondary:hover:not(:disabled) {
  border-color: var(--tinta);
  background: var(--neblina);
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .sidebar-tools :is(.btn, a) {
  border-color: var(--uva);
  background: transparent;
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .sidebar-tools :is(.btn, a):hover {
  border-color: var(--sol);
  background: var(--sol);
  color: var(--tinta);
}
:root:not([data-theme=dark]) .app-frame .menu-button { border-color: var(--tinta); color: var(--tinta); }
:root:not([data-theme=dark]) .app-frame:has(.analytics-page) .analytics-metric {
  border:none;
}

:root[data-theme=dark] .app-frame,
:root[data-theme=dark] .app-frame .layout,
:root[data-theme=dark] .app-frame .content { background: var(--tinta); color: var(--events-branco); }
:root[data-theme=dark] .app-frame .page-head h1,
:root[data-theme=dark] .app-frame .page-head p { color: var(--events-branco); }
:root[data-theme=dark] .app-frame .card,
:root[data-theme=dark] .app-frame .event-card,
:root[data-theme=dark] .app-frame .stat,
:root[data-theme=dark] .app-frame .stat:first-child,
:root[data-theme=dark] .app-frame .finance-metric { background: var(--neblina); color: var(--tinta); }
:root[data-theme=dark] .app-frame .stat:first-child { background: var(--sol); }
:root[data-theme=dark] .app-frame .stat:nth-child(3n) { background: var(--ceu); }
:root[data-theme=dark] .app-frame .eyebrow { color: var(--sol); }
:root[data-theme=dark] .app-frame .card .eyebrow { color: var(--uva); }
:root[data-theme=dark] .app-frame:has(.event-page-head) .content .reception-form .eyebrow { color: var(--events-branco); }
:root[data-theme=dark] .app-frame .content .btn.ghost { border-color: var(--events-branco); color: var(--events-branco); }
:root[data-theme=dark] .app-frame .card .btn.ghost { border-color: var(--tinta); color: var(--tinta); }
:root[data-theme=dark] .app-frame .content > .page-head > .btn:not(.secondary):not(.ghost) {
  border-color: var(--sol);
  background: var(--sol);
  color: var(--tinta);
}
:root[data-theme=dark] .app-frame:not(:has(.event-page-head)):not(:has(.analytics-page)) .card :is(p, .muted, .small, label),
:root[data-theme=dark] .app-frame .finance-metric :is(span, small) { color: var(--tinta); }
:root[data-theme=dark] .app-frame .content .empty { color: var(--events-branco); }
:root[data-theme=dark] .app-frame .card .empty { color: var(--tinta); }
:root[data-theme=dark] .app-frame .content .event-row-actions .btn.ghost {
  border-color: var(--neblina);
  background: var(--neblina);
  color: var(--tinta);
}
:root[data-theme=dark] .app-frame .content .event-row-actions .event-row-delete {
  border-color: var(--events-vermelho);
  background: var(--events-vermelho);
  color: var(--tinta);
}
:root[data-theme=dark] .app-frame .content .event-row-actions .btn.ghost:hover:not(:disabled) {
  border-color: var(--sol);
  background: var(--sol);
  color: var(--tinta);
}
:root[data-theme=dark] .app-frame .content .event-row-actions .event-row-delete:hover:not(:disabled) {
  border-color: var(--events-branco);
  background: var(--events-branco);
  color: var(--tinta);
}
:root[data-theme=dark] .app-frame .sidebar,
:root[data-theme=dark] .app-frame .topbar { background: var(--tinta); }
:root[data-theme=dark] .app-frame:has(.event-page-head) .content .card:not(.reception-form):not(:has(#groupSummary)),
:root[data-theme=dark] .app-frame:has(.event-page-head) .event-share,
:root[data-theme=dark] .app-frame:has(.analytics-page) .analytics-panel {
  background: var(--events-superficie-escura);
  color: var(--events-branco);
}
:root[data-theme=dark] .app-frame:has(.event-page-head) .content .card:not(.reception-form):not(:has(#groupSummary)) :is(.eyebrow, .empty) {
  color: var(--events-branco);
}
:root[data-theme=dark] .app-frame:has(.event-page-head) .content .reception-form :is(h2, p, .muted, .eyebrow) {
  color: var(--events-branco);
}
:root[data-theme=dark] .app-frame:has(.analytics-page) .analytics-panel :is(.analytics-age-footer span, .analytics-more summary, .analytics-empty, .review-comments .empty) {
  color: var(--events-branco);
}
:root[data-theme=dark] .app-frame:has(.analytics-page) .analytics-panel .analytics-empty,
:root[data-theme=dark] .app-frame:has(.analytics-page) .analytics-panel .table th {
  background: var(--tinta);
  color: var(--events-branco);
}
:root[data-theme=dark] .app-frame:has(.analytics-page) .analytics-panel .table td {
  color: var(--events-branco);
}
:root[data-theme=dark] .auth-shell:not(:has(#forgotPassword)) { background: var(--tinta); }
:root[data-theme=dark] .auth-shell:not(:has(#forgotPassword)) .auth-hero { background: var(--tinta); color: var(--events-branco); }
:root[data-theme=dark] .auth-shell:not(:has(#forgotPassword)) .auth-story :is(h1, h1 em, p),
:root[data-theme=dark] .auth-shell:not(:has(#forgotPassword)) .auth-foot { color: var(--events-branco); }
:root[data-theme=dark] .auth-shell:not(:has(#forgotPassword)) .auth-side { background: var(--uva); }
:root[data-theme=dark] .auth-shell:not(:has(#forgotPassword)) .auth-top,
:root[data-theme=dark] .auth-shell:not(:has(#forgotPassword)) .auth-bottom { color: var(--events-branco); }
:root[data-theme=dark] .auth-shell.auth-register .auth-card {
  background: var(--events-superficie-escura);
  color: var(--events-branco);
  color-scheme: dark;
}
:root[data-theme=dark] .auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-progress { color: var(--events-branco); }
:root[data-theme=dark] .auth-shell.auth-register .auth-card :is(h2, p, .muted, .field label) { color: var(--events-branco); }
:root[data-theme=dark] .auth-shell.auth-register .auth-card .eyebrow { color: var(--sol); }
:root[data-theme=dark] .auth-shell.auth-register .auth-card .field :is(input, select) {
  border-color: var(--events-borda-suave);
  background: var(--tinta);
  color: var(--events-branco);
}
:root[data-theme=dark] .auth-shell.auth-register .auth-card .field input::placeholder { color: var(--events-borda-suave); }
:root[data-theme=dark] .auth-shell.auth-register .role-tabs { background: var(--tinta); }
:root[data-theme=dark] .auth-shell.auth-register .role-tabs button {
  border-color: var(--events-borda-suave);
  background: var(--events-superficie-escura);
  color: var(--events-branco);
}
:root[data-theme=dark] .auth-shell.auth-register .role-tabs button:hover:not(.active) { background: var(--uva); color: var(--events-branco); }
:root[data-theme=dark] .auth-shell.auth-register .role-tabs button.active { border-color: var(--sol); background: var(--sol); color: var(--tinta); }
:root[data-theme=dark] .auth-shell.auth-register .auth-card .auth-submit { background: var(--sol); color: var(--tinta); }
:root[data-theme=dark] .auth-shell.auth-register .auth-card .auth-submit:hover:not(:disabled) { background: var(--neblina); color: var(--tinta); }
:root[data-theme=dark] .auth-shell.auth-register .auth-registration-switch,
:root[data-theme=dark] .auth-shell.auth-register .auth-card .auth-switch { color: var(--events-branco); }
:root[data-theme=dark] .auth-shell.auth-register .auth-registration-switch a,
:root[data-theme=dark] .auth-shell.auth-register .auth-card .auth-switch a { color: var(--sol); }
:root[data-theme=dark] .auth-shell.auth-register :is(a, button, input, select):focus-visible { outline-color: var(--sol); }
:root[data-theme=dark] .business-page { background: var(--tinta); color: var(--events-branco); }
:root[data-theme=dark] .business-page-hero :is(h1, p),
:root[data-theme=dark] .business-list-heading h2 { color: var(--events-branco); }
:root[data-theme=dark] .business-event-card { background: var(--neblina); color: var(--tinta); }
:root[data-theme=dark] .business-event-card :is(p, .business-event-foot) { color: var(--events-texto-suave); }
:root[data-theme=dark] .business-page .invite-footer { color: var(--events-branco); }

@media (max-width: 1100px) {
  .app-frame .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-frame .content { padding: var(--events-espaco-6); }
}

@media (max-width: 900px) {
  .app-frame .company-public-card { grid-template-columns: minmax(0, 1fr); }
  .app-frame .company-public-card .actions { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .app-frame:has(.event-page-head) #groupSummary .table,
  .app-frame:has(.event-page-head) #groupSummary .table tbody { display: block; }
  .app-frame:has(.event-page-head) #groupSummary .table thead {
    position: absolute;
    width: var(--events-espaco-1);
    height: var(--events-espaco-1);
    overflow: hidden;
    clip-path: inset(50%);
  }
  .app-frame:has(.event-page-head) #groupSummary .table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--events-espaco-2);
    padding: var(--events-espaco-4);
    margin-bottom: var(--events-espaco-3);
    border: var(--events-borda) solid var(--events-borda-suave);
    border-radius: var(--events-raio-campo);
    background: var(--neblina);
  }
  .app-frame:has(.event-page-head) #groupSummary .table td,
  .app-frame:has(.event-page-head) #groupSummary .table td:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: auto;
    width: auto;
    gap: var(--events-espaco-1);
    border: 0;
    padding: var(--events-espaco-2);
  }
  .app-frame:has(.event-page-head) #groupSummary .table td:first-child {
    grid-column: 1 / -1;
    width: auto;
    font-size: var(--events-corpo-medio);
  }
  :root[data-theme=dark] .app-frame:has(.event-page-head) #groupSummary .table td { color: var(--tinta); }
  .app-frame:has(.event-page-head) #groupSummary .table td::before,
  .app-frame:has(.event-page-head) #groupSummary .table td:last-child::before {
    content: attr(data-label);
    width: auto;
    color: var(--events-texto-suave);
    font-size: var(--events-tabela-rotulo);
    font-weight: var(--events-peso-forte);
  }
}

@media (max-width: 800px) {
  .app-frame .layout { grid-template-columns: minmax(0, 1fr); }
  .app-frame:has(.event-page-head) .layout,
  .app-frame:has(.analytics-page) .layout { grid-template-columns: minmax(0, 1fr); }
  .app-frame .sidebar { position: static; display: none; height: auto; max-height: none; padding: var(--events-espaco-5); }
  .app-frame .sidebar.open { display: flex; }
  .app-frame .sidebar .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-frame .sidebar-tools { margin-top: var(--events-espaco-4); flex-wrap: wrap; }
  .app-frame .menu-button { display: inline-flex; border-color: var(--events-branco); color: var(--events-branco); }
  .app-frame .content { padding: var(--events-espaco-6); }
  .app-frame .stat { grid-column: span 6; }
  .app-frame .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .auth-shell.auth-register .auth-card .form-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-shell.auth-register :is(.participant-registration, .organizer-registration) .registration-stage { grid-template-columns: minmax(0, 1fr); }
  :is(.app-frame, dialog.modal) .event-color-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-frame .topbar { padding-inline: var(--events-espaco-4); }
  .app-frame .content { padding: var(--events-espaco-4); }
  .app-frame .page-head { align-items: flex-start; flex-wrap: wrap; }
  .app-frame .page-head > .btn { min-height: var(--events-altura-toque); }
  .app-frame .event-list { grid-template-columns: minmax(0, 1fr); }
  .app-frame .card { padding: var(--events-espaco-5); }
  .app-frame .pagination { flex-wrap: wrap; }
  .app-frame .pagination .pager-controls { flex-wrap: wrap; }
  .app-frame:has(.event-page-head) #groupSummary .table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-frame .site-footer { align-items: flex-start; flex-direction: column; }
  .auth-shell:not(:has(#forgotPassword)) .auth-hero { display: none; }
  .auth-shell:not(:has(#forgotPassword)) .auth-side { padding: var(--events-espaco-4); }
  .business-page { padding-inline: var(--events-espaco-4); }
  .business-page-list { grid-template-columns: minmax(0, 1fr); }
  .business-page-hero { flex-direction: column; align-items: flex-start; }
  .privacy-page { padding-inline: var(--events-espaco-4); }
  .privacy-page .privacy-document { padding: var(--events-espaco-5); }
}

@media (max-width: 390px) {
  .app-frame .sidebar .nav { grid-template-columns: minmax(0, 1fr); }
  .app-frame .stat { grid-column: span 12; }
  .app-frame .page-head h1 { font-size: var(--events-titulo-movel); }
  .app-frame:has(.event-page-head) #groupSummary .table tr { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .app-frame :is(.btn, .event-card, .nav button),
  .auth-shell :is(.btn, button) { transition: none; animation: none; }
}


/* Mobile fix: constrain event action table to viewport */
@media (max-width: 600px) {
  .app-frame .table:has(.event-row-actions) {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .app-frame .table:has(.event-row-actions) th:last-child,
  .app-frame .table td:has(.event-row-actions) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .app-frame .table td:has(.event-row-actions) {
    align-items: stretch;
  }

  .app-frame .event-row-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-frame .event-row-actions .btn,
  .app-frame .event-row-actions .btn.sm {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: 8px;
    gap: 6px;
  }

  .app-frame .event-row-actions .btn span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}


/* Raffle manager: clearer workflow and form hierarchy */
#eventRaffle {
  display: grid;
  gap: var(--events-espaco-6);
  min-width: 0;
}
#eventRaffle .raffle-page-head { margin: 0; }
#eventRaffle .raffle-page-head h2 {
  margin: var(--events-espaco-1) 0 var(--events-espaco-2);
  font-family: var(--events-fonte-titulo);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--tinta);
}
#eventRaffle .raffle-page-head p,
#eventRaffle .raffle-panel-heading p {
  margin: 0;
  color: var(--events-texto-suave);
  font-size: var(--events-corpo-pequeno);
  line-height: 1.6;
}
#eventRaffle .raffle-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--events-espaco-3);
}
#eventRaffle .raffle-overview-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--events-espaco-2);
  padding: var(--events-espaco-4);
  border: 1px solid var(--events-borda-suave);
  border-radius: var(--events-raio-painel);
  background: var(--neblina);
}
#eventRaffle .raffle-overview-label {
  color: black;
  font-size: var(--events-corpo-pequeno);
  line-height: 1.4;
}
#eventRaffle .raffle-overview-item > strong {
  color: var(--tinta);
  font-family: var(--events-fonte-titulo);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#eventRaffle .raffle-overview-item > small {
  color: black;
  font-size: 12px;
  line-height: 1.5;
}
#eventRaffle .raffle-overview-item .raffle-overview-status {
  font-size: var(--events-corpo-medio);
}
#eventRaffle .raffle-overview-status.is-complete { color: var(--events-status-verde-texto); }
#eventRaffle .raffle-overview-status.is-pending { color: var(--events-status-amarelo-texto); }
#eventRaffle .raffle-manager {
  display: grid;
  gap: var(--events-espaco-5);
  margin: 0;
  min-width: 0;
}
#eventRaffle .raffle-panel {
  min-width: 0;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--events-borda-suave);
  border-radius: var(--events-raio-painel);
  background: var(--events-branco);
}
#eventRaffle .raffle-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--events-espaco-4);
  margin-bottom: var(--events-espaco-5);
}
#eventRaffle .raffle-panel-heading { min-width: 0; }
#eventRaffle .raffle-step-label {
  display: block;
  margin-bottom: var(--events-espaco-2);
  color: var(--uva);
  font-size: var(--events-rotulo);
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.4;
}
#eventRaffle .raffle-panel-heading h3 {
  margin: 0 0 var(--events-espaco-2);
  color: var(--tinta);
  font-family: var(--events-fonte-titulo);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.3;
}
#eventRaffle .raffle-status-pill,
#eventRaffle .raffle-count-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--neblina);
  color: var(--tinta);
  font-size: var(--events-rotulo);
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
}
#eventRaffle .raffle-status-pill.is-complete {
  background: var(--events-status-verde-fundo);
  color: var(--events-status-verde-texto);
}
#eventRaffle .raffle-status-pill.is-pending {
  background: var(--events-status-amarelo-fundo);
  color: var(--events-status-amarelo-texto);
}
#eventRaffle .raffle-current-rules {
  display: flex;
  align-items: center;
  gap: var(--events-espaco-3);
  min-width: 0;
  margin: 0 0 var(--events-espaco-5);
  padding: var(--events-espaco-3);
  border: 1px solid var(--events-borda-suave);
  border-radius: var(--events-raio-campo);
  background: var(--neblina);
  color: var(--tinta);
  text-decoration: none;
}
#eventRaffle .raffle-file-mark {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  min-height: 46px;
  border-radius: 10px;
  background: var(--uva);
  color: var(--events-branco);
  font-size: var(--events-rotulo);
  font-weight: 800;
}
#eventRaffle .raffle-current-rules > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}
#eventRaffle .raffle-current-rules strong { font-size: var(--events-corpo-pequeno); }
#eventRaffle .raffle-current-rules small {
  color: var(--events-texto-suave);
  font-size: var(--events-rotulo);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#eventRaffle .raffle-link-arrow { font-size: 18px; font-weight: 800; }
#eventRaffle .raffle-inline-note {
  margin: 0 0 var(--events-espaco-5);
  padding: var(--events-espaco-3) var(--events-espaco-4);
  border: var(--events-borda) solid var(--sol);
  border-radius: var(--events-raio-aviso);
  background: var(--neblina);
  color: var(--events-texto-suave);
  font-size: var(--events-corpo-pequeno);
  line-height: 1.55;
}
#eventRaffle .raffle-form {
  display: grid;
  width: 100%;
  max-width: none;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--events-espaco-4);
  margin: 0;
}
#eventRaffle .raffle-form .field { min-width: 0; margin: 0; }
#eventRaffle .raffle-field-label,
#eventRaffle .raffle-form label:not(.raffle-approval-check) {
  color: var(--tinta);
  font-size: var(--events-corpo-pequeno);
  font-weight: 700;
}
#eventRaffle .raffle-file-field {
  display: grid;
  gap: var(--events-espaco-2);
  min-width: 0;
}
#eventRaffle .raffle-file-field > span { font-size: var(--events-corpo-pequeno); font-weight: 750; }
#eventRaffle .raffle-file-field input[type="file"] {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--events-borda-suave);
  border-radius: var(--events-raio-campo);
  background: var(--events-branco);
  color: var(--tinta);
  font-size: 12px;
}
#eventRaffle .raffle-file-field small,
#eventRaffle .raffle-approval-check small {
  display: block;
  color: var(--events-texto-suave);
  font-size: var(--events-rotulo);
  font-weight: 400;
  line-height: 1.5;
}
#eventRaffle .raffle-approval-check {
  display: flex;
  align-items: flex-start;
  gap: var(--events-espaco-3);
  padding: var(--events-espaco-3);
  border: 1px solid var(--events-borda-suave);
  border-radius: var(--events-raio-campo);
  background: var(--neblina);
  color: var(--tinta);
  cursor: pointer;
}
#eventRaffle .raffle-approval-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--uva);
}
#eventRaffle .raffle-approval-check > span { display: grid; gap: 4px; min-width: 0; }
#eventRaffle .raffle-approval-check strong { font-size: var(--events-corpo-pequeno); line-height: 1.4; }
#eventRaffle .raffle-prize-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--events-espaco-4);
}
#eventRaffle .raffle-prize-fields .field {
  display: grid;
  align-content: start;
  gap: var(--events-espaco-2);
}
#eventRaffle .raffle-prize-fields .raffle-field-full { grid-column: 1 / -1; }
#eventRaffle .raffle-prize-fields :is(input, textarea) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#eventRaffle .raffle-prize-fields textarea { min-height: 104px; resize: vertical; }
#eventRaffle .raffle-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--events-espaco-3);
  padding-top: var(--events-espaco-3);
  border-top: 1px solid var(--events-borda-suave);
}
#eventRaffle .raffle-form-hint {
  color: var(--events-texto-suave);
  font-size: var(--events-rotulo);
  line-height: 1.5;
}
#eventRaffle .raffle-submit-button {
  min-height: 46px;
  min-width: 180px;
  justify-content: center;
}
#eventRaffle .raffle-empty-state {
  display: flex;
  align-items: center;
  gap: var(--events-espaco-4);
  padding: var(--events-espaco-5);
  border: 1px dashed var(--events-borda-suave);
  border-radius: var(--events-raio-painel);
  background: var(--neblina);
}
#eventRaffle .raffle-empty-symbol {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--events-branco);
  color: var(--uva);
  font-size: 25px;
  font-weight: 500;
}
#eventRaffle .raffle-empty-state strong { color: var(--tinta); font-size: var(--events-corpo-pequeno); }
#eventRaffle .raffle-empty-state p {
  margin: var(--events-espaco-1) 0 0;
  color: var(--events-texto-suave);
  font-size: 12px;
  line-height: 1.5;
}
#eventRaffle .raffle-prizes-table { width: 100%; min-width: 0; }
#eventRaffle .raffle-prizes-table td:first-child strong { display: block; }
#eventRaffle .raffle-prizes-table td:first-child p { margin: var(--events-espaco-1) 0 0; line-height: 1.5; }
#eventRaffle .raffle-draw-button { min-height: 42px; white-space: normal; }
#eventRaffle .raffle-prize-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--events-espaco-2, 8px); }
#eventRaffle .raffle-prize-actions .btn { min-height: 42px; white-space: normal; }
#eventRaffle [hidden] { display: none !important; }
#eventRaffle .raffle-attempt-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--neblina);
  color: var(--tinta);
  font-size: var(--events-rotulo);
  font-weight: 750;
  line-height: 1.35;
}
#eventRaffle .raffle-attempt-status.pending { background: var(--events-status-amarelo-fundo); color: var(--events-status-amarelo-texto); }
#eventRaffle .raffle-attempt-status.confirmed { background: var(--events-status-verde-fundo); color: var(--events-status-verde-texto); }
#eventRaffle .raffle-attempt-status.rejected { background: var(--events-status-vermelho-fundo); color: var(--events-status-vermelho-texto); }
#eventRaffle .raffle-attempt-reason {
  margin: var(--events-espaco-2) 0 0;
  color: var(--events-texto-suave);
  font-size: var(--events-rotulo);
  line-height: 1.5;
}
#eventRaffle .raffle-history-panel { scroll-margin-top: 24px; }
@media (max-width: 760px) {
  #eventRaffle .raffle-overview { grid-template-columns: minmax(0, 1fr); }
  #eventRaffle .raffle-overview-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  #eventRaffle .raffle-overview-item > strong { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  #eventRaffle .raffle-overview-item > small { grid-column: 1 / -1; }
  #eventRaffle .raffle-panel-head { flex-direction: column; align-items: stretch; }
  #eventRaffle .raffle-status-pill,
  #eventRaffle .raffle-count-pill { align-self: flex-start; }
  #eventRaffle .raffle-prize-fields { grid-template-columns: minmax(0, 1fr); }
  #eventRaffle .raffle-prize-fields .raffle-field-full { grid-column: auto; }
  #eventRaffle .raffle-form-footer { align-items: stretch; flex-direction: column; }
  #eventRaffle .raffle-submit-button { width: 100%; min-width: 0; }
  #eventRaffle .raffle-empty-state { align-items: flex-start; padding: var(--events-espaco-4); }
}

/* Brand logo: light and dark variants follow the active theme. */
.brand { line-height: 0; }
:is(.landing-logo, .invite-brand, .privacy-header .brand-wordmark) { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { display: block; width: auto; height: 44px; max-width: none; }
.brand-logo-dark,
:root[data-theme=dark] .brand-logo-light { display: none; }
:root[data-theme=dark] .brand-logo-dark { display: block; }
/* The landing page and privacy header keep their light palette in both themes. */
:root :is(.landing-page, .privacy-header) .brand-logo-light { display: block; }
:root :is(.landing-page, .privacy-header) .brand-logo-dark { display: none; }
.auth-hero .brand .brand-logo { height: 56px; }
.landing-footer .brand-logo { height: 40px; }

@media (max-width: 520px) {
  .brand-logo { height: 36px; }
  .auth-hero .brand .brand-logo { height: 44px; }
}


/* Plan limits */
.plan-usage-card { display:flex; flex-direction:column; gap:12px; }
.plan-usage-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.plan-usage-heading h2 { margin:4px 0; }
.plan-usage-heading p, .plan-usage-note { margin:4px 0; }
.plan-usage-track { width:100%; height:9px; overflow:hidden; border-radius:999px; background:var(--line); }
.plan-usage-track span { display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width .2s ease; }
.plan-usage-note.warning, .plan-usage-note.error { font-weight:600; }


/* Subscription plans page */
.app-frame .plans-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr); align-items: center; gap: var(--events-espaco-6); margin-bottom: var(--events-espaco-6); background: white; }
.app-frame .plans-intro h2 { margin-top: 0; }
.app-frame .plans-intro p { margin-bottom: 0; }
.app-frame .plans-intro .notice { padding: var(--events-espaco-4); border-radius: var(--events-raio-campo); background: transparent; color: black; border-color : white; border: 1px solid; }
/* Plan cards: each card is a subgrid of five rows (head, price, limits, note, action),
   so prices, limit lists and notes line up across the row whatever each card holds. */
.app-frame .plan-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: var(--events-espaco-4); row-gap: var(--events-espaco-4); align-items: stretch; }
.app-frame .plan-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; padding: var(--events-espaco-8); border: var(--events-borda) solid var(--events-borda-suave); border-radius: var(--events-raio-painel); background: var(--events-branco); color: var(--tinta); }
.app-frame .plan-card.is-current { border-color: var(--uva); }
.app-frame .plan-card-head { display: flex; flex-wrap: wrap-reverse; align-items: flex-start; justify-content: space-between; gap: var(--events-espaco-2); }
.app-frame .plan-card-head > div { min-width: 0; }
.app-frame .plan-card-head .eyebrow { white-space: nowrap; }
.app-frame .plan-card-head .role-pill { flex: none; border-radius: var(--events-raio-botao); font-weight: var(--events-peso-forte); }
.app-frame .plan-card h2 { margin: var(--events-espaco-2) 0 0; font-size: var(--events-painel-subtitulo); overflow-wrap: normal; }
.app-frame .plan-card-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--events-espaco-1); align-self: start; margin: var(--events-espaco-4) 0; font-family: var(--events-fonte-titulo); font-size: var(--events-corpo-grande); font-weight: var(--events-peso-forte); overflow-wrap: normal; }
.app-frame .plan-card-amount { white-space: nowrap; }
.app-frame .plan-card-period { font-family: var(--events-fonte-corpo); font-size: var(--events-corpo-medio); font-weight: var(--events-peso-medio); opacity: .8; }
.app-frame .plan-card-limits { display: grid; align-content: start; gap: var(--events-espaco-3); margin: 0; padding: var(--events-espaco-4) 0; list-style: none; border-top: 1px solid var(--events-borda-suave); }
/* Number and label share one line: "1 evento publicado por mês". */
.app-frame .plan-card-limits li { display: block; color: black; font-size: var(--events-corpo-medio); line-height: 1.4; text-wrap: pretty; }
.app-frame .plan-card-limits strong { margin-right: var(--events-espaco-1); color: var(--tinta); font-size: var(--events-corpo-grande); font-variant-numeric: tabular-nums; }
.app-frame .plan-card-limits li > strong:only-child { margin-right: 0; font-size: var(--events-corpo-medio); }
.app-frame .plan-card-note { align-self: end; margin: 0; padding-top: var(--events-espaco-4); color: black; font-size: var(--events-corpo-pequeno); }
.app-frame .plan-card > .btn { align-self: end; margin-top: var(--events-espaco-4); }
.app-frame .plans-footnote { margin-top: var(--events-espaco-4); }
/* "Sob medida" is a different kind of offer: a full-width strip under the plans,
   laid out in columns that collapse to a stack on narrow screens. */
.app-frame .plan-card.plan-card-custom { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: center; column-gap: var(--events-espaco-6); row-gap: var(--events-espaco-4); }
.app-frame .plan-card-custom .plan-card-price { margin: 0; align-self: center; }
.app-frame .plan-card-custom .plan-card-limits { padding: 0; border-top: 0; }
.app-frame .plan-card-custom .plan-card-note { align-self: center; padding-top: 0; }
/* Two roomy columns by default; four side by side only on wide screens; one on phones. */
@media (min-width: 1680px) { .app-frame .plan-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .app-frame .plans-intro { grid-template-columns: 1fr; } .app-frame .plan-cards { grid-template-columns: minmax(0, 1fr); } .app-frame .plan-card { padding: var(--events-espaco-6); } }

/* Formulário de planos do administrador: campos começam no topo da linha, mesmo com dicas
   de tamanhos diferentes, e as caixas de seleção não herdam a largura dos campos de texto. */
.plan-form { align-items: start; }
.plan-form .field { align-content: start; }
.plan-form .plan-form-hint { font-size: 12px; line-height: 1.4; color: var(--muted); }
.plan-form .plan-form-group { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-form .plan-form-group legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--secondary); }
.plan-form .plan-form-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--ink); cursor: pointer; }
.plan-form .plan-form-check input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 0; flex: none; margin: 0; padding: 0;
  border: 0; box-shadow: none; background: none; accent-color: var(--accent);
}
.plan-form .plan-form-check:has(input:disabled) { cursor: default; opacity: .7; }
.plan-form .actions { margin-top: 4px; }
@media (max-width: 640px) { .plan-form { grid-template-columns: 1fr; } }

/* Secondary action on the ceu profile prompt: uva falls to 4.4:1 there. */
.app-frame .profile-prompt .text-button { color: var(--tinta); }

/* Content rhythm: stacked blocks in the app column never touch.
   :where() keeps this at zero specificity so any deliberate margin still wins,
   and vertical margins between siblings collapse instead of adding up. */
:where(.app-frame .content, .app-frame .analytics-page) > :where(* + *) {
  margin-top: var(--events-espaco-6);
}
#eventRaffle .raffle-setup-notice { margin: var(--events-espaco-4) 0 var(--events-espaco-5); max-width: 75ch; }
#eventRaffle .raffle-origin-summary { display: grid; gap: var(--events-espaco-2); margin-top: var(--events-espaco-6); }
#eventRaffle .raffle-origin-summary h3 { margin: 0; font-size: var(--events-corpo); font-weight: var(--events-peso-forte); }
#eventRaffle .raffle-origin-summary p { margin: 0; max-width: 75ch; }
#eventRaffle .raffle-origin-table td:not(:first-child), #eventRaffle .raffle-origin-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }