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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--ez-body-bg);
  color: var(--ez-ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  display: block;
  min-height: 100dvh;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--ez-forest);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

[hidden] {
  display: none !important;
}

/* ========================================================================
   Casco — o app ocupa a viewport inteira, em qualquer tela
   ------------------------------------------------------------------------
   `.device-stage/-shell/-screen` continuam existindo porque a moldura de demo
   (`?frame=1`) precisa dos três níveis: palco, aparelho e recorte da tela. Fora
   dela são invólucros que apenas repassam a viewport.

   A altura é definida (`100dvh`) o caminho todo de propósito: `.app-main` rola
   sozinha (`flex: 1` + `overflow-y: auto`) e a tabbar é `position: absolute` no
   rodapé de `#app`. Com altura automática as duas quebram juntas — a página
   inteira passa a rolar e a tabbar sobe junto com o conteúdo.
   ======================================================================== */
.device-stage {
  height: 100dvh;
  width: 100%;
  background: var(--ez-bg);
}

.device-shell {
  position: relative;
  height: 100%;
  width: 100%;
}

.device-screen {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--ez-device-screen-bg);
}

.device-bezel {
  display: none;
}

/* App shell — preenche a tela do dispositivo */
#app {
  width: 100%;
  height: 100%;
  max-width: none;
  background: var(--ez-bg-glow);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Login must paint full screen including top under the island */
#app.is-login,
#app.is-login .app-main,
#app.is-login .login-screen {
  background: var(--ez-login-bg);
}

#app.is-login {
  background: var(--ez-login-bg);
}

#app.is-login .app-header,
#app.is-login .tabbar {
  display: none;
}

#app.is-login .app-main {
  padding: 0;
  padding-bottom: 0;
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ========================================================================
   Moldura de iPhone — vitrine de demo, ligada por `?frame=1`
   ------------------------------------------------------------------------
   Só a partir de 760px: num celular a moldura desenharia um celular dentro do
   celular. É a única situação em que o app não ocupa a tela toda, e é opt-in.
   ======================================================================== */
@media (min-width: 760px) {
  /* A moldura não tem safe-area de sistema — o vão da Dynamic Island e do home
     indicator, que no aparelho real vem do `env()`, aqui é desenhado à mão. */
  html.is-framed {
    --chrome-top: 22px;
    --safe-bottom: 18px;
  }

  html.is-framed .device-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.5vh, 28px) 12px;
    background:
      radial-gradient(ellipse 70% 50% at 50% 40%, rgba(168, 230, 15, 0.06), transparent 55%),
      #ececec;
    box-sizing: border-box;
  }

  html.is-framed .device-shell {
    /* Cropped purple iPhone frame ~ 661/1400 */
    --device-aspect: 0.4721;
    height: min(92dvh, 920px);
    width: calc(min(92dvh, 920px) * var(--device-aspect));
    max-width: min(430px, 94vw);
    max-height: calc(min(430px, 94vw) / var(--device-aspect));
    flex-shrink: 0;
    /* External shadow biased right + bottom — larger & darker */
    filter:
      drop-shadow(14px 22px 18px rgba(0, 0, 0, 0.32))
      drop-shadow(24px 40px 48px rgba(0, 0, 0, 0.28))
      drop-shadow(8px 14px 10px rgba(0, 0, 0, 0.2));
  }

  html.is-framed .device-bezel {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    z-index: 30;
  }

  /* Full glass under bezel — oversized slightly so stage bg never peeks at corners */
  html.is-framed .device-screen {
    position: absolute;
    left: 4.4%;
    top: 2.1%;
    width: 91.2%;
    height: 93.6%;
    border-radius: 48px;
    z-index: 10;
    transform: translateZ(0);
  }

  /* Dark underlay matching glass so any subpixel AA shows dark, not stage gray */
  html.is-framed .device-shell::before {
    content: "";
    position: absolute;
    left: 4.4%;
    top: 2.1%;
    width: 91.2%;
    height: 93.6%;
    border-radius: 48px;
    background: var(--ez-device-screen-bg);
    z-index: 5;
    pointer-events: none;
  }

  html.is-framed #app {
    border-radius: inherit;
  }
}

/* Header — o respiro do topo vem do `--chrome-top` (safe-area real, ou o vão
   desenhado da Dynamic Island quando a moldura de demo está ligada). */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: calc(var(--header-h) + var(--chrome-top));
  padding: var(--chrome-top) var(--space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ez-header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ez-separator);
}

/* Reaproveitado pela sidebar desktop e pela marca do header mobile. */
.app-header__mark {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background: var(--ez-login-bg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow);
  overflow: hidden;
  padding: 5px;
}

.app-header__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-header__mark--mobile {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  padding: 4px;
}

.app-header__titles {
  flex: 1;
  min-width: 0;
}

.app-header__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__sub {
  font-size: var(--text-xs);
  color: var(--ez-ink-secondary);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--ez-ink);
  position: relative;
  background: var(--ez-surface-solid);
  box-shadow: var(--shadow-card);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--ez-surface-secondary);
  outline: none;
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 35%, transparent);
}

@media (max-width: 899px) {
  .app-header {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .app-header__mark--mobile {
    width: 36px;
    height: 36px;
  }

  .app-header__title {
    font-size: var(--text-sm);
  }

  .app-header__sub {
    font-size: 0.6875rem;
    letter-spacing: -0.02em;
  }

  .app-header .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
}

.theme-icon--sun {
  display: none;
}

html.theme-dark .theme-icon--moon {
  display: none;
}

html.theme-dark .theme-icon--sun {
  display: block;
}

.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--ez-red);
  color: white;
  font-size: 10px;
  font-weight: var(--weight-bold);
  display: grid;
  place-items: center;
  line-height: 1;
  align-content: center;
}

/* Main scroll */
.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-4);
  padding-bottom: calc(var(--tabbar-h) + max(var(--safe-bottom), 18px) + var(--space-8) + 18px);
  scroll-behavior: smooth;
}

.screen {
  animation: screen-in var(--dur) var(--ease-out);
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen {
    animation: none;
  }
  * {
    transition: none !important;
  }
}

/* Bottom tab bar — lifted above home-indicator / rounded screen clip */
.tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: auto;
  min-height: calc(var(--tabbar-h) + max(var(--safe-bottom), 18px) + 18px);
  padding: 8px var(--space-2) max(var(--safe-bottom), 8px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 8px;
  align-items: center;
  background: var(--ez-tabbar-bg);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--ez-separator);
  box-shadow: 0 -8px 28px rgba(6, 40, 29, 0.05);
  box-sizing: border-box;
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  color: var(--ez-ink-tertiary);
  font-size: 10px;
  line-height: 1.15;
  font-weight: var(--weight-medium);
  min-height: var(--tabbar-h);
  padding: 6px 2px;
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  overflow: visible;
}

.tabbar__item span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabbar__item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabbar__item .tabbar__icon-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
}

.tabbar__item > span:last-child {
  min-height: 12px;
  line-height: 1.2;
}

.tabbar__badge {
  top: -2px;
  right: -8px;
  min-width: 14px;
  height: 14px;
  font-size: 9px;
}

.tabbar__item.is-active {
  color: var(--ez-forest);
  background: color-mix(in srgb, var(--ez-lime) 16%, transparent);
  font-weight: var(--weight-semibold);
}

.tabbar__item--create {
  align-self: auto;
  justify-self: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: auto;
  min-height: var(--tabbar-h);
  border-radius: var(--radius-md);
  background: var(--ez-lime);
  color: var(--ez-on-accent-dark);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ez-lime) 26%, transparent);
  font-weight: var(--weight-semibold);
}

.tabbar__item--create .tabbar__create-icon {
  width: auto;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  max-width: none;
  overflow: visible;
}

.tabbar__item--create > span:last-child {
  font-size: 10px;
}

.tabbar__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ez-leaf) 40%, transparent);
}

/* Typography helpers */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ez-ink-tertiary);
}

.card-data{
  margin-top: var(--space-5);
}

.h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-1);
  line-height: 1.15;
}

.h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin: 0;
}

.muted {
  color: var(--ez-ink-secondary);
  font-size: var(--text-sm);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Cards */
.card {
  background: var(--ez-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--ez-glass-border);
  padding: var(--space-4);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card__section {
  padding: var(--space-4);
}

.card__section + .card__section {
  border-top: 1px solid var(--ez-separator);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Home: os cartões de totais, dois por linha. Cartão sozinho na linha (a
   Graduação, hoje) ocupa as duas colunas em vez de deixar buraco à direita. No
   desktop viram uma grade única (ver `@media (min-width: 900px)` no fim). */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.stats-row > .card:only-child {
  grid-column: 1 / -1;
}

/* Financeiro Geral: dois cartões dividem a linha e o valor é a coisa mais larga
   que a home tem. `container-type` faz a fonte de `.money-lg--fit` medir o
   **cartão**, não a janela — e o `cqi` mais curto que o padrão dá folga para
   milhões caberem numa linha só. É a fonte que cede, não o layout: quebrar em
   duas linhas aumentaria a altura do cartão e empurraria toda a home para baixo. */
.stats-row > .card {
  min-width: 0;
  container-type: inline-size;
}

.stats-row--valores .money-lg--fit {
  font-size: clamp(0.9rem, 13cqi, var(--text-2xl));
}

.home-wallet-card {
  text-align: left;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.home-wallet-card:active {
  transform: scale(0.98);
}

.home-wallet-card:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 28%, transparent), var(--shadow-card);
}

@supports not (font-size: 1cqi) {
  .stats-row--valores .money-lg--fit {
    font-size: clamp(0.9rem, 4.2vw, var(--text-2xl));
  }
}

/* Home totals keep the same footprint even when API values grow. */
.home-summary-grid,
.summary-cards-grid {
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.home-summary-grid > .home-summary-card,
.summary-cards-grid > .summary-value-card {
  min-width: 0;
  min-height: 142px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  container-type: inline-size;
}

.summary-cards-grid > .summary-value-card {
  min-height: 112px;
}

.home-summary-card > .muted:last-child {
  margin-top: auto;
}

.home-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.home-shortcut {
  min-width: 0;
  min-height: 88px;
  padding: var(--space-3) var(--space-1) var(--space-2);
  border: 1px solid var(--ez-separator);
  border-radius: var(--radius-lg);
  background: var(--ez-surface-solid);
  color: var(--ez-ink);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.home-shortcut:hover,
.home-shortcut:focus-visible {
  background: var(--ez-surface-secondary);
  border-color: color-mix(in srgb, var(--ez-leaf) 35%, var(--ez-separator));
  outline: none;
}

.home-shortcut:active {
  transform: scale(0.96);
}

.home-shortcut:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 28%, transparent), var(--shadow-card);
}

.home-shortcut__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--ez-forest);
  background: color-mix(in srgb, var(--ez-leaf) 16%, var(--ez-surface-secondary));
}

.home-shortcut__label {
  width: 100%;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--space-5) 0 var(--space-3);
}

.section-title:first-child {
  margin-top: 0;
}

/* Signature: faixa status card */
.faixa-card {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  color: white;
  overflow: hidden;
  box-shadow: var(--shadow-float);
  border: 0;
}

.faixa-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% 40%;
  height: 140%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
  pointer-events: none;
}

.faixa-card--verde {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ez-lime-soft) 28%, transparent), transparent 50%),
    linear-gradient(145deg, var(--ez-lime) 0%, var(--ez-forest-deep) 100%);
}

.faixa-card--amarelo {
  background: linear-gradient(145deg, #f0b429 0%, #a66b08 100%);
  color: #1c1405;
}

.faixa-card--vermelho {
  background: linear-gradient(145deg, #f2554a 0%, #8f1e18 100%);
}

.faixa-card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.faixa-card__days {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: var(--space-2) 0;
  font-variant-numeric: tabular-nums;
}

.faixa-card__action {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  max-width: 28ch;
  line-height: 1.35;
  opacity: 0.95;
}

.faixa-card__meta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}

.faixa-card--amarelo .chip {
  background: rgba(0, 0, 0, 0.08);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--ez-surface-secondary);
  color: var(--ez-ink-secondary);
}

.pill--verde {
  background: var(--ez-faixa-verde-soft);
  color: var(--ez-faixa-verde);
}

.pill--amarelo {
  background: var(--ez-faixa-amarelo-soft);
  color: #9a6c00;
}

.pill--vermelho {
  background: var(--ez-faixa-vermelho-soft);
  color: var(--ez-faixa-vermelho);
}

.pill--ecash {
  background: #efeaf8;
  color: var(--ez-ecash);
}

.pill--brl {
  background: var(--ez-mint);
  color: var(--ez-forest-deep);
}

.pill--muted {
  background: #ececee;
  color: var(--ez-ink-secondary);
}

.pill--warn {
  background: #fff1e0;
  color: #b35c00;
}

/* List rows */
.list {
  background: var(--ez-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ez-separator);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--ez-separator);
  transition: background var(--dur-fast) var(--ease-out);
  color: inherit;
}

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

.list-row:hover,
.list-row:focus-visible {
  background: var(--ez-surface-secondary);
  outline: none;
}

.list-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--ez-mint);
  color: var(--ez-forest);
  flex-shrink: 0;
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.list-row__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.list-row__body {
  flex: 1;
  min-width: 0;
}

.list-row__title {
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
}

.list-row__sub {
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-row__meta {
  text-align: right;
  flex-shrink: 0;
}

.list-row__chev {
  color: var(--ez-ink-tertiary);
  font-size: 18px;
  line-height: 1;
}

.products-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bonus-summary-grid {
  margin-top: var(--space-5);
}

.bonus-summary-card {
  color: inherit;
}

.bonus-summary-card span {
  color: var(--ez-ink-secondary);
}

.bonus-summary-card strong {
  color: var(--ez-forest-deep);
  font-size: clamp(1rem, 4.6vw, 1.38rem);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-summary-main {
  overflow: hidden;
}

.products-summary-main--commercial {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ez-elevated-bg);
  border: 1px solid var(--ez-glass-border);
  box-shadow: var(--shadow-card);
}

.products-summary-main__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background:
    radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--ez-leaf) 12%, transparent), transparent 56%),
    linear-gradient(135deg, color-mix(in srgb, var(--ez-forest) 8%, var(--ez-surface-solid)), var(--ez-elevated-bg));
  color: var(--ez-ink);
  border-bottom: 1px solid var(--ez-separator);
}

.products-summary-main__head h2 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.05;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--ez-forest-deep);
}

.products-summary-main__head p {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  line-height: 1.1;
  font-weight: var(--weight-semibold);
  color: var(--ez-ink-secondary);
}

.products-summary-card-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px 8px;
  background: var(--ez-soft-panel);
}

.product-summary-card-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-4) var(--space-3) 28px;
  color: var(--ez-ink);
  text-decoration: none;
  background: var(--ez-surface);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.product-summary-card-row:hover,
.product-summary-card-row:focus-visible {
  background: var(--ez-elevated-bg-hover);
  transform: translateX(2px);
  outline: none;
}

.product-summary-card-row__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  margin: 10px 0;
  border-radius: var(--radius-pill);
  background: var(--product-accent, var(--ez-leaf));
}

.product-summary-card-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
}

.product-summary-card-row__value {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--ez-forest-deep);
}

.products-summary-list {
  box-shadow: none;
}

.status-row {
  position: relative;
  padding-left: 28px;
}

.status-row__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  margin: 10px 0;
  border-radius: var(--radius-pill);
  background: var(--status-accent, var(--ez-leaf));
}

.status-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: 1.15;
}

.status-row__count {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ez-forest-deep);
}

.status-row__label {
  font-size: var(--text-xs);
  color: var(--ez-ink-tertiary);
}

.products-summary-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 86%);
  gap: var(--space-3);
  overflow-x: auto;
  margin-inline: calc(-1 * var(--space-4));
  padding: 0 var(--space-4) var(--space-1);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.products-summary-carousel::-webkit-scrollbar {
  display: none;
}

.products-summary-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  margin-inline: calc(-1 * var(--space-4));
  padding: 0 var(--space-4) var(--space-1);
  scrollbar-width: none;
}

.products-summary-tabs::-webkit-scrollbar {
  display: none;
}

.products-summary-tabs .filter-chip {
  border: 0;
  white-space: nowrap;
  cursor: pointer;
}

.products-summary-carousel--single {
  display: block;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}

.product-status-card {
  min-width: 0;
  scroll-snap-align: start;
}

.product-status-card .pill {
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-status-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--ez-separator);
}

.product-status-line:first-child {
  border-top: 0;
}

.product-status-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-status-line strong {
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.product-empty {
  padding: var(--space-4);
  color: var(--ez-ink-secondary);
  text-align: center;
}

/* Atalho de crédito de prazo com a arte do produto (gerador → `image`) no canto
   de cima. Ela é ancorada no canto, e não no fluxo, para não empurrar título e
   subtítulo — o cartão continua sendo sobre os dias de prazo. */
.list-row--arte {
  position: relative;
}

/* Com a arte no canto direito, a seta seria um segundo elemento disputando o mesmo
   lugar: o cartão inteiro já é o botão. */
.list-row--arte .list-row__chev {
  display: none;
}

.list-row__arte {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--ez-surface-secondary);
}

/* Client contracts */
.client-filter {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) var(--space-4) var(--space-1);
  margin: var(--space-4) calc(-1 * var(--space-4)) 0;
  scrollbar-width: none;
}

.client-filter::-webkit-scrollbar {
  display: none;
}

.client-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.client-card {
  position: relative;
  overflow: hidden;
  background: var(--ez-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ez-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.client-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ez-separator-strong);
}

.client-card--adimplente::before,
.client-card--condicionado::before {
  background: var(--ez-faixa-verde);
}

.client-card--implantacao::before,
.client-card--venda::before {
  background: var(--ez-orange);
}

.client-card--inadimplente::before {
  background: var(--ez-faixa-vermelho);
}

/* Money */
.money {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

.money--brl {
  color: var(--ez-lime-text);
}

.money--ecash {
  color: var(--ez-ecash);
}

.money-lg {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.money-lg--fit {
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(0.9rem, 15cqi, var(--text-2xl));
  line-height: 1.15;
  letter-spacing: -0.045em;
  overflow: hidden;
  text-overflow: ellipsis;
}

@supports not (font-size: 1cqi) {
  .money-lg--fit {
    font-size: clamp(0.9rem, 4.8vw, var(--text-2xl));
  }
}

/* Progress bars */
.progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ez-surface-secondary);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ez-lime), var(--ez-progress-mid) 55%, var(--ez-progress-end));
  min-width: 2px;
  transition: width var(--dur) var(--ease-out);
}

.progress-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-block__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* ---------- Cartão de graduação (home) ----------
   Lê como uma trilha: onde estou · quanto andei · para onde vou. Os dois selos
   são a arte do VO (Hierarquia.LInkImagem), e os requisitos ficam embaixo, lado
   a lado no desktop — barra de 1300px de largura não comunica progresso. */
.grad-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Na home o cartão pode dividir a linha com outro: quem decide se a trilha
     cabe em três colunas é a largura **dele**, não a da janela. */
  container-type: inline-size;
}

.grad-trilha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.grad-nivel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  text-align: center;
}

.grad-nivel__pin {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--ez-surface-secondary);
}

/* Meta não é conquista: o selo do alvo só ganha cor quando os requisitos fecham. */
.grad-nivel__pin--travado {
  filter: grayscale(1);
  opacity: 0.55;
}

.grad-nivel__img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.grad-nivel__nome {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.grad-caminho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-5);
}

.grad-caminho__pct {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ez-forest);
}

.grad-caminho__sinal {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-left: 2px;
}

.grad-caminho__trilho {
  width: 100%;
}

/* Sem meta apurada a trilha existe, mas não finge ter avanço: tracejado é "não sei",
   barra vazia seria "zero por cento". */
.grad-caminho__trilho--vazio {
  background-image: repeating-linear-gradient(
    90deg,
    var(--ez-separator-strong) 0 5px,
    transparent 5px 11px
  );
}

.grad-caminho__legenda {
  font-size: var(--text-xs);
  color: var(--ez-ink-tertiary);
  text-align: center;
}

/* Na home a frase fecha o cartão sob a trilha, que é centrada — alinhada à esquerda
   ela parecia solta do desenho de cima. */
.grad-card__falta {
  text-align: center;
}

.grad-requisitos {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ez-separator);
}

/* A tabela curta da qualificação (atual × necessário), como no VO. Três colunas
   fixas: o rótulo ocupa o que sobra e os dois números ficam alinhados à direita,
   um debaixo do outro em qualquer largura. */
.grad-nums {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ez-separator);
  font-size: var(--text-sm);
}

.grad-nums__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: var(--space-4);
}

.grad-nums__linha > strong {
  min-width: 5.5rem;
  text-align: right;
}

.grad-nums__linha--head {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ez-ink-tertiary);
}

.grad-nums__linha--head > span + span {
  min-width: 5.5rem;
  text-align: right;
}

@media (min-width: 620px) {
  .grad-requisitos {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

/* Sem largura para três colunas, a trilha quebra: os dois selos dividem a linha de
   cima e o avanço ocupa a linha inteira embaixo — espremido no meio, o trilho vira
   um risco de 100px que não mostra progresso nenhum. */
@media (max-width: 619.98px) {
  .grad-trilha {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: var(--space-4);
  }

  .grad-nivel {
    grid-row: 1;
  }

  .grad-caminho {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
  }
}

/* Mesma quebra, medida no cartão: vale para a home no desktop, onde a trilha tem
   metade da linha, e para qualquer lugar futuro que a coloque numa coluna estreita. */
@container (max-width: 560px) {
  .grad-trilha {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: var(--space-4);
  }

  .grad-nivel {
    grid-row: 1;
  }

  .grad-caminho {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
  }
}

@media (max-width: 430px) {
  .grad-nivel__pin {
    width: 56px;
    height: 56px;
  }

  .grad-nivel__nome {
    font-size: var(--text-sm);
  }

  .grad-caminho__pct {
    font-size: var(--text-2xl);
  }
}

/* ---------- Escolha do produto da proposta ----------
   Passo 1 do fluxo: o gerador manda um ladrilho quadrado por produto (`image`), o
   mesmo que o GO usa nos botões. Reconhecer a arte é mais rápido que ler uma opção
   de select — por isso a escolha virou card, e não lista. */
.produto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 620px) {
  .produto-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-4);
  }
}

/* Sem moldura: a arte **é** o botão. O ladrilho do gerador já vem com fundo e cantos
   arredondados próprios — um cartão branco em volta era uma segunda borda desenhando
   a mesma coisa. O nome fica solto embaixo, como em grade de aplicativo. */
.produto-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: center;
}

.produto-card__arte {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* Quem levanta no hover é a arte, não um cartão em volta dela. */
.produto-card:hover .produto-card__arte {
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
}

.produto-card:active .produto-card__arte {
  transform: translateY(0);
}

/* O foco precisa continuar visível sem o contorno do cartão: cerca a arte. */
.produto-card:focus-visible {
  outline: none;
}

.produto-card:focus-visible .produto-card__arte {
  outline: 2px solid var(--ez-leaf);
  outline-offset: 2px;
}

.produto-card__arte img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Produto sem arte cadastrada: o ladrilho vira sigla, para a grade não afundar. */
.produto-card__sigla {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--ez-surface-secondary);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--ez-forest);
  text-transform: uppercase;
}

.produto-card__nome {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.produto-card__sub {
  font-size: var(--text-xs);
  color: var(--ez-ink-tertiary);
}

.sales-screen {
  margin: calc(var(--space-4) * -1);
  padding: var(--space-6) var(--space-4) calc(var(--space-8) + 50px);
  min-height: calc(100dvh - var(--header-h) - var(--chrome-top) - var(--tabbar-h) - var(--safe-bottom));
  background: var(--ez-bg-glow);
  color: var(--ez-ink);
}

.sales-screen .eyebrow {
  color: var(--ez-ink-tertiary);
}

.sales-screen .h1 {
  color: var(--ez-ink);
}

.sales-screen .muted {
  color: var(--ez-ink-secondary);
}

.sales-month-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  align-items: center;
  gap: var(--space-2);
}

.sales-month-nav > div {
  min-width: 0;
}

.sales-month-nav button {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ez-separator);
  background: var(--ez-elevated-bg);
  color: var(--ez-forest);
  font-size: 24px;
  line-height: 1;
  box-shadow: var(--shadow-card);
}

.sales-month-nav .h1 {
  margin-top: 0;
}

.sales-month-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sales-month-nav button:focus-visible {
  outline: 2px solid var(--ez-forest);
  outline-offset: 2px;
}

.sales-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-5);
}

.sales-kpi,
.sales-card {
  border: 1px solid var(--ez-separator);
  background: var(--ez-elevated-bg);
  box-shadow: var(--shadow-card);
}

.sales-kpi {
  min-height: 104px;
  padding: 14px;
  border-radius: 13px;
}

.sales-kpi span,
.sales-kpi small {
  display: block;
  color: var(--ez-ink-secondary);
  font-size: 12px;
}

.sales-kpi strong {
  display: block;
  margin-top: 12px;
  color: var(--ez-ink);
  font-size: 22px;
  line-height: 1;
}

.sales-kpi__yellow {
  color: #f3bd4a !important;
}

.sales-kpi__red {
  color: #ff705f !important;
}

.sales-kpi small {
  margin-top: 8px;
}

.sales-card {
  margin-top: 12px;
  padding: 16px;
  border-radius: 14px;
}

.sales-card__head,
.sales-funnel__head,
.sales-daily__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.sales-card__head h2 {
  margin: 0;
  color: var(--ez-ink);
  font-size: 16px;
}

.sales-card__head span {
  color: var(--ez-ink-secondary);
  font-size: 11px;
}

.sales-funnel__item {
  padding-top: 24px;
}

.sales-funnel__item + .sales-funnel__item {
  border-top: 1px solid var(--ez-separator);
}

/* Etapa clicável do funil: abre a listagem da própria etapa — mesmo toque/foco
   do `.battery-card__section`, só que dentro do funil, não de um card novo. */
.sales-funnel__item--clicavel {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-md);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.sales-funnel__item--clicavel:active {
  transform: scale(0.98);
}

.sales-funnel__item--clicavel:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 28%, transparent);
}

.sales-funnel__head strong,
.sales-funnel__head span {
  color: var(--ez-ink-secondary);
  font-size: 13px;
}

.sales-funnel__track {
  height: 16px;
  margin-top: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ez-surface-secondary);
}

.sales-funnel__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #45cd84;
}

.sales-funnel__bar--warn {
  background: #f4b545;
}

.sales-funnel__bar--win {
  background: #31d28b;
}

.sales-funnel__value {
  margin-top: 4px;
  color: var(--ez-ink);
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-align: right;
}

.sales-daily__chart {
  display: grid;
  align-items: end;
  gap: 2px;
  min-height: 54px;
  margin-top: var(--space-5);
  border-bottom: 2px dashed color-mix(in srgb, var(--ez-leaf) 35%, transparent);
}

.sales-daily__bar {
  display: block;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: #37c779;
}

.sales-daily__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--ez-ink-tertiary);
  font-size: 11px;
}

.sales-daily__row {
  padding: 16px 0;
  border-bottom: 1px solid var(--ez-separator);
}

.sales-daily__row strong,
.sales-daily__row small {
  display: block;
}

.sales-daily__row strong,
.sales-daily__row b {
  color: var(--ez-ink);
  font-size: 15px;
}

.sales-daily__row small {
  color: var(--ez-ink-secondary);
  font-size: 12px;
}

.sales-note {
  margin-top: 8px;
  padding: 14px;
  border-radius: 10px;
  background: var(--ez-mint);
  color: var(--ez-forest-deep);
  font-size: 12px;
  line-height: 1.45;
}

.sales-note strong {
  color: var(--ez-ink);
}

.sales-all {
  min-height: 54px;
  width: 100%;
  margin-top: var(--space-4);
  border-radius: 10px;
  background: var(--ez-lime);
  color: #00170c;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
  font-weight: var(--weight-bold);
}

.sales-all:focus-visible {
  outline: 2px solid var(--ez-forest);
  outline-offset: 2px;
}

/* Passo 2: o produto escolhido vira cabeçalho — e o caminho de volta fica junto. */
.produto-atual {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.produto-atual__arte {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: var(--ez-surface-secondary);
  overflow: hidden;
}

.produto-atual__arte img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.produto-atual__texto {
  flex: 1;
  min-width: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}

.btn-position-right {
  display: flex;
  justify-content: flex-end;
}


.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 40%, transparent);
}

/*
 * Botão que ainda não pode agir — o envio da proposta trava enquanto faltar campo ou
 * houver formato pela metade. Apagado e sem relevo: tem que se ler como "ainda não",
 * não como botão comum que não responde ao toque.
 */
.btn:disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}

.btn:disabled:active {
  transform: none;
}

.btn:disabled:hover {
  filter: none;
}

.btn--primary {
  background: var(--ez-leaf);
  color: white;
  box-shadow: 0 6px 18px rgba(6, 40, 29, 0.22);
}

.btn--primary:hover {
  filter: brightness(1.06);
}

.btn--lime {
  background: linear-gradient(135deg, var(--ez-lime-soft), var(--ez-lime));
  color: #0a1f12;
  box-shadow: 0 8px 24px rgba(168, 230, 15, 0.28);
  font-weight: var(--weight-bold);
}

.btn--lime:hover {
  filter: brightness(1.04);
}

.btn--secondary {
  background: var(--ez-mint);
  color: var(--ez-forest-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--ez-forest);
  border: 1px solid var(--ez-separator-strong);
}

.btn--block {
  width: 100%;
}

/* Variantes das ações da proposta (§12/§13). A cor aqui carrega significado: aceitar,
   revisar, recusar e pedir desconto são decisões de peso diferente, e o GO as separa
   justamente para o toque errado não passar despercebido. */
.btn--sucesso {
  background: var(--ez-faixa-verde);
  color: #ffffff;
}

.btn--aviso {
  background: var(--ez-faixa-amarelo);
  color: #3b2a05;
}

.btn--perigo {
  background: var(--ez-faixa-vermelho);
  color: #ffffff;
}

.btn--escuro {
  background: var(--ez-ink);
  color: #ffffff;
}

.btn--sm {
  min-height: 34px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* `.label` é o rótulo de um grupo sem controle próprio — a escolha de kit, por exemplo. */
.field label,
.field .label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ez-ink-secondary);
}

.field input,
.field select,
.field textarea {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ez-separator-strong);
  background: var(--ez-surface);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ez-leaf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 25%, transparent);
}

/* Valor que o gerador recusaria — CEP, documento ou telefone pela metade. */
.field input.is-invalid,
.field select.is-invalid {
  border-color: var(--ez-red);
}

.field input.is-invalid:focus,
.field select.is-invalid:focus {
  border-color: var(--ez-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-red) 25%, transparent);
}

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--ez-surface-secondary);
  border-radius: var(--radius-md);
}

.segmented button {
  min-height: 34px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ez-ink-secondary);
}

.segmented button.is-active {
  background: var(--ez-surface);
  color: var(--ez-ink);
  box-shadow: var(--shadow-card);
  font-weight: var(--weight-semibold);
}

/* Filters chips row */
.chips-scroll {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  margin: 0 calc(-1 * var(--space-4));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  scrollbar-width: none;
}

.chips-scroll::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--ez-surface);
  border: 1px solid var(--ez-separator);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ez-ink-secondary);
}

.filter-chip.is-active {
  background: var(--ez-forest-deep);
  border-color: var(--ez-forest-deep);
  color: white;
}

/* Estimate badge */
.estimate-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ez-warning-bg);
  color: var(--ez-warning-ink);
  border: 1px solid var(--ez-warning-border);
}

.apurado-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ez-mint);
  color: var(--ez-forest-deep);
}

/* Alert */
.alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.4;
  border: 1px solid transparent;
}

.alert--info {
  background: var(--ez-info-bg);
  border-color: var(--ez-info-border);
  color: var(--ez-info-ink);
}

.alert--warn {
  background: var(--ez-warning-bg);
  border-color: var(--ez-warning-border);
  color: var(--ez-warning-ink);
}

.alert--danger {
  background: var(--ez-danger-bg);
  border-color: var(--ez-danger-border);
  color: var(--ez-danger-ink);
}

.alert--ok {
  background: var(--ez-ok-bg);
  border-color: var(--ez-ok-border);
  color: var(--ez-ok-ink);
}

/* Empty / note */
.footnote {
  font-size: var(--text-xs);
  color: var(--ez-ink-tertiary);
  margin-top: var(--space-4);
  line-height: 1.45;
}

/* Funnel counters */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.stat {
  background: var(--ez-surface);
  border: 1px solid var(--ez-separator);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  text-align: center;
}

.stat__value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 10px;
  color: var(--ez-ink-secondary);
  margin-top: 2px;
}

/* Leads pipeline */
.stat-grid--pipeline .stat {
  min-width: 0;
  overflow: hidden;
}

.stat-grid--pipeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat-grid--pipeline .stat__label {
  overflow-wrap: anywhere;
}

.pipeline-filter {
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.pipeline-filter:hover,
.pipeline-filter:focus-visible {
  border-color: var(--ez-leaf);
  outline: none;
}

.pipeline-filter.is-active {
  border-color: var(--ez-leaf);
  background: var(--ez-mint);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ez-leaf) 16%, transparent);
}

.pipeline-row {
  align-items: flex-start;
  overflow: hidden;
}

.pipeline-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  width: 100%;
}

.pipeline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.pipeline-status {
  min-width: max-content;
  max-width: 100%;
  justify-self: start;
  white-space: nowrap;
  overflow-wrap: normal;
}

.pipeline-proposal {
  grid-column: 1 / -1;
}

.pipeline-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .stat-grid--pipeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pipeline-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-actions .btn {
    padding-inline: 7px;
    font-size: 10px;
  }
}

@media (max-width: 330px) {
  .pipeline-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .pipeline-actions .btn {
    padding-inline: 5px;
    font-size: 9px;
  }
}

/* Leads — cards de status (filtro) + cartões de lead
   Os chips reaproveitam `.filter-chip`/`.chips-scroll` da tela Rede: aqui só
   ganham o contador e a folga entre rótulo e número. O cartão é o `.card` padrão
   com um cabeçalho nome + status. */
.lead-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lead-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--ez-surface-secondary);
  color: var(--ez-ink-secondary);
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.lead-chip.is-active .lead-chip__count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.lead-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lead-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lead-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.lead-card__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lead-card__status {
  flex-shrink: 0;
  white-space: nowrap;
}

.lead-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lead-card__sub {
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
  line-height: 1.4;
}

.lead-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.lead-card__actions .btn {
  flex: 1 1 auto;
  min-width: 96px;
}

@media (min-width: 900px) {
  html:not(.is-framed) .lead-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
  }

  html:not(.is-framed) .lead-card__actions .btn {
    flex-basis: 0;
  }
}

@media (min-width: 900px) and (max-width: 1240px) {
  html:not(.is-framed) .cadastro-screen {
    grid-template-columns: minmax(0, 0.75fr) minmax(560px, 640px);
  }

  html:not(.is-framed) .cadastro-panel {
    padding-inline: clamp(28px, 3vw, 44px);
  }
}

/* Rede — painel do topo: números, ativos por geração, precisa de atenção, convite */
.rede-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--space-3);
}

.rede-stat {
  display: flex;
  flex-direction: column;
  background: var(--ez-surface);
  border: 1px solid var(--ez-separator);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-width: 0;
}

.rede-stat__rotulo {
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
}

.rede-stat__valor {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: var(--space-2);
}

.rede-stat__valor--ok {
  color: var(--ez-faixa-verde);
}

.rede-stat__valor--alerta {
  color: var(--ez-faixa-vermelho);
}

.rede-stat__apoio {
  font-size: var(--text-xs);
  color: var(--ez-ink-tertiary);
  margin-top: var(--space-2);
}

.rede-gen__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.rede-gen__linha + .rede-gen__linha {
  margin-top: var(--space-3);
}

.rede-gen__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
}

.rede-gen__rotulo {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.rede-gen__num {
  font-size: var(--text-xs);
  color: var(--ez-ink-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rede-gen__barra {
  height: 8px;
}

.rede-atencao__linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--ez-separator);
}

.rede-atencao__linha:first-of-type {
  border-top: 0;
  padding-top: var(--space-2);
}

.rede-atencao__quem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rede-atencao__quem strong {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.rede-atencao__bateria {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 132px;
  padding-top: 2px;
}

.rede-atencao__barra {
  flex: 1 1 auto;
  min-width: 72px;
}

.rede-atencao__barra-fill--vermelho {
  background: var(--ez-faixa-vermelho);
}

.rede-atencao__pct {
  min-width: 34px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ez-ink-secondary);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 390px) {
  .rede-atencao__linha {
    flex-direction: column;
    align-items: stretch;
  }

  .rede-atencao__bateria {
    flex-basis: auto;
    width: 100%;
    padding-top: 0;
  }
}

.rede-convite.is-copiado {
  background: var(--ez-faixa-verde);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--space-4) var(--space-4) calc(max(var(--safe-bottom), 18px) + var(--space-4));
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 14, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal__card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--ez-surface-solid);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  color: var(--ez-ink-tertiary);
  background: var(--ez-surface-secondary);
  font-size: 20px;
  line-height: 1;
}

.modal__titulo {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

.modal[data-tipo="erro"] .modal__titulo {
  color: var(--ez-danger-ink);
}

.modal__mensagem {
  margin-bottom: var(--space-4);
  color: var(--ez-ink-secondary);
}

.invite-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-4) var(--space-4) calc(max(var(--safe-bottom), 18px) + var(--space-4));
}

.invite-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 14, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.invite-modal__card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--ez-surface-solid);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.invite-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  color: var(--ez-ink-tertiary);
  background: var(--ez-surface-secondary);
  font-size: 20px;
  line-height: 1;
}

.invite-modal__check {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf));
  color: var(--ez-forest-deep);
  font-size: 26px;
  font-weight: var(--weight-bold);
}

.invite-modal__title {
  margin-bottom: var(--space-3);
}

.invite-modal__card--finalizar {
  width: min(100%, 560px);
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  text-align: left;
}

.invite-modal__card--finalizar .invite-modal__text {
  margin-top: 0;
}

.invite-modal__divider {
  height: 1px;
  margin: var(--space-4) 0;
  background: linear-gradient(90deg, transparent, var(--ez-separator-strong), transparent);
}

.invite-modal__text {
  margin-bottom: var(--space-4);
}

.invite-modal__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: #25a66a;
  color: white;
}

.invite-modal__whatsapp svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invite-modal__cadastro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--ez-forest-deep);
  background: var(--ez-lime);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ez-leaf) 18%, transparent);
  font-weight: var(--weight-bold);
}

.invite-modal__cadastro:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ez-lime) 90%, white));
  transform: translateY(-1px);
}

.invite-modal__cadastro img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.invite-modal--cadastro {
  padding: var(--space-3) var(--space-3) calc(max(var(--safe-bottom), 14px) + var(--space-3));
}

.invite-modal__card--cadastro {
  width: min(100%, 520px);
  max-height: calc(100dvh - max(var(--safe-bottom), 14px) - var(--space-6));
  overflow-y: auto;
  text-align: left;
  background:
    radial-gradient(ellipse 70% 38% at 100% 0%, color-mix(in srgb, var(--ez-lime) 12%, transparent), transparent 62%),
    linear-gradient(180deg, #ffffff, #f7fbf8);
  color: var(--ez-ink);
  border: 1px solid var(--ez-separator-strong);
}

.invite-cadastro__brand {
  justify-content: flex-start;
  margin-bottom: var(--space-3);
}

.invite-cadastro__title {
  text-align: left;
  margin-bottom: var(--space-4);
}

.invite-modal__card--cadastro .invite-cadastro__title h1 {
  font-size: clamp(28px, 7vw, 40px);
  color: var(--ez-forest-deep);
}

.invite-modal__card--cadastro .invite-cadastro__title p:not(.eyebrow) {
  margin-inline: 0;
  color: var(--ez-ink-secondary);
}

.invite-modal__card--cadastro .invite-cadastro__title .eyebrow {
  color: var(--ez-ink-tertiary);
}

.invite-modal__card--cadastro .cadastro-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.invite-modal__card--cadastro .cadastro-brand {
  color: var(--ez-forest-deep);
}

.invite-modal__card--cadastro .cadastro-field > span:first-child {
  color: var(--ez-ink-secondary);
}

.invite-modal__card--cadastro .cadastro-input-wrap {
  background: var(--ez-surface-solid);
  border-color: var(--ez-separator-strong);
}

.invite-modal__card--cadastro .cadastro-input-wrap:focus-within {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--ez-leaf) 52%, var(--ez-separator-strong));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ez-leaf) 13%, transparent);
}

.invite-modal__card--cadastro .cadastro-input-wrap > span {
  color: var(--ez-leaf);
}

.invite-modal__card--cadastro .cadastro-input-wrap input {
  color: var(--ez-ink);
}

.invite-modal__card--cadastro .cadastro-password-toggle {
  color: var(--ez-ink-tertiary);
}

.invite-modal__card--cadastro .cadastro-password-toggle.is-visible,
.invite-modal__card--cadastro .cadastro-password-toggle:focus-visible {
  background: color-mix(in srgb, var(--ez-leaf) 10%, white);
  color: var(--ez-leaf);
}

.invite-modal__card--cadastro .cadastro-input-wrap input::placeholder {
  color: var(--ez-ink-tertiary);
}

.invite-modal__card--cadastro .cadastro-input-wrap input:disabled {
  color: var(--ez-ink-secondary);
  -webkit-text-fill-color: var(--ez-ink-secondary);
}

.invite-modal__card--cadastro .cadastro-field--locked .cadastro-input-wrap {
  background: color-mix(in srgb, var(--ez-lime) 12%, white);
}

.invite-modal__card--cadastro .cadastro-field small,
.invite-modal__card--cadastro .cadastro-safe {
  color: var(--ez-ink-tertiary);
}

.invite-modal__card--cadastro .cadastro-field small:not(:empty) {
  color: var(--ez-red);
}

.invite-modal__card--cadastro .cadastro-error {
  background: color-mix(in srgb, var(--ez-red) 10%, white);
  border-color: color-mix(in srgb, var(--ez-red) 28%, white);
  color: var(--ez-red);
}

.invite-modal__card--cadastro .cadastro-success p {
  color: var(--ez-ink-secondary);
}

.invite-modal__card--cadastro .cadastro-credentials > div {
  background: var(--ez-surface-secondary);
  border-color: var(--ez-separator-strong);
}

.invite-modal__card--cadastro .cadastro-credentials span {
  color: var(--ez-ink-tertiary);
}

.invite-modal__card--cadastro .cadastro-credentials strong {
  color: var(--ez-forest-deep);
}

/* #/validar-email: resultado do link do e-mail, no cartão da tela de login. */
.validar-email {
  text-align: center;
  justify-items: center;
}

.validar-email__marca {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-inline: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ez-lime-soft), var(--ez-lime));
  color: #0a1f12;
  font-size: 32px;
  font-weight: 800;
}

.validar-email__marca.is-erro {
  background: rgba(255, 109, 109, 0.18);
  color: #ffb4ae;
  border: 1px solid rgba(255, 109, 109, 0.4);
}

.validar-email__titulo {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #f4fff8;
}

.validar-email__texto {
  margin: 0;
  color: rgba(244, 255, 248, 0.78);
  line-height: 1.5;
}

.validar-email__dica {
  font-size: var(--text-sm);
  color: rgba(244, 255, 248, 0.6);
}

/* Aviso do e-mail de validação no cadastro realizado. */
.cadastro-aviso-email {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--ez-info-border);
  border-radius: 14px;
  background: var(--ez-info-bg);
  color: var(--ez-info-ink);
  text-align: left;
}

.cadastro-aviso-email > span {
  font-size: 1.25rem;
  line-height: 1.2;
}

.cadastro-aviso-email p,
.invite-modal__card--cadastro .cadastro-success .cadastro-aviso-email p {
  margin: 0;
  color: inherit;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.cadastro-aviso-email.is-falha {
  border-color: var(--ez-warning-border);
  background: var(--ez-warning-bg);
  color: var(--ez-warning-ink);
}

@media (min-width: 900px) {
  html:not(.is-framed) .invite-modal--cadastro {
    padding: var(--space-6);
  }

  html:not(.is-framed) .invite-modal__card--cadastro {
    width: min(100%, 720px);
    padding: var(--space-6);
    border-radius: 30px;
  }

  html:not(.is-framed) .invite-modal__card--cadastro .cadastro-card {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  html:not(.is-framed) .invite-modal__card--cadastro .cadastro-card:not(:has(.cadastro-field--locked)) .cadastro-field:first-child,
  html:not(.is-framed) .invite-modal__card--cadastro .cadastro-card:not(:has(.cadastro-field--locked)) .cadastro-field:nth-child(2),
  html:not(.is-framed) .invite-modal__card--cadastro .cadastro-error,
  html:not(.is-framed) .invite-modal__card--cadastro .cadastro-submit {
    grid-column: 1 / -1;
  }
}

.invite-modal__card--cadastro .cadastro-safe {
  display: none;
}

.invite-modal__form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  text-align: left;
}

.invite-modal__form[hidden] {
  display: none;
}

/* Modal "Adicionar Lead" — mesma casca do .invite-modal, corpo mais largo por causa do stepper. */
.invite-modal__card--lead {
  width: min(100%, 640px);
  max-height: calc(100dvh - max(var(--safe-bottom), 14px) - var(--space-6));
  overflow-y: auto;
  text-align: left;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.invite-modal__card--lead .invite-modal__close {
  position: sticky;
  top: 0;
  right: auto;
  display: grid;
  place-items: center;
  margin-left: auto;
  margin-bottom: var(--space-3);
  border: 1px solid var(--ez-separator-strong);
  background: var(--ez-surface-solid);
  box-shadow: var(--shadow-card);
  color: var(--ez-ink-secondary);
}

.lead-modal__nav {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.lead-modal__nav [data-lead-continuar],
.lead-modal__nav [data-lead-enviar] {
  flex: 1;
}

/* Os 3 destinos de "Alterar status" (leads.js: statusEscolhaHtml) — empilhados, não lado a lado. */
.lead-modal__nav--stack {
  flex-direction: column;
}

.lead-detail {
  display: grid;
  gap: var(--space-4);
}

.lead-detail-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  overflow: hidden;
  border: 1px solid var(--ez-separator-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--ez-soft-panel-strong), var(--ez-surface-solid));
  box-shadow: var(--shadow-card);
}

.lead-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--ez-lime), var(--ez-forest));
}

.lead-detail-hero__copy {
  min-width: 0;
}

.lead-detail-hero h3 {
  margin: var(--space-1) 0 0;
  color: var(--ez-ink);
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.lead-detail-hero p {
  margin: var(--space-1) 0 0;
  color: var(--ez-ink-secondary);
  font-size: var(--text-sm);
}

.lead-detail-section {
  padding: var(--space-4);
  border: 1px solid var(--ez-separator-strong);
  border-radius: var(--radius-xl);
  background: var(--ez-surface-solid);
  box-shadow: 0 1px 0 rgba(6, 40, 29, 0.04);
}

.lead-detail-section--empty {
  background: var(--ez-soft-panel);
}

.lead-detail-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.lead-detail-section__head h3 {
  margin: 0;
  color: var(--ez-ink);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.lead-proposal-list {
  display: grid;
  gap: var(--space-2);
}

.lead-proposal-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--ez-soft-panel);
  color: inherit;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.lead-proposal-card::before {
  content: "";
  position: absolute;
  inset: var(--space-3) auto var(--space-3) 0;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--ez-forest);
}

.lead-proposal-card--link {
  cursor: pointer;
}

.lead-proposal-card--link:hover {
  border-color: color-mix(in srgb, var(--ez-lime) 70%, var(--ez-forest));
  background: var(--ez-soft-panel-strong);
  transform: translateY(-1px);
}

.lead-proposal-card__main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.lead-proposal-card__main strong,
.lead-proposal-card__main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-proposal-card__main span {
  color: var(--ez-ink-secondary);
  font-size: var(--text-xs);
}

.lead-proposal-card__number {
  color: var(--ez-forest) !important;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.lead-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lead-summary__row {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  font-size: var(--text-sm);
}

.lead-summary__label {
  color: var(--ez-ink-tertiary);
  font-size: var(--text-xs);
}

.lead-summary__value {
  color: var(--ez-ink);
  overflow-wrap: anywhere;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  text-align: left;
}

@media (max-width: 560px) {
  .invite-modal__card--lead {
    width: min(100%, calc(100vw - 20px));
    padding: var(--space-4);
  }

  .lead-detail-hero,
  .lead-proposal-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .lead-summary {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   Modal de pagamento (js/ui/pagamento-modal.js) — Saldo / E$, PIX e cartão
   ======================================================================== */

/* Trilho de coluna travado na largura da tela: sem isso, conteúdo largo (as duas
   colunas de validade/CVV) faz a coluna auto do grid crescer e o card vaza pela direita. */
.pagamento-modal {
  grid-template-columns: minmax(0, 1fr);
}

/* O formulário do cartão é alto; com o teclado aberto o card rola em vez de vazar da tela. */
.pagamento-modal__card {
  max-height: calc(100dvh - var(--space-4) * 2 - max(var(--safe-bottom), 18px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pagamento-modal__card:focus {
  outline: none;
}

.pagamento-modal__card .field input,
.pagamento-modal__card .field textarea {
  width: 100%;
  min-width: 0;
}

/* Travado — saldo que não cobre, ou pedido já criado esperando só o Pay de novo. */
.pagamento-modal__card .field input:disabled,
.pagamento-modal__card .segmented button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagamento-modal__card .grid-2 > * {
  min-width: 0;
}

/* E$ e saldo disponíveis — à vista em qualquer forma, mesmo quando não cobrem o total. */
.pagamento-saldos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--ez-surface-secondary);
}

.pagamento-saldos > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pagamento-saldos > div + div {
  padding-left: var(--space-3);
  border-left: 1px solid var(--ez-separator-strong);
}

.pagamento-saldos .muted {
  font-size: var(--text-xs);
}

.pagamento-saldos .money {
  font-size: var(--text-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Um painel por forma de pagamento; só o escolhido aparece. */
.pagamento-painel {
  display: grid;
  gap: var(--space-3);
}

/* Fundo branco fixo: QR Code sobre o card escuro não lê em todo app de banco. */
.pagamento-pix__qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: var(--space-2) auto 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: #fff;
  object-fit: contain;
}

.pagamento-pix__codigo {
  margin-top: var(--space-4);
  text-align: left;
}

.pagamento-pix__codigo textarea {
  resize: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  word-break: break-all;
}

/* Timeline Buy → Pay (ou só o Buy, no PIX/cartão) enquanto processa. */
.pagamento-progresso[hidden] {
  display: none;
}

.pagamento-timeline {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  text-align: left;
}

.pagamento-timeline__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ez-ink-tertiary);
}

/* Trilho ligando uma bolinha à próxima. */
.pagamento-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  height: var(--space-4);
  width: 2px;
  background: var(--ez-separator-strong);
}

.pagamento-timeline__item--done:not(:last-child)::after {
  background: var(--ez-leaf);
}

.pagamento-timeline__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--ez-separator-strong);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.pagamento-timeline__item--done,
.pagamento-timeline__item--current {
  color: var(--ez-ink);
}

.pagamento-timeline__item--done .pagamento-timeline__dot {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf));
  color: var(--ez-forest-deep);
}

.pagamento-timeline__item--current .pagamento-timeline__label {
  font-weight: var(--weight-semibold);
}

.pagamento-timeline__item--current .pagamento-timeline__dot {
  border-color: var(--ez-separator-strong);
  border-top-color: var(--ez-leaf);
  animation: pagamento-gira 0.8s linear infinite;
}

.pagamento-timeline__item--error {
  color: var(--ez-danger-ink);
}

.pagamento-timeline__item--error .pagamento-timeline__dot {
  border-color: var(--ez-danger-border);
  background: var(--ez-danger-bg);
}

@keyframes pagamento-gira {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pagamento-timeline__item--current .pagamento-timeline__dot {
    animation: none;
    border-color: var(--ez-leaf);
  }
}

@media (min-width: 900px) {
  html:not(.is-framed) .rede-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tree / rede nodes */
.gen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-4) 0 var(--space-2);
  padding: 0 var(--space-1);
}

.gen-header__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

.node {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
  /* avatar | dados | bateria + pontos. Tudo ancorado no topo: com `center`, o nome que
     quebra em três linhas empurra o número para outra altura em cada cartão. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-bottom: 1px solid var(--ez-separator);
  overflow: hidden;
}

.node__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.node__top-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.node__name {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding-top: 2px;
}

.node__band-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.node__band {
  min-width: 72px;
  max-width: 45%;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node__details-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.node__general {
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.node__dados {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.node__nome {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Coluna direita: faixa, pontos e rótulo empilhados e encostados à direita. A largura
   mínima é o que mantém os números na mesma linha vertical de um cartão para o outro. */
.node__stats {
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

/* Respiro entre o estado (bateria) e o número — são leituras diferentes. */
.node__stats .pill {
  margin-bottom: 3px;
  white-space: nowrap;
}

/* --- Bateria no cartão da rede ---
   A mesma leitura do medidor da home, no tamanho de uma linha de lista: barra
   fina com a carga e o prazo escrito embaixo. Não usa `.battery-gauge` de
   propósito — aquele tem 72px de altura e o número dentro da carga, desenho que
   só funciona quando a bateria é a única coisa na tela. */
.node-bateria {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  margin-bottom: 3px;
}

.node-bateria__shell {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ez-surface-secondary);
  overflow: hidden;
}

.node-bateria__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--ez-faixa-verde);
  transition: width var(--dur) var(--ease-out);
}

/* Acabando muda a cor da carga, não só o número: é o estado que pede ação, e
   quem varre a lista lê a cor antes de ler o prazo. */
.node-bateria.is-amarelo .node-bateria__fill {
  background: var(--ez-faixa-amarelo);
}

.node-bateria__prazo {
  font-size: 11px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ez-ink-secondary);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .node-bateria__fill {
    transition: none;
  }
}

.node__pontos {
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

.node__pontos-label {
  font-size: 11px;
  line-height: 1.2;
}

.node__directs-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.node--clickable {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.node--clickable:hover,
.node--clickable:focus-visible {
  background: var(--ez-surface-secondary);
  outline: none;
}

.node--static {
  opacity: 0.78;
}

.network-directs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.network-directs.has-directs { color: var(--ez-leaf); background: color-mix(in srgb, var(--ez-leaf) 10%, transparent); }
.network-directs.no-directs { color: var(--ez-ink-tertiary); background: var(--ez-surface-secondary); }

@media (max-width: 390px) {
  .node {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
  }

  .node__top-row { gap: var(--space-2); }
  .node__avatar { width: 36px; height: 36px; }
  .node__band { min-width: 62px; max-width: 50%; }
  .node__details-row { gap: var(--space-2); }
  .node__stats { min-width: 78px; }

  .node-expand {
    width: calc(100% + var(--space-2) * 2);
    margin: var(--space-2) calc(var(--space-2) * -1) calc(var(--space-3) * -1);
    padding: 10px var(--space-2) 10px calc(var(--space-2) * 2 + 36px);
  }
}

.node:last-child {
  border-bottom: 0;
}

.node__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: white;
  background: var(--ez-forest);
  align-self: start;
}

.node__avatar.is-amarelo {
  background: var(--ez-faixa-amarelo);
  color: #1c1405;
}

.node__avatar.is-vermelho {
  background: var(--ez-faixa-vermelho);
}

.node__avatar.is-inativo {
  background: #a1a1a6;
}

/* Espera: silhueta do conteúdo. Um desenho só para toda espera do app — a pessoa não
   precisa saber se quem demora é a API do superapp ou o gerador. Os blocos não imitam
   o desenho exato de cada tela, então servem para qualquer uma. */
.screen--loading {
  display: block;
}

.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.skeleton__line,
.skeleton__card,
.skeleton__chip {
  border-radius: var(--radius-md);
  background: linear-gradient(
    100deg,
    var(--ez-surface-secondary) 30%,
    color-mix(in srgb, var(--ez-surface-secondary) 50%, white) 50%,
    var(--ez-surface-secondary) 70%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton__line--eyebrow {
  width: 30%;
  height: 10px;
}

.skeleton__line--title {
  width: 55%;
  height: 22px;
}

.skeleton__row {
  display: flex;
  gap: var(--space-3);
}

.skeleton__chip {
  flex: 1;
  height: 64px;
  border-radius: var(--radius-md);
}

.skeleton__card {
  height: 84px;
  border-radius: var(--radius-lg);
}

.skeleton__card--sm {
  height: 56px;
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Chamada em voo com a tela já preenchida: barra fina no topo, sem cobrir nada. */
.app-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.app-progress.is-ativo {
  opacity: 1;
  /* Trilho discreto: sem ele a faixa que corre some no fundo claro da tela. */
  background: color-mix(in srgb, var(--ez-forest) 12%, transparent);
}

.app-progress::after {
  content: "";
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ez-leaf) 20%, transparent),
    var(--ez-leaf) 45%,
    var(--ez-forest)
  );
  animation: barra-corre 1.2s linear infinite;
}

@keyframes barra-corre {
  from { transform: translateX(-110%); }
  to { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-progress::after {
    animation: none;
  }

  .skeleton__line,
  .skeleton__card,
  .skeleton__chip {
    animation: none;
    background-position: 50% 0;
  }
}

/* Link de patrocínio: URL inteira legível, sem estourar o cartão. */
.link-patrocinio {
  margin-top: var(--space-2);
  font-size: 13px;
  word-break: break-all;
}

/* Ramo: os diretos de UM nó, abertos no "+". Barra na lateral e recuo separam a
   geração de alguém da geração da tela — são leituras diferentes da mesma rede. */
.subgen {
  margin: 0 0 0 var(--space-3);
  border-top: 0;
  border-left: 2px solid var(--ez-leaf);
  background: var(--ez-surface-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.subgen__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.subgen__title {
  font-weight: var(--weight-semibold);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Dentro do ramo o nó é continuação da lista, não um cartão novo. */
.subgen .node {
  padding-left: var(--space-3);
  border-bottom-color: var(--ez-separator-strong);
}

.subgen .node:last-of-type {
  border-bottom: 0;
}

/* Abrir a rede de um nó é ação, não enfeite — e ação solta no meio do cartão fica
   parecendo etiqueta. Vira rodapé do próprio nó: faixa de ponta a ponta, separada por
   uma linha, texto à esquerda e seta à direita, como toda lista que abre alguma coisa.
   Quando aberta, a faixa escurece e emenda no ramo que nasce logo abaixo. */
.node-expand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: calc(100% + var(--space-3) * 2);
  margin: var(--space-2) calc(var(--space-3) * -1) calc(var(--space-3) * -1);
  /* Sem linha em cima: a faixa é a base do nó, não um item entre dois. O texto começa
     alinhado com o nome, então lê como continuação daquele consultor — quem separa do
     próximo é a borda do próprio nó, que cai abaixo dela. */
  padding: 10px var(--space-3) 10px calc(var(--space-3) * 2 + 40px);
  border: 0;
  background: color-mix(in srgb, var(--ez-leaf) 10%, transparent);
  color: var(--ez-leaf);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.node-expand:hover,
.node-expand:focus-visible {
  background: color-mix(in srgb, var(--ez-leaf) 16%, transparent);
  outline: none;
}

.node-expand[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ez-leaf) 14%, transparent);
}

.node-expand.is-carregando {
  color: var(--ez-ink-tertiary);
  background: var(--ez-surface-secondary);
  cursor: default;
}

.node-expand__seta {
  font-size: 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.node-expand[aria-expanded="true"] .node-expand__seta {
  transform: rotate(90deg);
}

/* O cartão do consultor leva para a rede dele — o cartão inteiro é o alvo. */
.node--link {
  cursor: pointer;
}

.node--link:hover {
  background: color-mix(in srgb, var(--ez-leaf) 4%, transparent);
}

/* Trilha de navegação pela rede (/rede). Quem está logado fica preso à esquerda;
   o resto do caminho rola na horizontal, com o fim (quem está aberto) à vista.
   Sem moldura em volta: são chips soltos na linha, como os filtros da tela. */
.rede-trilha {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
}

.rede-trilha__scroll {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  /* Respiro para a sombra/borda dos chips não ser cortada pelo overflow. */
  padding: 2px 2px 2px 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Some aos poucos na borda: diz que tem caminho escondido à esquerda. */
  mask-image: linear-gradient(to right, transparent 0, #000 16px);
}

.rede-trilha__scroll::-webkit-scrollbar {
  display: none;
}

.rede-trilha__passo {
  display: flex;
  align-items: center;
  flex: none;
}

.rede-trilha__sep {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0 2px;
  color: var(--ez-ink-tertiary);
}

.rede-trilha__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 32px;
  padding: 0 12px 0 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ez-ink-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium, 500);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.rede-trilha__nome {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rede-trilha__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ez-surface-secondary);
  color: var(--ez-ink-secondary);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

button.rede-trilha__item:hover,
button.rede-trilha__item:focus-visible {
  background: var(--ez-surface-secondary);
  color: var(--ez-ink);
  outline: none;
}

button.rede-trilha__item:focus-visible {
  border-color: var(--ez-leaf);
}

/* A raiz é o atalho de volta: chip cheio, com o ícone da rede no lugar do avatar. */
.rede-trilha__raiz {
  padding-left: 10px;
  background: color-mix(in srgb, var(--ez-leaf) 14%, transparent);
  color: var(--ez-ink);
  font-weight: var(--weight-semibold);
}

button.rede-trilha__raiz:hover,
button.rede-trilha__raiz:focus-visible {
  background: color-mix(in srgb, var(--ez-leaf) 22%, transparent);
}

.rede-trilha__raiz.is-raiz-atual {
  cursor: default;
}

.rede-trilha__icone {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ez-leaf);
}

/* Quem a tela mostra agora: chip com fundo e borda, avatar na cor da marca. */
.rede-trilha__item.is-atual {
  background: var(--ez-surface);
  border-color: var(--ez-separator);
  color: var(--ez-ink);
  font-weight: var(--weight-semibold);
  cursor: default;
}

.rede-trilha__item.is-atual .rede-trilha__avatar {
  background: var(--ez-leaf);
  color: var(--ez-ink-on-brand);
}

/* Enquanto a nova raiz carrega, o que está na tela ainda é da anterior: fica
   apagado e sem clique, para ninguém entrar na rede errada. */
.rede-conteudo.is-navegando {
  opacity: 0.5;
  pointer-events: none;
}

/* Timeline checklist */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ez-separator);
  font-size: var(--text-sm);
}

.checklist li:last-child {
  border-bottom: 0;
}

.check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: bold;
}

.check--done {
  background: var(--ez-faixa-verde);
  color: white;
}

.check--todo {
  background: var(--ez-surface-secondary);
  color: var(--ez-ink-tertiary);
  border: 1.5px solid var(--ez-separator-strong);
}

/* Sim result */
.sim-result {
  background: linear-gradient(180deg, var(--ez-mint) 0%, var(--ez-surface) 48%);
  border: 1px solid var(--ez-mint-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.sim-result__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.sim-result__row + .sim-result__row {
  border-top: 1px dashed var(--ez-mint-strong);
}

/* Notification items */
.notif {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ez-separator);
}

.notif:last-child {
  border-bottom: 0;
}

.notif__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--ez-leaf);
}

.notif__dot.is-warn {
  background: var(--ez-orange);
}

.notif__dot.is-danger {
  background: var(--ez-red);
}

.notif__dot.is-read {
  background: var(--ez-separator-strong);
}

.notif.is-unread {
  background: color-mix(in srgb, var(--ez-mint) 62%, var(--ez-surface-solid));
}

/* ---- Tela "Mais" ----------------------------------------------------------
   Cabeçalho, grupos de atalhos (cada um sua lista) e rodapé de conta, numa
   coluna só. O rodapé segue os grupos em vez de descer até o fim da tela:
   numa janela alta ele ficaria sozinho lá embaixo. */
.screen--menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.mais-grupo__label {
  margin-bottom: var(--space-2);
}

.menu-footer {
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.menu-footer__sair {
  width: 100%;
}

/* Nova proposta — stepper de etapas */
.stepper {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
}

.stepper__step {
  position: relative;
  min-width: 0;
}

/* Trilho entre as bolinhas: meia linha para cada lado, por trás do dot. */
.stepper__step::before,
.stepper__step::after {
  content: "";
  position: absolute;
  top: 13px;
  height: 2px;
  background: var(--ez-separator-strong);
}

.stepper__step::before {
  left: 0;
  right: 50%;
  margin-right: 17px;
}

.stepper__step::after {
  left: 50%;
  right: 0;
  margin-left: 17px;
}

.stepper__step:first-child::before,
.stepper__step:last-child::after {
  display: none;
}

.stepper__step.is-done::before,
.stepper__step.is-done::after,
.stepper__step.is-current::before {
  background: var(--ez-leaf);
}

.stepper__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.stepper__btn:focus-visible {
  outline: none;
}

.stepper__btn:focus-visible .stepper__dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 45%, transparent);
}

.stepper__dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--ez-surface-secondary);
  color: var(--ez-ink-tertiary);
  border: 1.5px solid var(--ez-separator-strong);
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}

.stepper__step.is-done .stepper__dot {
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf) 60%);
  border-color: transparent;
  color: var(--ez-forest-deep);
}

.stepper__step.is-done .stepper__num {
  display: none;
}

.stepper__step.is-done .stepper__dot::after {
  content: "✓";
  font-size: var(--text-sm);
  line-height: 1;
}

.stepper__step.is-current .stepper__dot {
  background: var(--ez-surface-solid);
  border-color: var(--ez-leaf);
  color: var(--ez-leaf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 25%, transparent);
}

.stepper__label {
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--ez-ink-tertiary);
}

.stepper__step.is-done .stepper__label {
  color: var(--ez-ink-secondary);
}

.stepper__step.is-current .stepper__label {
  color: var(--ez-ink);
  font-weight: var(--weight-medium);
}

/* Seção do grupo em foco ganha a faixa da marca na borda. */
.card__section.is-current {
  box-shadow: inset 3px 0 0 var(--ez-leaf);
}

@media (prefers-reduced-motion: reduce) {
  .stepper__dot {
    transition: none;
  }
}

/* Nova proposta — visual de captura e etapas */
.proposal-create-screen {
  --proposal-bg: linear-gradient(180deg, #f7fbf8 0%, #eef6f1 44%, #e9f2ed 100%);
  --proposal-surface: #ffffff;
  --proposal-surface-2: #f1f7f3;
  --proposal-line: rgba(8, 34, 24, 0.08);
  --proposal-line-strong: rgba(8, 34, 24, 0.13);
  --proposal-ink: #07150f;
  --proposal-muted: #607368;
  --proposal-faint: #87988f;
  --proposal-accent: #44c979;
  --proposal-accent-strong: #21a95f;
  --proposal-blue: #2368c9;
  --proposal-shadow: 0 14px 36px rgba(8, 34, 24, 0.08), 0 2px 8px rgba(8, 34, 24, 0.04);
  margin: calc(var(--space-4) * -1);
  padding: 18px var(--space-4) calc(var(--space-8) + 20px);
  min-height: calc(100dvh - var(--header-h) - var(--chrome-top));
  background: var(--proposal-bg);
  color: var(--proposal-ink);
}

.proposal-create-screen .eyebrow {
  color: var(--proposal-faint);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
}

.proposal-create-screen .muted,
.proposal-create-screen .footnote {
  color: var(--proposal-muted);
}

.proposal-create__nav {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px 38px 38px;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
}

.proposal-create__nav strong,
.proposal-create__nav span {
  display: block;
}

.proposal-create__nav strong {
  font-size: 16px;
  color: var(--proposal-ink);
}

.proposal-create__nav span {
  margin-top: 2px;
  color: var(--proposal-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.proposal-create__back,
.proposal-create__icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--proposal-line-strong);
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.82);
  color: var(--proposal-ink);
  box-shadow: 0 6px 18px rgba(8, 34, 24, 0.06);
}

.proposal-create__icon {
  position: relative;
}

.proposal-create__icon span {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  margin: 0;
  border-radius: 50%;
  background: #ff6d6d;
}

.proposal-create__hero {
  padding-top: 4px;
}

.proposal-create__hero h1 {
  margin: 9px 0 7px;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.proposal-create__hero p {
  margin: 0;
  color: var(--proposal-muted);
  font-size: 14px;
}

.proposal-create__hero p strong {
  color: inherit;
  font-weight: var(--weight-semibold);
}

.proposal-create__progress {
  margin-top: 16px;
}

.proposal-create__progress p {
  display: none;
}

.proposal-create-screen .progress {
  height: 6px;
  background: rgba(8, 34, 24, 0.09);
}

.proposal-create-screen .progress__bar {
  background: linear-gradient(90deg, #9bf16d, var(--proposal-accent));
}

.proposal-create-screen > .card {
  margin-top: 18px !important;
  padding: 10px 12px;
  border-radius: 18px;
  border-color: var(--proposal-line-strong);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(8, 34, 24, 0.06);
  color: var(--proposal-ink);
}

.proposal-create-screen .produto-atual {
  gap: 10px;
}

.proposal-create-screen .produto-atual__arte {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.proposal-create-screen .produto-atual__texto .eyebrow {
  display: none;
}

.proposal-create-screen .produto-atual__texto .h2 {
  font-size: 15px;
  color: var(--proposal-ink);
}

.proposal-create-screen .produto-atual .btn {
  min-height: 32px;
  border-radius: 11px;
  background: var(--proposal-surface-2);
  color: var(--proposal-muted);
}

.proposal-create__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

/* Voltar/Próxima na mesma linha: o Voltar ocupa o que precisa e o Próxima o resto.
   Some o Voltar na primeira etapa e o Próxima na última (o Salvar toma o lugar). */
.proposal-nav {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.proposal-nav [data-prop-prev] {
  flex: 0 0 auto;
}

.proposal-nav [data-prop-next] {
  flex: 1 1 auto;
}

.proposal-create-screen .card__section,
.proposal-manual,
.proposal-steps,
.proposal-submit {
  border: 1px solid var(--proposal-line-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--proposal-shadow);
}

.proposal-create-screen .card__section {
  padding: 18px;
}

.proposal-create-screen .card__section + .card__section {
  border-top: 1px solid var(--proposal-line-strong);
}

.proposal-create-screen .card__section.is-current {
  box-shadow: none;
}

.proposal-create-screen [data-prop-grupo]:not(.is-current) {
  display: none;
}

.proposal-section__head h2 {
  margin: 4px 0 2px;
  color: var(--proposal-ink);
  font-size: 20px;
  line-height: 1.15;
}

/* Etapa de Lotes de Ações (Enerzee Recharge): o total correndo enquanto o consultor digita. */
.lotes-total {
  margin-top: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--proposal-accent), var(--proposal-accent-strong));
  color: #fff;
  box-shadow: 0 12px 26px rgba(33, 169, 95, 0.28);
}

.lotes-total__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lotes-total__label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
}

.lotes-total__valor {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.lotes-total__calc {
  margin-top: 6px;
  font-size: 12.5px;
  opacity: 0.85;
}

.lotes-total.is-bump .lotes-total__valor {
  animation: lotes-bump 0.28s ease;
}

@keyframes lotes-bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lotes-total.is-bump .lotes-total__valor { animation: none; }
}

.proposal-create-screen .field label,
.proposal-create-screen .field .label {
  color: var(--proposal-muted);
}

.proposal-create-screen .field input,
.proposal-create-screen .field select,
.proposal-create-screen .field textarea {
  border-color: var(--proposal-line-strong);
  background: #fbfefc;
  color: var(--proposal-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.field--invoice > label,
.field--invoice > .footnote:not(.footnote--erro) {
  display: none;
}

.proposal-invoice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  border: 1px dashed rgba(33, 169, 95, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(68, 201, 121, 0.12), transparent 45%),
    #f7fcf8;
  text-align: center;
}

.proposal-invoice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.proposal-invoice__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(68, 201, 121, 0.16);
  color: var(--proposal-accent-strong);
}

.proposal-invoice strong,
.proposal-manual h2,
.proposal-steps h2 {
  color: var(--proposal-ink);
  font-size: 16px;
  line-height: 1.2;
}

.proposal-invoice span {
  margin-top: -4px;
  color: var(--proposal-muted);
  font-size: 12px;
}

.proposal-invoice__primary,
.proposal-invoice__secondary,
.proposal-manual button {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  font-weight: var(--weight-semibold);
  font-size: 13px;
}

.proposal-invoice__primary {
  margin-top: 8px;
  background: var(--ez-leaf);
  color: #fff;
  box-shadow: 0 10px 20px rgba(33, 169, 95, 0.2);
}

.proposal-invoice__secondary,
.proposal-manual button {
  border: 1px solid var(--proposal-line-strong);
  color: var(--proposal-ink);
  background: transparent;
}

.proposal-aceite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 26px 18px;
  border: 1px solid var(--ez-warning-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(230, 168, 23, 0.16), transparent 45%),
    var(--ez-warning-bg);
  text-align: center;
}

.proposal-aceite__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(230, 168, 23, 0.2);
  color: var(--ez-warning-ink);
}

.proposal-aceite h2 {
  margin: 0;
  color: var(--proposal-ink);
  font-size: 16px;
  line-height: 1.2;
}

.proposal-aceite p {
  margin: -2px 0 6px;
  color: var(--proposal-muted);
  font-size: 13px;
  line-height: 1.55;
}

.proposal-aceite__primary,
.proposal-aceite__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  font-weight: var(--weight-semibold);
  font-size: 13px;
  text-decoration: none;
}

.proposal-aceite__secondary {
  border: 1px solid var(--ez-warning-border);
  color: var(--ez-warning-ink);
  background: transparent;
}

.proposal-aceite__primary {
  border: none;
  background: var(--ez-leaf);
  color: #fff;
  box-shadow: 0 10px 20px rgba(33, 169, 95, 0.2);
}

.proposal-manual,
.proposal-steps,
.proposal-submit {
  padding: 18px;
}

.proposal-manual h2,
.proposal-steps h2 {
  margin: 0 0 12px;
}

.proposal-manual p {
  margin: 0 0 14px;
  color: var(--proposal-muted);
  font-size: 13px;
  line-height: 1.6;
}

.proposal-steps .stepper__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.proposal-steps .stepper__step {
  padding: 0;
}

.proposal-steps .stepper__step::before,
.proposal-steps .stepper__step::after {
  display: none;
}

.proposal-steps .stepper__step + .stepper__step {
  border-top: 1px solid var(--proposal-line);
}

.proposal-steps .stepper__btn {
  min-height: 62px;
  padding: 12px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  border-radius: 12px;
}

.proposal-steps .stepper__btn:hover,
.proposal-steps .stepper__btn:focus-visible {
  background: rgba(33, 169, 95, 0.07);
  outline: none;
}

.proposal-steps .stepper__copy {
  min-width: 0;
}

.proposal-steps .stepper__label {
  display: none;
}

.proposal-steps .stepper__copy strong,
.proposal-steps .stepper__copy small {
  display: block;
}

.proposal-steps .stepper__copy strong {
  color: var(--proposal-ink);
  font-size: 16px;
}

.proposal-steps .stepper__copy small {
  margin-top: 3px;
  color: var(--proposal-muted);
  font-size: 12px;
}

.proposal-steps .stepper__badge {
  display: inline-flex;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(35, 104, 201, 0.12);
  color: var(--proposal-blue);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  align-items: center;
}

.proposal-steps .stepper__badge[hidden] {
  display: none;
}

.proposal-steps .stepper__badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.proposal-steps .stepper__step.is-done .stepper__badge {
  background: rgba(33, 169, 95, 0.12);
  color: var(--proposal-accent-strong);
}

.proposal-create-screen .suggest {
  border-color: var(--proposal-line-strong);
  background: var(--proposal-surface);
}

.proposal-create-screen .suggest__item,
.proposal-create-screen .suggest__note {
  color: var(--proposal-ink);
}

.proposal-create__legal {
  margin-top: 14px;
}

.theme-dark .proposal-create-screen,
[data-theme="dark"] .proposal-create-screen {
  --proposal-bg: #06100c;
  --proposal-surface: #0d1b14;
  --proposal-surface-2: #0b1711;
  --proposal-line: rgba(191, 220, 204, 0.08);
  --proposal-line-strong: rgba(191, 220, 204, 0.14);
  --proposal-ink: #f4fff7;
  --proposal-muted: #9aaca3;
  --proposal-faint: #8fa299;
  --proposal-accent: var(--ez-lime);
  --proposal-accent-strong: var(--ez-lime-soft);
  --proposal-blue: #8ab7ff;
  background: var(--proposal-bg);
}

/* Sugestões do gerador (autocomplete) */
.suggest {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ez-separator-strong);
  border-radius: var(--radius-md);
  background: var(--ez-surface-solid);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}

.suggest[hidden] {
  display: none;
}

.suggest__item {
  padding: 10px 12px;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--ez-separator);
  background: none;
  font: inherit;
  color: var(--ez-ink);
  text-align: left;
  cursor: pointer;
}

.suggest__item:last-child {
  border-bottom: 0;
}

.suggest__item:hover,
.suggest__item:focus-visible {
  background: var(--ez-mint);
  outline: none;
}

/* Aviso no lugar da lista: ocupa o espaço do campo sem parecer opção clicável. */
.suggest__note {
  padding: 10px 12px;
  background: var(--ez-warning-bg);
  color: var(--ez-warning-ink);
}

/* Dica que é restrição, não formatação: precisa ser lida antes de digitar. */
.footnote--restricao {
  color: var(--ez-warning-ink);
  font-weight: 600;
}

/* Queixa do campo: só aparece depois que o consultor sai dele, e diz o que falta. */
.footnote--erro {
  color: var(--ez-danger-ink);
  font-weight: 600;
}

/* Kits do /product/calculation: escolha única, um cartão por opção. */
.kit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kit {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  padding: var(--space-3);
  border: 1.5px solid var(--ez-separator-strong);
  border-radius: var(--radius-lg);
  background: var(--ez-surface-solid);
  font: inherit;
  color: var(--ez-ink);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
}

.kit:hover {
  border-color: var(--ez-leaf);
}

.kit:focus-visible {
  outline: none;
  border-color: var(--ez-leaf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 25%, transparent);
}

.kit.is-selected {
  border-color: var(--ez-leaf);
  background: var(--ez-mint);
  box-shadow: inset 3px 0 0 var(--ez-leaf);
}

/* Marca de escolha: sem ela o cartão não se anuncia como opção clicável. */
.kit__mark {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--ez-separator-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast);
}

.kit.is-selected .kit__mark {
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf) 60%);
  border-color: transparent;
}

.kit.is-selected .kit__mark::after {
  content: "✓";
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--ez-forest-deep);
}

.kit__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kit__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.kit__potencia {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.kit__selo {
  flex: none;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf) 60%);
  color: var(--ez-forest-deep);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.kit__geracao {
  font-size: var(--text-sm);
  color: var(--ez-ink-tertiary);
}

/* As peças ficam entre separadores: é a parte que muda de kit para kit. */
.kit__pecas {
  display: grid;
  gap: 2px;
  margin: var(--space-2) 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--ez-separator);
  border-bottom: 1px solid var(--ez-separator);
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
}

.kit__peca {
  overflow-wrap: anywhere;
}

.kit__peca b {
  font-weight: var(--weight-semibold);
  color: var(--ez-ink);
}

/* Qualificador de uma linha (tipo do inversor, quebra do bônus): existe, mas não compete. */
.kit__nota {
  display: block;
  font-size: var(--text-xs);
  color: var(--ez-ink-tertiary);
}

.kit__resto {
  font-size: var(--text-xs);
  color: var(--ez-ink-tertiary);
}

.kit__preco {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.kit__ganho {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
}

.kit__ganho b {
  font-weight: var(--weight-semibold);
  color: var(--ez-leaf);
}

/* Minhas propostas */
.proposal-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  color: #f4fff8;
  background:
    radial-gradient(130% 80% at 100% 0%, color-mix(in srgb, var(--ez-lime) 28%, transparent), transparent 54%),
    radial-gradient(80% 90% at 0% 100%, color-mix(in srgb, var(--ez-lime-soft) 22%, transparent), transparent 58%),
    linear-gradient(145deg, var(--ez-forest-deep) 0%, var(--ez-forest) 100%);
  box-shadow: var(--shadow-float);
}

.proposal-hero .eyebrow,
.proposal-hero .muted {
  color: rgba(244, 255, 248, 0.74);
}

.proposal-hero__badge {
  display: inline-flex;
  margin-top: var(--space-3);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.proposal-filter {
  background: linear-gradient(180deg, var(--ez-elevated-bg), var(--ez-surface));
  margin-top: var(--space-2);
}

.proposal-filter-shell {
  display: flex;
  flex-direction: column;
}

.proposal-filter-toggle {
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ez-separator);
  background: var(--ez-elevated-bg);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.proposal-filter-toggle strong,
.proposal-filter-toggle small {
  display: block;
}

.proposal-filter-toggle strong {
  font-size: var(--text-md);
}

.proposal-filter-toggle small {
  margin-top: 2px;
  color: var(--ez-ink-secondary);
  font-size: var(--text-xs);
}

.proposal-filter-toggle__chev {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--ez-mint);
  color: var(--ez-forest-deep);
  font-weight: var(--weight-bold);
  transition: transform var(--dur-fast) var(--ease-out);
}

.proposal-filter-toggle.is-open .proposal-filter-toggle__chev {
  transform: rotate(180deg);
}

.proposal-filter__top,
.proposal-filter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.proposal-filter .field {
  min-width: 0;
}

.proposal-filter select,
.proposal-filter input {
  width: 100%;
  min-width: 0;
}

.proposal-filter__grid .field:first-child {
  grid-column: 1 / -1;
}

.proposal-filter__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.proposal-filter__actions .btn {
  width: 100%;
}

.proposal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.proposal-card {
  position: relative;
  display: grid;
  grid-template-columns: 6px 1fr;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ez-surface);
  border: 1px solid var(--ez-separator);
  box-shadow: var(--shadow-card);
}

/* O card inteiro é o link para o acompanhamento (§10.4). Como <a>, ele herda cor de
   link e precisa voltar a parecer cartão — e ganhar o retorno de toque que justifica
   ser clicável. */
.proposal-card--link {
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.proposal-card--link:hover {
  box-shadow: var(--shadow-float);
}

.proposal-card--link:active {
  transform: scale(0.99);
}

.proposal-card--link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 35%, transparent);
}

.proposal-card__stripe {
  background: linear-gradient(180deg, var(--ez-lime), var(--ez-leaf), var(--ez-forest-deep));
}

.proposal-card__body {
  padding: var(--space-4);
  min-width: 0;
}

.proposal-card .row-between {
  align-items: flex-start;
}

.proposal-card .pill {
  max-width: 46%;
  white-space: normal;
  text-align: right;
  justify-content: flex-end;
  line-height: 1.2;
  flex-shrink: 1;
}

.proposal-card__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ez-ink-tertiary);
  font-weight: var(--weight-semibold);
  min-width: 0;
  overflow-wrap: anywhere;
}

.proposal-card__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.proposal-card__sub {
  margin-top: 6px;
  color: var(--ez-ink-secondary);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.proposal-card__footer {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.proposal-card__footer .estimate-tag {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
}

.proposal-empty {
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(168, 230, 15, 0.14), transparent 58%),
    var(--ez-surface);
  border: 1px dashed var(--ez-separator-strong);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.proposal-empty__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto var(--space-3);
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--ez-mint);
  color: var(--ez-forest-deep);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
}

.proposal-empty h3 {
  margin: 0;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

.proposal-empty p {
  margin: var(--space-2) auto var(--space-4);
  max-width: 30ch;
  color: var(--ez-ink-secondary);
  font-size: var(--text-sm);
}

.proposal-pager-block {
  margin-bottom: var(--space-3);
}

.proposal-pager {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 0;
  scrollbar-width: none;
}

.proposal-pager--wide-screen {
  display: none;
}

.proposal-pager--compact {
  display: flex;
  justify-content: center;
}

.proposal-pager::-webkit-scrollbar {
  display: none;
}

.proposal-pager__item,
.proposal-pager__ellipsis {
  min-width: 28px;
  height: 36px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ez-separator-strong);
  border-left: 0;
  background: var(--ez-elevated-bg);
  color: var(--ez-ink-secondary);
  font-size: 12px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  flex: 0 0 auto;
}

.proposal-pager__item:first-child {
  border-left: 1px solid var(--ez-separator-strong);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.proposal-pager__item:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.proposal-pager__item--wide {
  min-width: 66px;
}

.proposal-pager__item.is-active {
  background: var(--ez-mint);
  border-color: var(--ez-leaf);
  color: var(--ez-forest-deep);
  font-weight: var(--weight-bold);
  box-shadow: inset 0 0 0 1px var(--ez-leaf);
}

.proposal-pager__item:disabled {
  color: var(--ez-ink-tertiary);
  background: var(--ez-surface-secondary);
  cursor: default;
}

.proposal-pager__item.is-active:disabled {
  background: var(--ez-mint);
  border-color: var(--ez-leaf);
  color: var(--ez-forest-deep);
  opacity: 1;
}

.proposal-pager__ellipsis {
  color: var(--ez-ink-tertiary);
}

.proposal-pager__summary {
  margin-top: 8px;
  text-align: center;
  color: var(--ez-ink-secondary);
  font-size: var(--text-sm);
}

@media (min-width: 390px) {
  .proposal-filter__grid {
    grid-template-columns: 1fr 1fr;
  }

  .proposal-filter__actions {
    grid-template-columns: 1fr auto;
  }
}


/* ========== Convite de instalação ========== */
/*
 * Flutua dentro de `#app`, logo acima da tabbar — no desktop a tabbar vira sidebar
 * e o `bottom` cai para a margem simples (ver bloco desktop no fim do arquivo).
 */
.install-bar {
  position: absolute;
  z-index: 45;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-2));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--ez-elevated-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--ez-separator-strong);
  box-shadow: var(--shadow-float);
  animation: screen-in var(--dur) var(--ease-out);
}

.install-bar[hidden] {
  display: none;
}

.install-bar__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
}

.install-bar__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.install-bar__text strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.install-bar__text span {
  font-size: var(--text-xs);
  color: var(--ez-ink-secondary);
  line-height: 1.35;
}

.install-bar__close {
  flex-shrink: 0;
  align-self: flex-start;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: var(--ez-ink-tertiary);
}

.install-bar__close:hover {
  background: var(--ez-surface-secondary);
  color: var(--ez-ink);
}

/* Bloco de instalação dentro da tela "Mais" — permanente, não dispensável. */
.install-hint {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--ez-surface);
  border: 1px dashed var(--ez-separator-strong);
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.install-hint p {
  margin: 0;
}

.install-hint .btn {
  width: 100%;
}

/*
 * Popup de eventos pendentes. `position: absolute; inset: 0` (não `fixed`) pelo
 * mesmo motivo do `.install-bar`: no modo moldura do desktop o `<body>` é o palco
 * cinza fora do aparelho, e `fixed` vazaria pra lá — `#app` tem `overflow: hidden`
 * e cobre exatamente a tela simulada.
 */
.event-popup {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.event-popup[hidden] {
  display: none;
}

.event-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 26, 18, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: screen-in var(--dur) var(--ease-out);
}

.event-popup__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  animation: screen-in var(--dur) var(--ease-out);
}

.event-popup__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.35);
}

.event-popup__imagem {
  display: block;
  width: 100%;
  height: auto;
}

.event-popup__corpo {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-popup__titulo {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0;
}

.event-popup__descricao {
  font-size: var(--text-sm);
  line-height: 1.4;
  margin: 0;
  opacity: 0.92;
}

.event-popup__valor {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  margin: 0;
}

.event-popup__corpo .btn {
  margin-top: var(--space-2);
}

/* Utilities */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.gap-2 { gap: var(--space-2); }
.w-full { width: 100%; }
.text-right { text-align: right; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ========== Login ========== */
.login-screen {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: #f4fff8;
  background:
    radial-gradient(ellipse 90% 55% at 80% 10%, rgba(168, 230, 15, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 45% at 10% 90%, color-mix(in srgb, var(--ez-lime) 22%, transparent), transparent 50%),
    linear-gradient(165deg, #111800 0%, #263500 48%, #151d00 100%);
}

.login-screen__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 230, 15, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 230, 15, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent 75%);
  pointer-events: none;
}

.login-screen__glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 230, 15, 0.35), transparent 65%);
  top: -40px;
  right: -60px;
  filter: blur(8px);
  pointer-events: none;
}

.login-screen__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: max(var(--chrome-top), 20px) var(--space-5) max(var(--safe-bottom), 20px);
  gap: var(--space-5);
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

.login-screen__content > .login-brand,
.login-screen__content > .login-card,
.login-screen__content > .login-footer {
  flex-shrink: 0;
}

.login-screen__content > .login-footer {
  margin-top: 0;
}

.login-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.login-brand__mark {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(168, 230, 15, 0.45));
}

.login-brand__wordmark {
  width: min(260px, 72vw);
  height: auto;
}

.login-brand__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 232, 216, 0.75);
  margin: 0;
}

.login-brand__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f4fff8;
}

.login-brand__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: rgba(200, 232, 216, 0.7);
  max-width: 28ch;
  line-height: 1.45;
}

.login-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(168, 230, 15, 0.18);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.login-card .field label {
  color: rgba(244, 255, 248, 0.72);
}

.login-card .field input {
  background: rgba(4, 20, 15, 0.45);
  border-color: rgba(168, 230, 15, 0.22);
  color: #f4fff8;
}

.login-card .field input::placeholder {
  color: rgba(200, 232, 216, 0.4);
}

.login-card .field input:focus {
  border-color: var(--ez-lime);
  box-shadow: 0 0 0 3px rgba(168, 230, 15, 0.2);
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: -2px;
  padding: 10px 12px;
  border: 1px solid rgba(168, 230, 15, 0.16);
  border-radius: var(--radius-md);
  background: rgba(4, 20, 15, 0.24);
  color: rgba(244, 255, 248, 0.74);
  font-size: var(--text-sm);
  line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}

.login-remember input {
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(168, 230, 15, 0.38);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ez-lime);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}

.login-remember input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
  transform: scale(0);
  transition: transform var(--dur-fast);
}

.login-remember input:checked {
  border-color: var(--ez-lime);
  background: rgba(168, 230, 15, 0.12);
  box-shadow: 0 0 0 3px rgba(168, 230, 15, 0.12);
}

.login-remember input:checked::before {
  transform: scale(1);
}

.login-remember:has(input:checked) {
  border-color: rgba(168, 230, 15, 0.34);
  background: rgba(168, 230, 15, 0.08);
  color: rgba(244, 255, 248, 0.9);
}

.login-remember:has(input:focus-visible) {
  border-color: var(--ez-lime);
  box-shadow: 0 0 0 3px rgba(168, 230, 15, 0.16);
}

.login-error {
  display: none;
  margin-top: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(224, 58, 48, 0.16);
  border: 1px solid rgba(224, 58, 48, 0.35);
  color: #ffb4ae;
  font-size: var(--text-sm);
}

.login-error.is-visible {
  display: block;
}

/* ========== Cadastro VO ========== */
.cadastro-screen {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: 100% !important;
  position: relative;
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr;
  overflow: auto;
  color: #f4fff8;
  background:
    radial-gradient(ellipse 90% 45% at 50% -10%, rgba(168, 230, 15, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 40% at 100% 35%, color-mix(in srgb, var(--ez-lime) 18%, transparent), transparent 58%),
    linear-gradient(180deg, #151d00 0%, #263500 46%, #111800 100%);
}

.cadastro-hero {
  display: none;
}

.cadastro-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cadastro-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ez-login-bg) 8%, transparent), color-mix(in srgb, var(--ez-login-bg) 52%, transparent) 48%, var(--ez-login-bg) 100%),
    radial-gradient(ellipse 70% 70% at 80% 10%, rgba(168, 230, 15, 0.28), transparent 60%);
}

.cadastro-hero__copy {
  display: none;
}

.cadastro-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: auto;
  margin-top: 0;
  padding: max(var(--chrome-top), 22px) var(--space-4) max(var(--safe-bottom), 18px);
  box-sizing: border-box;
  justify-content: center;
}

.cadastro-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: 21px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}

.cadastro-brand img {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  filter: drop-shadow(0 10px 28px rgba(168, 230, 15, 0.3));
}

.cadastro-title {
  text-align: center;
  margin-bottom: var(--space-3);
}

.cadastro-title h1 {
  margin: 0;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: #f4fff8;
}

.cadastro-title p:not(.eyebrow) {
  max-width: 28rem;
  margin: var(--space-2) auto 0;
  color: rgba(226, 244, 235, 0.74);
  line-height: 1.45;
}

.cadastro-card {
  display: grid;
  gap: 10px;
  padding: var(--space-4);
  border: 1px solid rgba(168, 230, 15, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: cadastro-in var(--dur) var(--ease-out);
}

.cadastro-field {
  display: grid;
  gap: 5px;
}

.cadastro-field > span:first-child {
  color: rgba(244, 255, 248, 0.74);
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.cadastro-input-wrap {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  min-height: 44px;
  border: 1px solid rgba(168, 230, 15, 0.2);
  border-radius: 14px;
  background: rgba(3, 20, 14, 0.58);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.cadastro-input-wrap--password {
  grid-template-columns: 34px 1fr 42px;
}

.cadastro-input-wrap > span {
  color: rgba(168, 230, 15, 0.78);
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-align: center;
}

.cadastro-input-wrap input {
  width: 100%;
  height: 44px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4fff8;
  font: inherit;
}

.cadastro-password-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 4px;
  border-radius: 12px;
  color: rgba(168, 230, 15, 0.8);
}

.cadastro-password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cadastro-password-toggle.is-visible,
.cadastro-password-toggle:focus-visible {
  background: rgba(168, 230, 15, 0.12);
  color: var(--ez-lime);
}

.cadastro-input-wrap input::placeholder {
  color: rgba(200, 232, 216, 0.42);
}

.cadastro-input-wrap:focus-within {
  border-color: rgba(168, 230, 15, 0.62);
  background: rgba(4, 20, 15, 0.72);
  box-shadow: 0 0 0 4px rgba(168, 230, 15, 0.12);
}

.cadastro-input-wrap input:disabled {
  color: rgba(244, 255, 248, 0.8);
  -webkit-text-fill-color: rgba(244, 255, 248, 0.8);
}

.cadastro-field:has(input.is-invalid) .cadastro-input-wrap {
  border-color: rgba(255, 109, 109, 0.75);
  box-shadow: 0 0 0 4px rgba(255, 109, 109, 0.1);
}

.cadastro-field small,
.cadastro-safe {
  color: rgba(226, 244, 235, 0.62);
  font-size: 11px;
  line-height: 1.35;
}

.cadastro-field small:not(:empty) {
  color: #ffd0d0;
}

.cadastro-field--locked .cadastro-input-wrap {
  background: rgba(168, 230, 15, 0.1);
}

.cadastro-alert,
.cadastro-error {
  border: 1px solid rgba(255, 109, 109, 0.32);
  border-radius: 16px;
  background: rgba(95, 12, 18, 0.36);
  color: #ffe2e2;
  font-size: 13px;
  line-height: 1.45;
}

.cadastro-alert {
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.cadastro-error {
  display: none;
  padding: var(--space-3);
}

.cadastro-error.is-visible {
  display: block;
}

.cadastro-success {
  display: grid;
  gap: var(--space-4);
  text-align: center;
}

.cadastro-success__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf));
  color: var(--ez-forest-deep);
  font-size: 30px;
  font-weight: var(--weight-bold);
}

.cadastro-success h2 {
  margin: 0;
  color: inherit;
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
}

.cadastro-success p {
  margin: 0;
  color: rgba(226, 244, 235, 0.72);
}

.cadastro-credentials {
  display: grid;
  gap: var(--space-2);
  text-align: left;
}

.cadastro-credentials > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(168, 230, 15, 0.16);
}

.cadastro-credentials span {
  color: rgba(226, 244, 235, 0.65);
  font-size: 12px;
}

.cadastro-credentials strong {
  color: inherit;
  overflow-wrap: anywhere;
}

/* Ativação do consultor (#/onboarding) ------------------------------------
   Só tokens: claro e escuro saem das variáveis, sem cor fixa. Reaproveita
   .card, .stepper, .kit, .alert e .check; aqui fica só o layout da tela. */
.onboarding {
  display: grid;
  gap: var(--space-4);
}

.onboarding__head .h1 {
  margin-top: var(--space-1);
  text-wrap: balance;
}

.onboarding__head .muted {
  margin: 0;
}

.onboarding__layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.onboarding__main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.onboarding__progresso {
  padding-block: var(--space-4) var(--space-3);
}

.onboarding-etapa {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.onboarding-etapa__head {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.onboarding-etapa__head .muted {
  margin: 0;
  line-height: 1.45;
}

/* Planos: a arte de marketing (Business Plus / Connect). O cartão é peça de marca —
   mesmas cores nos dois temas; só o anel de seleção segue o tema. */
.onboarding-planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.plano-oferta {
  --oferta-escuro: #073a2d;
  --oferta-lime: #c9f53c;
  --oferta-lime-suave: #7aa63a;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--oferta-escuro);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), filter var(--dur-fast);
}

.plano-oferta > span {
  display: block;
}

.plano-oferta:hover {
  transform: translateY(-2px);
}

.plano-oferta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ez-leaf) 55%, transparent);
}

.plano-oferta.is-selected {
  box-shadow: 0 0 0 4px var(--ez-leaf), 0 18px 40px rgba(6, 40, 29, 0.22);
}

.plano-oferta__check {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  background: var(--oferta-lime);
  color: var(--oferta-escuro);
  border: 3px solid var(--oferta-escuro);
  font-size: 16px;
  font-weight: 800;
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.plano-oferta.is-selected .plano-oferta__check {
  transform: scale(1);
}

/* Cabeçalho escuro: "Plano Business +PLUS" / "Plano CONNECT" */
.plano-oferta__topo {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 84px;
  padding: 18px 16px 16px;
  border-radius: 22px 22px 0 0;
  background: var(--oferta-escuro);
  line-height: 1;
}

.plano-oferta__plano {
  color: var(--oferta-lime);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.plano-oferta__nome {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.plano-oferta__marca {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.plano-oferta--plus .plano-oferta__nome {
  color: var(--oferta-lime);
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
}

.plano-oferta--connect .plano-oferta__nome {
  color: #ffffff;
}

.plano-oferta__selo {
  padding: 2px 5px;
  border: 1.5px solid var(--oferta-lime);
  border-radius: 4px;
  color: var(--oferta-lime);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.plano-oferta__aberto {
  padding: 6px 12px;
  background: var(--oferta-escuro);
  color: var(--oferta-lime);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Corpo: frase + benefícios */
.plano-oferta__corpo {
  flex: 1;
  padding: 20px 22px 26px;
}

.plano-oferta--plus .plano-oferta__corpo {
  background: var(--oferta-lime);
}

.plano-oferta--connect .plano-oferta__corpo {
  background: #ffffff;
  border-inline: 3px solid var(--oferta-lime);
}

.plano-oferta__frase {
  display: block;
  margin: 0 auto 14px;
  max-width: 34ch;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--oferta-escuro);
}

.plano-oferta__itens {
  display: grid;
  gap: 10px;
  text-align: left;
  max-width: 330px;
  margin-inline: auto;
}

.plano-oferta__item {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--oferta-escuro);
}

.plano-oferta__item.is-suave {
  color: var(--oferta-lime-suave);
}

.plano-oferta__item small {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Painel de preço */
.plano-oferta__preco {
  position: relative;
  z-index: 1;
  margin: -20px 0 -20px;
  padding: 26px 20px 30px;
  border-radius: 28px;
}

.plano-oferta--plus .plano-oferta__preco {
  background: #ffffff;
  border: 3px solid var(--oferta-lime);
}

.plano-oferta--connect .plano-oferta__preco {
  background: var(--oferta-lime);
}

.plano-oferta__linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  line-height: 1.1;
}

.plano-oferta__validade {
  padding-right: 14px;
  border-right: 1.5px solid var(--oferta-escuro);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
}

.plano-oferta__validade b {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
}

.plano-oferta__avista {
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
}

.plano-oferta__parcela {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--oferta-escuro) 55%, transparent);
  line-height: 0.82;
}

.plano-oferta__vezes {
  font-size: 2.4rem;
  font-weight: 800;
  padding-bottom: 6px;
}

.plano-oferta__inteiro {
  font-size: clamp(5rem, 11vw, 6.2rem);
  font-weight: 900;
  letter-spacing: -0.05em;
}

.plano-oferta__resto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  padding: 4px 0 8px;
}

.plano-oferta__centavos {
  font-size: 2.2rem;
  font-weight: 900;
}

.plano-oferta__cartao {
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

.plano-oferta__renovacao {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Rodapé escuro: "R$1,00 de bônus de venda = 1 Ponto" */
.plano-oferta__rodape {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 14px 16px;
  border-radius: 0 0 22px 22px;
  background: var(--oferta-escuro);
  color: #ffffff;
  line-height: 1;
}

.plano-oferta__rodape b {
  font-size: 1.35rem;
  font-weight: 800;
}

.plano-oferta__rodape small {
  font-size: 0.62rem;
  line-height: 1.1;
  text-align: left;
}

.plano-oferta__igual {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--oferta-lime);
  color: var(--oferta-escuro);
  font-weight: 900;
}

@media (max-width: 380px) {
  .plano-oferta__inteiro {
    font-size: 4.4rem;
  }

  .plano-oferta__rodape b {
    font-size: 1.1rem;
  }
}

/* Etapa Validação (e-mail) */
.onboarding-email {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--ez-separator);
  border-radius: var(--radius-md);
  background: var(--ez-soft-panel);
}

.onboarding-email__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf) 60%);
  color: var(--ez-on-accent-dark);
  font-size: 1.4rem;
}

.onboarding-email__destino {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.onboarding-email__destino strong {
  font-size: var(--text-lg);
  color: var(--ez-ink);
  overflow-wrap: anywhere;
}

.onboarding-email__passos {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ez-ink-secondary);
  line-height: 1.45;
}

.onboarding-email__passos strong {
  color: var(--ez-ink);
}

.onboarding-email__restantes {
  text-align: center;
}

/* Pedido em aberto */
.onboarding-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.onboarding-resumo > div {
  padding: var(--space-3);
  border: 1px solid var(--ez-separator);
  border-radius: var(--radius-md);
  background: var(--ez-soft-panel);
}

.onboarding-resumo dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ez-ink-tertiary);
}

.onboarding-resumo dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--ez-ink);
  overflow-wrap: anywhere;
}

.onboarding-trocar {
  justify-self: center;
}

.onboarding-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}

/* Termos: checklist Manual → Contrato e o documento vigente. */
.onboarding-termos {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.onboarding-termos__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ez-separator);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
}

.onboarding-termos__item.is-current {
  border-color: var(--ez-leaf);
  box-shadow: inset 3px 0 0 var(--ez-leaf);
}

.onboarding-termo {
  display: grid;
  gap: var(--space-2);
}

/* O documento é papel: fundo branco nos dois temas, é o que o VO desenhou. */
.onboarding-termo__doc {
  width: 100%;
  height: min(60vh, 560px);
  min-height: 320px;
  border: 1px solid var(--ez-separator-strong);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.onboarding-termo__abrir {
  justify-self: start;
}

.onboarding-fim {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding-block: var(--space-4);
  text-align: center;
}

.onboarding-fim .muted {
  max-width: 460px;
  margin: 0;
  line-height: 1.5;
}

.onboarding-fim .alert {
  width: 100%;
  text-align: left;
}

/* Resumo lateral */
.onboarding-aside {
  display: grid;
  gap: var(--space-4);
}

.onboarding-aside__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf) 60%);
  color: var(--ez-on-accent-dark);
  font-weight: var(--weight-bold);
}

.onboarding-aside__id {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.onboarding-aside__id strong,
.onboarding-aside__id .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-aside__progresso {
  display: grid;
  gap: var(--space-2);
}

.onboarding-aside__barra {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ez-surface-secondary);
  overflow: hidden;
}

.onboarding-aside__barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ez-lime), var(--ez-leaf));
  transition: width var(--dur) var(--ease-out);
}

/* Formulário do complemento (etapa 1 e modal "Finalizar cadastro") */
.complemento-form {
  display: grid;
  gap: var(--space-4);
  text-align: left;
}

.complemento-form__grupo {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.complemento-form__grupo legend {
  padding: 0;
  margin-bottom: var(--space-3);
}

.complemento-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.complemento-form__largo {
  grid-column: 1 / -1;
}

/* Cidade/UF: vem do CEP e não se edita — lê como campo, sem ser um. */
.complemento-form__local {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed var(--ez-separator-strong);
  border-radius: var(--radius-md);
  background: var(--ez-soft-panel);
  color: var(--ez-ink-tertiary);
  font-size: var(--text-sm);
}

.complemento-form__local.is-ok {
  border-style: solid;
  color: var(--ez-ink);
  font-weight: var(--weight-medium);
}

.complemento-form input[readonly],
html.theme-dark .complemento-form input[readonly] {
  background: var(--ez-soft-panel);
  color: var(--ez-ink-secondary);
}

.complemento-form fieldset:disabled {
  opacity: 0.6;
}

.complemento-form__whatsapp {
  align-self: end;
}

.field__erro {
  min-height: 0;
  font-size: var(--text-xs);
  color: var(--ez-danger-ink);
}

.field__erro:empty {
  display: none;
}

/* Sexo: .segmented com rádio de verdade por baixo. */
.segmented--radio label {
  display: grid;
  cursor: pointer;
}

.segmented--radio span {
  display: grid;
  place-items: center;
  min-height: 36px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ez-ink-secondary);
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}

.segmented--radio input:checked + span {
  background: var(--ez-surface-solid);
  color: var(--ez-ink);
  box-shadow: var(--shadow-card);
  font-weight: var(--weight-semibold);
}

.segmented--radio input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 35%, transparent);
}

/* Checkbox de linha inteira (WhatsApp, "li e aceito"). */
.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ez-separator-strong);
  border-radius: var(--radius-md);
  background: var(--ez-surface);
  color: var(--ez-ink);
  font-size: var(--text-sm);
  line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.check-row input {
  display: grid;
  place-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  border: 1.5px solid var(--ez-separator-strong);
  border-radius: 6px;
  background: var(--ez-surface-solid);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.check-row input::after {
  content: "✓";
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--ez-on-accent-dark);
  transform: scale(0);
  transition: transform var(--dur-fast);
}

.check-row input:checked {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ez-lime), var(--ez-leaf) 60%);
}

.check-row input:checked::after {
  transform: scale(1);
}

.check-row:has(input:checked) {
  border-color: var(--ez-leaf);
  background: var(--ez-mint);
}

.check-row:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 25%, transparent);
}

/* Sidebar (desktop) enquanto a sessão é de onboarding. */
.sidebar-onboarding {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
}

.sidebar-onboarding__card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--ez-separator);
  border-radius: var(--radius-md);
  background: var(--ez-soft-panel);
  font-size: var(--text-sm);
}

.sidebar-onboarding__card strong {
  color: var(--ez-ink);
}

.sidebar-onboarding__card span {
  color: var(--ez-ink-secondary);
  line-height: 1.4;
}

/* Mobile: sem abas na ativação (toda rota volta para cá). */
@media (max-width: 899.98px) {
  #app.is-onboarding .tabbar {
    display: none;
  }

  #app.is-onboarding .app-main {
    padding-bottom: calc(max(var(--safe-bottom), 18px) + var(--space-8));
  }

  .onboarding-etapa {
    padding: var(--space-4);
  }
}

/* Desktop: etapa ao centro, resumo fixo ao lado. */
@media (min-width: 900px) {
  html:not(.is-framed) .onboarding {
    max-width: 1080px;
  }

  html:not(.is-framed) .onboarding__layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  html:not(.is-framed) .onboarding-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }

  html:not(.is-framed) .onboarding-etapa {
    padding: var(--space-6);
  }
}

.cadastro-submit {
  min-height: 50px;
  margin-top: var(--space-1);
  border-radius: 16px;
  letter-spacing: 0.08em;
}

.cadastro-safe {
  margin: 0;
  display: none;
}

@keyframes cadastro-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-hint {
  margin-top: var(--space-4);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(168, 230, 15, 0.08);
  border: 1px dashed rgba(168, 230, 15, 0.28);
  font-size: var(--text-xs);
  color: rgba(212, 255, 58, 0.85);
  line-height: 1.4;
}

.login-footer {
  text-align: center;
  font-size: 11px;
  color: rgba(200, 232, 216, 0.45);
  line-height: 1.5;
}

.list {
  background: var(--ez-surface);
  backdrop-filter: blur(10px);
}

.menu-tile {
  background: var(--ez-surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ez-glass-border);
}

.menu-tile__icon {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ez-lime) 35%, white), var(--ez-mint));
}

.login-brand__name {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #e8ff7a 0%, #a8e60f 55%, #7bc40a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(168, 230, 15, 0.25));
}

/* Régua de etapas do acompanhamento (§11.7): a etapa atual e as já cumpridas
   precisam se distinguir de relance — é a única leitura de progresso da tela.
   O trilho é desenhado por item (::after) em vez de uma linha única atrás da lista
   porque assim cada trecho pinta na cor do seu próprio estado, e o verde para
   exatamente onde o progresso parou. */
.rule {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rule__item {
  position: relative;
  padding: 0 0 20px 26px;
  color: var(--ez-ink-tertiary);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.25;
}

/* O último item não continua para lugar nenhum: trilho e respiro param nele. */
.rule__item:last-child {
  padding-bottom: 0;
}

.rule__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ez-separator-strong);
}

.rule__item::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 13px;
  bottom: 0;
  width: 2px;
  background: var(--ez-separator-strong);
}

.rule__item:last-child::after {
  display: none;
}

.rule__item.is-done {
  color: var(--ez-ink);
}

.rule__item.is-done::before,
.rule__item.is-done::after {
  background: var(--ez-faixa-verde);
}

.rule__item.is-current {
  color: var(--ez-ink);
  font-weight: 700;
}

.rule__item.is-current::before {
  background: var(--ez-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ez-blue) 22%, transparent);
}

/* ========== Acompanhamento da proposta ========== */

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
  color: var(--ez-ink-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.voltar:hover {
  color: var(--ez-forest);
}

/* O número é a identidade da proposta — é por ele que se fala com o suporte e com o
   cliente. Por isso ele ocupa o hero da marca, e não uma linha qualquer de card. */
.proposta-hero {
  display: grid;
  gap: 2px;
}

.proposta-hero__topo {
  margin-bottom: var(--space-2);
}

.proposta-hero__topo .proposal-hero__badge {
  margin-top: 0;
}

.proposta-hero__numero {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.proposta-hero__cliente {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: rgba(244, 255, 248, 0.92);
}

.proposta-hero__meta {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: rgba(244, 255, 248, 0.66);
}

/* Encerrada troca o verde da casa pelo vermelho: a cor é o primeiro aviso de que essa
   proposta não anda mais, antes mesmo de o motivo ser lido (§11.4). */
.proposta-hero--encerrada {
  background:
    radial-gradient(130% 80% at 100% 0%, rgba(255, 159, 10, 0.22), transparent 54%),
    linear-gradient(145deg, #4a0f0c 0%, #8f2b22 100%);
}

.proposta-hero__processando {
  /* Item de grid estica por padrão; a pílula tem que caber no próprio conteúdo. */
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: left;
}

.proposta-hero__processando:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Um ponto que pulsa diz "está acontecendo" sem precisar de frase. Quem desligou
   animação no sistema vê um ponto parado, que continua correto. */
.proposta-hero__pulso {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ez-lime);
  animation: proposta-pulso 1.6s var(--ease-out) infinite;
}

@keyframes proposta-pulso {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(168, 230, 15, 0.5);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 7px rgba(168, 230, 15, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .proposta-hero__pulso {
    animation: none;
  }
}

/* Valor e bônus são os dois números que se procura primeiro: lado a lado eles se
   comparam, empilhados viram duas frases quaisquer. */
.stat-grid--dupla {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-grid--dupla .stat {
  text-align: left;
  padding: var(--space-3);
}

.stat-grid--dupla .stat__value {
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
}

.stat--bonus .stat__value {
  color: var(--ez-leaf);
}

.acao-principal {
  display: grid;
  gap: var(--space-2);
}

.kit-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
}

.kit-lista li {
  padding-left: 16px;
  position: relative;
}

.kit-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ez-mint-strong);
}

/* ---------- Régua de etapas (§11.7) ---------- */

/* A etapa atual e as já cumpridas precisam se distinguir de relance: é a única leitura
   de progresso da tela. O trilho é desenhado por item para que cada trecho pinte na cor
   do seu próprio estado — o verde para exatamente onde o progresso parou. */
.rule {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rule__item {
  position: relative;
  padding: 0 0 var(--space-4) 32px;
}

.rule__item:last-child {
  padding-bottom: 0;
}

.rule__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ez-surface-solid);
  border: 2px solid var(--ez-separator-strong);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: #ffffff;
}

.rule__item::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--ez-separator-strong);
}

.rule__item:last-child::after {
  display: none;
}

.rule__nome {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ez-ink-tertiary);
  line-height: 1.3;
}

/* Cumprida: o "✓" no ponto conta o progresso sem exigir que se compare cor com cor. */
.rule__item.is-done::before {
  content: "✓";
  background: var(--ez-faixa-verde);
  border-color: var(--ez-faixa-verde);
}

.rule__item.is-done::after {
  background: var(--ez-faixa-verde);
}

.rule__item.is-done .rule__nome {
  color: var(--ez-ink-secondary);
}

.rule__item.is-current::before {
  background: var(--ez-leaf);
  border-color: var(--ez-surface-solid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ez-leaf) 26%, transparent);
}

.rule__item.is-current .rule__nome {
  color: var(--ez-ink);
  font-weight: var(--weight-bold);
}

.rule__agora {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--ez-mint);
  color: var(--ez-forest);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Ações dentro da etapa (§12/§13) ---------- */

/* Elas ficam recuadas sob o nome da etapa para que a leitura continue sendo "a proposta
   está aqui, e aqui é o que dá para fazer". O painel claro separa a área de decisão do
   resto da régua sem soltá-la da etapa a que pertence. */
.acao {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ez-surface-secondary);
  border: 1px solid var(--ez-separator);
}

.acao .btn {
  width: 100%;
  font-weight: var(--weight-semibold);
}

.acao__info {
  margin: 0;
  color: var(--ez-ink-secondary);
  font-size: var(--text-sm);
}

.acao__titulo {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ez-ink-tertiary);
}

.acao__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.acao__linha > * {
  flex: 1 1 130px;
}

/* Painel no lugar do modal do GO: no celular, empilhar uma janela sobre a régua tira da
   vista justamente a proposta que se está aceitando. */
.acao__painel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ez-surface-solid);
  border: 1px solid var(--ez-separator-strong);
  box-shadow: var(--shadow-card);
  animation: acao-abre var(--dur) var(--ease-out);
}

@keyframes acao-abre {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.acao__pendencias {
  display: grid;
  gap: var(--space-2);
}

.acao__pendencias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.pendencia {
  display: grid;
  gap: 6px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ez-surface-solid);
  border: 1px solid var(--ez-separator);
  font-size: var(--text-sm);
}

.pendencia__obrigatoria {
  color: var(--ez-faixa-vermelho);
}

.acao--cancelar {
  margin-top: var(--space-5);
  background: transparent;
  border: 0;
  padding: 0;
}

/* ========== Marca de "a implementar" ========== */

/* Deliberadamente discreta e deliberadamente visível: quem usa o app entende que o
   campo ainda não tem dado, e quem constrói não perde de vista o que falta. O tracejado
   é o que a diferencia de um selo de status de verdade — ela não afirma nada sobre o
   negócio, afirma sobre a tela. */
.pendente {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--ez-ink-tertiary);
  background: transparent;
  color: var(--ez-ink-tertiary);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* Dentro da faixa colorida o cinza sumiria no gradiente. */
.faixa-card .pendente {
  border-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.85);
}

.pendencias-tela {
  border: 1px dashed var(--ez-separator-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: transparent;
}

.pendencias-tela > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ez-ink-secondary);
}

.pendencias-tela > ul {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
  display: grid;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
}

.pendencias-tela b {
  color: var(--ez-ink);
}

/* O "+45" do atalho de prazo é o motivo de a linha existir: quem abre esta lista quer
   saber quanto prazo cada venda credita, e o número é a resposta. */
.list-row__icon--prazo {
  background: var(--ez-mint);
  color: var(--ez-forest);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: -0.02em;
}

/* ========== Baterias ==========
   Fonte: GET /accounts/battery.

   Duas baterias com o mesmo desenho e a mesma cor: são a mesma coisa em dois
   momentos (a que está em uso e a que está enchendo), e pintar uma de vermelho
   sugeriria alerta onde há só o passar do tempo. Rótulo e energia em cima, a
   pilha grande no meio com o percentual escrito dentro da carga, prazo embaixo. */

/* O medidor imita o desenho de uma pilha: corpo arredondado + terminal à direita. */
.battery-gauge {
  display: flex;
  align-items: stretch;
  height: 72px;
}

.battery-gauge__shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--radius-lg);
  border: 2px solid var(--ez-separator-strong);
  background: var(--ez-surface-secondary);
  overflow: hidden;
}

/* A carga enche a pilha da esquerda para a direita: é o que responde "quanto
   ainda tenho?" de relance, antes de alguém ler o número. */
.battery-gauge__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ez-leaf), var(--ez-lime));
  transition: width var(--dur) var(--ease-out);
}

/* O número mora dentro da carga, como no desenho. `left` vem do template: em 0
   ele fica no começo da pilha; numa carga curta demais para caber, ele começa
   onde a carga termina (ver CARGA_MINIMA_PARA_NUMERO_DENTRO em pages/home.js). */
.battery-gauge__pct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 var(--space-4);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #000;
  transition: left var(--dur) var(--ease-out);
}

/* Fora da carga o fundo é o trilho claro: preto continua legível ali também. */
.battery-gauge__pct--fora {
  padding-left: var(--space-3);
  color: #000;
}

.battery-gauge__nub {
  flex: 0 0 7px;
  margin: 22px 0 22px 3px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--ez-separator-strong);
}

@media (prefers-reduced-motion: reduce) {
  .battery-gauge__fill,
  .battery-gauge__pct {
    transition: none;
  }
}

/* Cada seção do card (bateria em uso, próxima bateria) abre o detalhe do ciclo —
   mesmo tratamento de toque/foco do `.home-wallet-card`, só sem o fundo de cartão
   próprio porque aqui é uma seção dentro do `.battery-card`, não um cartão novo. */
.battery-card__section {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-md);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.battery-card__section:active {
  transform: scale(0.98);
}

.battery-card__section:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-leaf) 28%, transparent);
}

/* Rótulo à esquerda, energia à direita — a leitura que o desenho põe em cima. */
.battery-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.battery-card__energia {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: right;
}

/* Prazo embaixo. Vira coluna quando as duas leituras não cabem lado a lado —
   encolher a fonte para caber deixaria a data ilegível. */
.battery-card__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ez-ink-secondary);
}

/* Segunda bateria dentro do mesmo card: sem pilha grande nem percentual escrito
   dentro, só uma barra fina — a mesma leitura que `.node-bateria` já usa no
   cartão da rede (ver linha 2256), para quem não é a bateria em uso agora. */
.battery-card__head--secundaria {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ez-separator);
}

/* `padding`, não `margin`: a bolinha vaza 12px abaixo do trilho, e um `margin-bottom`
   aqui colapsaria com o `margin-top` do rodapé em vez de somar — a bolinha ficaria
   grudada no texto mesmo com espaçamento "configurado". Padding garante o respiro. */
.battery-mini {
  margin-top: 16px;
  display: block;
  padding-bottom: var(--space-4);
}

.battery-mini__shell {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--ez-surface-secondary);
  /* Visível de propósito: a bolinha (40px) é maior que a barra (16px) e deve
     vazar para cima e para baixo, como a alça de um slider. */
  overflow: visible;
}

.battery-mini__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ez-leaf), var(--ez-lime));
  transition: width var(--dur) var(--ease-out);
}

/* O anel usa a mesma cor opaca do trilho (`--ez-surface-secondary`), não branco
   fixo: é o que faz a bolinha ler como "recortada" do trilho em vez de um adesivo
   translúcido por cima — e continua coerente quando o tema muda. */
.battery-mini__dot {
  position: absolute;
  top: 50%;
  /* Clamp evita a bolinha (40px) vazar pra fora do card nos extremos: seu
     centro nunca fica a menos de metade do próprio raio da borda do trilho. */
  left: clamp(20px, calc(var(--pct, 0) * 1%), calc(100% - 20px));
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ez-leaf);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--ez-surface-secondary), 0 3px 8px rgba(6, 40, 29, 0.35);
  transition: left var(--dur) var(--ease-out);
}

.battery-mini__dot-pct {
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  color: var(--ez-ink-on-brand);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .battery-mini__dot {
    transition: none;
  }
}

/* --- "Precisa de você agora" ---
   Um item por proposta parada, concentração de pipeline ou risco de rede —
   separados por linha, sem o próprio card cada um (já estão dentro de um). */
.attention-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.attention-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.attention-meta span {
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--ez-mint);
  color: var(--ez-forest-deep);
  font-size: var(--text-sm);
  line-height: 1.2;
}

.attention-meta strong {
  color: var(--ez-ink);
  font-weight: var(--weight-semibold);
}

.attention-item {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ez-separator);
}

.attention-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* --- Recarga ---
   Dois meios de pagamento para uma recarga só: dividem a linha em partes iguais
   em vez de cada botão encolher conforme o tamanho do próprio rótulo. */
.battery-recharge .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ========================================================================
   Desktop / web — a partir de 900px o app deixa de ser coluna de celular
   ------------------------------------------------------------------------
   A tabbar vira sidebar com todas as telas (js/ui/shell.js troca a marcação
   pelo mesmo breakpoint via matchMedia, componente em js/ui/sidebar.js), o header
   atravessa o topo e o conteúdo ganha um teto de largura para não virar linha de 2000px.

   Este bloco fica no fim do arquivo de propósito: media query não soma
   especificidade, então precisa vir depois de `.app-main`, `.tabbar` e das
   grades para vencê-las. Não vale sob `.is-framed` — lá a proposta é
   justamente parecer um celular.
   ======================================================================== */
@media (min-width: 900px) {
  html:not(.is-framed) .device-screen {
    background: var(--ez-bg);
  }

  html:not(.is-framed) #app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "nav header"
      "nav main";
  }

  /* No login o header e a tabbar são `display: none`; mantida a grade, sobraria
     uma coluna vazia de 248px ao lado do formulário. Volta a ser coluna. */
  html:not(.is-framed) #app.is-login {
    display: flex;
    flex-direction: column;
  }


  html:not(.is-framed) .app-header {
    grid-area: header;
    position: static;
    height: auto;
    min-height: var(--header-h);
    padding: var(--space-3) max(var(--space-6), calc((100% - var(--content-max)) / 2));
    background: var(--ez-surface-solid);
  }

  html:not(.is-framed) .app-header__title {
    font-size: var(--text-lg);
  }

  /* ---------- tabbar → sidebar ---------- */
  html:not(.is-framed) .tabbar {
    grid-area: nav;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-3) var(--space-3) var(--space-6);
    border-top: 0;
    border-right: 1px solid var(--ez-separator);
    box-shadow: none;
    background: var(--ez-surface-solid);
  }

  html:not(.is-framed) .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-2);
    min-height: calc(var(--header-h) - var(--space-2));
  }

  html:not(.is-framed) .sidebar-brand__name {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: var(--ez-forest-deep);
  }

  html:not(.is-framed) .tabbar__group {
    padding: var(--space-4) var(--space-3) var(--space-1);
  }

  html:not(.is-framed) .tabbar__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 42px;
    width: 18rem;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: 1.2;
  }

  html:not(.is-framed) .hide-more {
    display: none;
  }

  html:not(.is-framed) .tabbar__item svg {
    width: 25px;
    height: 25px;
  }

  html:not(.is-framed) .tabbar__item:hover {
    background: var(--ez-surface-secondary);
    color: var(--ez-forest);
  }

  html:not(.is-framed) .tabbar__item.is-active {
    background: color-mix(in srgb, var(--ez-lime) 18%, transparent);
  }

  html:not(.is-framed) .tabbar__item--create {
    display: none;
  }

  /* "Criar proposta": item comum da sidebar; o + do Font Awesome é cheio, então entra
     um pouco menor que os ícones de traço para pesar igual na lista. */
  html:not(.is-framed) .sidebar-create svg {
    width: 19px;
    height: 19px;
  }

  /* ---------- conteúdo ---------- */
  html:not(.is-framed) .app-main {
    grid-area: main;
    padding: var(--space-6);
    padding-bottom: var(--space-10);
  }

  html:not(.is-framed) .app-main > .screen {
    max-width: var(--content-max);
    margin-inline: auto;
  }

  html:not(.is-framed) .h1 {
    font-size: var(--text-3xl);
  }

  /* Com o dobro de largura, as grades ganham colunas em vez de esticar cartão. */
  html:not(.is-framed) .grid-2,
  html:not(.is-framed) .stat-grid {
    gap: var(--space-4);
  }

  /* Os cartões de totais numa linha só, no espírito da grade de "Atalhos":
     `auto-fit` reparte a linha igualmente entre quantos cartões houver. */
  html:not(.is-framed) .stats-row {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
  }

  /* No desktop o `auto-fit` já reparte a linha sozinho — o span de mobile
     esticaria o cartão isolado por cima de colunas extras que o auto-fit abriu. */
  html:not(.is-framed) .stats-row > .card:only-child {
    grid-column: auto;
  }

  /* Listas de atalho (não de registro/histórico) viram grade de cartões.
     Home marca com `.list--tiles` só "Creditar prazo" e "Atalhos"; extrato,
     carteira e rede seguem de coluna única — são registros, não menu, e ler
     em grade embaralha a ordem que ali importa. */
  html:not(.is-framed) .list--tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html:not(.is-framed) .list--tiles .list-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    border: 1px solid var(--ez-separator);
    border-radius: var(--radius-lg);
    background: var(--ez-surface);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }

  html:not(.is-framed) .list--tiles .list-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
  }

  html:not(.is-framed) .list--tiles .list-row__sub {
    white-space: normal;
  }

  html:not(.is-framed) .list--tiles .list-row__chev {
    display: none;
  }

  html:not(.is-framed) .products-summary-carousel {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  html:not(.is-framed) .products-summary-carousel--single {
    display: block;
  }

  html:not(.is-framed) .products-summary-tabs {
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Rodapé da tela "Mais": convite e "sair" dividem uma linha só. Com o convite
     escondido (já instalado, ou navegador sem prompt) o `margin-left: auto` do
     botão evita que ele se estique pela coluna inteira. */
  html:not(.is-framed) .menu-footer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }

  /* Abaixo de ~420px de sobra o convite volta a ocupar a linha inteira e o botão
     desce para a linha de baixo, encostado à direita. */
  html:not(.is-framed) .menu-footer .install-hint {
    flex: 1 1 420px;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }

  html:not(.is-framed) .menu-footer .install-hint p {
    flex: 1 1 auto;
  }

  html:not(.is-framed) .install-hint .btn {
    width: auto;
    flex: 0 0 auto;
  }

  html:not(.is-framed) .menu-footer__sair {
    width: auto;
    min-width: 180px;
    margin-left: auto;
  }

  /* Login: cartão centrado sobre o gradiente, não formulário de 1600px. */
  html:not(.is-framed) .login-screen__content {
    max-width: 460px;
    margin-inline: auto;
  }

  html:not(.is-framed) .cadastro-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(620px, 760px);
    overflow: hidden;
    background: var(--ez-login-bg);
  }

  html:not(.is-framed) .cadastro-hero {
    display: block;
    position: relative;
    min-height: 100%;
    opacity: 1;
  }

  html:not(.is-framed) .cadastro-hero__shade {
    background:
      linear-gradient(90deg, rgba(3, 20, 14, 0.12), rgba(3, 20, 14, 0.78)),
      linear-gradient(180deg, transparent 45%, rgba(3, 20, 14, 0.88));
  }

  html:not(.is-framed) .cadastro-panel {
    min-height: 100%;
    margin-top: 0;
    padding: clamp(24px, 3vh, 42px) clamp(48px, 5vw, 76px);
    overflow: hidden;
    background:
      radial-gradient(ellipse 70% 45% at 100% 0%, rgba(168, 230, 15, 0.16), transparent 58%),
      linear-gradient(180deg, rgba(4, 26, 18, 0.96), rgba(3, 20, 14, 0.98));
  }

  html:not(.is-framed) .cadastro-card {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-5);
    max-width: 640px;
  }

  html:not(.is-framed) .cadastro-brand {
    justify-content: flex-start;
    margin-bottom: var(--space-3);
  }

  html:not(.is-framed) .cadastro-title {
    text-align: left;
    margin-bottom: var(--space-3);
  }

  html:not(.is-framed) .cadastro-title h1 {
    font-size: clamp(36px, 4vw, 48px);
  }

  html:not(.is-framed) .cadastro-title p:not(.eyebrow) {
    margin-top: var(--space-2);
    margin-inline: 0;
  }

  html:not(.is-framed) .cadastro-field:first-child,
  html:not(.is-framed) .cadastro-field:nth-child(2),
  html:not(.is-framed) .cadastro-card:not(:has(.cadastro-field--locked)) .cadastro-field:first-child,
  html:not(.is-framed) .cadastro-error,
  html:not(.is-framed) .cadastro-submit,
  html:not(.is-framed) .cadastro-safe {
    grid-column: 1 / -1;
  }

  html:not(.is-framed) .cadastro-safe {
    display: none;
  }
}

/* A faixa de instalação no desktop: canto inferior direito da área de conteúdo,
   já que ali não há tabbar embaixo para desviar. */
@media (min-width: 900px) {
  html:not(.is-framed) .install-bar {
    left: auto;
    right: var(--space-6);
    bottom: var(--space-6);
    max-width: 420px;
  }
}

/* Entre o celular e o breakpoint desktop a coluna única esticaria até 900px de
   largura — linha longa demais para ler. O layout continua o mesmo; só ganha teto. */
@media (min-width: 620px) and (max-width: 899.98px) {
  html:not(.is-framed) .app-main > .screen {
    max-width: 640px;
    margin-inline: auto;
  }
}

/* O popup de eventos com a largura pensada pro celular (360px) sobra pequeno demais
   no meio de uma tela de desktop — perdido no vazio ao redor. Cresce o cartão junto. */
@media (min-width: 900px) {
  html:not(.is-framed) .event-popup__card {
    max-width: 480px;
  }

  html:not(.is-framed) .event-popup__titulo {
    font-size: var(--text-xl);
  }

  html:not(.is-framed) .event-popup__close {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }
}

/* Carteira: card verde com saldo disponível */
.card--primary {
  background: var(--ez-leaf);
  color: var(--ez-ink-on-brand);
}

.card--primary .eyebrow {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

.card--primary .money-lg {
  color: inherit;
  font-size: 2.5rem;
  font-weight: 700;
}

.card--primary .btn--block {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.card--primary .btn--block:hover,
.card--primary .btn--block:active {
  background: rgba(255, 255, 255, 0.3);
}

.card--ecash {
  background: linear-gradient(155deg, #f4effb 0%, var(--ez-surface) 65%);
  border-color: #e0d4f5;
}

.card--ecash .eyebrow {
  color: var(--ez-ecash);
  opacity: 0.85;
}

/* Carteira: info cards no grid */
.carteira-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.carteira-info-card {
  padding: var(--space-4);
  /* Grid item shrinks para o tamanho da coluna em vez de esticar pelo conteúdo —
     sem isso, "-R$ 4.445,00" a 2rem empurra a segunda coluna para fora da tela
     em telas estreitas (min-width padrão do grid item é auto, não 0). */
  min-width: 0;
}

.carteira-info-card__label {
  color: var(--ez-ink-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.carteira-info-card__value {
  /* Era 2rem fixo — maior que o .money-lg do saldo principal (--text-2xl) e o que
     estourava a coluna em valores como "-R$ 4.445,00". É card secundário, não
     precisa disputar destaque com o saldo. */
  font-size: var(--text-xl);
  font-weight: 700;
  overflow-wrap: break-word;
}

.carteira-info-card__sub {
  color: var(--ez-ink-tertiary);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

/* Carteira: breakdown por tipo com barras de progresso */
.breakdown-filter {
  background: none;
  border: none;
  color: var(--ez-leaf);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.breakdown-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.breakdown-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.breakdown-item__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ez-ink);
}

.breakdown-item__count {
  font-size: 0.75rem;
  color: var(--ez-ink-tertiary);
  font-weight: 500;
}

.breakdown-item__bar {
  height: 8px;
  background: var(--ez-separator);
  border-radius: 4px;
  overflow: hidden;
}

.breakdown-item__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.breakdown-item__footer {
  display: flex;
  justify-content: flex-end;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ========================================================================
   Tema escuro: camada final de cobertura
   ------------------------------------------------------------------------
   Várias telas têm identidade visual própria. Esta camada vence esses brancos
   pontuais sem mexer no HTML nem na lógica de cada página.
   ======================================================================== */
html.theme-dark .app-main,
html.theme-dark .sales-screen {
  background:
    radial-gradient(100% 70% at 50% -14%, var(--ez-dark-glow-a), transparent 58%),
    radial-gradient(80% 64% at 100% 0%, var(--ez-dark-glow-b), transparent 54%),
    var(--ez-bg);
}

html.theme-dark .device-stage,
html.theme-dark .device-screen,
html.theme-dark #app {
  background:
    radial-gradient(110% 76% at 50% -16%, var(--ez-dark-glow-a), transparent 58%),
    radial-gradient(80% 64% at 100% 0%, var(--ez-dark-glow-b), transparent 54%),
    var(--ez-bg);
}

html.theme-dark .card,
html.theme-dark .list,
html.theme-dark .stat,
html.theme-dark .rede-stat,
html.theme-dark .client-card,
html.theme-dark .proposal-card,
html.theme-dark .proposal-empty,
html.theme-dark .install-hint,
html.theme-dark .install-bar,
html.theme-dark .menu-tile,
html.theme-dark .invite-modal__card,
html.theme-dark .kit,
html.theme-dark .acao__painel,
html.theme-dark .pendencia {
  background: var(--ez-surface);
  border-color: var(--ez-glass-border);
  color: var(--ez-ink);
}

html.theme-dark .icon-btn,
html.theme-dark .segmented button.is-active,
html.theme-dark .stepper__step.is-current .stepper__dot,
html.theme-dark .suggest,
html.theme-dark .suggest__item,
html.theme-dark .produto-atual__arte,
html.theme-dark .proposal-filter-toggle,
html.theme-dark .proposal-pager__item,
html.theme-dark .proposal-pager__ellipsis,
html.theme-dark .sales-month-nav button,
html.theme-dark .sales-kpi,
html.theme-dark .sales-card {
  background: var(--ez-surface-solid);
  border-color: var(--ez-separator-strong);
  color: var(--ez-ink);
}

html.theme-dark .icon-btn:hover,
html.theme-dark .icon-btn:focus-visible,
html.theme-dark .list-row:hover,
html.theme-dark .list-row:focus-visible,
html.theme-dark .node--clickable:hover,
html.theme-dark .node--clickable:focus-visible,
html.theme-dark .suggest__item:hover,
html.theme-dark .suggest__item:focus-visible,
html.theme-dark .proposal-filter-toggle:hover,
html.theme-dark .proposal-pager__item:not(:disabled):hover,
html.theme-dark .sales-month-nav button:not(:disabled):hover {
  background: var(--ez-surface-secondary);
}

html.theme-dark .tabbar,
html.theme-dark .app-header {
  background: var(--ez-tabbar-bg);
  border-color: var(--ez-separator);
}

html.theme-dark .app-header {
  background: var(--ez-header-bg);
}

html.theme-dark .tabbar__item,
html.theme-dark .list-row,
html.theme-dark .node,
html.theme-dark .proposal-card--link,
html.theme-dark .produto-card,
html.theme-dark .voltar {
  color: inherit;
}

html.theme-dark .tabbar__item--create {
  background: var(--ez-lime);
  color: var(--ez-on-accent-dark);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ez-lime) 24%, transparent);
}

html.theme-dark .tabbar__item.is-active,
html.theme-dark .filter-chip.is-active,
html.theme-dark .pipeline-filter.is-active,
html.theme-dark .kit.is-selected,
html.theme-dark .proposal-pager__item.is-active,
html.theme-dark .proposal-pager__item.is-active:disabled {
  background: color-mix(in srgb, var(--ez-leaf) 13%, var(--ez-surface-solid));
  border-color: color-mix(in srgb, var(--ez-leaf) 28%, var(--ez-separator-strong));
  color: var(--ez-ink);
}

html.theme-dark .btn--ghost {
  color: var(--ez-forest);
  border-color: var(--ez-separator-strong);
}

html.theme-dark .btn--secondary,
html.theme-dark .apurado-tag,
html.theme-dark .pill--brl,
html.theme-dark .proposal-filter-toggle__chev,
html.theme-dark .rule__agora,
html.theme-dark .proposal-empty__icon {
  background: var(--ez-mint);
  color: var(--ez-ink);
}

html.theme-dark .btn--primary,
html.theme-dark .sales-all,
html.theme-dark .card--primary {
  background: linear-gradient(135deg, var(--ez-lime) 0%, var(--ez-lime-soft) 100%);
  color: var(--ez-on-accent-dark);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ez-lime) 14%, transparent);
}

html.theme-dark .invite-modal__whatsapp {
  background: #25a66a;
  color: white;
}

html.theme-dark .btn--lime,
html.theme-dark .cadastro-success__mark,
html.theme-dark .invite-modal__check,
html.theme-dark .stepper__step.is-done .stepper__dot,
html.theme-dark .kit.is-selected .kit__mark,
html.theme-dark .kit__selo {
  background: linear-gradient(135deg, var(--ez-lime-soft) 0%, var(--ez-lime) 100%);
  color: var(--ez-on-accent-dark);
}

html.theme-dark .card--primary .btn--block {
  background: rgba(3, 20, 14, 0.24);
  border-color: rgba(3, 20, 14, 0.2);
}

html.theme-dark .battery-card .btn--primary {
  background: var(--ez-lime);
  color: var(--ez-on-accent-dark);
}

html.theme-dark .pill--verde {
  background: var(--ez-surface-solid);
  color: var(--ez-ok-ink);
}

html.theme-dark .pill--amarelo,
html.theme-dark .pill--warn,
html.theme-dark .estimate-tag,
html.theme-dark .suggest__note {
  background: var(--ez-warning-bg);
  border-color: var(--ez-warning-border);
  color: var(--ez-warning-ink);
}

html.theme-dark .pill--vermelho {
  background: var(--ez-danger-bg);
  color: var(--ez-danger-ink);
}

html.theme-dark .pill--ecash,
html.theme-dark .card--ecash {
  background: color-mix(in srgb, var(--ez-ecash) 16%, transparent);
  border-color: color-mix(in srgb, var(--ez-ecash) 34%, transparent);
  color: var(--ez-ecash);
}

html.theme-dark .pill--muted,
html.theme-dark .lead-chip__count,
html.theme-dark .network-directs.no-directs {
  background: var(--ez-surface-secondary);
  color: var(--ez-ink-secondary);
}

html.theme-dark .products-summary-main--commercial,
html.theme-dark .proposal-filter,
html.theme-dark .proposal-filter-toggle,
html.theme-dark .product-summary-card-row {
  background: var(--ez-surface);
  border-color: var(--ez-glass-border);
}

html.theme-dark .products-summary-main__head {
  background: var(--ez-dark-grad-soft);
  color: var(--ez-ink);
}

html.theme-dark .products-summary-card-list,
html.theme-dark .subgen,
html.theme-dark .acao,
html.theme-dark .sim-result,
html.theme-dark .segmented,
html.theme-dark .progress,
html.theme-dark .node-bateria__shell,
html.theme-dark .battery-gauge__shell,
html.theme-dark .battery-mini__shell,
html.theme-dark .grad-nivel__pin,
html.theme-dark .produto-card__sigla,
html.theme-dark .list-row__arte {
  background: var(--ez-surface-secondary);
}

html.theme-dark .product-summary-card-row:hover,
html.theme-dark .product-summary-card-row:focus-visible {
  background: var(--ez-elevated-bg-hover);
}

html.theme-dark .field input,
html.theme-dark .field select,
html.theme-dark .field textarea {
  background: var(--ez-surface-solid);
  border-color: var(--ez-separator-strong);
  color: var(--ez-ink);
}

html.theme-dark .field input.is-invalid,
html.theme-dark .field select.is-invalid {
  border-color: var(--ez-red);
}

html.theme-dark .field input::placeholder,
html.theme-dark .field textarea::placeholder {
  color: var(--ez-ink-tertiary);
}

html.theme-dark .skeleton__line,
html.theme-dark .skeleton__card,
html.theme-dark .skeleton__chip {
  background: linear-gradient(
    100deg,
    var(--ez-surface-secondary) 30%,
    color-mix(in srgb, var(--ez-surface-secondary) 58%, var(--ez-ink) 8%) 50%,
    var(--ez-surface-secondary) 70%
  );
  background-size: 200% 100%;
}

html.theme-dark .notif.is-unread {
  background: color-mix(in srgb, var(--ez-lime) 10%, var(--ez-surface));
}

html.theme-dark .proposal-create-screen {
  --proposal-bg: radial-gradient(100% 70% at 50% -14%, var(--ez-dark-glow-a), transparent 58%),
    radial-gradient(80% 64% at 100% 0%, var(--ez-dark-glow-b), transparent 54%),
    var(--ez-bg);
  --proposal-surface: var(--ez-surface-solid);
  --proposal-surface-2: var(--ez-surface-secondary);
  --proposal-line: var(--ez-separator);
  --proposal-line-strong: var(--ez-separator-strong);
  --proposal-ink: var(--ez-ink);
  --proposal-muted: var(--ez-ink-secondary);
  --proposal-faint: var(--ez-ink-tertiary);
  --proposal-accent: var(--ez-lime);
  --proposal-accent-strong: var(--ez-lime-soft);
  --proposal-blue: var(--ez-info-ink);
  --proposal-shadow: var(--shadow-card);
}

html.theme-dark .proposal-create-screen > .card,
html.theme-dark .proposal-create-screen .card__section,
html.theme-dark .proposal-manual,
html.theme-dark .proposal-steps,
html.theme-dark .proposal-submit {
  background: var(--ez-surface);
  border-color: var(--ez-separator-strong);
  color: var(--ez-ink);
}

html.theme-dark .proposal-create__back,
html.theme-dark .proposal-create__icon,
html.theme-dark .proposal-create-screen .field input,
html.theme-dark .proposal-create-screen .field select,
html.theme-dark .proposal-create-screen .field textarea,
html.theme-dark .proposal-invoice,
html.theme-dark .proposal-create-screen .suggest {
  background: var(--ez-surface-solid);
  border-color: var(--ez-separator-strong);
  color: var(--ez-ink);
  box-shadow: none;
}

html.theme-dark .proposal-invoice {
  background:
    radial-gradient(85% 56% at 50% 0%, var(--ez-dark-glow-a), transparent 58%),
    var(--ez-surface-solid);
}

html.theme-dark .proposal-invoice__secondary,
html.theme-dark .proposal-manual button {
  color: var(--ez-ink);
  border-color: var(--ez-separator-strong);
}

html.theme-dark .proposal-aceite {
  background:
    radial-gradient(85% 56% at 50% 0%, rgba(230, 168, 23, 0.14), transparent 58%),
    var(--ez-surface-solid);
  border-color: var(--ez-separator-strong);
}

html.theme-dark .invite-modal__card--cadastro {
  background:
    radial-gradient(90% 52% at 100% 0%, var(--ez-dark-glow-a), transparent 62%),
    radial-gradient(70% 52% at 0% 100%, var(--ez-dark-glow-b), transparent 66%),
    var(--ez-surface-solid);
  color: var(--ez-ink);
}

html.theme-dark .invite-modal__card--cadastro .cadastro-input-wrap,
html.theme-dark .invite-modal__card--cadastro .cadastro-input-wrap:focus-within,
html.theme-dark .invite-modal__card--cadastro .cadastro-credentials > div {
  background: var(--ez-surface-secondary);
  border-color: var(--ez-separator-strong);
}

html.theme-dark .invite-modal__card--cadastro .cadastro-password-toggle.is-visible,
html.theme-dark .invite-modal__card--cadastro .cadastro-password-toggle:focus-visible,
html.theme-dark .invite-modal__card--cadastro .cadastro-field--locked .cadastro-input-wrap {
  background: color-mix(in srgb, var(--ez-lime) 12%, transparent);
}

html.theme-dark .invite-modal__card--cadastro .cadastro-error {
  background: var(--ez-danger-bg);
  border-color: var(--ez-danger-border);
  color: var(--ez-danger-ink);
}

html.theme-dark .invite-modal__cadastro {
  background: linear-gradient(135deg, var(--ez-lime-soft) 0%, var(--ez-lime) 100%);
  color: var(--ez-on-accent-dark);
  border-color: transparent;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ez-lime) 16%, transparent);
}

html.theme-dark .invite-modal__cadastro:hover,
html.theme-dark .invite-modal__cadastro:focus-visible {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ez-lime-soft) 84%, white) 0%, var(--ez-lime-soft) 100%);
}

html.theme-dark .proposal-pager__item:disabled {
  background: var(--ez-surface-secondary);
  color: var(--ez-ink-tertiary);
}

html.theme-dark .event-popup__card {
  background: var(--ez-surface-solid);
}

html.theme-dark .menu-tile__icon {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ez-lime) 12%, var(--ez-surface-secondary)), var(--ez-surface-secondary));
}

html.theme-dark .proposal-hero,
html.theme-dark .faixa-card--verde {
  background: var(--ez-dark-grad-soft);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36), inset 0 1px 0 var(--ez-dark-glow-c);
}

html.theme-dark .faixa-card--amarelo {
  background: linear-gradient(145deg, #4a3514 0%, #9a6a17 100%);
  color: #fff3d4;
}

html.theme-dark .faixa-card--vermelho,
html.theme-dark .proposta-hero--encerrada {
  background: linear-gradient(145deg, #311519 0%, #6b2a2d 100%);
}

html.theme-dark .login-screen,
html.theme-dark .cadastro-screen {
  background:
    radial-gradient(90% 58% at 82% 8%, var(--ez-dark-glow-a), transparent 58%),
    radial-gradient(74% 48% at 8% 92%, var(--ez-dark-glow-b), transparent 58%),
    linear-gradient(165deg, #070a0d 0%, #10161d 52%, #0b0f13 100%);
}

html.theme-dark .login-card,
html.theme-dark .cadastro-card {
  background: rgba(22, 27, 34, 0.78);
  border-color: var(--ez-glass-border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 var(--ez-dark-glow-c);
}

html.theme-dark .login-screen__mesh {
  background-image:
    linear-gradient(rgba(229, 238, 245, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 238, 245, 0.025) 1px, transparent 1px);
}

html.theme-dark .login-screen__glow {
  background: radial-gradient(circle, var(--ez-dark-glow-a), transparent 68%);
  opacity: 0.82;
}

html.theme-dark .cadastro-hero__shade {
  background:
    linear-gradient(180deg, rgba(7, 10, 13, 0.12), rgba(7, 10, 13, 0.58) 52%, #0b0f13 100%),
    radial-gradient(70% 70% at 80% 10%, var(--ez-dark-glow-a), transparent 62%);
}

html.theme-dark .battery-gauge__fill,
html.theme-dark .battery-mini__fill,
html.theme-dark .battery-mini__dot,
html.theme-dark .proposal-card__stripe,
html.theme-dark .sales-funnel__bar,
html.theme-dark .sales-daily__bar {
  background: linear-gradient(90deg, var(--ez-lime) 0%, var(--ez-lime-soft) 100%);
}

@media (min-width: 900px) {
  html.theme-dark:not(.is-framed) .app-header,
  html.theme-dark:not(.is-framed) .tabbar {
    background: var(--ez-surface-solid);
  }

  html.theme-dark:not(.is-framed) .list--tiles .list-row {
    background: var(--ez-surface);
    border-color: var(--ez-glass-border);
  }

  html.theme-dark:not(.is-framed) .cadastro-screen {
    background: var(--ez-login-bg);
  }
}