/* Etapa 9. Estilos limitados às telas do cliente; carregar após app.css e affiliates.css. */
.g9-body {
  --g9-ink: #eef4ee;
  --g9-soft: #b4c7c8;
  --g9-line: #354d53;
  --g9-panel: #11222c;
  --g9-gold: #f4c86e;
  background: radial-gradient(circle at 85% 0%, #183c3e 0, transparent 520px), #09151c;
  color: var(--g9-ink);
}
.g9-body .nav {
  max-width: none;
  height: auto;
  min-height: 76px;
  padding: 15px max(22px, calc((100vw - 1220px) / 2));
  gap: 18px;
  flex-wrap: wrap;
  border-color: #334a4d;
  background: #0d2025f2;
}
.g9-body .nav .logo-mark,
.g9-body .auth-logo .logo-mark {background: linear-gradient(145deg, #ffe299, #c18b37)}
.g9-body .nav nav {gap: 5px;flex-wrap: wrap;justify-content: flex-end}
.g9-body .nav nav>a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 9px;
  color: #ccd9d7;
  font-size: 12px;
  font-weight: 700;
}
.g9-body .nav nav>a:not(.btn):hover {background: #24413c;color: #fff}
.g9-body .nav nav>a[aria-current="page"] {background: #304532;color: #ffdf96}
.g9-body .g9-account-email {
  max-width: 205px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.g9-body .dashboard {max-width: 1220px;margin-top: 38px;padding-bottom: 76px}
.g9-body .dashboard-head,
.g9-body .dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  margin: 0 0 20px;
  padding: clamp(23px, 3vw, 34px);
  border: 1px solid #546047;
  border-radius: 20px;
  background: linear-gradient(112deg, #19332f 0%, #112733 72%, #142733 100%);
}
.g9-body :is(.dashboard-head, .dashboard-heading)>div {min-width: 0}
.g9-body :is(.dashboard-head, .dashboard-heading) h1 {
  margin: 0 0 8px;
  color: #fcf6e8;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.14;
  letter-spacing: -.045em;
}
.g9-body :is(.dashboard-head, .dashboard-heading) p {
  max-width: 64ch;
  margin: 0;
  color: #d1e0dc;
  font-size: 14px;
}
.g9-body .eyebrow,
.g9-body .card-kicker {color: var(--g9-gold)}
.g9-body .status-pill {flex: none;white-space: nowrap;border: 1px solid transparent}
.g9-body .status-pill.active {background: #1b4036;border-color: #3a8065;color: #a8efc3}
.g9-body .status-pill.inactive {background: #42242a;border-color: #825059;color: #ffc3c6}

/* Fluxo do cliente: acesso, cobrança, benefícios e próximos recursos. */
.g9-body .g9-quick-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  margin: 0 0 24px;
  padding: 0 1px 8px;
  scrollbar-width: thin;
}
.g9-body .g9-quick-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid #40575a;
  border-radius: 999px;
  background: #172e34;
  color: #e5eeea;
  font-size: 12px;
  font-weight: 700;
}
.g9-body .g9-quick-nav a:hover {border-color: #d7b36c;background: #284037}
.g9-body :is(#acesso, #pagamentos, #dispositivos, #beneficios, #planos, #assinatura) {
  scroll-margin-top: 24px;
}
.g9-body .card,
.g9-body .section-subscribe {
  border-color: var(--g9-line);
  border-radius: 18px;
  background: #11222cf5;
  box-shadow: 0 12px 30px #030e1533;
}
.g9-body .current-plan-card {border-color: #6b6849;background: linear-gradient(145deg, #1b3434, #11232d 75%)}
.g9-body .launcher-card {border-color: #47636a}
.g9-body .customer-overview-grid {gap: 20px;align-items: stretch}
.g9-body .customer-plan-meta>div,
.g9-body .customer-benefit-grid>div,
.g9-body .credit-row,
.g9-body .aff-kpis>div,
.g9-body .aff-pending-summary>div {
  background: #0d2028;
  border-color: #385056;
}
.g9-body .customer-plan-meta span,
.g9-body .launcher-status-list span,
.g9-body .customer-benefit-grid span,
.g9-body .customer-benefit-grid small,
.g9-body .credit-row :is(span, small) {color: #b6c9c9}
.g9-body .customer-plan-meta b {overflow-wrap: anywhere}
.g9-body .api-note {color: #b4c7c8;line-height: 1.55}
.g9-body .g9-editor-tip {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border-left: 3px solid #f4c86e;
  border-radius: 8px;
  background: #1b3534;
  color: #dce8df;
  font-size: 12px;
  line-height: 1.55;
}
.g9-body .customer-section {margin-top: 20px}
.g9-body .customer-section h2,
.g9-body .section-subscribe h2 {letter-spacing: -.025em}
.g9-body .table-wrap {overflow-x: auto;scrollbar-width: thin}
.g9-body .admin-table th {color: #c2d2d0;border-bottom-color: #47616a}
.g9-body .admin-table td {border-bottom-color: #30454f}
.g9-body .admin-table td small {color: #b4c7c8}
.g9-body .empty {color: #b4c7c8}
.g9-body .device {border-color: #385056}
.g9-body .device small {color: #b4c7c8}
.g9-body .section-subscribe {padding: clamp(20px, 3vw, 30px)}
.g9-body .account-plans article {background: #142833;border-color: #3b545e}
.g9-body .plan-feature-list {color: #d3dedc}
.g9-body .public-promo-list article {background: #183039;border-color: #486267}
.g9-body .public-promo-list p {color: #bdcece}
.g9-body .customer-benefit-grid a {color: #a9dcff}

/* Catálogo, parceiro e segurança. */
.g9-body .plugin-grid {gap: 18px;margin-top: 22px}
.g9-body .plugin-card {display: flex;flex-direction: column;border-color: #3e5961;background: #142832}
.g9-body .plugin-card>.btn {align-self: flex-start;margin-top: auto}
.g9-body .plugin-card code {color: #b4d8e7}
.g9-body .aff-note {border-color: #5e6b51;background: #182e31}
.g9-body .aff-note p {color: #d0ddda}
.g9-body .aff-note a {color: #ffdb91}
.g9-body .aff-filters,
.g9-body .aff-share,
.g9-body .aff-details {background: #0d2028;border-color: #40585d}
.g9-body .aff-filters :is(input, select),
.g9-body .aff-withdrawal :is(input, select, textarea) {background: #0c1e25;border-color: #53686b}
.g9-body .aff-page .aff-card-grid {gap: 18px}
.g9-body .aff-page .admin-card {border-color: #3d5860}
.g9-body .account-security-form {max-width: 640px}
.g9-body .form input,
.g9-body .form textarea,
.g9-body .form select {background: #0d2028;border-color: #52666c;color: #f1f5f0}
.g9-body .danger-btn {border-color: #996b68;color: #ffd6d1}
.g9-body .danger-btn:hover {background: #59313a}
.g9-body :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid #f4c86e;
  outline-offset: 3px;
}

/* Formulário de feedback e telas curtas de assinatura/retorno. */
.g9-body .feedback-page {margin-top: 42px;padding-bottom: 80px}
.g9-body .feedback-card {padding: clamp(22px, 4vw, 38px);border-color: #506058}
.g9-body .feedback-card h1 {letter-spacing: -.04em}
.g9-body .feedback-reward {background: #1a353a;border-color: #516d65;color: #d9ebe3}
.g9-body .star-input label {position: relative}
.g9-body .star-input input {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  clip-path: inset(50%);
}
.g9-body .star-input label:has(input:focus-visible) span {outline: 2px solid #f4c86e;outline-offset: 3px}
.g9-body.g9-auth .auth-shell {width: min(480px, calc(100% - 32px));padding: 28px 0}
.g9-body.g9-auth .auth-card {border-color: #52635a;background: #132730;padding: clamp(24px, 4vw, 36px)}
.g9-body.g9-auth .auth-logo {margin-bottom: 20px}
.g9-body.g9-auth .auth-card .price {font-size: 32px;color: #ffdf9a}
.g9-body.g9-auth .auth-card .muted {color: #c4d3d0}
.g9-body.g9-auth .promo-benefit {background: #1b3837;border-color: #5b755f;color: #e0eadc}
.g9-body .feedback-fab {bottom: 15px;right: 15px}

@media (max-width: 1050px) {
  .g9-body .nav {display: block;padding: 13px 18px}
  .g9-body .nav nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 12px;
    padding: 0 0 5px;
    scrollbar-width: thin;
  }
  .g9-body .nav nav>* {flex: 0 0 auto}
  .g9-body .nav nav>a:not(.btn) {display: inline-flex}
}
@media (max-width: 900px) {
  .g9-body .customer-overview-grid {grid-template-columns: 1fr}
  .g9-body .dashboard-head,
  .g9-body .dashboard-heading {align-items: flex-start;flex-direction: column}
}
@media (max-width: 560px) {
  .g9-body .dashboard {margin-top: 20px;padding: 0 16px 66px}
  .g9-body .dashboard-head,
  .g9-body .dashboard-heading {padding: 22px 19px}
  .g9-body .card {padding: 20px}
  .g9-body .current-plan-head {flex-direction: column}
  .g9-body .customer-plan-meta,
  .g9-body .customer-benefit-grid {grid-template-columns: 1fr}
  .g9-body .devices-head {align-items: flex-start;gap: 10px}
  .g9-body .plugin-card>.btn {align-self: stretch}
  .g9-body .feedback-fab {display: none}
}
@media (prefers-reduced-motion: reduce) {
  .g9-body .btn,
  .g9-body .nav a {transition: none}
}