/* ============================================================
   Atlas - Area logada (login, cadastro, painel)
   Light/minimalist/monochrome theme — extends tokens from styles.v2.css.
   Load AFTER styles.v2.css.
   ============================================================ */

.auth-page {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar simples da area logada */
.auth-topbar {
  padding: 1rem clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--ink-blue);
  background: var(--surface-inset);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.auth-topbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.auth-topbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-family: var(--font-display);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.auth-topbar__logo img { height: 28px; width: auto; }

/* ============================================================
   Cartao de autenticacao (login/cadastro)
   ============================================================ */
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
}

.auth-card {
  background: var(--surface-inset);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 12%, transparent), 0 4px 12px color-mix(in oklab, var(--on-surface) 14%, transparent);
  width: 100%;
  max-width: 440px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

.auth-card__head {
  text-align: center;
  margin-bottom: 1.75rem;
}

.auth-card__title {
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.auth-card__subtitle {
  font-size: var(--t-body);
  color: var(--text-muted, var(--text-muted));
  margin: 0;
}

.auth-card__title .c-orange {
  color: var(--text-primary);
}

/* ============================================================
   Formulario
   ============================================================ */
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field__label {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, var(--text-muted));
}

.field__input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  background: var(--surface-inset);
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.field__input:focus {
  outline: none;
  border-color: var(--text-primary);
  background: var(--surface-inset);
  box-shadow: 0 0 0 3px rgba(17,17,17,.18);
}

.field__input::placeholder { color: var(--text-faint, var(--text-muted)); }

/* Toggle de visibilidade de senha */
.field--password { position: relative; }

.field__toggle {
  position: absolute;
  right: 0.5rem;
  bottom: 0.4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 0.5rem;
}

.auth-form .btn-cartoon { width: 100%; }

/* Mensagens de feedback */
.auth-msg {
  font-size: var(--t-label);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-badge);
  border: 1px solid transparent;
  display: none;
}

.auth-msg.is-visible { display: block; }
.auth-msg--error   { background: rgba(239,68,68,.08); color: #B91C1C; border-color: var(--ink-red); }
.auth-msg--success { background: rgba(34,197,94,.08); color: #15803D; border-color: rgba(34,197,94,.35); }

/* Rodape do cartao */
.auth-card__foot {
  text-align: center;
  margin-top: 1.5rem;
  font-size: var(--t-label);
  color: var(--text-faint, var(--text-muted));
}

.auth-card__foot a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-cartoon[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* ============================================================
   Painel (area logada)
   ============================================================ */
.dash-main {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
}

.dash-welcome { margin-bottom: 2rem; }

.dash-welcome__title {
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
}

.dash-welcome__sub {
  font-size: var(--t-body);
  color: var(--text-muted, var(--text-muted));
  margin: 0;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-card--token { grid-column: 1 / -1; }
}

.dash-card {
  background: var(--surface-inset);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 12%, transparent), 0 4px 12px color-mix(in oklab, var(--on-surface) 14%, transparent);
  padding: 1.5rem;
  transition: border-color 0.2s;
}

.dash-card:hover { border-color: color-mix(in oklab, var(--on-surface) 28%, transparent); }

.dash-card__label {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint, var(--text-muted));
  margin: 0 0 0.5rem;
}

.dash-card__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* Badge de status do plano */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}

.status-badge--active  { background: rgba(34,197,94,.10); color: #15803D; border-color: rgba(34,197,94,.35); }
.status-badge--pending { background: rgba(251,191,36,.10); color: #92400E; border-color: rgba(251,191,36,.35); }
.status-badge--expired,
.status-badge--canceled { background: rgba(239,68,68,.08); color: #B91C1C; border-color: var(--ink-red); }

/* Token box */
.token-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--surface-inset);
  border: 1px dashed var(--ink-blue);
  border-radius: var(--radius-badge);
  padding: 0.85rem 1rem;
}

.token-box__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  word-break: break-all;
  flex: 1;
  min-width: 12ch;
  color: var(--text-muted, var(--text-muted));
}

.token-box__actions { display: inline-flex; gap: 0.5rem; }

.token-btn {
  background: var(--surface-inset);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-muted));
  padding: 0.5rem 0.75rem;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.token-btn:hover {
  background: var(--surface-field);
  border-color: color-mix(in oklab, var(--on-surface) 28%, transparent);
  color: var(--text-primary);
}

.dash-actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.dash-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted, var(--text-muted));
  font-weight: 600;
}

.is-hidden { display: none !important; }

/* ── Upsell de planos no painel ─────────────────────────────────── */
.dash-upsell {
  background: var(--surface-inset);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 12%, transparent), 0 4px 12px color-mix(in oklab, var(--on-surface) 14%, transparent);
  color: var(--text-primary);
  margin-top: 2rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.dash-upsell__badge {
  background: var(--ink-blue);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--ink-paper);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 1rem;
  text-transform: uppercase;
}

.dash-upsell__title {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0.9rem;
}

.dash-upsell__sub {
  color: var(--text-muted, var(--text-muted));
  margin: 0.5rem auto 1.75rem;
  max-width: 480px;
}

.dash-upsell__plans {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .dash-upsell__plans { grid-template-columns: 1fr 1fr; }
}

.dash-upsell__plan {
  background: var(--surface-inset);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.75rem 1.25rem 1.5rem;
  position: relative;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.dash-upsell__plan:hover {
  border-color: color-mix(in oklab, var(--on-surface) 33%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 14%, transparent), 0 8px 24px color-mix(in oklab, var(--on-surface) 16%, transparent);
  transform: translateY(-3px);
}

.dash-upsell__plan--featured { border-color: color-mix(in oklab, var(--on-surface) 28%, transparent); }

.dash-upsell__plan-tag {
  background: var(--ink-blue);
  border: none;
  border-radius: var(--radius-badge);
  color: var(--ink-paper);
  font-size: 0.7rem;
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  position: absolute;
  text-transform: uppercase;
  top: -0.9rem;
  transform: translateX(-50%);
  white-space: nowrap;
}

.dash-upsell__plan-name {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.dash-upsell__plan-devices {
  color: var(--text-muted, var(--text-muted));
  font-size: 0.85rem;
}

.dash-upsell__plan-price {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0.4rem;
}

.dash-upsell__plan-price small {
  font-size: 0.95rem;
  font-weight: 600;
}

.dash-upsell__plan-bill {
  color: var(--text-faint, var(--text-muted));
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.dash-upsell__more {
  color: var(--text-muted, var(--text-muted));
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.dash-upsell__more a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dash-upsell__more a:hover { color: var(--text-muted); }

/* ============================================================
   Admin — secao Cadastrados
   ============================================================ */
.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;
}

.users-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.users-search {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  background: var(--surface-inset);
  color: var(--text-primary);
}

.users-search:focus {
  outline: none;
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(17,17,17,.15);
}

.users-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-badge);
}

/* Paginação da tabela de usuários (seletor de linhas + navegação) */
.users-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.7rem 0.2rem 0.2rem;
  font-size: 0.8rem;
  color: var(--on-surface);
}
.users-pager__size {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}
.users-page-size {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--on-surface);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-inset);
  color: var(--on-surface);
  cursor: pointer;
}
.users-page-size:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-page);
}
.users-pager__info {
  color: var(--text-muted);
  font-weight: 600;
}
.users-pager__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.users-pager__page {
  font-weight: 800;
  min-width: 3.2rem;
  text-align: center;
}
.users-page-prev,
.users-page-next {
  min-width: 2rem;
  padding: 0.25rem 0.6rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid var(--on-surface);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-inset);
  color: var(--on-surface);
  cursor: pointer;
}
.users-page-prev:not(:disabled):hover,
.users-page-next:not(:disabled):hover {
  background: var(--on-surface);
  color: var(--surface-inset);
}
.users-page-prev:disabled,
.users-page-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 640px;
}

.users-table thead tr {
  background: color-mix(in oklab, var(--on-surface) 12%, transparent);
  color: var(--text-muted, var(--text-muted));
  border-bottom: 1px solid var(--ink-blue);
}

.users-table thead th {
  padding: 0.65rem 0.9rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.users-table tbody tr {
  border-bottom: 1px solid var(--ink-blue);
  transition: background 0.1s ease;
}

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

.users-table tbody tr:hover { background: color-mix(in oklab, var(--on-surface) 11%, transparent); }

.users-table td {
  padding: 0.7rem 0.9rem;
  vertical-align: middle;
  color: var(--text-muted, var(--text-muted));
}

.users-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.users-table .token-btn { white-space: nowrap; }

.users-table td[data-label="Acoes"],
.users-table th:last-child {
  white-space: nowrap;
  width: 1%;
  text-align: right;
}

.users-table td[data-label="Email"] {
  white-space: normal;
  word-break: break-all;
  max-width: 240px;
}

.token-btn--danger { border-color: rgba(239,68,68,.35); color: #B91C1C; }
.token-btn--danger:hover { background: rgba(239,68,68,.06); border-color: var(--ink-red); }

.users-empty {
  font-size: 0.9rem;
  color: var(--text-faint, var(--text-muted));
  padding: 1rem 0;
  margin: 0;
}

/* ── Aba "Gerar Chave": formulário de geração ───────────────────────── */
.keygen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}
.keygen-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.keygen-field--email { grid-column: 1 / -1; }
.keygen-field__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint, var(--text-muted));
}
.keygen-field .form-field { width: 100%; }
.keygen-field.is-hidden { display: none; }
.keygen-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.keygen-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  margin: 0.4rem 0 0.6rem;
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  background: var(--surface-inset);
}
.keygen-result.is-hidden { display: none; }
.keygen-token {
  flex: 1;
  min-width: 200px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}
.keygen-result__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
}
.keys-prefix {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8rem;
}
.key-edit-card .keygen-grid {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .users-table-wrap { overflow-x: unset; }

  .users-table,
  .users-table thead,
  .users-table tbody,
  .users-table th,
  .users-table td,
  .users-table tr { display: block; }

  .users-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .users-table tbody tr {
    border: 1px solid var(--ink-blue);
    border-radius: var(--radius-badge);
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-inset);
  }

  .users-table td {
    padding: 0.35rem 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .users-table td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint, var(--text-muted));
    flex-shrink: 0;
  }

  .users-actions { justify-content: flex-end; width: 100%; }
}

@media (min-width: 980px) {
  #users-card {
    width: min(1280px, 96vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================================
   Modal de e-mail
   ============================================================ */
.email-modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--on-surface) 53%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.email-modal-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg-raised, var(--ink-paper));
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 12%, transparent), 0 4px 12px color-mix(in oklab, var(--on-surface) 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.email-modal-body { display: flex; flex-direction: column; gap: 0.5rem; }

.email-modal-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint, var(--text-muted));
}

.email-modal-input  { width: 100%; }
.email-modal-textarea { width: 100%; min-height: 120px; resize: vertical; font-family: var(--font-body); }

.email-modal-footer { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ============================================================
   Dropdown de acoes
   ============================================================ */
.actions-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  background: var(--bg-raised, var(--ink-paper));
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 12%, transparent), 0 8px 24px color-mix(in oklab, var(--on-surface) 16%, transparent);
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  min-width: 160px;
  white-space: nowrap;
}

.actions-dropdown__item {
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted, var(--text-muted));
  transition: background 0.1s, color 0.1s;
}

.actions-dropdown__item:hover {
  background: color-mix(in oklab, var(--on-surface) 12%, transparent);
  color: var(--text-primary);
}

.actions-dropdown__item--danger { color: #B91C1C; }

.actions-dropdown__item--danger:hover {
  background: rgba(239,68,68,.06);
  color: #B91C1C;
}

/* ============================================================
   Validade clicavel (edicao inline)
   ============================================================ */
.expiry-cell {
  cursor: pointer;
  text-decoration: underline dotted color-mix(in oklab, var(--on-surface) 33%, transparent);
  text-underline-offset: 3px;
}

.expiry-cell:hover { color: var(--text-primary); }

.expiry-input-wrap { display: inline-flex; align-items: center; gap: 0.35rem; }

.expiry-date-input {
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  background: var(--surface-inset);
  color: var(--text-primary);
  cursor: pointer;
}

.expiry-date-input:focus {
  outline: none;
  border-color: var(--text-primary);
}

.expiry-ok-btn { font-size: 0.75rem; padding: 0.2rem 0.55rem; }

/* ============================================================
   Link de e-mail clicavel na tabela
   ============================================================ */
.user-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s, color 0.15s;
  word-break: break-all;
  text-align: left;
}

.user-link:hover {
  color: var(--text-primary);
  text-decoration: underline dotted var(--ink-blue);
}

/* ============================================================
   Modal de detalhes do usuario
   ============================================================ */
.user-detail-overlay {
  align-items: flex-start;
  padding: 2rem 1rem;
  overflow-y: auto;
}

.user-detail-card {
  width: 100%;
  max-width: min(1280px, 95vw);
  background: var(--bg-raised, var(--ink-paper));
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--on-surface) 12%, transparent), 0 4px 12px color-mix(in oklab, var(--on-surface) 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: auto;
}

.user-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.user-detail-header .dash-card__label { margin: 0; word-break: break-all; flex: 1; }

.user-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.user-detail-close-btn {
  background: none;
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted, var(--text-muted));
  line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.user-detail-close-btn:hover {
  background: rgba(239,68,68,.08);
  border-color: var(--ink-red);
  color: #B91C1C;
}

.user-detail-section {
  border-top: 1px solid var(--ink-blue);
  padding-top: 1rem;
}

.user-detail-section:first-child { border-top: none; padding-top: 0; }

.user-detail-section-title {
  font-size: var(--t-label, 0.72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint, var(--text-muted));
  margin: 0 0 0.65rem;
}

.user-detail-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  margin: 0;
}

.user-detail-dl__row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  flex-wrap: wrap;
}

.user-detail-dl__row dt {
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
  min-width: 160px;
  flex-shrink: 0;
}

.user-detail-dl__row dd {
  margin: 0;
  color: var(--text-primary);
  word-break: break-all;
}

.user-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .user-detail-stats { grid-template-columns: 1fr; }
}

.user-detail-stat {
  background: var(--surface-inset);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.user-detail-stat__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint, var(--text-muted));
  margin-bottom: 0.3rem;
}

.user-detail-stat__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
}

.user-detail-stat__sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.user-detail-chart-wrap { width: 100%; overflow: hidden; }
/* regra canônica de tamanho de .user-detail-chart fica mais abaixo (height:auto +
   max-height); NÃO duplicar height aqui p/ evitar conflito que encolhe o gráfico */

.user-detail-status-row {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.user-detail-status--ok {
  color: #15803D;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.35);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
}

.user-detail-status--err {
  color: #B91C1C;
  background: rgba(239,68,68,.08);
  border: 1px solid var(--ink-red);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
}

.user-detail-loading,
.user-detail-error,
.user-detail-empty {
  font-size: 0.88rem;
  color: var(--text-faint, var(--text-muted));
  margin: 0;
  padding: 0.5rem 0;
}

.user-detail-error { color: #B91C1C; }

/* Varredura de IP automática dentro do "Validar fraude": reaproveita o mesmo
   render do modal de varredura, então as seções vêm aninhadas — a primeira de
   cada rede não repete a linha divisória do título. */
.fraud-ipscan__net + .fraud-ipscan__net {
  margin-top: 0.8rem;
}

.fraud-ipscan__net > .user-detail-section:first-child {
  border-top: none;
  padding-top: 0;
}

/* ── IPs usados ── */
.ip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.ip-list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  line-height: 1.4;
}

.ip-list__addr {
  font-family: monospace;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-all;
}

.ip-list__meta { font-size: 0.78rem; color: var(--text-faint, var(--text-muted)); }

.ip-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
  border: 1px solid currentColor;
  flex-shrink: 0;
}

.ip-badge--uso      { color: #15803D; background: rgba(34,197,94,.10); }
.ip-badge--cadastro { color: #1A56DB; background: rgba(59,130,246,.10); }

/* ── Suspeita de conta duplicada ── */
.dup-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  margin-bottom: 0.6rem;
}

.dup-label { font-weight: 600; color: var(--text-faint, var(--text-muted)); }

.dup-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.65rem;
  border: 1px solid currentColor;
  flex-shrink: 0;
}

.dup-badge--sim { color: #B91C1C; background: rgba(239,68,68,.08); }
.dup-badge--nao { color: #15803D; background: rgba(34,197,94,.10); }

.dup-siblings { margin-top: 0.4rem; }

.dup-siblings__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
  margin: 0 0 0.3rem;
}

.dup-siblings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.sibling-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
  word-break: break-all;
}

.sibling-link:hover { color: var(--text-primary); }

/* Botão inline de blacklist nas linhas de IP/e-mail do detalhe do cliente */
.dup-siblings__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bl-toggle {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
}

.bl-toggle--error {
  background: #8A1C00;
  color: var(--ink-paper);
}

/* ── Grafico: cabecalho, legenda e seletor de janela ── */
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.chart-legend { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.chart-legend-item {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}

.chart-legend-item--in  { color: #1A56DB; background: rgba(59,130,246,.10); }
.chart-legend-item--out { color: var(--text-muted, var(--text-muted)); background: color-mix(in oklab, var(--on-surface) 12%, transparent); }
.chart-legend-item--req { color: #4338CA; background: rgba(99,102,241,.10); }

.chart-window-selector { display: flex; gap: 0.25rem; }

.chart-window-btn {
  background: var(--surface-inset);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted, var(--text-muted));
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.chart-window-btn:hover { background: color-mix(in oklab, var(--on-surface) 14%, transparent); border-color: color-mix(in oklab, var(--on-surface) 28%, transparent); color: var(--text-primary); }

.chart-window-btn--active {
  background: var(--ink-blue);
  border-color: transparent;
  color: var(--ink-paper);
}

.chart-window-btn--active:hover { opacity: 0.85; }

.chart-axis-y-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
  text-align: right;
  margin-bottom: 0.15rem;
  padding-right: 0.25rem;
}

.user-detail-chart { display: block; width: 100%; height: auto; max-height: 320px; }

.chart-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
  margin-top: 0.4rem;
}

.chart-summary strong { color: var(--text-primary); }

/* Tooltip instantâneo das colunas dos gráficos (chart-hcol/chart-tip) */
.user-detail-chart .chart-tip {
  visibility: hidden;
  pointer-events: none;
}

.user-detail-chart .chart-hcol:hover .chart-tip {
  visibility: visible;
}

.user-detail-chart .chart-hcol:hover .chart-hcol-hit {
  fill: rgba(17, 17, 17, 0.05);
}

/* ── Prompts do cliente ─────────────────────────────────────────────── */

/* Controles: label + input + presets + botão de análise */
.prompts-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.prompts-hours-label {
  color: var(--text-faint, var(--text-muted));
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
}

.prompts-hours-input {
  background: var(--surface-inset);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  width: 4.5rem;
  /* ocultar spinner nativo para visual limpo */
  -moz-appearance: textfield;
}

.prompts-hours-input::-webkit-inner-spin-button,
.prompts-hours-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.prompts-hours-input:focus {
  outline: 2px solid var(--ink-blue);
  outline-offset: 1px;
}

/* Grupo de botões preset 6h/12h/24h — reutiliza .chart-window-btn.
   A retenção real dos artefatos é um anel de 10.000 arquivos (~19,5 h),
   por isso não existe preset acima de 24h. */
.prompts-presets {
  display: flex;
  gap: 0.25rem;
}

/* Estado ativo dos presets — espelha .chart-window-btn--active */
.prompts-preset-btn--active {
  background: var(--ink-blue);
  border-color: transparent;
  color: var(--ink-paper);
}

.prompts-preset-btn--active:hover {
  background: var(--ink-blue);
  border-color: transparent;
  opacity: 0.85;
}

/* Botão "Analisar prompts" — herda .token-btn; margem inline-start automática */
.prompts-analyze-btn {
  margin-inline-start: auto;
}

/* Nota fixa sobre a retenção dos artefatos */
.prompts-window-note {
  color: var(--text-faint, var(--text-muted));
  font-size: 0.72rem;
  line-height: 1.4;
  margin: 0 0 0.6rem;
}

/* ── Barra de filtros (só aparece com relatório carregado) ─────────── */
.prompts-filters {
  align-items: center;
  border-top: 1px solid var(--ink-blue);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  padding-top: 0.6rem;
}

.prompts-filters[hidden] {
  display: none;
}

.prompts-filter-label {
  color: var(--text-faint, var(--text-muted));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.prompts-select,
.prompts-search {
  background: var(--surface-inset);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
}

.prompts-search {
  min-width: 12rem;
}

.prompts-select:focus,
.prompts-search:focus {
  outline: 2px solid var(--ink-blue);
  outline-offset: 1px;
}

/* Toggles e ações (mostrar máquina / agrupar / copiar / exportar) */
.prompts-toggle-btn {
  background: var(--surface-inset);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
}

.prompts-toggle-btn:hover:not(:disabled) {
  background: var(--ink-blue);
  border-color: transparent;
  color: var(--ink-paper);
}

.prompts-toggle-btn[aria-pressed="true"] {
  background: var(--ink-blue);
  border-color: transparent;
  color: var(--ink-paper);
}

.prompts-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.prompts-toggle-btn--right {
  margin-inline-start: auto;
}

/* Área de resultado */
.prompts-result {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ── Cabeçalho honesto: cobertura, janela, corte ───────────────────── */
.prompts-coverage {
  color: var(--text-faint, var(--text-muted));
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

.prompts-coverage strong {
  color: var(--text-primary);
}

.prompts-coverage__warn {
  color: #B91C1C;
}

.prompts-window {
  color: var(--text-faint, var(--text-muted));
  font-size: 0.74rem;
  line-height: 1.45;
  margin: 0;
}

.prompts-cap {
  color: #B91C1C;
  font-size: 0.74rem;
  font-weight: 600;
  margin: 0;
}

/* ── Linha de resumo do que está na tela ───────────────────────────── */
.prompts-summary {
  color: var(--text-faint, var(--text-muted));
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0.2rem 0 0;
}

.prompts-summary strong {
  color: var(--text-primary);
}

.prompts-hidden-note {
  color: #B91C1C;
}

/* ── Tabela de turnos ──────────────────────────────────────────────── */
.prompts-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prompts-table {
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 0;
  width: 100%;
}

.prompts-table th {
  background: color-mix(in oklab, var(--on-surface) 12%, transparent);
  border: 1px solid var(--ink-blue);
  color: var(--text-muted, var(--text-muted));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.prompts-table td {
  border: 1px solid var(--ink-blue);
  color: var(--text-muted, var(--text-muted));
  line-height: 1.4;
  padding: 0.35rem 0.6rem;
  vertical-align: top;
}

/* Zebra */
.prompts-table tbody tr:nth-child(even) td {
  background: color-mix(in oklab, var(--on-surface) 10%, transparent);
}

.prompts-table tbody tr:hover td {
  background: color-mix(in oklab, var(--on-surface) 11%, transparent);
}

/* Turno de máquina: fica visualmente recuado do que o cliente escreveu */
.prompts-row--maquina td {
  color: var(--text-faint, var(--text-muted));
}

/* O recuo é dado por espaço, não por faixa lateral colorida: a linha de máquina
   já se distingue pelo texto esmaecido e pela etiqueta de origem, e faixa de
   acento na borda é proibida no guia de interface deste projeto. */
.prompts-row--maquina .prompts-col-num {
  padding-inline-start: 1.1rem;
}

/* Coluna # (índice) — estreita e centralizada */
.prompts-col-num {
  color: var(--text-faint, var(--text-muted));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  width: 2.5rem;
}

/* Coluna Data e hora (UTC) — monospace compacto, duas linhas */
.prompts-col-hora {
  font-family: monospace;
  font-size: 0.74rem;
  white-space: nowrap;
  width: 6.5rem;
}

/* Coluna Prompt — ocupa a sobra */
.prompts-col-prompt {
  max-width: 0; /* força célula a respeitar largura relativa */
  width: 100%;
}

/* Texto integral do turno: preserva quebras de linha e nunca corta por
   caractere. O corte é só visual (max-height) e só existe quando há botão. */
.prompts-turn__text {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompts-turn__text--clamp {
  max-height: 9.5rem;
  overflow: hidden;
}

.prompts-turn__text--open {
  max-height: none;
  overflow: visible;
}

.prompts-expand-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 0.2rem;
  padding: 0;
  text-decoration: underline;
}

.prompts-expand-btn:hover {
  color: var(--text-primary);
}

/* Metadados do turno (repetição, origem, sessão, copiar) */
.prompts-turn__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.prompts-chip {
  background: color-mix(in oklab, var(--on-surface) 13%, transparent);
  border-radius: var(--radius-badge);
  color: var(--text-faint, var(--text-muted));
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
}

.prompts-chip--maquina {
  background: color-mix(in oklab, var(--on-surface) 16%, transparent);
  color: var(--text-muted, var(--text-muted));
}

.prompts-chip--reask {
  background: rgba(185,28,28,.1);
  color: #B91C1C;
}

/* Reenvio do agente: é o chip mais frequente da tela e não pode competir com
   o "pediu de novo" — fica só com contorno, sem preenchimento. */
.prompts-chip--resend {
  background: none;
  border: 1px solid var(--ink-blue);
  color: var(--text-faint, var(--text-muted));
  font-weight: 600;
}

.prompts-chip--warn {
  color: #B91C1C;
}

.prompts-chip--muted {
  background: none;
  color: var(--text-faint, var(--text-muted));
  padding-inline: 0;
}

.prompts-copy-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.prompts-copy-btn:hover {
  color: var(--text-primary);
}

/* Coluna Cliente — de qual ferramenta veio o turno */
.prompts-col-cliente {
  font-size: 0.74rem;
  font-weight: 600;
  width: 8rem;
}

/* Coluna Modelo — compacto */
.prompts-col-modelo {
  font-family: monospace;
  font-size: 0.74rem;
  white-space: nowrap;
  width: 7rem;
}

/* ── Estados: loading / vazio / erro ───────────────────────────────── */
.prompts-state-msg {
  color: var(--text-faint, var(--text-muted));
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0;
  padding: 0.5rem 0;
}

.prompts-state-msg strong {
  color: var(--text-primary);
}

.prompts-state-msg--error {
  color: #B91C1C;
}

.prompts-state-msg--error strong {
  color: #B91C1C;
}

/* ============================================================
   Admin Atlas — port das seções novas (guias, fraudes, métricas,
   providers, blacklist, servidores, farol)
   ============================================================ */

/* ── Ações da topbar ─────────────────────────────────────────────────── */
.auth-topbar__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* Na landing o .top-bar__doc some no mobile (≤639px). No admin/painel esses
   botões são navegação funcional (Painel, Testar providers): mantém visíveis,
   apenas com fonte/padding um pouco menores para caber em telas estreitas. */
.auth-topbar__actions .top-bar__doc {
  display: inline-flex;
}
@media (max-width: 480px) {
  .auth-topbar__actions .top-bar__doc {
    font-size: 0.72rem;
    padding: 0.45rem 0.7rem;
  }
}

/* Gauge de % de 200 no header do /admin, ao lado do logo. É um instrumento,
   não um botão de ação: superfície neutra, tinta só no ponteiro. Ao contrário
   dos faróis de quota (onde alto é ruim), aqui ALTO É BOM — verde >= 95%,
   âmbar 85–95%, vermelho abaixo. Clicar recalcula. */
.succ-gauge {
  --band: #9A9A9A;
  box-sizing: border-box;
  flex: none;
  width: 5.5rem;
  padding: 0;
  border: 1px solid var(--border-hairline, var(--ink-blue));
  border-radius: 10px;
  background: var(--surface-inset);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--on-surface) 13%, transparent);
  cursor: pointer;
  line-height: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Fileira dos gauges: o total primeiro, depois um por provider. O topbar é
   space-between; sem o margin-right auto a fileira pararia no meio do header
   em vez de ficar colada no logo. */
.succ-gauges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.auth-topbar__inner .succ-gauges { margin-right: auto; }
/* Hierarquia: o total é a manchete, os providers são o detalhamento. Mesma
   linguagem, um passo abaixo em tamanho — não em cor (a banda continua
   valendo igual nos cinco). */
.succ-gauge--provider { width: 4.5rem; }
/* O gauge de provider é menor, então a legenda precisa de mais unidades de
   viewBox para chegar na tela com o MESMO tamanho de leitura do gauge do
   total (~9px reais). Sem isto o nome do provider vira borrão. */
.succ-gauge--provider .succ-gauge__cap { font-size: 13px; }
/* Mesmo sinal de clicável da .prov-acct: só a borda escurece (sem lift, que
   seria um segundo vocabulário para a mesma affordance). */
.succ-gauge:hover { border-color: rgba(17, 17, 17, 0.4); }
.succ-gauge:focus-visible { outline: 2px solid var(--text-primary, var(--ink-blue)); outline-offset: 2px; }
/* Ocupado: cursor e leve recuo do desenho. A opacidade fica SÓ no SVG e é
   suave — apagar o instrumento inteiro derrubava o contraste do número e
   fazia o alarme vermelho clarear justo enquanto atualizava. */
.succ-gauge[aria-busy="true"] { cursor: progress; }
.succ-gauge[aria-busy="true"] svg { opacity: 0.75; }
/* Largura fixa + altura automática: a proporção vem do viewBox, então o arco
   nunca é espremido por letterbox (armadilha já vista nos gráficos do /admin). */
.succ-gauge svg { display: block; width: 100%; height: auto; }
.succ-gauge__track {
  fill: none;
  stroke: rgba(17, 17, 17, 0.12);
  stroke-width: 9;
  stroke-linecap: round;
}
.succ-gauge__fill {
  fill: none;
  stroke: var(--band);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}
/* Marca do corte do verde (95%): marco de escala NÃO cromático — quem não
   distingue verde de âmbar ainda lê "passou do corte" pela posição. */
.succ-gauge__tick {
  /* 0.55 dá 3.2:1 contra o trilho (passa o mínimo de objeto gráfico); sobre o
     ponteiro preenchido ela some um pouco, e tudo bem: o marco importa quando
     ainda NÃO se chegou lá. */
  stroke: rgba(17, 17, 17, 0.55);
  stroke-width: 1.5;
  stroke-linecap: butt;
}
.succ-gauge__val {
  fill: var(--text-primary, var(--ink-blue));
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.succ-gauge__sign { font-size: 13px; font-weight: 700; }
.succ-gauge__cap {
  fill: var(--text-primary, var(--ink-blue));
  opacity: 0.72;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* 0% = fim de escala, não ausência: o trilho inteiro assume a banda. */
.succ-gauge--zero .succ-gauge__track { stroke: var(--band); opacity: 0.32; }
/* Valor velho (ou leitura que falhou) perde a autoridade da cor: continua
   legível, mas para de afirmar que é "agora". */
.succ-gauge--stale .succ-gauge__fill,
.succ-gauge--stale.succ-gauge--zero .succ-gauge__track { stroke: #9A9A9A; }
.succ-gauge--stale { background: var(--surface-inset); border-style: dashed; }
.succ-gauge--ok { --band: #2F9E4F; }
/* Mesma escalada de superfície dos faróis de quota (.prov-chip--*): no verde a
   caixa fica neutra e só o problema ganha tinta. Sem isto o incidente do
   gateway ficava mais discreto que um aviso de cota. */
.succ-gauge--warn { --band: #C97A06; background: #FFF8EE; border-color: rgba(122, 74, 0, 0.28); }
.succ-gauge--danger { --band: #C4331A; background: #FDF0EC; border-color: rgba(138, 28, 0, 0.32); }
.succ-gauge--off { --band: #BDBDBD; }
@media (prefers-reduced-motion: reduce) {
  .succ-gauge,
  .succ-gauge__fill { transition: none; }
}

/* Faróis de uso dos providers (só /admin.html). A faixa é a visão de
   RELANCE: um chip de UMA LINHA por provider — nome, nº de contas e uma
   bolinha por conta — respondendo "alguém está no vermelho?" sem custar
   altura de tela. Medidores, mediana e erros vivem no modal do provider, a
   um clique. A banda segue a PIOR conta: verde < 60%, âmbar 60–85%,
   vermelho > 85% (ou o estado de entrega, nos providers sem quota). A
   superfície fica neutra no verde e só ganha tinta em âmbar/vermelho — com
   vários faróis lado a lado, o que precisa saltar é o problema. */
.prov-usage {
  --sweep: 0%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.prov-chip {
  --band: #9A9A9A;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  background: var(--surface-inset);
  color: var(--text-primary, var(--ink-blue));
  border: 1px solid var(--border-hairline, var(--ink-blue));
  border-radius: 999px;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--on-surface) 13%, transparent);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Régua de atualização: fio na base que o admin.js preenche via --sweep ao
   longo do ciclo de refresh — cheio e parado = atualização pendente. */
.prov-chip::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--sweep, 0%);
  background: rgba(17, 17, 17, 0.28);
}
/* Sinal de "abre alguma coisa" no idioma da casa: o contorno fecha e o papel
   sobe um degrau. Reservado ao hover p/ a faixa em repouso ficar quieta. */
.prov-chip:hover {
  border-color: rgba(17, 17, 17, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px color-mix(in oklab, var(--on-surface) 16%, transparent);
}
.prov-chip:active { transform: none; box-shadow: 0 1px 2px color-mix(in oklab, var(--on-surface) 13%, transparent); }
.prov-chip:focus-visible { outline: 2px solid var(--text-primary, var(--ink-blue)); outline-offset: 2px; }
.prov-chip__name {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.prov-chip__count {
  flex: none;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--text-primary, var(--ink-blue));
  color: var(--surface-inset);
  font-size: 0.58rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.prov-chip__dots { display: flex; align-items: center; gap: 3px; }
.prov-chip__more { font-size: 0.58rem; font-weight: 700; color: var(--text-faint); }

/* Bolinha por conta: o status de TODAS as contas sem abrir nada. */
.prov-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid rgba(17, 17, 17, 0.18);
}
.prov-dot--ok { background: #2F9E4F; }
.prov-dot--warn { background: #E0912F; }
.prov-dot--danger { background: #D64B2F; }
.prov-dot--off { background: #D2D2D2; }

.prov-chip--ok { --band: #2F9E4F; }
.prov-chip--warn { --band: #C97A06; background: #FFF8EE; border-color: rgba(122, 74, 0, 0.28); }
.prov-chip--danger { --band: #C4331A; background: #FDF0EC; border-color: rgba(138, 28, 0, 0.32); }
.prov-chip--off { --band: #BDBDBD; }

.prov-meter { display: flex; align-items: center; gap: 0.35rem; }
.prov-meter__label { flex: none; width: 1.4em; font-weight: 700; color: var(--text-faint); }
.prov-meter__track {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.1);
  overflow: hidden;
}
/* Sem transição de largura: o medidor é sempre reconstruído (innerHTML), nunca
   mutado no lugar — animar `width` aqui só custaria reflow sem nunca animar. */
.prov-meter__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--band);
}
.prov-meter__val {
  flex: none;
  width: 2.6em;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Sem dado = trilho hachurado (instrumento sem sinal), não barra zerada. */
.prov-meter--empty .prov-meter__track {
  background: repeating-linear-gradient(-45deg,
    rgba(17, 17, 17, 0.12) 0 3px, transparent 3px 6px);
}
.prov-meter--empty .prov-meter__val { color: var(--text-faint); }

/* ── Modal do provider: uma linha por conta ──────────────────────────── */
/* Card mais largo que o padrão de 480px: cada linha carrega nome + dois
   medidores, e a 480px o nome da conta seria cortado quase sempre. */
.prov-modal-card { max-width: 560px; }
.prov-accts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.15rem 0 0.2rem;
  /* 13 contas (opencode-zen) não cabem na tela: rola aqui dentro, com o
     título e o rodapé do modal sempre à vista. */
  max-height: 52vh;
  overflow-y: auto;
}
.prov-acct {
  --band: #9A9A9A;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.6rem;
  background: var(--surface-inset);
  color: var(--text-primary, var(--ink-blue));
  border: 1px solid var(--border-hairline, var(--ink-blue));
  border-radius: 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.prov-acct:hover { border-color: rgba(17, 17, 17, 0.4); }
.prov-acct:focus-visible { outline: 2px solid var(--text-primary, var(--ink-blue)); outline-offset: 2px; }
.prov-acct__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--band);
  box-shadow: 0 0 0 1.5px rgba(17, 17, 17, 0.14);
}
.prov-acct__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Largura fixa dos medidores: as barras alinham em coluna entre as linhas,
   que é o que deixa a comparação entre contas possível de relance. */
.prov-acct__meters {
  flex: none;
  width: 10.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-size: 0.68rem;
}
/* Providers sem quota (opencode-zen): no lugar dos dois medidores, o estado
   de entrega — % servido na janela e o veredito contra a frota. */
.prov-acct__health {
  flex: none;
  width: 10.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.prov-acct__health-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  line-height: 1.05;
  color: var(--band);
}
.prov-acct__health-txt { color: var(--text-faint); line-height: 1.05; font-size: 0.68rem; }

.prov-acct--ok { --band: #2F9E4F; }
.prov-acct--warn { --band: #C97A06; background: #FFF8EE; border-color: rgba(122, 74, 0, 0.28); }
.prov-acct--danger { --band: #C4331A; background: #FDF0EC; border-color: rgba(138, 28, 0, 0.32); }
.prov-acct--off { --band: #BDBDBD; }

@media (max-width: 640px) {
  .prov-chip { font-size: 0.64rem; }
  .prov-chip__name { font-size: 0.66rem; }
  /* Nome e medidores empilham: a 360px a linha em uma tira só corta o nome. */
  .prov-acct { flex-wrap: wrap; }
  .prov-acct__meters,
  .prov-acct__health { width: 100%; padding-left: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .prov-chip,
  .prov-acct { transition: none; }
  .prov-chip:hover { transform: none; }
}

/* Faixa dedicada de uso dos providers: 2a linha do header, separada da
   toolbar de botões (Testar/Proxies/Painel) por um divisor. */
.auth-topbar__status {
  max-width: 1100px;
  margin: 0.6rem auto 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(17, 17, 17, 0.14);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.auth-topbar__status-label {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary, var(--ink-blue));
  opacity: 0.6;
}
/* Base pequena p/ os faróis: eles quebram entre si em vez de empurrar o
   botão Atualizar para a linha de baixo. */
.auth-topbar__status .prov-usage { flex: 1 1 12rem; min-width: 0; }
.auth-topbar__status #refresh-usage-btn { margin-left: auto; }

/* Badge de origem do cadastro (site de procedência) */
.status-badge--source { background: transparent; color: var(--text-primary, var(--ink-blue)); }
.status-badge--source.status-badge--atlas { background: #ECECEC; color: var(--text-primary, var(--ink-blue)); }
.status-badge--source.status-badge--codemax { background: #FDECE3; color: #C1440C; }

/* ============================================================
   Guias do admin (Funções / Validar Fraudes)
   ============================================================ */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.admin-tab {
  font-family: inherit;
  font-weight: 700;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.6rem 1.1rem;
  background: var(--surface-inset);
  color: var(--text-primary, var(--ink-blue));
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-3d-sm);
  cursor: pointer;
  transition: transform 0.05s ease;
}
.admin-tab:hover { transform: translateY(-1px); }
.admin-tab.is-active {
  background: var(--ink-red);
  color: var(--surface-inset);
}

.admin-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Relatório de validação de fraudes ── */
.fraud-report { margin-top: 1rem; }
.fraud-section { margin-top: 1.5rem; }
.fraud-section:first-child { margin-top: 0; }
.fraud-section__title {
  font-size: var(--t-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.fraud-cluster {
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-card);
  background: var(--surface-inset);
  padding: 1rem;
  margin-bottom: 1rem;
}
.sibling-revoke-result {
  font-size: 0.85rem;
  opacity: 0.85;
}

.fraud-result {
  font-size: 0.85rem;
  opacity: 0.85;
}

.fraud-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fraud-cluster__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.fraud-cluster__ip {
  font-weight: 700;
  font-size: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.fraud-cluster__count {
  font-weight: 700;
  font-size: var(--t-label);
  color: var(--text-muted);
}
.fraud-cluster__src {
  font-size: var(--t-micro);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Linha de filtros por coluna (Origem/Status/Plano) no cabeçalho */
.users-filter-row th {
  padding: 0 0.9rem 0.55rem;
  text-transform: none;
  letter-spacing: 0;
}
.col-filter {
  width: 100%;
  min-width: 88px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-inset);
  color: var(--text-primary, var(--ink-blue));
  cursor: pointer;
}
.col-filter:focus {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(17,17,17,.18));
}

/* ── Validar fraude (modal por usuário) ──────────────────────────────── */
.fraud-check-verdict {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid currentColor;
  margin-bottom: 1.25rem;
}

.fraud-check-verdict__label {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fraud-check-verdict__detail {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.fraud-check-verdict--suspeito {
  color: #8A1C00;
  background: #FDE7E0;
}

.fraud-check-verdict--atencao {
  color: #7A4A00;
  background: #FFF1D6;
}

.fraud-check-verdict--ok {
  color: #14532D;
  background: #E3F6E5;
}

.fraud-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--ink-blue);
}

.fraud-check-row:first-of-type {
  border-top: none;
}

.fraud-check-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.fraud-check-row__title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary, var(--ink-blue));
}

.fraud-check-row__evidence {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Legenda extra do gráfico: economia por cache */
.chart-legend-item--cache {
  color: #0d9488;
  background: #ccfbf1;
}

/* Linha de economia estimada por cache (seção Cache) */
.user-detail-cache-savings {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f766e;
}

.user-detail-cache-note {
  font-weight: 500;
  color: color-mix(in oklab, var(--on-surface) 53%, transparent);
}

/* Estado vazio do gráfico (usuário sem atividade no período) */
.chart-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  background: color-mix(in oklab, var(--on-surface) 10%, transparent);
  border: 1px dashed color-mix(in oklab, var(--on-surface) 22%, transparent);
  border-radius: 10px;
}

/* Modal de status de providers (admin → Testar Providers) */
.providers-modal-card {
  max-width: 620px;
}

.providers-modal-card .email-modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

.provider-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--ink-blue);
}

.provider-row:last-child {
  border-bottom: 0;
}

.provider-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.provider-row__id {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.provider-row__id strong {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.provider-row__type {
  font-size: 0.8rem;
  opacity: 0.7;
  overflow-wrap: anywhere;
}

.provider-row__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.provider-row__detail {
  font-size: 0.8rem;
  opacity: 0.75;
  min-width: 4.5rem;
  text-align: right;
}

.provider-row__retest {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
}

.provider-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  font-size: 0.78rem;
}

.provider-row__quota {
  opacity: 0.8;
}

.provider-row__limit {
  font-weight: 700;
  color: #8A1C00;
  background: #FDE2C7;
  border: 1px solid var(--ink-blue);
  padding: 0.1rem 0.55rem;
  border-radius: 9999px;
}

.provider-row__models-toggle {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: underline;
}

.provider-row__models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.2rem;
}

.model-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--on-surface) 33%, transparent);
}

.model-chip--up {
  background: #C8F0CE;
  color: #14532D;
}

.model-chip--down {
  background: #FAD2C7;
  color: #8A1C00;
  border-color: #8A1C00;
}

/* ============================================================
   Aba "Métricas" — dashboard agregado de uso
   Reusa chart-window-btn/token-btn e as cards .dash-card;
   barras horizontais próprias.
   ============================================================ */
.metrics-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.metrics-control-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.metrics-control-label {
  font-size: var(--t-micro, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.metrics-btn-group {
  display: flex;
  gap: 0.25rem;
}

.metrics-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary, var(--ink-blue));
  cursor: pointer;
  user-select: none;
}

.metrics-toggle input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--ink-red);
  cursor: pointer;
}

.metrics-refresh-btn {
  margin-inline-start: auto;
}

/* Grid responsivo dos cards de totais */
.metrics-totals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.metrics-total-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  background: var(--surface-inset);
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-badge, 0.5rem);
  box-shadow: var(--shadow-3d-sm);
}

.metrics-total-label {
  font-size: var(--t-micro, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.metrics-total-value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary, var(--ink-blue));
}

/* Barras horizontais (quem usa mais / combos / providers) */
.metrics-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.metrics-bar-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metrics-bar-row--link {
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.metrics-bar-row--link:hover {
  background-color: rgba(127, 127, 127, 0.12);
}

.metrics-bar-row--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.metrics-bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.metrics-bar-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary, var(--ink-blue));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metrics-bar-meta {
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
}

.metrics-bar-track {
  position: relative;
  height: 0.85rem;
  background: color-mix(in oklab, var(--on-surface) 14%, transparent);
  border: 1px solid var(--ink-blue);
  border-radius: 9999px;
  overflow: hidden;
}

.metrics-bar-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--ink-red);
  border-radius: 9999px;
}

.metrics-empty {
  font-weight: 700;
}

/* Texto auxiliar do cabecalho do card (usado no admin, nunca definido aqui). */
.dash-card__hint {
  font-size: var(--t-micro, 0.7rem);
  color: var(--text-muted);
  margin: -0.25rem 0 0.85rem;
}

/* ── Pagantes x trial ────────────────────────────────────────────────────
   Barra de fatia + tabela comparativa. Laranja e preto são LITERAIS de
   propósito: são as mesmas cores que o buildMetricsChart pinta no SVG da
   série logo acima (que não usa token). Puxá-las de --black/--orange-500
   aqui inverteria — nesta marca --black é var(--ink-paper) — e o segmento do trial
   sumiria no fundo. A estrutura (bordas, texto, pesos) segue os tokens
   desta marca, como o resto das métricas. */
.cohort {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cohort-share {
  display: flex;
  height: 2.6rem;
  background: var(--surface-inset);
  border: 1px solid var(--border-hairline, var(--ink-blue));
  border-radius: var(--radius-badge, 0.5rem);
  box-shadow: var(--shadow-3d-sm);
  overflow: hidden;
}

.cohort-share__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3px;
  border-inline-end: 1px solid var(--border-hairline, var(--ink-blue));
}

.cohort-share__seg:last-child {
  border-inline-end: 0;
}

.cohort-share__seg--paying { background: #F94E03; }
.cohort-share__seg--trial { background: #050505; }
.cohort-share__seg--unknown { background: rgba(5, 5, 5, 0.14); }

.cohort-share__pct {
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cohort-share__seg--paying .cohort-share__pct { color: #050505; }
.cohort-share__seg--trial .cohort-share__pct { color: var(--ink-paper); }
.cohort-share__seg--unknown .cohort-share__pct { color: rgba(5, 5, 5, 0.72); }

.cohort-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cohort-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.cohort-legend__swatch {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  border: 1px solid var(--border-hairline, var(--ink-blue));
  border-radius: 3px;
}

.cohort-legend__swatch--paying { background: #F94E03; }
.cohort-legend__swatch--trial { background: #050505; }
.cohort-legend__swatch--unknown { background: rgba(5, 5, 5, 0.14); }

.cohort-legend__name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary, var(--ink-blue));
}

.cohort-legend__pct {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Tabela larga rola dentro do próprio container — a página nunca rola lateral. */
.cohort-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cohort-table {
  width: 100%;
  min-width: 20rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.cohort-table th,
.cohort-table td {
  padding: 0.5rem 0.6rem;
  text-align: right;
  border-bottom: 1px solid var(--border-hairline, var(--ink-blue));
  white-space: nowrap;
}

.cohort-table thead th {
  border-bottom: 1px solid var(--text-primary, var(--ink-blue));
}

/* O rótulo da métrica acompanha a rolagem horizontal: sem isto, no celular
   você lê "48,35 mi" sem saber mais de qual linha ele é. */
.cohort-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-inset);
}

.cohort-table td {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, var(--ink-blue));
}

/* Rótulo da coluna carrega a cor da própria coorte: é o que amarra a tabela
   à barra de fatia sem repetir a legenda uma terceira vez. O traço vive num
   span inline-block para ter a largura do TEXTO — esticado pela célula inteira
   ele viraria um divisor, não a marca da coluna. */
.cohort-table__head {
  font-size: var(--t-micro, 0.7rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary, var(--ink-blue));
}

.cohort-table__head-txt {
  display: inline-block;
  padding-bottom: 0.3rem;
  border-bottom: 3px solid transparent;
}

.cohort-table__head-txt--paying { border-bottom-color: #F94E03; }
.cohort-table__head-txt--trial { border-bottom-color: #050505; }
.cohort-table__head-txt--unknown { border-bottom-color: rgba(5, 5, 5, 0.28); }

.cohort-table__row--sub th[scope="row"] {
  padding-left: 1.4rem;
  font-weight: 600;
}

.cohort-table__row--sub td {
  font-weight: 600;
  color: var(--text-muted);
}

.cohort-table__row--strong th[scope="row"] {
  font-weight: 700;
  color: var(--text-primary, var(--ink-blue));
}

.cohort-table__row--strong td {
  font-size: 1.05rem;
  font-weight: 800;
}

/* Última linha ("tokens por conta") fecha como linha de total. */
.cohort-table tbody tr:last-child th,
.cohort-table tbody tr:last-child td {
  padding-top: 0.7rem;
  border-top: 1px solid var(--text-primary, var(--ink-blue));
  border-bottom: 0;
}

.cohort-verdict {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary, var(--ink-blue));
}

.cohort-verdict strong {
  font-weight: 800;
}

@media (max-width: 560px) {
  .cohort-share { height: 2.2rem; }
  .cohort-table th,
  .cohort-table td { padding: 0.45rem 0.45rem; }
  .cohort-table__row--strong td { font-size: 0.95rem; }
}

/* ── Revogar + Blacklist (picker de sinais) + desbloqueio em lote ───────── */
.revoke-bl-card {
  max-width: 34rem;
}

.revoke-bl__signal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
}

.revoke-bl__signal input {
  flex: 0 0 auto;
}

.revoke-bl__sig-value {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.revoke-bl__contexts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.blacklist-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.6rem;
}

/* Botão "armado" (confirmação em 2 cliques, substitui window.confirm):
   estado destrutivo pendente ganha preenchimento cheio para ser inconfundível. */
/* Os 3 !important daqui eram ordem de cascata, não necessidade: este
   arquivo carrega DEPOIS do styles.v2.css e `.btn-cartoon--armed` tem
   a mesma especificidade (0,1,0) de `.btn-cartoon`, então já vence por
   ordem. Nenhuma regra posterior de .token-btn/.btn-cartoon compete.
   O #8A1C00 continua cravado de propósito: é o único vermelho mais
   fundo que --ink-red-700, e o botão primário JÁ é o red-700 — sem um
   tom próprio o estado destrutivo ficaria idêntico ao normal. Entra na
   escala de tintas quando a direção definir um ink destrutivo. */
.token-btn--armed,
.btn-cartoon--armed {
  background: #8A1C00;
  border-color: #8A1C00;
  color: var(--ink-paper);
}

/* Editor inline de entrada da blacklist (substitui os window.prompt) */
.bl-edit-row td {
  background: #FDF3EC;
}

.bl-edit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.25rem;
}

.bl-edit-form__value {
  font-weight: 600;
  margin-right: 0.4rem;
}

/* Linha de contexto (motivo + data) das entradas no modal "Tirar da Blacklist" */
.unbl-entry__meta {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: 1.7rem;
}

/* ── Aba Servidores (monitor de hardware/pressão) ───────────────────────── */
.servers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.servers-head__ctl { display: flex; align-items: center; gap: 0.6rem; }
.servers-updated { font-size: 0.8rem; opacity: 0.7; }
.btn-cartoon--sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.srv-card {
  border: 1px solid color-mix(in oklab, var(--on-surface) 20%, transparent);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  background: color-mix(in oklab, var(--ink-paper-100) 68%, transparent);
  border-left: 4px solid #9ca3af;
}
.srv-card--ok   { border-left-color: #16a34a; }
.srv-card--warn { border-left-color: #d97706; }
.srv-card--crit { border-left-color: #dc2626; }
.srv-card--off  { border-left-color: var(--text-faint); opacity: 0.85; }

.srv-card__head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem; }
.srv-card__id { flex: 1; min-width: 0; }
.srv-card__title { margin: 0; font-size: 1rem; font-weight: 700; }
.srv-card__role { margin: 0; font-size: 0.78rem; opacity: 0.7; }

.srv-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; background: #9ca3af; }
.srv-dot--ok   { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.srv-dot--warn { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18); }
.srv-dot--crit { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.srv-dot--off  { background: #6b7280; }

.srv-card__status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.srv-card__status--ok   { color: #16a34a; }
.srv-card__status--warn { color: #d97706; }
.srv-card__status--crit { color: #dc2626; }
.srv-card__status--off  { color: var(--text-faint); }

.srv-card__body { display: flex; flex-direction: column; gap: 0.4rem; }
.srv-metric { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.srv-metric--row { grid-template-columns: 6.5rem 1fr; }
.srv-metric__k { opacity: 0.72; }
.srv-metric__v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.srv-bar { height: 0.5rem; border-radius: 0.4rem; background: color-mix(in oklab, var(--on-surface) 18%, transparent); overflow: hidden; }
.srv-bar__fill { display: block; height: 100%; border-radius: 0.4rem; }
.srv-bar__fill--ok   { background: #16a34a; }
.srv-bar__fill--warn { background: #d97706; }
.srv-bar__fill--crit { background: #dc2626; }

.srv-card__foot { margin-top: 0.7rem; font-size: 0.72rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.srv-offline { margin: 0.3rem 0; font-size: 0.85rem; color: #dc2626; }

@media (prefers-color-scheme: dark) {
  .srv-card { background: color-mix(in oklab, var(--ink-paper-100) 12%, transparent); border-color: color-mix(in oklab, var(--ink-paper-100) 18%, transparent); }
  .srv-bar { background: color-mix(in oklab, var(--ink-paper-100) 20%, transparent); }
}

/* ── PSI (pressão do kernel) — destaque do valor `full` de memória ──── */
.srv-metric__k small { opacity: 0.6; font-weight: 400; }
.srv-psi-full { font-variant-numeric: tabular-nums; }
.srv-psi-full--ok   { color: #16a34a; }
.srv-psi-full--warn { color: #d97706; font-weight: 600; }
.srv-psi-full--crit { color: #dc2626; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .srv-psi-full--ok   { color: #4ade80; }
  .srv-psi-full--warn { color: #fbbf24; }
  .srv-psi-full--crit { color: #f87171; }
}

/* ── Farol dos providers (chamada real) ─────────────────────────────── */
.farol-modal-card { max-width: 860px; }

/* Loading: farol de 3 luzes piscando em sequência + tempo decorrido. */
.farol-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 2.4rem 1rem 2rem;
  text-align: center;
}
.farol-loading__lamp {
  display: inline-flex;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ink-blue);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-inset);
  box-shadow: var(--shadow-3d-md);
}
.farol-loading__dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid rgba(17, 17, 17, 0.5);
  background: currentColor;
  opacity: 0.28;
  animation: farol-blink 1.25s var(--ease-out-soft, ease-in-out) infinite;
}
.farol-loading__dot--g { color: #16a34a; animation-delay: 0s; }
.farol-loading__dot--y { color: #d97706; animation-delay: 0.22s; }
.farol-loading__dot--r { color: #dc2626; animation-delay: 0.44s; }
@keyframes farol-blink {
  0%, 65%, 100% { opacity: 0.28; transform: scale(0.85); box-shadow: none; }
  30%           { opacity: 1;    transform: scale(1.12); box-shadow: 0 0 0.5rem currentColor; }
}
.farol-loading__title { font-weight: 700; font-size: 1.05rem; margin: 0; }
.farol-loading__sub {
  font-size: 0.82rem; color: var(--text-muted); margin: 0; max-width: 26rem; line-height: 1.4;
}
.farol-loading__elapsed {
  font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent-text); margin: 0.2rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .farol-loading__dot { animation: none; opacity: 0.85; }
}
@media (prefers-color-scheme: dark) {
  .farol-loading__lamp { background: color-mix(in oklab, var(--ink-paper-100) 14%, transparent); border-color: color-mix(in oklab, var(--ink-paper-100) 33%, transparent); }
  .farol-loading__dot { border-color: color-mix(in oklab, var(--ink-paper-100) 43%, transparent); }
  .farol-loading__dot--g { color: #4ade80; }
  .farol-loading__dot--y { color: #fbbf24; }
  .farol-loading__dot--r { color: #f87171; }
}
.farol-stamp { margin: 0 0 0.5rem; font-size: 0.78rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.farol-sub { margin: 0.9rem 0 0.35rem; font-size: 0.82rem; font-weight: 700; opacity: 0.85; }
.farol-sub code { font-size: 0.75rem; background: color-mix(in oklab, var(--on-surface) 14%, transparent); padding: 0.05rem 0.3rem; border-radius: 0.3rem; }
.farol-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.farol-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; white-space: nowrap; }
.farol-table th, .farol-table td { padding: 0.4rem 0.55rem; text-align: left; border-bottom: 1px solid color-mix(in oklab, var(--on-surface) 18%, transparent); }
.farol-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.7; }
.farol-model { font-weight: 700; }
.farol-verd { font-size: 0.75rem; opacity: 0.8; }
.farol-lat { font-size: 0.7rem; opacity: 0.55; font-variant-numeric: tabular-nums; }
.farol-cell { font-variant-numeric: tabular-nums; }
.farol-cell--ativo    { color: #16a34a; }
.farol-cell--cooldown { color: #dc2626; }
.farol-cell--5xx      { color: #d97706; }
.farol-cell--4xx      { color: #ea580c; }
.farol-cell--timeout  { color: var(--text-faint); }
.farol-cell--inativa, .farol-cell--sem-alvo { color: var(--text-faint); }
.farol-cell--na { color: var(--text-faint); opacity: 0.6; }
.farol-legend { margin: 0.8rem 0 0.2rem; font-size: 0.72rem; opacity: 0.7; }
.farol-note { margin: 0.3rem 0; font-size: 0.72rem; opacity: 0.6; line-height: 1.35; }

@media (prefers-color-scheme: dark) {
  .farol-sub code { background: color-mix(in oklab, var(--ink-paper-100) 18%, transparent); }
  .farol-table th, .farol-table td { border-bottom-color: color-mix(in oklab, var(--ink-paper-100) 18%, transparent); }
  .farol-cell--ativo    { color: #4ade80; }
  .farol-cell--cooldown { color: #f87171; }
  .farol-cell--5xx      { color: #fbbf24; }
  .farol-cell--4xx      { color: #fb923c; }
}

/* ============================================================
   Breakout de largura — cards com tabelas/dados densos ocupam
   quase toda a viewport no desktop (users, fraudes, ads,
   blacklist, métricas, servidores). Fonte única de verdade.
   ============================================================ */
@media (min-width: 980px) {
  #users-card,
  .dash-card--wide {
    width: min(2400px, 98vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================================
   Modelos disponíveis — a lista de nomes que o cliente COPIA
   para o campo `model` da ferramenta.

   Estas classes substituem estilo inline que vinha cravado em
   `style=` no painel.html: 12 atributos, e nos dois parágrafos de
   hierarquia o font-size era 0.9rem contra 0.8rem — razão 1.125,
   abaixo do piso de 1.25. Cravar rem no atributo também
   contornava a escala de tipos inteira.

   A hierarquia agora anda pela escala: corpo (--t-body, até
   1.125rem) → rótulo de grupo (--t-overline, até 0.75rem) = razão
   1.5. O chip fica em --t-label (0.85rem) porque é DADO, não um
   degrau de leitura: o que o olho compara é parágrafo contra
   rótulo, e esse par agora tem salto real.
   ============================================================ */
.model-note {
  color: var(--text-muted);
  font-size: var(--t-body);
  line-height: 1.6;
  margin: 0 0 0.85rem;
}

.model-group {
  color: var(--text-faint);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.model-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
}

/* Campo chapado com régua de 2px: o fio de 1px que estava aqui é
   anti-referência declarada no DESIGN.md. */
.model-chip {
  background: color-mix(in oklab, var(--on-surface) 8%, transparent);
  border: 2px solid color-mix(in oklab, var(--on-surface) 34%, transparent);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 700;
  padding: 0.28rem 0.6rem;
}

.model-hint {
  color: var(--text-muted);
  font-size: var(--t-label);
  line-height: 1.5;
  margin: 0;
}