/* HypeFlow — Clientes e provisionamento
   Camada final de identidade corporativa. Mantém os contratos do backend intactos. */

#view-clientes {
  --ce-bg: #090b0a;
  --ce-surface: #111412;
  --ce-surface-raised: #171a18;
  --ce-surface-soft: #1c201d;
  --ce-line: rgba(255, 255, 255, .09);
  --ce-line-strong: rgba(255, 255, 255, .15);
  --ce-muted: #8f9791;
  --ce-green: #58f477;
  --ce-green-soft: rgba(88, 244, 119, .1);
  color: #f5f7f5;
}

/* Hero enxuto: contexto e ação, sem competir com os dados. */
#view-clientes .client-control-hero {
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid var(--ce-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 20%, rgba(88, 244, 119, .075), transparent 28%),
    linear-gradient(145deg, #151816, #0e100f);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
}
#view-clientes .client-control-hero::before,
#view-clientes .client-control-hero::after { opacity: .22; }
#view-clientes .client-control-copy { max-width: 760px; }
#view-clientes .client-control-copy .eyebrow {
  color: var(--ce-green);
  font: 700 .68rem/1 var(--font-mono);
  letter-spacing: .18em;
}
#view-clientes .client-control-copy h1 {
  max-width: none;
  margin: 10px 0 6px;
  color: #f8faf8;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: .98;
  letter-spacing: -.055em;
}
#view-clientes .client-control-copy h1 br { display: none; }
#view-clientes .client-control-copy h1 em {
  color: var(--ce-green);
  font-style: normal;
}
#view-clientes .client-control-copy p {
  margin: 0;
  color: var(--ce-muted);
  font-size: .88rem;
}
#view-clientes .client-create-cosmic {
  min-width: 228px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(88, 244, 119, .42);
  border-radius: 14px;
  color: #071009;
  background: var(--ce-green);
  box-shadow: 0 12px 34px rgba(37, 215, 80, .13);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
#view-clientes .client-create-cosmic::before,
#view-clientes .client-create-cosmic::after { display: none; }
#view-clientes .client-create-cosmic:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(37, 215, 80, .2);
}
#view-clientes .client-create-cosmic > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #111412;
  font-size: 1.2rem;
}
#view-clientes .client-create-cosmic b {
  color: #071009;
  font-size: .76rem;
}
#view-clientes .client-create-cosmic small {
  display: block;
  margin-top: 2px;
  color: rgba(7, 16, 9, .65);
  font-size: .57rem;
}
#view-clientes .client-create-cosmic i { color: #071009; }

/* KPIs compactos. */
#view-clientes .client-command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
#view-clientes .client-command-metric {
  min-height: 74px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border: 1px solid var(--ce-line);
  border-radius: 14px;
  background: linear-gradient(145deg, #171a18, #111412);
  box-shadow: none;
}
#view-clientes .client-command-metric::before,
#view-clientes .client-command-metric::after { display: none; }
#view-clientes .client-metric-symbol {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(88, 244, 119, .2);
  border-radius: 9px;
  color: var(--ce-green) !important;
  background: rgba(88, 244, 119, .065) !important;
  font-size: .76rem;
}
#view-clientes .client-command-metric > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
}
#view-clientes .client-command-metric small {
  color: #b6bcb8;
  font: 700 .61rem/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
#view-clientes .client-command-metric strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #f7faf7;
  font: 750 1.55rem/1 var(--font-display);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
#view-clientes .client-command-metric p {
  grid-column: 1;
  margin: 4px 0 0;
  overflow: hidden;
  color: #707872;
  font-size: .57rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-clientes .client-command-metric.attention strong { color: #ffc75c; }

/* Painel, toolbar e busca. */
#view-clientes .client-control-panel {
  padding: 16px;
  border: 1px solid var(--ce-line);
  border-radius: 20px;
  background: #101211;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .25);
}
#view-clientes .client-control-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0 0 14px;
  border: 0;
  background: transparent;
}
#view-clientes .client-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}
#view-clientes .client-filter-tabs button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--ce-line);
  border-radius: 9px;
  color: #929a94;
  background: #151816;
  font-size: .62rem;
}
#view-clientes .client-filter-tabs button:hover,
#view-clientes .client-filter-tabs button.active {
  border-color: rgba(88, 244, 119, .34);
  color: #effff2;
  background: rgba(88, 244, 119, .09);
}
#view-clientes .client-filter-tabs button span {
  margin-left: 5px;
  color: var(--ce-green);
}
#view-clientes .client-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
#view-clientes .client-search-field {
  width: min(320px, 28vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--ce-line-strong);
  border-radius: 10px;
  color: #747b76;
  background: #191c1a !important;
}
#view-clientes .client-search-field:focus-within {
  border-color: rgba(88, 244, 119, .5);
  box-shadow: 0 0 0 3px rgba(88, 244, 119, .06);
}
#view-clientes .client-search-field input,
#view-clientes .client-search-field input:focus {
  width: 100%;
  border: 0 !important;
  outline: 0 !important;
  color: #f3f6f3 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #f3f6f3;
  font-size: .66rem;
}
#view-clientes .client-search-field input::placeholder { color: #686f6a; }
#view-clientes .client-search-field input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #191c1a inset !important;
  -webkit-text-fill-color: #f3f6f3 !important;
}
#view-clientes .client-sort-field {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--ce-line);
  border-radius: 10px;
  background: #151816;
}
#view-clientes .client-sort-field span { color: #6f7671; font-size: .53rem; }
#view-clientes .client-sort-field select {
  border: 0;
  outline: 0;
  color: #e9ecea;
  background: transparent;
  font-size: .61rem;
  font-weight: 700;
}
#view-clientes .client-sort-field option { color: #fff; background: #171a18; }
#view-clientes .client-refresh-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--ce-line);
  border-radius: 10px;
  color: var(--ce-green);
  background: #151816;
}
#view-clientes .client-list-caption {
  min-height: 42px;
  padding: 0 4px;
  color: var(--ce-muted);
}
#view-clientes .client-list-caption strong { color: #e5e9e6; font-size: .65rem; }
#view-clientes .client-list-caption small { color: #737b75; font-size: .56rem; }

/* Tabela graphite: linhas legíveis, sem o bloco verde. */
#view-clientes .client-table-shell {
  overflow: hidden;
  border: 1px solid var(--ce-line);
  border-radius: 14px;
  background: #0c0e0d;
}
#view-clientes .client-table-head,
#view-clientes .client-control-row {
  grid-template-columns: minmax(220px, 1.35fr) minmax(100px, .62fr) minmax(145px, .76fr) minmax(150px, .78fr) minmax(150px, .78fr) minmax(150px, .6fr);
}
#view-clientes .client-table-head {
  min-height: 38px;
  padding: 0 15px;
  border-bottom: 1px solid var(--ce-line);
  color: #68706a;
  background: #171a18;
  font: 700 .5rem var(--font-mono);
  letter-spacing: .12em;
}
#view-clientes .client-control-row {
  min-height: 88px;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid var(--ce-line);
  border-radius: 0;
  background: #111412 !important;
  box-shadow: none !important;
  transition: background .18s ease;
}
#view-clientes .client-control-row:nth-child(even) { background: #0f1210 !important; }
#view-clientes .client-control-row:last-child { border-bottom: 0; }
#view-clientes .client-control-row:hover { background: #1a1e1b !important; }
#view-clientes .client-control-row.needs-attention { box-shadow: inset 3px 0 #ffc75c !important; }
#view-clientes .client-control-row::before,
#view-clientes .client-control-row::after { display: none; }
#view-clientes .client-identity-cell { min-width: 0; gap: 11px; }
#view-clientes .client-card-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  box-shadow: none;
  font-size: .7rem;
}
#view-clientes .client-identity-cell > div:last-child { min-width: 0; }
#view-clientes .client-identity-cell strong {
  display: block;
  overflow: hidden;
  color: #f5f7f5;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-clientes .client-identity-cell small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #838b85;
  font-size: .57rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-clientes .client-identity-cell em {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--ce-green);
  font: 650 .52rem var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-clientes .client-plan-cell strong {
  display: block;
  color: #edf1ee;
  font-size: .66rem;
}
#view-clientes .client-plan-cell small {
  display: block;
  margin-top: 5px;
  color: #737b75;
  font-size: .54rem;
}
#view-clientes .client-health-cell { min-width: 0; }
#view-clientes .client-status-badge {
  width: max-content;
  padding: 5px 8px;
  border-color: rgba(255, 255, 255, .1);
  color: #dfe5e0;
  background: #1b1f1c;
  font-size: .53rem;
}
#view-clientes .client-status-badge i { background: var(--ce-green); }
#view-clientes .client-health-cell > small {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #737b75;
  font-size: .53rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-clientes .client-health-cell > button {
  margin-top: 6px;
  border: 1px solid rgba(255, 199, 92, .32);
  border-radius: 7px;
  color: #ffd477;
  background: rgba(255, 199, 92, .08);
  font-size: .5rem;
}
#view-clientes .client-usage-cell > div { display: flex; align-items: baseline; gap: 5px; }
#view-clientes .client-usage-cell strong { color: #f0f3f1; font-size: .66rem; }
#view-clientes .client-usage-cell small,
#view-clientes .client-usage-cell em { color: #707872; font-size: .51rem; }
#view-clientes .client-usage-cell > span { height: 3px; margin: 7px 0 5px; background: #262b27; }
#view-clientes .client-usage-cell > span i { background: var(--ce-green); }
#view-clientes .client-milestone-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}
#view-clientes .client-milestone-kicker {
  color: #6f7771;
  font: 700 .46rem var(--font-mono);
  letter-spacing: .11em;
}
#view-clientes .client-milestone-cell strong {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: #edf2ee !important;
  font-size: .64rem !important;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-clientes .client-milestone-cell.mint strong,
#view-clientes .client-milestone-cell.cyan strong { color: var(--ce-green) !important; }
#view-clientes .client-milestone-cell.amber strong { color: #ffc75c !important; }
#view-clientes .client-milestone-cell small {
  display: block !important;
  color: #737b75 !important;
  font-size: .51rem !important;
  line-height: 1.3;
  white-space: normal;
}
#view-clientes .client-actions-cell { gap: 6px; }
#view-clientes .client-actions-cell button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ce-line-strong);
  border-radius: 8px;
  color: #dbe0dc;
  background: #181b19;
  font-size: .55rem;
}
#view-clientes .client-actions-cell button:hover {
  border-color: rgba(88, 244, 119, .42);
  color: #fff;
  background: rgba(88, 244, 119, .08);
}
#view-clientes .client-manage-button i { color: var(--ce-green); }
#view-clientes .client-row-skeleton { background: #131614; }

/* Modal corporativo de provisionamento. */
.modal-overlay:has(.modal-context-novo-cliente),
.modal-overlay:has(.modal-context-novo-trial),
.modal-overlay:has(.modal-context-nova-conta-ativa) {
  background: rgba(2, 3, 2, .78);
  backdrop-filter: blur(16px) saturate(.85);
}
.modal.modal-context-novo-cliente .modal-card,
.modal.modal-context-novo-trial .modal-card,
.modal.modal-context-nova-conta-ativa .modal-card {
  width: min(1240px, calc(100vw - 44px));
  max-height: min(900px, calc(100vh - 34px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: #0d0f0e;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .62);
}
.modal.modal-context-novo-cliente .modal-card > header,
.modal.modal-context-novo-trial .modal-card > header,
.modal.modal-context-nova-conta-ativa .modal-card > header {
  min-height: 66px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: #141715;
}
.modal.modal-context-novo-cliente .modal-card > header h2,
.modal.modal-context-novo-trial .modal-card > header h2,
.modal.modal-context-nova-conta-ativa .modal-card > header h2 {
  color: #f5f7f5;
  font-size: .9rem;
  letter-spacing: -.015em;
}
.modal.modal-context-novo-cliente .modal-close,
.modal.modal-context-novo-trial .modal-close,
.modal.modal-context-nova-conta-ativa .modal-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #c6ccc7;
  background: #1a1d1b;
}
.modal.modal-context-novo-cliente .modal-body,
.modal.modal-context-novo-trial .modal-body,
.modal.modal-context-nova-conta-ativa .modal-body {
  background: #0d0f0e;
  scrollbar-color: #58f477 #151816;
}
.account-command-center,
.account-builder,
.account-created { padding: 22px; }
.account-command-hero {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: linear-gradient(135deg, #1b1e1c, #131614);
}
.account-command-hero::after { display: none; }
.account-command-orbit {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(88, 244, 119, .3);
  border-radius: 13px;
  background: rgba(88, 244, 119, .08);
  box-shadow: none;
}
.account-command-orbit::before { display: none; }
.account-command-orbit i {
  width: auto;
  height: auto;
  color: #09100b;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.account-command-orbit i::after {
  content: "HF";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #071009;
  background: #58f477;
  font: 800 .62rem var(--font-display);
}
.account-command-hero small,
.account-catalog-heading small,
.account-builder-intro small,
.account-created-cosmos > small {
  color: #58f477;
  font: 700 .58rem var(--font-mono);
  letter-spacing: .13em;
}
.account-command-hero h2,
.account-builder-intro h2,
.account-created-cosmos h2 {
  margin: 5px 0;
  color: #f6f8f6;
  font-size: 1.35rem;
}
.account-command-hero p,
.account-builder-intro p,
.account-created-cosmos p {
  color: #8d958f;
  font-size: .69rem;
}
.account-command-hero aside { gap: 6px; }
.account-command-hero aside span {
  color: #adb4af;
  font-size: .58rem;
}
.account-launch-options { gap: 10px; margin-top: 10px; }
.account-launch-card,
.account-launch-card.trial,
.account-launch-card.active {
  min-height: 96px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: #161917;
  box-shadow: none;
}
.account-launch-card:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 244, 119, .36);
  background: #1b1f1c;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .2);
}
.account-launch-card.active { border-color: rgba(88, 244, 119, .2); }
.account-launch-icon {
  border-color: rgba(255, 255, 255, .1);
  color: #58f477;
  background: #202420;
}
.account-launch-card small { color: #58f477; }
.account-launch-card strong { color: #f1f4f1; }
.account-launch-card p { color: #858d87; }
.account-catalog-heading { margin-top: 20px; }
.account-catalog-heading h3 { color: #f1f4f1; font-size: .82rem; }
.account-catalog-heading > span { color: #747c76; }
.account-plan-catalog {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.account-plan-card {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  background: #151816;
}
.account-plan-card > header {
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
.account-plan-card header small { color: #727a74; }
.account-plan-card header strong { color: #f4f6f4; font-size: .88rem; }
.account-plan-card header > b { color: #58f477; font-size: .62rem; }
.account-plan-card > p { color: #7f8781; }
.account-plan-metrics {
  border-color: rgba(255, 255, 255, .07);
}
.account-plan-metrics span { border-color: rgba(255, 255, 255, .07); }
.account-plan-metrics b { color: #edf0ee; }
.account-plan-metrics small { color: #68706a; }
.account-plan-card li { color: #919993; }
.account-plan-card li i { color: #58f477; }
.account-plan-catalog.is-selectable .account-plan-card:hover,
.account-plan-catalog.is-selectable .account-plan-card.selected {
  border-color: rgba(88, 244, 119, .56);
  background: #1b211c;
  box-shadow: inset 0 0 0 1px rgba(88, 244, 119, .08), 0 12px 30px rgba(0, 0, 0, .18);
}
.account-plan-catalog.is-selectable .account-plan-card.selected footer { color: #58f477; }

.account-builder-intro {
  grid-template-columns: auto 1fr auto;
  padding: 17px 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: #161917;
}
.account-builder-intro > button {
  border-color: rgba(255, 255, 255, .1);
  color: #b4bbb6;
  background: #202320;
}
.account-builder-status {
  border-color: rgba(88, 244, 119, .22);
  color: #a4eeb2;
  background: rgba(88, 244, 119, .06);
}
.account-builder-status i { background: #58f477; box-shadow: 0 0 10px #58f477; }
.account-builder-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, .6fr);
  gap: 12px;
  margin-top: 12px;
}
.account-builder-fields,
.account-builder-summary {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: #141715;
}
.account-section-label > span {
  border-color: rgba(88, 244, 119, .23);
  color: #58f477;
  background: rgba(88, 244, 119, .07);
}
.account-section-label b { color: #edf1ee; }
.account-section-label small { color: #707872; }
.account-field > span { color: #a6ada8; }
.account-field > span em,
.account-field > small { color: #6f7771; }
.account-field input {
  border-color: rgba(255, 255, 255, .12);
  color: #f0f3f1;
  background: #0e100f;
}
.account-field input:focus {
  border-color: rgba(88, 244, 119, .52);
  box-shadow: 0 0 0 3px rgba(88, 244, 119, .06);
}
.account-confirmation-choice {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  margin: -5px 0 19px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #101311;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.account-confirmation-choice:hover,
.account-confirmation-choice:has(input:checked) {
  border-color: rgba(88, 244, 119, .32);
  background: rgba(88, 244, 119, .045);
}
.account-confirmation-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.account-confirmation-control {
  width: 36px;
  height: 22px;
  display: block;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: #242825;
  transition: .2s ease;
}
.account-confirmation-control i {
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50%;
  background: #929a94;
  transition: transform .2s ease, background .2s ease;
}
.account-confirmation-choice input:checked + .account-confirmation-control {
  border-color: rgba(88, 244, 119, .5);
  background: rgba(88, 244, 119, .16);
}
.account-confirmation-choice input:checked + .account-confirmation-control i {
  transform: translateX(14px);
  background: #58f477;
}
.account-confirmation-choice > span:last-child b,
.account-confirmation-choice > span:last-child small { display: block; }
.account-confirmation-choice > span:last-child b {
  color: #e8ece9;
  font-size: .76rem;
}
.account-confirmation-choice > span:last-child small {
  margin-top: 4px;
  color: #767e78;
  font-size: .65rem;
  line-height: 1.45;
}
.account-email-field > div b,
.account-password-field > div button {
  border-color: rgba(255, 255, 255, .12);
  color: #b9c0bb;
  background: #202320;
}
.account-duration-picker > button,
.account-duration-picker > label {
  border-color: rgba(255, 255, 255, .09);
  color: #8e9690;
  background: #0f1110;
}
.account-duration-picker > button:hover,
.account-duration-picker > button.selected {
  border-color: rgba(88, 244, 119, .5);
  color: #58f477;
  background: rgba(88, 244, 119, .07);
}
.account-timer-note,
.account-create-summary {
  border-color: rgba(255, 255, 255, .08);
  background: #101311;
}
.account-create-summary > span { color: #58f477; }
.account-create-summary li i { color: #58f477; }
.account-create-summary li b { color: #cbd1cc; }
.account-create-summary li small { color: #747c76; }
.account-blackhole-button {
  min-height: 48px;
  grid-template-columns: 1fr auto;
  padding: 0 15px;
  border: 1px solid rgba(88, 244, 119, .45);
  border-radius: 11px;
  color: #071009;
  background: #58f477;
  box-shadow: none;
}
.account-blackhole-button::before { display: none; }
.account-blackhole { display: none; }
.account-blackhole-button div { text-align: left; }
.account-blackhole-button small { color: rgba(7, 16, 9, .6); }
.account-blackhole-button strong { color: #071009; font-size: .7rem; }
.account-blackhole-button > b { color: #071009; }

@media (max-width: 1180px) {
  #view-clientes .client-command-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-clientes .client-control-toolbar { grid-template-columns: 1fr; }
  #view-clientes .client-toolbar-actions { justify-content: flex-start; }
  #view-clientes .client-search-field { width: min(440px, 100%); flex: 1; }
  #view-clientes .client-table-head { display: none; }
  #view-clientes .client-control-row {
    grid-template-columns: minmax(200px, 1.2fr) repeat(2, minmax(120px, .7fr));
    gap: 14px;
  }
  #view-clientes .client-usage-cell,
  #view-clientes .client-milestone-cell,
  #view-clientes .client-actions-cell { grid-row: 2; }
  .account-plan-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #view-clientes .client-control-hero { align-items: stretch; flex-direction: column; padding: 22px; }
  #view-clientes .client-create-cosmic { width: 100%; }
  #view-clientes .client-command-metrics { grid-template-columns: 1fr; }
  #view-clientes .client-toolbar-actions { align-items: stretch; flex-wrap: wrap; }
  #view-clientes .client-search-field { width: 100%; flex-basis: 100%; }
  #view-clientes .client-control-row { grid-template-columns: 1fr; }
  #view-clientes .client-usage-cell,
  #view-clientes .client-milestone-cell,
  #view-clientes .client-actions-cell { grid-row: auto; }
  .account-command-hero { grid-template-columns: 48px 1fr; }
  .account-command-hero aside { grid-column: 1 / -1; }
  .account-launch-options,
  .account-plan-catalog,
  .account-builder-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #view-clientes *,
  .modal-context-novo-cliente *,
  .modal-context-novo-trial *,
  .modal-context-nova-conta-ativa * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}