/* ===========================================================================
   Painel de quem entrou: parceiro, revendedor e administrador.

   Nasceu de um <style> solto dentro de layouts/admin, escrito antes do site
   ter cara. O resultado era uma tela que não parecia da mesma empresa: outra
   fonte, outro azul, outra barra no topo. Quem acabou de entrar pelo login —
   que é Manrope, azul #1d6cff e o logo do PDV Open — chegava aqui e trocava
   de produto.

   Por isso os tokens daqui são os mesmos de site.css/auth.css. O que muda é a
   moldura: no site a página vende, aqui ela trabalha. Fundo cinza claro para
   o branco dos cartões existir, densidade maior, e o azul reservado para o
   que se clica.

   Ordem do arquivo: tokens, barra do topo, moldura, avisos, cartões, números,
   tabelas, formulários, botões — e no fim os blocos que só o admin vê, que
   vieram do <style> antigo e continuam valendo.
   =========================================================================== */

:root {
  --pn-ink: #0f172a;
  --pn-muted: #475569;
  --pn-faint: #94a3b8;
  --pn-line: #e2e8f0;
  --pn-line-soft: #eef2f7;
  --pn-surface: #ffffff;
  --pn-bg: #f4f7fb;
  --pn-accent: #1d6cff;
  --pn-accent-dark: #0a43cf;
  --pn-accent-soft: rgba(29, 108, 255, 0.1);
  --pn-dark: #0b1220;
  --pn-radius: 18px;
  --pn-radius-sm: 12px;
  --pn-shell: min(1240px, calc(100% - 40px));
  --pn-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -18px rgba(15, 23, 42, 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--pn-bg);
  color: var(--pn-ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ===========================================================================
   Barra do topo
   ---------------------------------------------------------------------------
   Escura e com o mesmo brilho azul do lado da marca no login: é a primeira
   coisa que a pessoa vê depois de entrar, e a continuidade com a tela anterior
   é o que diz que ela está no lugar certo. O logo fica aqui e em lugar nenhum
   mais — no resto da tela a marca só atrapalharia o trabalho.
   =========================================================================== */

.pn-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background:
    radial-gradient(620px 240px at 8% 0%, rgba(29, 108, 255, 0.32), transparent 65%),
    linear-gradient(120deg, #0b1220 0%, #101b34 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.pn-topbar__inner {
  width: var(--pn-shell);
  margin: 0 auto;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.pn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}

.pn-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.pn-brand__name {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.pn-brand__tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.95);
  white-space: nowrap;
}

/* O menu rola na horizontal quando não cabe. O admin tem oito destinos, e
   empilhá-los num sanfona exigiria JS para uma barra que só tem links. */
.pn-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.pn-nav::-webkit-scrollbar {
  display: none;
}

.pn-nav__link {
  padding: 8px 14px;
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.74);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.pn-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.pn-nav__link--active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.pn-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  margin-left: 4px;
  border-left: 1px solid rgba(148, 163, 184, 0.22);
  flex-shrink: 0;
}

.pn-user__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.9);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #3b82f6, var(--pn-accent-dark));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  flex-shrink: 0;
}

.pn-logout {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: none;
  color: rgba(226, 232, 240, 0.9);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pn-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

@media (max-width: 860px) {
  .pn-topbar__inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
  }

  .pn-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-bottom: 2px;
  }

  .pn-user {
    margin-left: auto;
    padding-left: 12px;
  }

  .pn-user__name {
    display: none;
  }
}

/* ===========================================================================
   Moldura e cabeçalho de página
   =========================================================================== */

.pn-shell {
  width: var(--pn-shell);
  margin: 0 auto;
  padding: 28px 0 72px;
}

.pn-page {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.pn-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pn-accent-dark);
  margin-bottom: 8px;
}

.pn-page__title {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
}

.pn-page__lead {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--pn-muted);
  font-size: 0.98rem;
}

.pn-page__aside {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Selo de situação da conta: verde quando o link já está no ar, âmbar enquanto
   a aprovação não saiu. É a resposta para "já posso divulgar?". */
.pn-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pn-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pn-chip--live {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #15803d;
}

.pn-chip--pending {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

/* ===========================================================================
   Cartão do link de indicação
   ---------------------------------------------------------------------------
   É o que o parceiro veio buscar, então é o único bloco escuro da tela: sem
   procurar, ele acha. O endereço fica em fonte de código porque é para copiar,
   e o botão de copiar está grudado nele pelo mesmo motivo.
   =========================================================================== */

.pn-linkcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--pn-radius);
  padding: 24px 26px;
  margin-bottom: 26px;
  color: #e2e8f0;
  background:
    radial-gradient(520px 260px at 92% 0%, rgba(29, 108, 255, 0.4), transparent 62%),
    linear-gradient(120deg, #0b1220 0%, #16203a 100%);
  box-shadow: 0 20px 44px -26px rgba(11, 18, 32, 0.9);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.pn-linkcard__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 10px;
}

.pn-linkcard__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pn-linkcard__url {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.pn-linkcard__note {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 0.9rem;
  color: rgba(203, 213, 225, 0.82);
}

.pn-linkcard__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pn-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pn-copy:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.36);
  transform: translateY(-1px);
}

.pn-copy--solid {
  background: linear-gradient(180deg, var(--pn-accent), var(--pn-accent-dark));
  border-color: var(--pn-accent-dark);
  box-shadow: 0 12px 26px -14px rgba(29, 108, 255, 0.9);
}

.pn-copy--solid:hover {
  background: linear-gradient(180deg, #3b82f6, var(--pn-accent-dark));
}

@media (max-width: 760px) {
  .pn-linkcard {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .pn-linkcard__actions .pn-copy {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ===========================================================================
   Avisos: flash e "estou vendo a conta de outra pessoa"
   =========================================================================== */

.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--pn-radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.flash.notice {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.flash.alert {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.rv-viewing-as {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--pn-radius-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.rv-viewing-as strong {
  display: block;
  color: #92400e;
  font-size: 0.95rem;
}

.rv-viewing-as__btn {
  border: 0;
  border-radius: 999px;
  background: #92400e;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.rv-viewing-as__btn:hover {
  background: #78350f;
}

/* ===========================================================================
   Cartões de conteúdo
   ---------------------------------------------------------------------------
   Toda seção do painel é um cartão branco com cabeçalho próprio. Antes eram
   blocos soltos sobre o cinza, e sem a borda nenhum deles começava ou
   terminava em lugar nenhum.
   =========================================================================== */

.rv-section,
.card {
  background: var(--pn-surface);
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius);
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: var(--pn-shadow);
}

.rv-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.rv-section__head h2 {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 800;
}

.rv-section__head .rv-muted {
  margin-top: 5px;
}

/* Filtro e busca encostados no cabeçalho da seção não repetem a margem dele.
   E não quebram linha: o "Filtrar" embaixo das datas parece um botão órfão. */
.rv-section__head .rv-filters,
.pn-toolbar .rv-filters {
  margin-bottom: 0;
  flex-wrap: nowrap;
}

.rv-muted {
  color: var(--pn-muted);
  margin: 0;
  font-size: 0.92rem;
}

.rv-muted--sm {
  font-size: 0.84rem;
  color: var(--pn-faint);
}

.rv-badge {
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--pn-accent-soft);
  color: var(--pn-accent-dark);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ===========================================================================
   Números
   ---------------------------------------------------------------------------
   Os cartões do funil. O rótulo vem antes do número: a pessoa lê o que está
   sendo contado e só então o valor, que é o que fica na memória. O último
   cartão — o dinheiro — é escuro, porque é a resposta da pergunta que trouxe
   o parceiro até aqui.
   =========================================================================== */

.rv-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

/* Um número só embaixo de um cabeçalho de seção não precisa da grade larga que
   a faixa de estatísticas do topo usa. */
.rv-stat-grid--tight {
  grid-template-columns: minmax(180px, 260px);
  margin-bottom: 18px;
}

.rv-stat {
  background: var(--pn-surface);
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 6px;
  min-height: 104px;
}

.rv-stat__value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pn-ink);
  line-height: 1.1;
}

.rv-stat__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pn-muted);
  line-height: 1.35;
}

.rv-stat--accent {
  border-color: transparent;
  color: #e2e8f0;
  background:
    radial-gradient(360px 180px at 88% 0%, rgba(29, 108, 255, 0.45), transparent 62%),
    linear-gradient(120deg, #0b1220 0%, #16203a 100%);
  box-shadow: 0 18px 36px -24px rgba(11, 18, 32, 0.95);
}

.rv-stat--accent .rv-stat__value {
  color: #fff;
}

.rv-stat--accent .rv-stat__label {
  color: rgba(203, 213, 225, 0.88);
}

/* Seções que são só uma fileira de números não precisam do cartão em volta:
   os cartões já são o conteúdo. */
.rv-section--stats {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ===========================================================================
   Tabelas
   =========================================================================== */

.rv-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius-sm);
}

.rv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0;
}

.rv-table thead th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 11px 14px;
  background: #f8fafc;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pn-faint);
  border-bottom: 1px solid var(--pn-line);
  white-space: nowrap;
}

.rv-table tbody tr {
  border-bottom: 1px solid var(--pn-line-soft);
  transition: background 0.12s ease;
}

.rv-table tbody tr:last-child {
  border-bottom: none;
}

.rv-table tbody tr:hover {
  background: #f8fafc;
}

.rv-table td {
  padding: 13px 14px;
  vertical-align: middle;
  border: none;
}

/* Duas linhas dentro de uma célula: o dado e o que o qualifica (e-mail embaixo
   do nome, origem embaixo da data). Substitui o .order-customer das tabelas
   antigas, para a tabela do painel ter um jeito só de empilhar. */
.rv-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rv-cell-stack small {
  color: var(--pn-faint);
  font-size: 0.8rem;
}

/* Botões de uma linha da tabela. O button_to do Rails embrulha cada um num
   <form>, que é bloco: sem isto eles descem um debaixo do outro. */
.rv-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rv-row-actions form {
  margin: 0;
}

/* Visível só para leitor de tela: cabeçalho de coluna que a tela não precisa
   mostrar, mas que a tabela precisa ter. */
.rv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rv-nowrap {
  white-space: nowrap;
}

.rv-token-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rv-token {
  background: #0f172a;
  color: #e2e8f0;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rv-copy {
  background: none;
  border: none;
  color: var(--pn-faint);
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  display: grid;
  place-items: center;
}

.rv-copy:hover {
  color: var(--pn-accent);
  background: var(--pn-accent-soft);
}

.rv-plan-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.rv-plan-pill--trial { background: #e0f2fe; color: #0369a1; }
.rv-plan-pill--lifetime { background: #dcfce7; color: #166534; }
.rv-plan-pill--premium { background: #fef3c7; color: #b45309; }

.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.status.available { background: #e0f2fe; color: #0369a1; }
.status.active { background: #dcfce7; color: #166534; }
.status.revoked { background: #fee2e2; color: #991b1b; }
.status.pending { background: #fef3c7; color: #92400e; }
.status.paid { background: #dcfce7; color: #14532d; }
.status.cancelled { background: #ffe4e6; color: #9f1239; }
.status.refunded { background: #e0e7ff; color: #3730a3; }
.status.failed { background: #fee2e2; color: #991b1b; }
/* Vindos do faturamento (BillingPayment). "approved" é a situação padrão da
   lista, e ficava sem cor nenhuma — a pílula mais vista da tela era a única
   sem preenchimento. */
.status.approved { background: #dcfce7; color: #14532d; }
.status.rejected { background: #fee2e2; color: #991b1b; }

.rv-trial-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.rv-trial-badge--open { background: #dbeafe; color: #1e40af; }
.rv-trial-badge--ended { background: #fef3c7; color: #92400e; }

.rv-link {
  color: var(--pn-accent-dark);
  text-decoration: none;
  font-weight: 600;
}

.rv-link:hover {
  text-decoration: underline;
}

.rv-link--sm {
  font-size: 0.8rem;
}

.rv-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  max-width: 22rem;
}

.rv-links a {
  display: block;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.rv-buyer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rv-buyer span {
  font-weight: 500;
}

.rv-buyer__contact {
  display: block;
  font-size: 0.78rem;
  color: var(--pn-muted);
}

.rv-maybe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.rv-maybe__tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pn-faint);
  cursor: help;
}

.rv-maybe__tag--match {
  color: #166534;
}

.rv-device {
  background: var(--pn-accent-soft);
  color: var(--pn-accent-dark);
  padding: 3px 7px;
  border-radius: 6px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 0.77rem;
  word-break: break-all;
}

.rv-actions-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}

.rv-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--pn-line);
  background: #fff;
  color: var(--pn-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.rv-icon-btn:hover {
  border-color: rgba(29, 108, 255, 0.35);
  color: var(--pn-accent);
  background: var(--pn-accent-soft);
}

/* A inicial de quem está na linha, na lista de revendedores. */
.rv-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(140deg, #3b82f6, var(--pn-accent-dark));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  flex-shrink: 0;
}

.rv-icon-btn--danger {
  color: #ef4444;
}

.rv-icon-btn--danger:hover {
  border-color: #fecaca;
  color: #dc2626;
  background: #fef2f2;
}

.rv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.rv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 46px 20px;
  text-align: center;
  color: var(--pn-faint);
  border: 1px dashed var(--pn-line);
  border-radius: var(--pn-radius-sm);
  background: #fbfcfe;
}

.rv-empty p {
  margin: 0;
  font-weight: 700;
  color: #334155;
}

/* ===========================================================================
   Formulários e botões
   =========================================================================== */

.rv-form {
  margin: 0;
}

/* auto-FILL, e não auto-fit: com um campo só o auto-fit estica a coluna e um
   campo de porcentagem acaba com mil pixels de largura. */
.rv-form__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.rv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rv-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--pn-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.rv-input {
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--pn-line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--pn-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.rv-input::placeholder {
  color: var(--pn-faint);
}

.rv-input:focus {
  border-color: var(--pn-accent);
  box-shadow: 0 0 0 4px var(--pn-accent-soft);
}

.rv-input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.35rem;
  cursor: pointer;
}

.rv-form__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rv-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--pn-line);
  background: #fff;
  color: var(--pn-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.rv-btn:hover,
.btn:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
}

.rv-btn--primary,
.btn-primary {
  background: linear-gradient(180deg, var(--pn-accent), var(--pn-accent-dark));
  border-color: var(--pn-accent-dark);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(29, 108, 255, 0.85);
}

.rv-btn--primary:hover,
.btn-primary:hover {
  border-color: var(--pn-accent-dark);
  box-shadow: 0 16px 28px -14px rgba(29, 108, 255, 0.95);
}

.btn-secondary {
  background: #f1f5f9;
  border-color: var(--pn-line);
  color: #1f2933;
}

.rv-btn--danger,
.btn-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.rv-btn--danger:hover,
.btn-danger:hover {
  border-color: #f87171;
}

.rv-btn--sm,
.btn-sm,
.btn-compact {
  padding: 7px 14px;
  font-size: 0.82rem;
}

.btn-outline-danger {
  background: #fff;
  border-color: #fecaca;
  color: #b91c1c;
}

.btn-outline-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.rv-btn--whatsapp {
  background: #25d366;
  border-color: #1eb355;
  color: #fff;
}

.rv-btn--whatsapp:hover {
  background: #1eb355;
}

.rv-btn--approve {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}

.rv-btn--approve:hover {
  background: #15803d;
}

.actions {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Barra de filtros: os campos e o botão numa linha só, alinhados pela base,
   para o "Filtrar" não flutuar acima dos rótulos. */
.rv-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}

.rv-filters .rv-field {
  flex: 0 1 180px;
}

.rv-field--action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Busca da lista: o campo cresce, o botão não. */
.rv-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.rv-search__field {
  position: relative;
  flex: 1 1 320px;
  min-width: 220px;
}

.rv-search__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pn-faint);
  pointer-events: none;
}

.rv-search__input {
  padding-left: 38px;
}

.rv-search input[type="submit"] {
  width: auto;
  margin-bottom: 0;
}

.rv-status-form {
  display: inline-flex;
}

.rv-status-select {
  border: 1px solid var(--pn-line);
  border-radius: 8px;
  padding: 5px 9px;
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  color: #1f2933;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.rv-status-select:focus {
  border-color: var(--pn-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--pn-accent-soft);
}

/* ===========================================================================
   Escolha de plano (cartões de rádio)
   =========================================================================== */

.rv-plans {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.rv-plans legend {
  margin-bottom: 10px;
}

.rv-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.rv-plans__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 720px) {
  .rv-plans__grid,
  .rv-plans__grid--2 {
    grid-template-columns: 1fr;
  }
}

.rv-plan {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius-sm);
  background: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}

.rv-plan__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rv-plan__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #cbd5e1;
  margin-top: 2px;
}

.rv-plan__dot {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.rv-plan__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rv-plan__text strong {
  font-size: 0.92rem;
  color: #1e293b;
}

.rv-plan__text span {
  font-size: 0.8rem;
  color: var(--pn-muted);
  line-height: 1.4;
}

.rv-plan:hover {
  border-color: rgba(29, 108, 255, 0.35);
  background: #fafbff;
}

.rv-plan:has(.rv-plan__radio:checked) {
  border-color: var(--pn-accent);
  background: #f5f8ff;
  box-shadow: 0 0 0 3px var(--pn-accent-soft);
}

.rv-plan:has(.rv-plan__radio:checked) .rv-plan__check { color: var(--pn-accent); }
.rv-plan:has(.rv-plan__radio:checked) .rv-plan__dot { opacity: 1; }
.rv-plan--trial:has(.rv-plan__radio:checked) { border-color: #0ea5e9; background: #f0f9ff; box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.rv-plan--trial:has(.rv-plan__radio:checked) .rv-plan__check { color: #0ea5e9; }
.rv-plan--premium:has(.rv-plan__radio:checked) { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 3px rgba(245,158,11,.1); }
.rv-plan--premium:has(.rv-plan__radio:checked) .rv-plan__check { color: #f59e0b; }

/* ===========================================================================
   Como a indicação é reconhecida (três caminhos)
   =========================================================================== */

.rv-how {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.rv-how__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.rv-how__num {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pn-accent-soft);
  color: var(--pn-accent-dark);
  font-size: 0.74rem;
  font-weight: 800;
}

.rv-how__item h3 {
  margin: 0 0 4px;
  font-size: 0.93rem;
  color: #1e293b;
}

.rv-how__item p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--pn-muted);
  line-height: 1.55;
}

.rv-how__safety {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: var(--pn-radius-sm);
  background: #f8fafc;
  border: 1px solid var(--pn-line);
  list-style: none;
  display: grid;
  gap: 9px;
}

.rv-how__safety li {
  font-size: 0.86rem;
  color: var(--pn-muted);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.rv-how__safety li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 800;
}

/* ===========================================================================
   Dispositivos: quando cada computador apareceu pela última vez
   ---------------------------------------------------------------------------
   O ponto colorido é o resumo da tela: verde apareceu hoje, âmbar esta semana,
   cinza há mais de um mês, vazado nunca apareceu.
   =========================================================================== */

.dv-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.dv-filters__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-filters__label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--pn-faint); margin-right: 4px; }
.dv-pill { border: 1px solid var(--pn-line); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 700; color: var(--pn-muted); text-decoration: none; transition: all .15s ease; white-space: nowrap; }
.dv-pill:hover { border-color: rgba(29,108,255,.35); color: var(--pn-accent-dark); }
.dv-pill--active { background: var(--pn-ink); color: #fff; border-color: transparent; }
.dv-pill--active:hover { color: #fff; }
.dv-pill__count { opacity: .6; font-weight: 500; }

.dv-seen { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dv-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dv-dot--24h { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dv-dot--7d { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.dv-dot--30d { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.18); }
.dv-dot--silenciosos { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.16); }
.dv-dot--nunca { background: #fff; border: 1.5px solid #cbd5e1; }
.dv-seen__when { font-weight: 600; color: #1e293b; }
.dv-seen__never { color: var(--pn-faint); font-weight: 500; }
.dv-sub { display: block; font-size: .75rem; color: var(--pn-faint); margin-top: 2px; }
/* O hash é truncado; quebrá-lo em duas linhas só rouba altura da linha. */
.dv-hash { white-space: nowrap; word-break: normal; }
.dv-route { font-size: .72rem; font-weight: 700; color: var(--pn-muted); background: #f1f5f9; border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.dv-secret { font-size: .78rem; font-weight: 700; }
.dv-secret--enrolled { color: #15803d; }
.dv-secret--missing { color: var(--pn-faint); }
.dv-inline-form { display: inline; margin: 0; }

/* ===========================================================================
   Telas só do admin
   ---------------------------------------------------------------------------
   Vieram do <style> antigo e continuam com a marcação que tinham: pedidos,
   edição de licença, envio de teste. Ganham os tokens novos, não uma reforma.
   =========================================================================== */

form label { display: block; font-weight: 700; margin-bottom: 6px; }
/* O reset genérico é para campo de digitar, nas telas antigas do admin que não
   usam .rv-input. Duas precauções: ele não pega input[type=submit] — pegava, e
   era o que esticava todo botão de formulário até a largura da coluna — e mora
   dentro de :where(), que zera a especificidade, para qualquer classe daqui de
   cima continuar mandando nele. */
form :where(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea) { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--pn-line); margin-bottom: 16px; font: inherit; font-size: 0.95rem; }
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { padding: 14px; text-align: left; border-bottom: 1px solid var(--pn-line-soft); }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pn-faint); }

.trial-license { display: flex; flex-direction: column; gap: 24px; }
.trial-license__header { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.trial-license__eyebrow { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--pn-faint); font-weight: 800; }
.trial-license__header h2 { margin: 0; font-size: 1.6rem; }
.trial-license__header p { margin: 0; color: var(--pn-muted); max-width: 640px; }
.trial-license__badge { background: linear-gradient(120deg, #22d3ee 0%, var(--pn-accent) 100%); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: 0 15px 35px -18px rgba(29,108,255,.9); white-space: nowrap; }
.trial-license__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); gap: 24px; }
@media (max-width: 960px) { .trial-license__grid { grid-template-columns: 1fr; } .trial-license__badge { width: 100%; text-align: center; } }
.trial-license__panel { border: 1px solid var(--pn-line); border-radius: var(--pn-radius); padding: 24px; background: #fff; }
.trial-license__panel--info { background: radial-gradient(420px 220px at 90% 0%, rgba(29,108,255,.4), transparent 62%), linear-gradient(120deg, #0b1220 0%, #16203a 100%); color: #e0e7ff; border: none; }
.trial-license__panel--info h3 { margin-top: 0; color: #fff; }
.trial-license__panel--info p, .trial-license__panel--info li { color: rgba(255,255,255,.85); }
.trial-license__form fieldset { border: none; margin: 0 0 20px; padding: 0; }
.input-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.trial-license__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.delivery-card { border: 1px solid var(--pn-line); border-radius: var(--pn-radius-sm); padding: 16px 18px; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; cursor: pointer; position: relative; transition: all .2s ease; }
.delivery-card__input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.delivery-card__body { display: flex; flex-direction: column; gap: 5px; }
.delivery-card__body strong { font-size: 1rem; color: #111827; }
.delivery-card__body span { font-size: .9rem; color: var(--pn-muted); }
.delivery-card:has(.delivery-card__input:checked) { border-color: var(--pn-accent); background: #f5f8ff; box-shadow: 0 0 0 3px var(--pn-accent-soft); }
.delivery-card:has(.delivery-card__input:checked) strong { color: var(--pn-accent-dark); }
.trial-license__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.trial-license__hint { margin: 0; font-size: .875rem; color: var(--pn-muted); }
.trial-license__info-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.trial-license__info-list li { position: relative; padding-left: 24px; }
.trial-license__info-list li::before { content: "\2022"; position: absolute; left: 0; top: 0; color: #22d3ee; font-size: 1.2rem; line-height: 1; }
.trial-license__tips { background: rgba(15,23,42,.35); border-radius: var(--pn-radius-sm); padding: 16px 20px; }
.trial-license__tips strong { display: block; margin-bottom: 6px; color: #fef3c7; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.trial-license__tips p { margin: 0; color: rgba(255,255,255,.85); }

.meta-email-link { color: var(--pn-accent-dark); text-decoration: none; font-weight: 600; }
.meta-email-link:hover { text-decoration: underline; }
.token-pill { background: var(--pn-ink); color: #fff; padding: 9px 14px; border-radius: 10px; font-family: "JetBrains Mono", "SFMono-Regular", monospace; font-size: 1rem; letter-spacing: .08em; }
.copy-btn { border: 1px solid var(--pn-line); background: #f8fafc; color: var(--pn-muted); border-radius: 999px; padding: 8px 16px; cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem; }
.copy-btn:hover { background: var(--pn-accent-soft); color: var(--pn-accent-dark); }
.license-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.license-card { border: 1px solid var(--pn-line); border-radius: var(--pn-radius); padding: 20px 24px; background: #fff; box-shadow: var(--pn-shadow); }
.license-card__top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.license-card__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 16px; }
.meta-label { display: block; font-size: .74rem; letter-spacing: .08em; color: var(--pn-faint); text-transform: uppercase; margin-bottom: 4px; font-weight: 800; }
.meta-value { font-weight: 600; color: #1f2933; }
.meta-note { display: block; font-size: .8rem; color: var(--pn-faint); margin-top: 2px; }
.buyer-order-link { color: var(--pn-accent-dark); font-weight: 600; text-decoration: none; }
.buyer-order-link:hover { text-decoration: underline; }
.device-badge { background: var(--pn-accent-soft); color: var(--pn-accent-dark); padding: 5px 8px; border-radius: 8px; font-family: "JetBrains Mono", "SFMono-Regular", monospace; font-size: .85rem; word-break: break-all; }
.license-card__actions { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.license-card__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.license-status-form { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.license-status-select { border-radius: 10px; border: 1px solid var(--pn-line); padding: 8px 12px; font: inherit; font-weight: 600; color: #1f2933; background: #fff; }
.token-group { display: flex; flex-direction: column; gap: 6px; }
.token-actions { display: flex; gap: 8px; align-items: center; }
.empty-state { text-align: center; padding: 48px 16px; color: var(--pn-faint); }

.orders-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.orders-header h1 { margin: 0; font-size: 1.8rem; }
.orders-header p { margin: 0; color: var(--pn-muted); }
.storefront-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 24px; }
.storefront-card { background: #fff; border: 1px solid var(--pn-line); border-radius: var(--pn-radius-sm); padding: 16px 18px; box-shadow: var(--pn-shadow); }
.storefront-card__name { margin: 0 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pn-accent-dark); }
.storefront-card__revenue { font-size: 1.5rem; font-weight: 800; color: var(--pn-ink); line-height: 1.1; }
.storefront-card__meta { margin-top: 6px; font-size: .82rem; color: var(--pn-muted); }
.storefront-card__meta strong { color: #166534; }
.orders-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-pill { border: 1px solid var(--pn-line); border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: .85rem; color: var(--pn-muted); text-decoration: none; transition: all .15s ease; background: #fff; }
.filter-pill:hover { border-color: rgba(29,108,255,.35); color: var(--pn-accent-dark); }
.filter-pill.is-active { background: var(--pn-ink); color: #fff; border-color: transparent; }
.orders-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.orders-table thead th { border: none; background: transparent; padding-bottom: 12px; }
.orders-table tbody tr { background: #fff; box-shadow: var(--pn-shadow); }
.orders-table td { border: none; padding: 16px 20px; vertical-align: top; }
.order-code strong { display: block; font-size: 1.05rem; }
.order-code span { color: var(--pn-faint); font-size: .9rem; }
.order-customer { display: flex; flex-direction: column; gap: 2px; }
.order-customer small { color: var(--pn-faint); font-size: .8rem; }
.order-address { color: var(--pn-muted); font-size: .95rem; }
.order-address small { display: block; color: var(--pn-faint); margin-top: 3px; }
.order-money { font-weight: 800; font-size: 1rem; }
.order-panel { border: 1px solid var(--pn-line); border-radius: var(--pn-radius); padding: 20px; background: #fff; box-shadow: var(--pn-shadow); }
.order-panel h2 { margin-top: 0; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pn-faint); }
.data-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.data-list strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pn-faint); margin-bottom: 2px; }
.data-list span { font-size: 1rem; color: #1f2933; }
/* A cor da lista não vale para a tarja do token: ela é escura, e o texto
   escuro por cima dela sumia. */
.data-list .token-pill { color: #fff; }
.order-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; color: var(--pn-accent-dark); }
.copy-field { background: var(--pn-ink); color: #fff; font-family: "JetBrains Mono", "SFMono-Regular", monospace; padding: 12px; border-radius: var(--pn-radius-sm); font-size: .9rem; word-break: break-all; }

.admin-license-edit__container { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--pn-line); border-radius: var(--pn-radius); overflow: hidden; box-shadow: var(--pn-shadow); }
.admin-license-edit .page-header { background: linear-gradient(120deg, #0b1220 0%, #16203a 100%); color: #fff; padding: 28px 32px; margin: 0; }
.admin-license-edit .page-header h1 { margin: 0 0 4px; font-size: 1.6rem; }
.admin-license-edit .subtitle { margin: 0; font-size: .95rem; opacity: .85; }
.admin-license-edit .license-info { padding: 24px 32px; background: #f8fafc; border-bottom: 1px solid var(--pn-line); }
.admin-license-edit .info-item { margin-bottom: 20px; }
.admin-license-edit .info-item:last-child { margin-bottom: 0; }
.admin-license-edit .info-item .label { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--pn-muted); margin-bottom: 5px; }
.admin-license-edit .info-item .value { display: block; font-size: .95rem; color: #1e293b; font-weight: 600; }
.admin-license-edit .info-item .device-hash { font-family: "JetBrains Mono", monospace; font-size: .85rem; word-break: break-all; color: var(--pn-muted); }
.admin-license-edit .edit-form { padding: 28px 32px; }
.admin-license-edit .form-group { margin-bottom: 20px; }
.admin-license-edit .form-group:last-of-type { margin-bottom: 28px; }
.admin-license-edit .form-group label { display: block; font-size: .9rem; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.admin-license-edit .form-control { width: 100%; padding: 11px 14px; font: inherit; font-size: .95rem; border: 1px solid var(--pn-line); border-radius: 10px; background: #fff; transition: all .2s ease; }
.admin-license-edit .form-control:focus { outline: none; border-color: var(--pn-accent); box-shadow: 0 0 0 4px var(--pn-accent-soft); }
.admin-license-edit .form-actions { display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid var(--pn-line); }

/* ===========================================================================
   Relatórios: filtros, seletor de métrica e o gráfico de vendas por dia
   ---------------------------------------------------------------------------
   Uma série só, então uma cor só — o azul da marca. O resto do desenho é
   cinza de fundo: grade fina e sólida, eixo discreto, e nenhum número escrito
   por cima das colunas além do melhor dia. O que a barra não diz, o balão do
   mouse e a tabela dizem.
   =========================================================================== */

.pn-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--pn-surface);
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius);
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: var(--pn-shadow);
}

.pn-segmented {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid var(--pn-line);
}

.pn-segmented__item {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pn-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.pn-segmented__item:hover {
  color: var(--pn-ink);
}

.pn-segmented__item--active {
  background: var(--pn-surface);
  color: var(--pn-accent-dark);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.pn-chart {
  margin: 0;
}

.pn-chart__canvas {
  position: relative;
}

.pn-chart__canvas svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pn-chart__grid {
  stroke: #eef2f7;
  stroke-width: 1;
}

.pn-chart__axis {
  stroke: #cbd5e1;
  stroke-width: 1;
}

.pn-chart__tick,
.pn-chart__day {
  fill: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pn-chart__peak {
  fill: var(--pn-ink);
  font-size: 13px;
  font-weight: 800;
}

.pn-chart__bar {
  fill: var(--pn-accent);
  transition: fill 0.12s ease;
}

.pn-chart__zero {
  fill: #dbe3ee;
}

.pn-chart__hit {
  fill: transparent;
}

.pn-chart__col:hover .pn-chart__hit {
  fill: rgba(29, 108, 255, 0.06);
}

.pn-chart__col:hover .pn-chart__bar,
.pn-chart__col.is-best .pn-chart__bar {
  fill: var(--pn-accent-dark);
}

.pn-chart__tip[hidden] {
  display: none;
}

.pn-chart__tip {
  position: absolute;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--pn-ink);
  color: #e2e8f0;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.9);
}

.pn-chart__tip-label {
  color: rgba(148, 163, 184, 0.95);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}

.pn-chart__tip-value {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.pn-chart__tip-note {
  color: rgba(203, 213, 225, 0.85);
}

.pn-details {
  margin-top: 18px;
}

.pn-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--pn-line);
  background: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--pn-muted);
}

.pn-details > summary::-webkit-details-marker {
  display: none;
}

.pn-details > summary::after {
  content: "▾";
  font-size: 0.7rem;
}

.pn-details[open] > summary::after {
  content: "▴";
}

.pn-details > summary:hover {
  border-color: rgba(29, 108, 255, 0.35);
  color: var(--pn-accent-dark);
}

.pn-details .rv-table-wrap {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .pn-toolbar {
    align-items: stretch;
  }

  /* Numa tela estreita nada cabe numa linha, e aí quebrar é o certo. */
  .rv-section__head .rv-filters,
  .pn-toolbar .rv-filters {
    flex-wrap: wrap;
  }

  .pn-segmented {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pn-segmented::-webkit-scrollbar {
    display: none;
  }
}

/* O "Mais" da barra do topo: os destinos que se abrem uma vez por mês.

   O painel é fixed, e não absolute: a fileira de links rola na horizontal, e
   quem rola num eixo recorta o outro — em absolute o menu abria escondido
   debaixo da barra. As coordenadas quem põe é o dropdown.js. */
.pn-more {
  position: relative;
  flex-shrink: 0;
}

.pn-more__toggle {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pn-more__toggle::after {
  content: "▾";
  font-size: 0.6rem;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.pn-more[data-dropdown-open] .pn-more__toggle {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.pn-more[data-dropdown-open] .pn-more__toggle::after {
  transform: rotate(180deg);
}

.pn-more__panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  min-width: 190px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  background: #16203a;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 48px -20px rgba(2, 6, 23, 0.95);
}

/* O display:grid acima é regra de autor e passa por cima do [hidden] que o
   navegador aplica sozinho — sem esta linha o menu nasceria aberto. */
.pn-more__panel[hidden] {
  display: none;
}

.pn-more__link {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: rgba(226, 232, 240, 0.82);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.pn-more__link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Numa barra que rola na horizontal, um menu absoluto fica cortado: no celular
   os destinos extras viram parte da própria fileira. */
@media (max-width: 860px) {
  .pn-more {
    display: contents;
  }

  .pn-more__toggle {
    display: none;
  }

  /* Sem o botão não há o que abrir: aqui o [hidden] do menu fechado precisa
     perder a vez, senão os quatro destinos extras somem do celular. */
  .pn-more__panel,
  .pn-more__panel[hidden] {
    position: static;
    display: contents;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .pn-more__link {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.88rem;
  }
}

/* As telas antigas do admin escrevem formulário sem classe nenhuma (ver
   admin/licenses/new). Aqui elas herdam o mesmo campo do resto do painel: o
   select deixa de ser o do sistema operacional, e a caixa de marcar ganha a
   cor da marca e o rótulo do lado, e não embaixo. */
form :where(select) {
  min-width: 260px;
  max-width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1px solid var(--pn-line);
  border-radius: 10px;
  background-color: #fff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--pn-ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  cursor: pointer;
}

form :where(select):focus {
  outline: none;
  border-color: var(--pn-accent);
  box-shadow: 0 0 0 4px var(--pn-accent-soft);
}

form :where(input[type="checkbox"], input[type="radio"]) {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--pn-accent);
  cursor: pointer;
}

.field-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 20px;
}

.field-checkbox label {
  margin: 0;
  cursor: pointer;
}

.field-checkbox .form-hint {
  grid-column: 2;
  margin: 0;
  font-size: 0.86rem;
  color: var(--pn-muted);
}

/* Os cartões de pedido empilham nome, situação e valor: sem isto a tarja de
   "Pago" estica até a largura da coluna e vira uma faixa verde. */
.order-customer {
  align-items: flex-start;
}