:root {
  --app-topbar-height: 64px;
  --app-purple-900: #2E115A;
  --app-purple-800: #421981;
  --app-purple-700: #5420A4;
  --app-purple-100: #EDE7F7;
  --app-purple-050: #F8F5FC;
  --app-neutral-000: #FFFFFF;
  --app-neutral-050: #FAFAFA;
  --app-neutral-100: #F3F3F3;
  --app-neutral-200: #E7E7E7;
  --app-neutral-600: #5F5F5F;
  --app-neutral-900: #111111;
  --app-purple: var(--app-purple-700);
  --app-purple-dark: var(--app-purple-800);
  --app-purple-soft: var(--app-purple-100);
  --app-white: var(--app-neutral-000);
  --app-ink: var(--app-neutral-900);
  --app-muted: var(--app-neutral-600);
  --app-surface: var(--app-neutral-100);
  --app-line: var(--app-neutral-200);
  --app-danger: #B42318;
  --app-success: #421981;
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-8: 32px;
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-radius-lg: 16px;
  --app-radius-pill: 999px;
  --app-shadow-overlay: 0 18px 48px rgba(17, 17, 17, 0.18);
  --app-focus: 0 0 0 3px rgba(84,32,164, 0.28);
}

html {
  background: #EEEFF3;
  overflow-x: hidden;
}

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

body {
  width: 100%;
  min-width: 0;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto !important;
  overflow-x: hidden;
  color: var(--app-ink);
  background: var(--app-white) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body :is(h1, h2, h3, h4, h5, h6, p, span, div, label, button, a, li, small, strong) {
  letter-spacing: normal !important;
}

body :is(h1, h2, h3, h4, h5, h6, p, li, label, button, a, small) {
  overflow-wrap: anywhere;
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

body > :is(main, .container, .main-container),
.container,
.main-container,
.card,
.sheet,
.m2-content,
.content,
.content-wrapper {
  min-width: 0;
  max-width: 100%;
}

body > .header,
body > header.header {
  left: 50% !important;
  right: auto !important;
  width: min(100%, 430px) !important;
  max-width: 100vw !important;
  transform: translateX(-50%);
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  max-height: var(--app-topbar-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  animation: none !important;
}

body > header:not(.header):not(.doc-head) {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 430px !important;
  transform: none !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  max-height: var(--app-topbar-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

body > header.header:has(> img.logo) {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  transform: none !important;
}

body:has(> .header),
body:has(> header.header) {
  padding-top: var(--app-topbar-height) !important;
}

body > header:not(.header):not(.doc-head) > div {
  width: 100%;
  height: var(--app-topbar-height) !important;
  min-height: 0 !important;
  max-height: var(--app-topbar-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body > header:not(.header):not(.doc-head) .h-20 {
  height: 100% !important;
  min-height: 0 !important;
  max-height: var(--app-topbar-height) !important;
}

body > :is(.header, header.header, header:not(.doc-head)) :is(
  .app-back,
  .app-nav-title,
  .app-nav-step,
  .meapp-icon,
  .header-right,
  .user-name,
  .user-cpf,
  .user-icon-wrapper,
  svg
) {
  color: var(--app-white) !important;
  stroke: currentColor;
}

body > :is(.header, header.header, header:not(.doc-head)) .user-icon-wrapper {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
}

body > :is(.header, header.header, header:not(.doc-head)) .meapp-icon {
  display: none !important;
}

body[data-app-screen] > header.header:not([data-nav="flow"]) .header-right,
body[data-app-screen="home"] > header.header .app-top-icons {
  display: none !important;
}

body > :is(.header, header.header, header:not(.doc-head)) .header-left:has(.meapp-icon) {
  gap: 0 !important;
}

.header-inner,
.header-content {
  width: 100% !important;
  min-width: 0;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding-inline: clamp(12px, 4vw, 20px) !important;
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  max-height: var(--app-topbar-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

header[data-nav="flow"] .header-content,
header[data-nav="flow"]:not(:has(.header-content)) {
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  max-height: var(--app-topbar-height) !important;
  grid-template-rows: var(--app-topbar-height) !important;
}

.header-left,
.header-right,
.header-left > *,
.header-right > * {
  min-width: 0;
}

.user-name,
.user-cpf {
  line-height: 1.15 !important;
}

.header-logo {
  width: clamp(118px, 38vw, 148px) !important;
  height: auto !important;
  max-width: 148px !important;
  max-height: 28px !important;
  object-fit: contain;
  object-position: left center;
}

:is(.page-title, .section-title, .step-title, .info-title, .vf-title, .loading-text) {
  color: var(--app-ink) !important;
}

:is(
  .page-sub,
  .page-subtitle,
  .page-desc,
  .section-subtitle,
  .step-desc,
  .field-hint,
  .final-note,
  .vf-sub,
  .vf-secure,
  .vf-redirect,
  .m2-loading-text,
  .author-location,
  .slider-labels,
  .slider-labels span,
  .cost-label,
  .seguro-subtitle,
  .footer-badges span
) {
  color: var(--app-muted) !important;
  opacity: 1 !important;
}

footer,
.site-footer {
  color: var(--app-muted) !important;
  background: var(--app-white) !important;
}

:is(footer, .site-footer) :is(small, span, p, strong, a, svg) {
  color: var(--app-muted) !important;
  opacity: 1 !important;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
}

:is(
  .btn-cta,
  .btn-submit,
  .btn-primary,
  .final-button,
  .modal-btn,
  .button,
  .btn-next,
  .finish-btn,
  .slider-confirm-btn,
  .m2-btn-copy,
  .sound-btn
) {
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  border-color: var(--app-purple) !important;
}

:is(
  .btn-cta,
  .btn-submit,
  .btn-primary,
  .final-button,
  .modal-btn,
  .button,
  .btn-next,
  .finish-btn,
  .slider-confirm-btn,
  .m2-btn-copy,
  .sound-btn
) :is(span, strong, svg) {
  color: var(--app-white) !important;
  stroke: currentColor;
}

:is(.progress-fill, .progress-bar-fill, .slider-progress, .loading-bar > span) {
  background: var(--app-purple) !important;
  background-image: none !important;
}

.btn-back {
  color: var(--app-ink) !important;
  background: var(--app-surface) !important;
  border-color: var(--app-line) !important;
}

.trust-bar,
.time-badge,
.info-card,
.summary-card,
.security-badge {
  color: var(--app-ink) !important;
}

:is(.trust-bar, .time-badge, .info-card, .summary-card, .security-badge) :is(p, span, strong) {
  color: var(--app-ink) !important;
}

.info-highlight,
.highlight,
.hl {
  color: var(--app-purple) !important;
  -webkit-text-fill-color: var(--app-purple) !important;
}

.pre-badge,
.secure-pill,
.approved-card {
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  border-color: var(--app-purple) !important;
}

:is(.pre-badge, .secure-pill, .approved-card) :is(span, div, p, strong, svg) {
  color: var(--app-white) !important;
  -webkit-text-fill-color: var(--app-white) !important;
  stroke: currentColor;
}

.required,
.alert-danger strong {
  color: var(--app-danger) !important;
}

.alert-danger {
  color: #6B1710 !important;
}

.alert-danger :is(span, p, strong) {
  color: #6B1710 !important;
}

.m2-error {
  color: #6B1710 !important;
}

.text-\[\#421981\],
.text-\[\#5420A4\],
#valor-aprovado {
  color: var(--app-success) !important;
}

.bg-\[\#EDE7F7\] {
  background: #E6F4EA !important;
}

.timeline-text small,
.pix-subtitle,
.security-badge {
  color: var(--app-muted) !important;
}

@keyframes appLoaderSpin {
  to { transform: rotate(360deg); }
}

:is(
  .spinner,
  .mini-spinner,
  .loading-spinner,
  .m2-spinner,
  .vf-spinner,
  .vf-mini-spinner,
  .vf-face-ring
) {
  animation-name: appLoaderSpin !important;
  animation-duration: 800ms !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}

.loading-spinner {
  border-color: var(--app-purple-soft) !important;
  border-top-color: var(--app-purple) !important;
}

:is(.spinner, .mini-spinner, .m2-spinner, .vf-spinner, .vf-mini-spinner, .vf-face-ring) {
  border-top-color: var(--app-purple) !important;
}

.m2-loading-text {
  font-size: 14px !important;
}

body.chat-page {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh;
  overflow: hidden !important;
}

body.chat-page .main-content {
  width: 100%;
  min-height: 0;
  height: calc(100dvh - var(--app-topbar-height));
  padding: 12px !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
}

body.chat-page :is(.chat-container, .loading-container) {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
}

body.chat-page .chat-header {
  width: 100%;
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  max-height: var(--app-topbar-height) !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}

body.chat-page .chat-header-back {
  width: 32px;
  min-width: 32px;
  height: 32px;
}

body.chat-page .attendant-avatar {
  width: 40px !important;
  min-width: 40px;
  height: 40px !important;
}

body.chat-page .attendant-info {
  min-width: 0;
}

body.chat-page .attendant-info h3 {
  overflow: hidden;
  font-size: clamp(14px, 3.75vw, 16px) !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.chat-page .attendant-info p {
  font-size: 12px !important;
  line-height: 1.2;
}

body.chat-page .chat-messages {
  min-height: 0;
  padding: clamp(10px, 3.25vw, 14px) !important;
}

body.chat-page .message {
  max-width: 92% !important;
}

body.chat-page .message-text {
  font-size: clamp(14px, 3.65vw, 15px) !important;
}

body.chat-page .options-container {
  width: 100%;
  padding-inline: 0 !important;
}

body.chat-page .option-button {
  min-height: 48px;
  padding: 12px 14px !important;
  font-size: clamp(14px, 3.7vw, 15px) !important;
  line-height: 1.25;
}

#successFeedback {
  color: var(--app-purple) !important;
  background: var(--app-white) !important;
  border: 1px solid var(--app-purple) !important;
}

#successFeedback .success-feedback-inner {
  color: var(--app-purple) !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .spinner,
    .mini-spinner,
    .loading-spinner,
    .m2-spinner,
    .vf-spinner,
    .vf-mini-spinner,
    .vf-face-ring
  ) {
    animation-duration: 1400ms !important;
    animation-iteration-count: infinite !important;
  }
}

.app-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#deviceAuthorization[hidden] {
  display: none !important;
}

body.identity-cpf-active > header.header {
  color: var(--app-ink) !important;
  background: var(--app-white) !important;
}

body.identity-cpf-active > header.header .header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-inline: 24px !important;
}

body.identity-cpf-active > header.header :is(.app-nav-title, .app-nav-step, .header-logo, .header-right) {
  display: none !important;
}

body.identity-cpf-active > header.header .header-left {
  display: flex !important;
  flex: 0 0 auto !important;
}

body.identity-cpf-active > header.header .app-back {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  margin-left: -12px !important;
  color: var(--app-muted) !important;
  background: transparent !important;
}

body.identity-cpf-active > header.header .app-back svg {
  width: 28px !important;
  height: 28px !important;
  color: var(--app-muted) !important;
  fill: currentColor !important;
  stroke: none !important;
}

body:is(.identity-cpf-active, .identity-device-active) :is(.step-indicators, .card-divider, .progress-bar) {
  display: none !important;
}

body.identity-cpf-active > .container {
  width: 100% !important;
  min-height: calc(100dvh - var(--app-topbar-height)) !important;
  margin: 0 !important;
  padding: 2px 24px 24px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

body.identity-cpf-active > .container > .card {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  animation: none !important;
}

body.identity-cpf-active #step1 .step-header {
  display: block !important;
  margin: 0 !important;
}

body.identity-cpf-active #step1 .step-header h1 {
  max-width: 350px !important;
  margin: 0 !important;
  color: var(--app-ink) !important;
  font-size: clamp(29px, 8.2vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  overflow-wrap: normal !important;
}

body.identity-cpf-active #step1 > .step-subtitle {
  max-width: 350px !important;
  margin: 30px 0 0 !important;
  color: var(--app-muted) !important;
  font-size: clamp(17px, 5vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.38 !important;
}

body.identity-cpf-active #step1Form {
  margin-top: 42px !important;
}

body.identity-cpf-active #step1Form .form-group {
  position: static !important;
  margin: 0 !important;
}

body.identity-cpf-active #cpf {
  width: 100% !important;
  min-height: 62px !important;
  padding: 6px 0 12px !important;
  border: 0 !important;
  border-bottom: 2px solid var(--app-line) !important;
  border-radius: 0 !important;
  color: var(--app-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  caret-color: var(--app-purple) !important;
  font-size: clamp(27px, 8vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

body.identity-cpf-active #cpf::placeholder {
  color: #B7B7B7 !important;
  opacity: 1 !important;
}

body.identity-cpf-active #cpf:focus {
  border-bottom-color: var(--app-purple) !important;
}

body.identity-cpf-active #step1 .trust-bar {
  display: none !important;
}

body.identity-cpf-active #submitBtn1 {
  position: fixed !important;
  right: max(24px, calc((100vw - 430px) / 2 + 24px)) !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px)) !important;
  z-index: 20 !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  box-shadow: none !important;
}

body.identity-cpf-active #submitBtn1:disabled {
  color: #A8A8A8 !important;
  background: #F1F1F1 !important;
  opacity: 1 !important;
}

body.identity-cpf-active #submitBtn1.loading {
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
}

body.identity-cpf-active #submitBtn1::after {
  display: none !important;
}

body.identity-cpf-active #submitBtn1 .app-next-icon {
  display: block;
  width: 32px;
  height: 32px;
  color: inherit !important;
}

body.identity-cpf-active #submitBtn1 .spinner {
  width: 22px !important;
  height: 22px !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  border-top-color: var(--app-white) !important;
}

body.identity-cpf-active #submitBtn1:focus-visible,
body.identity-device-active #authorizeDeviceBtn:focus-visible {
  outline: 3px solid rgba(84,32,164, 0.35) !important;
  outline-offset: 3px !important;
}

body.identity-device-active {
  padding-top: 0 !important;
}

body.identity-device-active > header.header {
  display: none !important;
}

body.identity-device-active > .container {
  width: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

body.identity-device-active > .container > .card {
  width: 100% !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  animation: none !important;
}

.device-authorization {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(92px, 15dvh, 126px) 24px max(34px, calc(env(safe-area-inset-bottom) + 24px));
  color: var(--app-ink);
  background: var(--app-white);
}

.app-device-graphic {
  display: grid;
  grid-template-columns: repeat(4, 30px);
  gap: 5px;
  align-self: flex-start;
  padding: 7px;
  border-radius: 5px;
  background: linear-gradient(90deg, #B68BEA, var(--app-purple));
}

.app-device-graphic span {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.72);
}

.app-device-graphic span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--app-purple);
  transform: translate(-50%, -50%);
}

.device-authorization-copy {
  margin-top: clamp(66px, 10dvh, 86px);
}

.device-authorization h1 {
  max-width: 360px;
  margin: 0;
  color: var(--app-ink) !important;
  font-size: clamp(29px, 8.2vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  overflow-wrap: normal !important;
}

.device-authorization p {
  max-width: 360px;
  margin: 20px 0 0;
  color: var(--app-muted) !important;
  font-size: clamp(17px, 4.8vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
}

.device-authorization #authorizeDeviceBtn {
  width: 100% !important;
  min-height: 58px !important;
  margin-top: auto !important;
  padding: 16px 24px !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  box-shadow: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

@media (max-width: 340px) {
  body.identity-cpf-active > .container,
  .device-authorization {
    padding-inline: 20px !important;
  }

  body.identity-cpf-active #step1 .step-header h1,
  .device-authorization h1 {
    font-size: 28px !important;
  }
}

@media (max-height: 640px) {
  .device-authorization {
    padding-top: 64px;
    padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px));
  }

  .device-authorization-copy {
    margin-top: 44px;
  }

  .device-authorization p {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 430px) {
  body > :is(main, .main-container) {
    width: 100%;
    padding-inline: clamp(12px, 4vw, 20px) !important;
  }

  body > :is(main, .main-container) > .container {
    width: 100%;
    padding-inline: 0 !important;
  }

  :is(.card, .sheet, .m2-content, .loading-content, .modal-card) {
    max-width: 100%;
  }

  :is(button, .button, .btn-cta, .btn-submit, .btn-primary, .final-button) {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 359px) {
  .header-inner,
  .header-content {
    gap: 8px !important;
    padding-inline: 10px !important;
  }

  .header-logo {
    height: 26px !important;
    max-width: 54px !important;
  }

  .header-right .user-info {
    display: none !important;
  }

  .user-icon-wrapper,
  .meapp-icon,
  .app-back {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .quick-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px !important;
    overflow: visible !important;
  }

  .qa {
    width: 100%;
    min-width: 0;
    flex: initial !important;
    font-size: 11px !important;
  }

  .qa-ic {
    width: 52px !important;
    height: 52px !important;
  }

  .footer-badges {
    gap: 8px 12px !important;
  }

  body.chat-page .message {
    max-width: 96% !important;
  }

  body.chat-page .message-avatar,
  body.chat-page .user-avatar {
    width: 32px;
    height: 32px;
  }
}

body[data-app-screen] {
  --app-screen-gutter: clamp(18px, 5.6vw, 24px);
  --app-control-height: 52px;
  color: var(--app-ink) !important;
  background: var(--app-white) !important;
}

body[data-app-screen] :is(h1, h2, h3, h4) {
  color: var(--app-ink) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
}

body[data-app-screen] :is(p, li, dt, dd, label, input, button, a) {
  line-height: 1.4;
}

body[data-app-screen] :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(84,32,164, 0.42) !important;
  outline-offset: 3px !important;
}

body[data-app-screen] :is(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

body[data-app-screen] :is(
  .btn-cta,
  .btn-submit,
  .btn-primary,
  .btn.primary,
  .final-button,
  .modal-btn,
  .button,
  .btn-next,
  .finish-btn,
  .slider-confirm-btn,
  .m2-btn-copy,
  .m2-go-btn,
  .btn-custom,
  .btn-cred
) {
  min-height: var(--app-control-height) !important;
  padding: 14px 22px !important;
  border: 0 !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  transition: background-color 160ms ease, transform 160ms ease !important;
}

body[data-app-screen] :is(
  .btn-cta,
  .btn-submit,
  .btn-primary,
  .btn.primary,
  .final-button,
  .modal-btn,
  .button,
  .btn-next,
  .finish-btn,
  .slider-confirm-btn,
  .m2-btn-copy,
  .m2-go-btn,
  .btn-custom,
  .btn-cred
):hover {
  background: var(--app-purple-dark) !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-app-screen] :is(
  .btn-cta,
  .btn-submit,
  .btn-primary,
  .btn.primary,
  .final-button,
  .modal-btn,
  .button,
  .btn-next,
  .finish-btn,
  .slider-confirm-btn,
  .m2-btn-copy,
  .m2-go-btn,
  .btn-custom,
  .btn-cred
):active {
  transform: scale(0.98) !important;
}

body[data-app-screen] :is(button, .button):disabled {
  cursor: not-allowed !important;
  opacity: 0.52 !important;
}

body[data-app-screen] :is(
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="search"],
  select,
  textarea
) {
  min-height: 52px !important;
  padding: 14px 16px !important;
  border: 1px solid transparent !important;
  border-radius: var(--app-radius-md) !important;
  color: var(--app-ink) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body[data-app-screen] :is(input, select, textarea)::placeholder {
  color: #737373 !important;
  opacity: 1 !important;
}

body[data-app-screen] :is(input, select, textarea):focus {
  border-color: var(--app-purple) !important;
  background: var(--app-white) !important;
  box-shadow: var(--app-focus) !important;
}

body[data-app-screen] :is(
  .detail-box,
  .stat-card,
  .testimonial-card,
  .info-card,
  .summary-card,
  .box,
  .slider-card,
  .m2-code-box,
  .m2-return,
  .security-badge
) {
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen] :is(.warning, .alert-warning) {
  border: 0 !important;
  background: #FFF6DB !important;
  box-shadow: none !important;
}

body[data-app-screen] :is(.alert-danger, .m2-error) {
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  background: #FDECEA !important;
  box-shadow: none !important;
}

body[data-app-screen] :is(.progress-bar, .loading-bar, .slider-track) {
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--app-radius-pill) !important;
  background: var(--app-line) !important;
  box-shadow: none !important;
}

body[data-app-screen] :is(.progress-fill, .progress-bar-fill, .loading-bar > span) {
  border-radius: inherit !important;
  background: var(--app-purple) !important;
  background-image: none !important;
}

body[data-app-screen] > :is(.header, header.header, header:not(.doc-head)) {
  background: var(--app-purple) !important;
  box-shadow: none !important;
}

body[data-app-screen] .header-logo {
  width: clamp(118px, 38vw, 148px) !important;
  height: auto !important;
  max-width: 148px !important;
  max-height: 28px !important;
}

body[data-app-screen] :is(.header-inner, .header-content) {
  padding-inline: var(--app-screen-gutter) !important;
}

body[data-app-screen] .user-name {
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-app-screen] .user-cpf {
  margin-top: 2px;
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.82 !important;
}

body[data-app-screen] :is(.user-icon-wrapper, .user-avatar, .app-icon-btn) {
  box-shadow: none !important;
}

body[data-app-screen] .user-icon-wrapper {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 50% !important;
}

body[data-app-screen] :is(footer, .site-footer) {
  border-top: 1px solid var(--app-line) !important;
  background: var(--app-white) !important;
  box-shadow: none !important;
}

body[data-app-screen] :is(.modal-content, .modal-card, .loading-content) {
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  box-shadow: var(--app-shadow-overlay) !important;
}

body[data-app-screen="home"] .hero {
  padding: 0 var(--app-screen-gutter) var(--app-space-8) !important;
  background: var(--app-white) !important;
}

body[data-app-screen="home"] .app-band {
  margin-inline: calc(var(--app-screen-gutter) * -1) !important;
  padding: 24px var(--app-screen-gutter) 20px !important;
  border-radius: 0 !important;
  background: var(--app-purple) !important;
  background-image: none !important;
}

body[data-app-screen="home"] .app-greet {
  color: var(--app-white) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

body[data-app-screen="home"] .app-greet small {
  margin-top: 6px !important;
  color: var(--app-white) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 0.88 !important;
}

body[data-app-screen="home"] .app-account {
  padding: 24px 0 20px !important;
}

body[data-app-screen="home"] .app-row-title {
  margin-bottom: 18px !important;
  color: var(--app-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

body[data-app-screen="home"] .hero-amount-label {
  color: var(--app-muted) !important;
  font-size: 14px !important;
}

body[data-app-screen="home"] .hero-amount-value {
  margin-top: 2px !important;
  color: var(--app-ink) !important;
  font-size: clamp(34px, 10vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

body[data-app-screen="home"] .hero-tagline {
  max-width: 34ch;
  margin: 10px 0 20px !important;
  color: var(--app-muted) !important;
  font-size: 14px !important;
}

body[data-app-screen="home"] .hero-cta {
  width: auto !important;
  min-width: 150px;
  margin-right: auto !important;
  padding-inline: 24px !important;
}

body[data-app-screen="home"] .quick-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
  margin: 6px 0 30px !important;
  overflow: visible !important;
}

body[data-app-screen="home"] .qa {
  width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
  color: var(--app-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-app-screen="home"] .qa-ic {
  width: clamp(52px, 15vw, 64px) !important;
  height: clamp(52px, 15vw, 64px) !important;
  color: var(--app-ink) !important;
  background: var(--app-surface) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-screen="home"] .qa-ic svg {
  width: 24px !important;
  height: 24px !important;
}

body[data-app-screen="home"] .hero-title {
  max-width: 18ch;
  margin: 0 !important;
  color: var(--app-ink) !important;
  font-size: clamp(26px, 7.2vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

body[data-app-screen="home"] :is(.main-card-container, .main-card, .card-inner) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--app-white) !important;
  box-shadow: none !important;
}

body[data-app-screen="home"] .card-inner,
body[data-app-screen="home"] :is(.stats-section, .testimonials-section) {
  padding: 32px var(--app-screen-gutter) !important;
}

body[data-app-screen="home"] :is(.section-title, .testimonials-title) {
  font-size: 24px !important;
  font-weight: 700 !important;
}

body[data-app-screen="home"] .section-mark {
  display: none !important;
}

body[data-app-screen="home"] .benefit-item {
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: transparent !important;
}

body[data-app-screen="home"] .benefit-item:last-child {
  border-bottom: 0 !important;
}

body[data-app-screen="home"] :is(.benefit-icon, .stat-ic) {
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-screen="home"] .simulator-section {
  margin-top: 24px !important;
  padding: 20px !important;
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="home"] .detail-box {
  background: var(--app-white) !important;
}

body[data-app-screen="home"] .trust-section {
  margin-top: 20px !important;
  padding: 16px var(--app-screen-gutter) 24px !important;
  border: 0 !important;
  background: var(--app-white) !important;
}

body[data-app-screen="home"] .stats-section {
  border-block: 1px solid var(--app-line) !important;
  background: var(--app-white) !important;
}

body[data-app-screen="home"] .stat-card {
  padding: 14px 6px !important;
  background: transparent !important;
}

body[data-app-screen="home"] .testimonial-card {
  padding: 20px !important;
}

body[data-app-screen="identity"] > .container {
  width: 100% !important;
  padding: 28px var(--app-screen-gutter) 40px !important;
}

body[data-app-screen="identity"] > .container > .card {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen="identity"] .card-divider {
  display: none !important;
}

body[data-app-screen="identity"] .step-indicators {
  margin-bottom: 20px !important;
}

body[data-app-screen="identity"] .step-dot .dot {
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  color: var(--app-muted) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="identity"] .step-dot.active .dot,
body[data-app-screen="identity"] .step-dot.done .dot {
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
}

body[data-app-screen="identity"] .step-line {
  height: 2px !important;
  background: var(--app-line) !important;
}

body[data-app-screen="identity"] .step-line.done {
  background: var(--app-purple) !important;
}

body[data-app-screen="identity"] .dot-label {
  color: var(--app-muted) !important;
  font-size: 11px !important;
}

body[data-app-screen="identity"] .progress-bar {
  height: 4px !important;
  margin-bottom: 32px !important;
}

body[data-app-screen="identity"] .step-header {
  gap: 12px !important;
  margin-bottom: 10px !important;
}

body[data-app-screen="identity"] .step-icon {
  width: 40px !important;
  height: 40px !important;
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-screen="identity"] .step-header h1,
body[data-app-screen="identity"] .success h1 {
  font-size: 26px !important;
}

body[data-app-screen="identity"] .step-subtitle {
  max-width: 36ch;
  margin-bottom: 24px !important;
  color: var(--app-muted) !important;
  font-size: 15px !important;
}

body[data-app-screen="identity"] .form-group label {
  margin-bottom: 8px !important;
  color: var(--app-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body[data-app-screen="identity"] .btn-option {
  min-height: 52px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  color: var(--app-ink) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="identity"] .trust-bar {
  margin-top: 18px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  color: var(--app-muted) !important;
  background: var(--app-surface) !important;
}

body[data-app-screen="purpose"] > .container {
  width: 100% !important;
  padding: 24px var(--app-screen-gutter) 40px !important;
}

body[data-app-screen="purpose"] > .container > .card {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen="purpose"] .progress-bar {
  height: 4px !important;
  margin-bottom: 14px !important;
}

body[data-app-screen="purpose"] .step-count {
  margin-bottom: 28px !important;
  color: var(--app-muted) !important;
  text-align: left !important;
}

body[data-app-screen="purpose"] .step-title {
  margin-bottom: 8px !important;
  font-size: 26px !important;
  text-align: left !important;
}

body[data-app-screen="purpose"] .step-desc {
  margin-bottom: 24px !important;
  color: var(--app-muted) !important;
  text-align: left !important;
}

body[data-app-screen="purpose"] .choice-grid {
  gap: 12px !important;
}

body[data-app-screen="purpose"] .choice-card {
  min-height: 94px !important;
  padding: 16px 12px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  color: var(--app-ink) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="purpose"] .choice-card svg {
  color: var(--app-purple) !important;
  stroke: currentColor !important;
}

body[data-app-screen="purpose"] .choice-card:is(:hover, .selected) {
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
  transform: none !important;
}

body[data-app-screen="purpose"] .choice-row {
  min-height: 56px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="purpose"] :is(.section-label, .field-label) {
  margin-bottom: 8px !important;
  color: var(--app-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body[data-app-screen="advisor"] > .container {
  width: 100% !important;
  padding: 24px var(--app-screen-gutter) 40px !important;
}

body[data-app-screen="advisor"] > .container > .card {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen="advisor"] .attendant-section {
  padding: 20px !important;
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-purple-soft) !important;
  box-shadow: none !important;
}

body[data-app-screen="advisor"] .attendant-name {
  font-size: 24px !important;
}

body[data-app-screen="advisor"] .attendant-title {
  color: #4F4F4F !important;
}

body[data-app-screen="advisor"] .copy-section {
  padding: 28px 0 0 !important;
  text-align: left !important;
}

body[data-app-screen="advisor"] .copy-title {
  font-size: 24px !important;
  text-align: left !important;
}

body[data-app-screen="advisor"] .benefits-box {
  padding: 16px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="advisor"] .btn-custom {
  width: 100% !important;
}

body[data-app-screen="chat"] .main-content {
  padding: 12px !important;
  background: var(--app-surface) !important;
}

body[data-app-screen="chat"] :is(.chat-container, .loading-container) {
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-white) !important;
  box-shadow: none !important;
}

body[data-app-screen="chat"] .chat-header {
  padding-inline: var(--app-screen-gutter) !important;
  color: var(--app-ink) !important;
  background: var(--app-white) !important;
  border-bottom: 1px solid var(--app-line) !important;
}

body[data-app-screen="chat"] .chat-header-back {
  color: var(--app-ink) !important;
  border-radius: 50%;
}

body[data-app-screen="chat"] .chat-header-back:active {
  background: var(--app-surface) !important;
}

body[data-app-screen="chat"] .attendant-avatar {
  border: 2px solid var(--app-purple) !important;
  box-shadow: none !important;
}

body[data-app-screen="chat"] .attendant-info h3 {
  color: var(--app-ink) !important;
}

body[data-app-screen="chat"] .attendant-info p {
  color: var(--app-muted) !important;
}

body[data-app-screen="chat"] .chat-messages {
  padding: 18px var(--app-screen-gutter) 22px !important;
  background: var(--app-surface) !important;
}

body[data-app-screen="chat"] .message {
  gap: 8px !important;
}

body[data-app-screen="chat"] .message-avatar,
body[data-app-screen="chat"] .user-avatar {
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-screen="chat"] .message-bubble {
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body[data-app-screen="chat"] .message.attendant .message-bubble {
  color: var(--app-ink) !important;
  background: var(--app-white) !important;
  border-bottom-left-radius: 4px !important;
}

body[data-app-screen="chat"] .message.user .message-bubble {
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  border-bottom-right-radius: 4px !important;
}

body[data-app-screen="chat"] .message-bubble::before {
  display: none !important;
}

body[data-app-screen="chat"] .message.user :is(.message-name, .message-text, .message-time) {
  color: var(--app-white) !important;
}

body[data-app-screen="chat"] .message-name {
  color: var(--app-purple-dark) !important;
}

body[data-app-screen="chat"] .message-time {
  color: var(--app-muted) !important;
  opacity: 0.82;
}

body[data-app-screen="chat"] .options-container {
  gap: 10px !important;
  margin-top: 14px !important;
}

body[data-app-screen="chat"] .option-button {
  min-height: 52px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  color: var(--app-ink) !important;
  background: var(--app-white) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

body[data-app-screen="chat"] .option-button:is(:hover, :focus-visible) {
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="chat"] .slider-card {
  padding: 20px !important;
  background: var(--app-white) !important;
}

body[data-app-screen="chat"] .amount-slider::-webkit-slider-thumb {
  border-color: var(--app-purple) !important;
  box-shadow: none !important;
}

body[data-app-screen="approved"] .doc {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100dvh - var(--app-topbar-height));
  padding: 30px var(--app-screen-gutter) 40px !important;
}

body[data-app-screen="approved"] .doc-head {
  margin-bottom: 28px !important;
}

body[data-app-screen="approved"] .stamp {
  margin-bottom: 18px !important;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-app-screen="approved"] .approve-title {
  font-size: clamp(28px, 8vw, 34px) !important;
}

body[data-app-screen="approved"] .approve-note {
  margin-top: 8px !important;
  color: var(--app-muted) !important;
}

body[data-app-screen="approved"] .statement {
  margin-bottom: 24px !important;
  padding: 22px 20px !important;
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="approved"] .released-value {
  color: var(--app-ink) !important;
  font-size: clamp(34px, 10vw, 42px) !important;
  font-weight: 700 !important;
}

body[data-app-screen="approved"] .statement :is(dt, .released-pix) {
  color: #4F4F4F !important;
}

body[data-app-screen="approved"] .statement-rule {
  border-top: 1px solid var(--app-line) !important;
}

body[data-app-screen="approved"] .ds-ledger-fill {
  border-color: #C9C9C9 !important;
}

body[data-app-screen="approved"] .finish-note {
  color: var(--app-muted) !important;
  text-align: center;
}

body[data-app-screen="face"] .wrap {
  width: 100% !important;
  min-height: calc(100dvh - var(--app-topbar-height));
  padding: 32px var(--app-screen-gutter) 40px !important;
  align-items: flex-start !important;
}

body[data-app-screen="face"] .card#stepConsent {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen="face"] .card#stepConsent > h1 {
  font-size: 28px !important;
}

body[data-app-screen="face"] .lead {
  max-width: 37ch;
  margin-top: 10px !important;
  color: var(--app-muted) !important;
}

body[data-app-screen="face"] .consent-list {
  margin-top: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen="face"] .consent-item {
  gap: 14px !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--app-line) !important;
}

body[data-app-screen="face"] .consent-icon {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="face"] .consent-item .small,
body[data-app-screen="face"] .lgpd-note {
  color: var(--app-muted) !important;
}

body[data-app-screen="face"] .lgpd-note {
  margin-top: 20px !important;
  padding: 14px 16px !important;
  border-radius: var(--app-radius-md) !important;
  background: var(--app-surface) !important;
}

body[data-app-screen="face"] .btn-row {
  gap: 10px !important;
  margin-top: 24px !important;
}

body[data-app-screen="face"] .btn.ghost,
body[data-app-screen="pix"] .btn.ghost {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-ink) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

body[data-app-screen="terms"] .main-container,
body[data-app-screen="contact"] .main-container,
body[data-app-screen="insurance"] .main-container {
  min-height: calc(100dvh - var(--app-topbar-height));
  padding: 0 !important;
  align-items: flex-start !important;
}

body[data-app-screen="terms"] .main-container > .container,
body[data-app-screen="contact"] .main-container > .container,
body[data-app-screen="insurance"] .main-container > .container {
  width: 100% !important;
  max-width: none !important;
  padding: 30px var(--app-screen-gutter) 40px !important;
}

body[data-app-screen="terms"] .section {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen="terms"] .section-title,
body[data-app-screen="contact"] .page-title,
body[data-app-screen="insurance"] .page-title {
  font-size: 28px !important;
  text-align: left !important;
}

body[data-app-screen="terms"] .section-subtitle,
body[data-app-screen="contact"] .page-subtitle,
body[data-app-screen="insurance"] .page-sub {
  margin-top: 8px !important;
  margin-bottom: 26px !important;
  color: var(--app-muted) !important;
  text-align: left !important;
}

body[data-app-screen="terms"] .info-card {
  gap: 14px !important;
  padding: 18px !important;
}

body[data-app-screen="terms"] .info-icon {
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="terms"] .due-date-btn {
  justify-content: flex-start !important;
  color: var(--app-ink) !important;
  background: var(--app-surface) !important;
}

body[data-app-screen="terms"] .due-date-btn :is(span, strong) {
  color: inherit !important;
}

body[data-app-screen="terms"] .due-date-number {
  color: var(--app-purple) !important;
}

body[data-app-screen="contact"] .info-card {
  margin-bottom: 24px !important;
  padding: 18px !important;
}

body[data-app-screen="contact"] .info-icon-box {
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
  border: 0 !important;
}

body[data-app-screen="contact"] .check-icon {
  color: var(--app-purple) !important;
  background: transparent !important;
}

body[data-app-screen="contact"] :is(.info-icon-box, .check-icon) svg {
  color: inherit !important;
  stroke: currentColor !important;
}

body[data-app-screen="contact"] .form-group {
  margin-bottom: 18px !important;
}

body[data-app-screen="contact"] .form-label {
  margin-bottom: 8px !important;
  color: var(--app-ink) !important;
  font-weight: 600 !important;
}

body[data-app-screen="contact"] .form-input {
  min-height: 52px !important;
  padding-inline: 16px !important;
  font-size: 16px !important;
}

body[data-app-screen="contact"] .label-icon {
  color: var(--app-purple) !important;
}

body[data-app-screen="contact"] .form-input-wrapper > .input-icon {
  display: none !important;
}

body[data-app-screen="contact"] .form-label .label-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
}

body[data-app-screen="contact"] .info-title {
  color: var(--app-ink) !important;
}

@media (max-width: 340px) {
  body[data-app-screen="contact"] .info-card {
    gap: 10px !important;
    padding: 16px !important;
  }

  body[data-app-screen="contact"] .info-icon-box {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  body[data-app-screen="contact"] .info-list li {
    gap: 6px !important;
  }
}

body[data-app-screen="contact"] .btn-submit {
  margin-top: 10px !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-app-screen="insurance"] .pre-badge {
  margin-bottom: 18px !important;
  padding: 7px 12px !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="insurance"] .approved-card {
  padding: 22px 20px !important;
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  box-shadow: none !important;
}

body[data-app-screen="insurance"] .approved-value {
  font-size: clamp(34px, 10vw, 42px) !important;
}

body[data-app-screen="insurance"] .video-wrapper {
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  box-shadow: none !important;
}

body[data-app-screen="insurance"] .card {
  padding: 18px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="insurance"] .seguro-icon {
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="insurance"] .check-circle {
  color: var(--app-purple) !important;
  background: transparent !important;
}

body[data-app-screen="insurance"] .secure-pill {
  color: var(--app-muted) !important;
  background: var(--app-surface) !important;
  border: 0 !important;
}

body[data-app-screen="insurance"] .secure-pill :is(span, div, p, strong, svg) {
  color: var(--app-muted) !important;
  -webkit-text-fill-color: var(--app-muted) !important;
}

body[data-app-screen="pix"] > .container {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh;
  border: 0 !important;
  background: var(--app-white) !important;
  box-shadow: none !important;
}

body[data-app-screen="pix"] .m2-header {
  padding: 22px var(--app-screen-gutter) 20px !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  border: 0 !important;
}

body[data-app-screen="pix"] .m2-brand img {
  content: url("../assets/brand/juros-baixos-logo-horizontal-branca.png");
  width: clamp(122px, 38vw, 152px) !important;
  height: auto !important;
  max-height: 28px !important;
}

body[data-app-screen="pix"] :is(
  .m2-policy-label,
  .m2-policy-num,
  .m2-info-label,
  .m2-info-value
) {
  color: var(--app-white) !important;
}

body[data-app-screen="pix"] .m2-policy-label,
body[data-app-screen="pix"] .m2-info-label {
  opacity: 0.72 !important;
}

body[data-app-screen="pix"] .m2-info-grid {
  gap: 16px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
}

body[data-app-screen="pix"] .m2-content {
  padding: 28px var(--app-screen-gutter) 40px !important;
}

body[data-app-screen="pix"] .m2-banner {
  margin-bottom: 24px !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  color: var(--app-ink) !important;
  background: var(--app-purple-soft) !important;
  box-shadow: none !important;
}

body[data-app-screen="pix"] .m2-banner :is(span, svg) {
  color: var(--app-ink) !important;
}

body[data-app-screen="pix"] .m2-total-row {
  padding-bottom: 18px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--app-line) !important;
  font-size: 22px !important;
}

body[data-app-screen="pix"] .m2-total-row #totalAmount {
  color: var(--app-purple) !important;
}

body[data-app-screen="pix"] .m2-pix-label,
body[data-app-screen="pix"] .m2-section-label {
  color: var(--app-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body[data-app-screen="pix"] .m2-pix-badge {
  padding: 4px 9px !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
}

body[data-app-screen="pix"] .m2-qr-wrap {
  width: min(68vw, 250px) !important;
  height: min(68vw, 250px) !important;
  margin: 18px auto !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-white) !important;
  box-shadow: inset 0 0 0 1px var(--app-line) !important;
}

body[data-app-screen="pix"] .m2-code-box {
  padding: 14px 16px !important;
}

body[data-app-screen="pix"] .m2-status-bar {
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
  box-shadow: none !important;
}

body[data-app-screen="pix"] .m2-return {
  padding: 18px !important;
}

body[data-app-screen="pix"] .m2-check-btn {
  width: 100% !important;
  margin-top: 14px !important;
}

body[data-app-screen="pix"] #timer {
  color: var(--app-muted) !important;
  background: transparent !important;
}

body[data-app-screen="pix"] .m2-cover-item {
  min-height: 52px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: transparent !important;
}

body[data-app-screen="pix"] .m2-cover-icon {
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="pix"] .m2-secure {
  margin-top: 20px !important;
  color: var(--app-muted) !important;
  background: transparent !important;
}

body[data-app-screen="pix"] .m2-header {
  padding: 0 !important;
  background: var(--app-white) !important;
}

body[data-app-screen="pix"] .m2-header-top {
  width: 100%;
  height: var(--app-topbar-height) !important;
  margin: 0 !important;
  padding: 0 var(--app-screen-gutter) !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
}

body[data-app-screen="pix"] .m2-info-grid {
  margin: 0 !important;
  padding: 16px var(--app-screen-gutter) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: var(--app-white) !important;
}

body[data-app-screen="pix"] .m2-info-grid :is(.m2-info-label, .m2-info-value) {
  color: var(--app-ink) !important;
}

body[data-app-screen="pix"] .m2-info-grid .m2-info-label {
  color: var(--app-muted) !important;
  opacity: 1 !important;
}

body[data-app-screen="confirmation"] .doc {
  width: 100% !important;
  min-height: calc(100dvh - var(--app-topbar-height));
  padding: 32px var(--app-screen-gutter) !important;
}

body[data-app-screen="confirmation"] .sheet {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen="confirmation"] .doc-stamp {
  width: max-content;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
  transform: none !important;
}

body[data-app-screen="confirmation"] .doc-title {
  margin-top: 24px !important;
  font-size: clamp(30px, 8.5vw, 38px) !important;
}

body[data-app-screen="confirmation"] .doc-note {
  max-width: 34ch;
  color: var(--app-muted) !important;
}

body[data-app-screen="confirmation"] .doc-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px !important;
  margin-top: 28px !important;
  padding: 14px 22px !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  box-shadow: none !important;
}

html body[data-app-screen^="upsell-"] {
  padding: 0 !important;
  background: var(--app-white) !important;
}

body[data-app-screen^="upsell-"] > header,
body[data-app-screen^="upsell-"] > .header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  max-height: var(--app-topbar-height) !important;
  padding: 0 !important;
  transform: none !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-screen^="upsell-"] > header > div {
  width: 100% !important;
  max-width: 430px !important;
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  margin: 0 auto !important;
  padding: 0 var(--app-screen-gutter) !important;
  color: var(--app-white) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-app-screen^="upsell-"] > header img {
  width: auto !important;
  height: 30px !important;
  max-width: 64px !important;
  object-fit: contain;
}

body[data-app-screen^="upsell-"] > main {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 28px var(--app-screen-gutter) 40px !important;
  background: var(--app-white) !important;
}

body[data-app-screen^="upsell-"] > main > div {
  width: 100% !important;
  max-width: none !important;
}

body[data-app-screen^="upsell-"] > main > div > :is(.bg-white, .card) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen^="upsell-"] :is(h1, h2) {
  font-size: 28px !important;
}

body[data-app-screen^="upsell-"] h3 {
  font-size: 17px !important;
}

body[data-app-screen^="upsell-"] :is(.countdown-box, .header-alert) {
  border: 0 !important;
  border-radius: var(--app-radius-lg) !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-app-screen^="upsell-"] :is(.countdown-box, .header-alert) :is(h1, h2, h3, p, span, strong, svg) {
  color: var(--app-white) !important;
}

body[data-app-screen^="upsell-"] main :is(
  [class*="shadow"],
  [class*="border"],
  .card,
  .box,
  .pix-card
) {
  box-shadow: none !important;
}

body[data-app-screen^="upsell-"] main :is(
  [class*="rounded-xl"],
  [class*="rounded-lg"],
  .card,
  .box,
  .pix-card
) {
  border-radius: var(--app-radius-md) !important;
}

body[data-app-screen^="upsell-"] main :is(.bg-gray-50, .bg-\[\#f8faf9\]) {
  border-color: transparent !important;
  background: var(--app-surface) !important;
}

body[data-app-screen^="upsell-"] main button:not(.faq-question):not(.sound-button) {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 22px !important;
  border: 0 !important;
  border-radius: var(--app-radius-pill) !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

body[data-app-screen^="upsell-"] .faq-question {
  min-height: 52px !important;
  padding: 14px 0 !important;
  color: var(--app-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

body[data-app-screen^="upsell-"] :is(.logo-container, .footer-logo) img {
  width: min(156px, 48vw) !important;
  max-width: 156px !important;
  height: auto !important;
}

body[data-app-screen] footer img[src*="juros-baixos-logo-horizontal"],
body[data-app-screen] .footer-brand-logo {
  width: min(164px, 50vw) !important;
  max-width: 164px !important;
  height: auto !important;
}

body[data-app-screen^="upsell-"] footer {
  padding-inline: var(--app-screen-gutter) !important;
}

body[data-app-screen="upsell-1"] :is(.card, .box),
body[data-app-screen="upsell-2"] :is(.card, .box) {
  border: 0 !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="upsell-1"] > :is(.card, .card-final) > .logo-container {
  display: none !important;
}

body[data-app-screen="upsell-2"] .topbar {
  height: var(--app-topbar-height) !important;
  min-height: var(--app-topbar-height) !important;
  max-height: var(--app-topbar-height) !important;
  padding-inline: var(--app-screen-gutter) !important;
  background: var(--app-purple) !important;
  box-shadow: none !important;
}

body[data-app-screen="upsell-1"] #card,
body[data-app-screen="upsell-2"] #card {
  background: var(--app-white) !important;
}

body[data-app-screen="upsell-3"] .border-l-4,
body[data-app-screen="upsell-6"] .border-l-4,
body[data-app-screen="upsell-7"] .border-l-4 {
  border: 0 !important;
  border-radius: var(--app-radius-md) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="upsell-4"] .card,
body[data-app-screen="upsell-4"] .pix-card {
  border: 0 !important;
  background: var(--app-surface) !important;
  box-shadow: none !important;
}

body[data-app-screen="upsell-5"] main > div > div > div:first-child {
  background: var(--app-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-app-screen="upsell-5"] main > div > div > div:first-child :is(h1, p) {
  color: var(--app-white) !important;
}

body[data-app-screen="upsell-6"] header .bg-green-100 {
  color: var(--app-white) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

body[data-app-screen="upsell-6"] .text-xs.text-gray-500,
body[data-app-screen="upsell-7"] .text-xs.text-gray-500 {
  color: #4F4F4F !important;
}

body[data-app-screen="upsell-7"] #btnVoltar {
  display: none !important;
}

@media (max-width: 359px) {
  body[data-app-screen] {
    --app-screen-gutter: 16px;
  }

  body[data-app-screen="home"] .quick-actions {
    gap: 6px !important;
  }

  body[data-app-screen="home"] .qa {
    font-size: 11px !important;
  }

  body[data-app-screen="purpose"] .choice-card {
    min-height: 88px !important;
  }

  body[data-app-screen="face"] .btn-row {
    grid-template-columns: 1fr !important;
  }

  body[data-app-screen="chat"] .chat-messages {
    padding-inline: 14px !important;
  }
}

@media (min-width: 431px) {
  body[data-app-screen] {
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06);
  }
}

body[data-app-screen] {
  --app-surface: #F1F1F1;
  --app-line: #E6E6E6;
  --app-radius-md: 18px;
  --app-radius-lg: 24px;
}

body[data-app-screen="home"] .hero {
  padding: 0 var(--app-screen-gutter) 36px !important;
}

body[data-app-screen="home"] .app-band {
  display: flex !important;
  align-items: flex-end !important;
  min-height: 136px !important;
  margin-top: 0 !important;
  padding: 22px var(--app-screen-gutter) 24px !important;
}

body[data-app-screen="home"] .app-greet {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 76px;
  margin: 0 !important;
  padding: 16px 20px !important;
  border-radius: 22px;
  color: var(--app-purple) !important;
  background: var(--app-white) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

body[data-app-screen="home"] .app-greet small {
  margin-top: 3px !important;
  color: var(--app-purple-dark) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
}

body[data-app-screen="home"] .app-account {
  padding: 30px 0 22px !important;
}

body[data-app-screen="home"] .app-row-title {
  margin-bottom: 14px !important;
  font-size: 21px !important;
}

body[data-app-screen="home"] .hero-amount-value {
  font-size: clamp(30px, 9vw, 36px) !important;
  font-weight: 650 !important;
}

body[data-app-screen="home"] .hero-cta {
  width: 100% !important;
  min-height: 52px !important;
  justify-content: center !important;
}

body[data-app-screen="home"] .quick-actions {
  display: flex !important;
  gap: 16px !important;
  margin: 10px calc(var(--app-screen-gutter) * -1) 26px !important;
  padding: 0 var(--app-screen-gutter) 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body[data-app-screen="home"] .quick-actions::-webkit-scrollbar {
  display: none;
}

body[data-app-screen="home"] .qa {
  flex: 0 0 76px !important;
  scroll-snap-align: start;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body[data-app-screen="home"] .qa-ic {
  width: 68px !important;
  height: 68px !important;
}

body[data-app-screen="home"] .hero-title {
  max-width: none !important;
  min-height: 112px;
  margin: 0 !important;
  padding: 24px 22px !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-surface) !important;
  font-size: clamp(20px, 6vw, 24px) !important;
  line-height: 1.18 !important;
}

body[data-app-screen="home"] .benefits-list {
  margin-top: 18px !important;
  padding: 4px 18px !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-surface) !important;
}

body[data-app-screen="home"] .benefit-item {
  padding: 17px 0 !important;
}

body[data-app-screen="home"] .testimonial-card,
body[data-app-screen="home"] .simulator-section {
  border-radius: var(--app-radius-lg) !important;
}

body[data-app-screen="home"] .app-home-tabbar {
  display: flex !important;
  left: 50% !important;
  bottom: 12px !important;
  width: calc(min(100vw, 430px) - 24px) !important;
  height: 74px !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(17, 17, 17, 0.06) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.14) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  align-items: center !important;
  animation: none !important;
}

body[data-app-screen="home"] .app-home-tabbar .tab {
  min-width: 0;
  height: 60px;
  padding: 2px 4px !important;
  color: var(--app-muted) !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body[data-app-screen="home"] .app-home-tabbar .tab-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: inherit;
  background: transparent;
}

body[data-app-screen="home"] .app-home-tabbar .tab-ic svg {
  width: 22px !important;
  height: 22px !important;
}

body[data-app-screen="home"] .app-home-tabbar .tab.is-active {
  color: var(--app-purple) !important;
}

body[data-app-screen="home"] .app-home-tabbar .tab.is-active .tab-ic {
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="home"] > footer {
  padding-bottom: 118px !important;
}

.app-boot-screen {
  position: fixed;
  z-index: 2147483600;
  inset: 0 auto 0 50%;
  display: flex;
  width: min(100vw, 430px);
  height: 100dvh;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--app-white);
  background: var(--app-purple);
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.app-boot-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-boot-screen > img {
  width: 96px;
  height: auto;
}

.app-boot-spinner {
  position: absolute;
  left: 50%;
  bottom: max(44px, calc(env(safe-area-inset-bottom) + 28px));
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 4px solid rgba(255, 255, 255, 0.26);
  border-top-color: var(--app-white);
  border-right-color: var(--app-white);
  border-bottom-color: var(--app-white);
  border-radius: 50%;
  animation: appReferenceSpin 780ms linear infinite;
}

@keyframes appReferenceSpin {
  to { transform: rotate(360deg); }
}

:is(
  body[data-app-screen="purpose"] #successFeedback,
  body[data-app-screen="chat"] #loadingContainer,
  body[data-app-screen="terms"] #loadingOverlay,
  body[data-app-screen="contact"] #loadingOverlay,
  body[data-app-screen="pix"] #loading,
  body[data-app-screen="upsell-1"] #loading,
  body[data-app-screen="upsell-2"] #loading
) {
  position: fixed !important;
  z-index: 2147483500 !important;
  inset: 0 auto 0 50% !important;
  width: min(100vw, 430px) !important;
  min-width: 0 !important;
  max-width: 430px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  box-shadow: none !important;
}

:is(
  body[data-app-screen="purpose"] #successFeedback,
  body[data-app-screen="chat"] #loadingContainer,
  body[data-app-screen="terms"] #loadingOverlay,
  body[data-app-screen="contact"] #loadingOverlay,
  body[data-app-screen="pix"] #loading,
  body[data-app-screen="upsell-1"] #loading,
  body[data-app-screen="upsell-2"] #loading
)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: url("../assets/brand/juros-baixos-simbolo-branco.png") center / contain no-repeat;
}

:is(
  body[data-app-screen="purpose"] #successFeedback .spinner,
  body[data-app-screen="chat"] #loadingContainer .loading-spinner,
  body[data-app-screen="terms"] #loadingOverlay .spinner,
  body[data-app-screen="contact"] #loadingOverlay .spinner,
  body[data-app-screen="pix"] #loading .spinner,
  body[data-app-screen="upsell-1"] #loading .spinner
) {
  position: absolute !important;
  z-index: 2;
  left: 50% !important;
  bottom: max(70px, calc(env(safe-area-inset-bottom) + 54px)) !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 0 -22px !important;
  border: 4px solid rgba(255, 255, 255, 0.26) !important;
  border-top-color: var(--app-white) !important;
  border-right-color: var(--app-white) !important;
  border-bottom-color: var(--app-white) !important;
  border-radius: 50% !important;
  background: transparent !important;
  animation-name: appReferenceSpin !important;
  animation-duration: 780ms !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}

body[data-app-screen="upsell-2"] #loading::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 76px));
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 4px solid rgba(255, 255, 255, 0.26);
  border-top-color: var(--app-white);
  border-right-color: var(--app-white);
  border-bottom-color: var(--app-white);
  border-radius: 50%;
  animation: appReferenceSpin 780ms linear infinite;
}

body[data-app-screen="purpose"] #successFeedback .success-feedback-inner,
body[data-app-screen="terms"] #loadingOverlay .loading-content,
body[data-app-screen="contact"] #loadingOverlay .loading-content {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--app-white) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen="purpose"] #successFeedback .success-feedback-inner {
  font-size: 0 !important;
}

:is(
  body[data-app-screen="chat"] #loadingContainer .loading-text,
  body[data-app-screen="terms"] #loadingOverlay .loading-text,
  body[data-app-screen="contact"] #loadingOverlay .loading-text,
  body[data-app-screen="pix"] #loading .m2-loading-text,
  body[data-app-screen="upsell-1"] #loading .status-text,
  body[data-app-screen="upsell-2"] #loading .status-text
) {
  position: absolute !important;
  z-index: 2;
  right: var(--app-screen-gutter) !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  left: var(--app-screen-gutter) !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

body[data-app-screen="upsell-1"] #loading .spinner {
  bottom: max(118px, calc(env(safe-area-inset-bottom) + 102px)) !important;
}

body[data-app-screen="upsell-1"] #loading .status-text,
body[data-app-screen="upsell-2"] #loading .status-text {
  bottom: max(70px, calc(env(safe-area-inset-bottom) + 54px)) !important;
}

body[data-app-screen="upsell-1"] #loading .progress-bar,
body[data-app-screen="upsell-2"] #loading .progress-bar {
  position: absolute !important;
  right: 20% !important;
  bottom: max(42px, calc(env(safe-area-inset-bottom) + 26px)) !important;
  left: 20% !important;
  width: 60% !important;
  height: 4px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
}

body[data-app-screen="upsell-1"] #loading .progress-bar-fill,
body[data-app-screen="upsell-2"] #loading .progress-bar-fill {
  height: 100% !important;
  background: var(--app-white) !important;
}

body[data-app-screen="face"] .vf-overlay {
  padding: 108px var(--app-screen-gutter) 30px !important;
  color: var(--app-white) !important;
  background: var(--app-purple) url("../assets/brand/juros-baixos-simbolo-branco.png") center 34px / 88px auto no-repeat !important;
}

body[data-app-screen="face"] .vf-view {
  color: var(--app-white) !important;
  background: transparent !important;
}

body[data-app-screen="face"] .vf-view :is(.vf-title, .vf-sub, .vf-step-text strong, .vf-step-text span, .vf-secure, .vf-redirect) {
  color: var(--app-white) !important;
}

body[data-app-screen="face"] .vf-steps {
  padding: 8px 16px !important;
  border-radius: var(--app-radius-lg) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body[data-app-screen="face"] :is(.vf-face-ring, .vf-spinner, .vf-mini-spinner) {
  border-color: rgba(255, 255, 255, 0.28) !important;
  border-top-color: var(--app-white) !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-screen {
    transition-duration: 120ms !important;
  }

  .app-boot-spinner,
  body[data-app-screen="upsell-2"] #loading::after,
  :is(
    body[data-app-screen="purpose"] #successFeedback .spinner,
    body[data-app-screen="chat"] #loadingContainer .loading-spinner,
    body[data-app-screen="terms"] #loadingOverlay .spinner,
    body[data-app-screen="contact"] #loadingOverlay .spinner,
    body[data-app-screen="pix"] #loading .spinner,
    body[data-app-screen="upsell-1"] #loading .spinner
  ) {
    animation-duration: 1400ms !important;
    animation-iteration-count: infinite !important;
  }
}

body[data-app-screen="identity"].identity-cpf-active,
body[data-app-screen="identity"].identity-device-active {
  animation: none !important;
  opacity: 1 !important;
}

body[data-app-screen="identity"].identity-cpf-active > header.header {
  animation: none !important;
  color: var(--app-ink) !important;
  background: var(--app-white) !important;
}

body[data-app-screen="identity"].identity-cpf-active > header.header :is(.app-nav-title, .app-nav-step, .header-logo, .header-right) {
  display: none !important;
}

body[data-app-screen="identity"].identity-cpf-active > header.header .app-back,
body[data-app-screen="identity"].identity-cpf-active > header.header .app-back svg {
  color: var(--app-muted) !important;
}

body[data-app-screen="identity"].identity-cpf-active > .container {
  min-height: calc(100dvh - var(--app-topbar-height)) !important;
  margin: 0 !important;
  padding: 2px 24px 24px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

body[data-app-screen="identity"].identity-cpf-active > .container > .card {
  width: 100% !important;
}

body[data-app-screen="identity"].identity-cpf-active #step1,
body[data-app-screen="identity"].identity-cpf-active #step1 > *,
body[data-app-screen="identity"].identity-cpf-active #step1 .step-header > *,
body[data-app-screen="identity"].identity-device-active #deviceAuthorization,
body[data-app-screen="identity"].identity-device-active #deviceAuthorization > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body[data-app-screen="identity"].identity-cpf-active #submitBtn1 {
  position: fixed !important;
  top: auto !important;
  right: max(24px, calc((100vw - 430px) / 2 + 24px)) !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px)) !important;
  left: auto !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

body[data-app-screen="identity"].identity-cpf-active #submitBtn1:disabled {
  color: #A8A8A8 !important;
  background: #F1F1F1 !important;
  opacity: 1 !important;
}

body[data-app-screen="identity"].identity-device-active {
  min-height: 100dvh !important;
  padding-top: 0 !important;
}

body[data-app-screen="identity"].identity-device-active > .container {
  width: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

body[data-app-screen="identity"].identity-device-active > .container > .card {
  width: 100% !important;
  min-height: 100dvh !important;
}

body[data-app-screen="identity"].identity-device-active #deviceAuthorization {
  width: 100% !important;
  min-height: 100dvh !important;
}

body[data-app-screen="identity"].identity-device-active #authorizeDeviceBtn {
  position: static !important;
  inset: auto !important;
  margin-top: auto !important;
}

@media (max-width: 340px) {
  body[data-app-screen="identity"].identity-cpf-active > .container {
    padding-inline: 20px !important;
  }
}

body[data-app-screen="identity"].identity-cpf-active #cpf:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body[data-app-screen="identity"].identity-device-active .app-device-graphic {
  grid-template-columns: repeat(4, 19px);
  gap: 3px;
  padding: 6px;
}

body[data-app-screen="identity"].identity-device-active .app-device-graphic span {
  width: 19px;
  height: 19px;
}

body[data-app-screen="identity"].identity-device-active .app-device-graphic span::after {
  width: 8px;
  height: 8px;
}

body[data-app-screen="identity"].identity-device-active .device-authorization h1 {
  font-size: clamp(27px, 7.45vw, 29px) !important;
}

body[data-app-screen] {
  --accent: var(--app-purple);
  --accent-yellow: var(--app-purple);
  --bg: var(--app-neutral-050);
  --border: var(--app-line);
  --border-light: var(--app-neutral-100);
  --btn-green: var(--app-purple);
  --btn-green-hover: var(--app-purple-dark);
  --card: var(--app-white);
  --cred-accent: var(--app-purple);
  --cred-dark: var(--app-purple-dark);
  --cred-light: var(--app-purple);
  --cred-primary: var(--app-purple);
  --danger: var(--app-purple-dark);
  --danger-light: var(--app-purple-soft);
  --green: var(--app-purple);
  --green-accent: var(--app-purple);
  --green-accent-dark: var(--app-purple-dark);
  --green-accent-light: var(--app-purple-soft);
  --green-border: var(--app-purple-100);
  --green-dark: var(--app-purple-dark);
  --green-darker: var(--app-purple-900);
  --green-light: var(--app-purple-soft);
  --green-primary: var(--app-ink);
  --green-soft: var(--app-purple-soft);
  --green-subtle: var(--app-purple-050);
  --primary: var(--app-purple);
  --primary-accent: var(--app-purple);
  --primary-border: var(--app-purple-100);
  --primary-deep: var(--app-purple-dark);
  --primary-light: var(--app-purple-soft);
  --primary-soft: var(--app-purple-soft);
  --primary-subtle: var(--app-purple-050);
  --purple: var(--app-purple);
  --purple-bg: var(--app-purple-050);
  --purple-dark: var(--app-purple-dark);
  --purple-light: var(--app-purple-soft);
  --success: var(--app-purple);
  --text: var(--app-ink);
  --text-mid: var(--app-muted);
  --text-light: var(--app-muted);
  --warning: var(--app-purple);
  --warning-light: var(--app-purple-soft);
}

body[data-app-screen] :is(
  .trust-bar,
  .time-badge,
  .warning,
  .alert-warning,
  .alert-danger,
  .m2-error,
  .m2-success,
  .pendencia,
  .status-icon,
  .timeline-body,
  [class*="bg-green-"],
  [class*="from-green-"],
  [class*="to-green-"],
  [class*="bg-red-"],
  [class*="from-red-"],
  [class*="to-red-"],
  [class*="bg-yellow-"],
  [class*="from-yellow-"],
  [class*="to-yellow-"],
  [class*="bg-amber-"],
  [class*="from-amber-"],
  [class*="to-amber-"],
  [class*="bg-[#EDE7F7]"],
  [class*="bg-[#FEE2E2]"]
) {
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-app-screen] :is(
  .trust-bar,
  .time-badge,
  .warning,
  .alert-warning,
  .alert-danger,
  .m2-error,
  .m2-success,
  .pendencia,
  .status-icon,
  .timeline-body,
  [class*="bg-green-"],
  [class*="from-green-"],
  [class*="to-green-"],
  [class*="bg-red-"],
  [class*="from-red-"],
  [class*="to-red-"],
  [class*="bg-yellow-"],
  [class*="from-yellow-"],
  [class*="to-yellow-"],
  [class*="bg-amber-"],
  [class*="from-amber-"],
  [class*="to-amber-"],
  [class*="bg-[#EDE7F7]"],
  [class*="bg-[#FEE2E2]"]
) :is(p, span, strong, b, div, svg) {
  color: var(--app-purple-dark) !important;
  -webkit-text-fill-color: var(--app-purple-dark) !important;
}

body[data-app-screen] :where(
  [class*="text-green-"],
  [class*="text-red-"],
  [class*="text-yellow-"],
  [class*="text-amber-"],
  [class*="text-[#421981]"],
  [class*="text-[#5420A4]"],
  [class*="text-[#D93025]"],
  #valor-aprovado,
  .required,
  .error-message
) {
  color: var(--app-purple-dark) !important;
  -webkit-text-fill-color: var(--app-purple-dark) !important;
}

body[data-app-screen] :is(
  [class*="border-green-"],
  [class*="border-red-"],
  [class*="border-yellow-"],
  [class*="border-amber-"],
  [class*="border-[#421981]"],
  [class*="border-[#5420A4]"],
  [class*="border-[#D4C8E8]"]
) {
  border-color: var(--app-purple) !important;
}

body[data-app-screen] :is(.text-gray-900, .text-gray-800) {
  color: var(--app-ink) !important;
  -webkit-text-fill-color: var(--app-ink) !important;
}

body[data-app-screen] :is(.text-gray-700, .text-gray-600, .text-gray-500) {
  color: var(--app-muted) !important;
  -webkit-text-fill-color: var(--app-muted) !important;
}

body[data-app-screen="advisor"] .top-badge {
  color: var(--app-white) !important;
  background: var(--app-purple) !important;
  background-image: none !important;
  border-color: var(--app-purple) !important;
  box-shadow: none !important;
}

body[data-app-screen="advisor"] .top-badge :is(svg, path) {
  color: var(--app-white) !important;
  fill: currentColor !important;
}

body[data-app-screen="advisor"] .benefits-box li::before {
  background: var(--app-purple) !important;
}

body[data-app-screen="chat"] .attendant-info p > span {
  background: var(--app-purple) !important;
}

body[data-app-screen="purpose"] :is(.status-icon.neg, .status-icon.clean) {
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="face"] :is(.consent-icon.green, .consent-icon.orange) {
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="face"] .consent-item strong {
  color: var(--app-ink) !important;
}

body[data-app-screen="face"] .cam-status {
  color: var(--app-white) !important;
  background: rgba(84,32,164, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
}

body[data-app-screen="face"] .cam-dot {
  background: var(--app-white) !important;
  box-shadow: none !important;
}

body[data-app-screen="face"] .cam-oval {
  border-color: var(--app-purple-100) !important;
  box-shadow: 0 0 0 2px rgba(84,32,164, 0.65) !important;
}

body[data-app-screen="face"] .cam-bracket {
  border-color: var(--app-purple) !important;
}

body[data-app-screen="face"] .cam-error {
  color: var(--app-white) !important;
  background: rgba(84,32,164, 0.82) !important;
}

body[data-app-screen="face"] .vf-step.done .vf-step-icon,
body[data-app-screen="face"] .vf-success-icon {
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
  border-color: var(--app-purple-100) !important;
}

body[data-app-screen="face"] .vf-step-icon {
  border-color: rgba(255, 255, 255, 0.46) !important;
}

body[data-app-screen="face"] .vf-step.done :is(strong, .vf-check),
body[data-app-screen="face"] .vf-success-icon svg {
  color: var(--app-purple) !important;
}

body[data-app-screen="contact"] :is(.form-input.error, .form-input.success) {
  border-color: var(--app-purple) !important;
}

body[data-app-screen="contact"] :is(.form-input.error, .form-input.success) + .input-icon {
  color: var(--app-purple) !important;
}

body[data-app-screen="insurance"] .modal-overlay {
  background: rgba(17, 17, 17, 0.64) !important;
}

body[data-app-screen="insurance"] .modal-icon {
  color: var(--app-purple) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="pix"] .m2-btn-copy.copied {
  color: var(--app-white) !important;
  background: var(--app-purple-dark) !important;
}

body[data-app-screen="pix"] .m2-success {
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
}

body[data-app-screen="upsell-2"] .pendencia {
  color: var(--app-purple-dark) !important;
  background: var(--app-purple-soft) !important;
  background-image: none !important;
  border-color: transparent !important;
}

body[data-app-screen="upsell-2"] .pendencia h3::before {
  color: var(--app-purple) !important;
}

body[data-app-screen="upsell-1"] :is(#nome-completo, #cpf, #data, .box > span) {
  color: var(--app-ink) !important;
}

body[data-app-screen="upsell-1"] .info-line span:last-child {
  color: var(--app-ink) !important;
}

body[data-app-screen="upsell-4"] .timeline-dot {
  background: var(--app-purple) !important;
  box-shadow: none !important;
}

body[data-app-screen="upsell-4"] .timeline-item .timeline-body {
  color: var(--app-ink) !important;
  background: var(--app-purple-soft) !important;
  border-color: transparent !important;
}

body[data-app-screen="upsell-5"] #valor-aprovado {
  color: var(--app-purple-dark) !important;
  -webkit-text-fill-color: var(--app-purple-dark) !important;
}

body[data-app-screen="upsell-6"] header .bg-green-100 {
  color: var(--app-white) !important;
  -webkit-text-fill-color: var(--app-white) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

:is(
  body[data-app-screen="purpose"] #successFeedback,
  body[data-app-screen="chat"] #loadingContainer,
  body[data-app-screen="terms"] #loadingOverlay,
  body[data-app-screen="contact"] #loadingOverlay,
  body[data-app-screen="pix"] #loading,
  body[data-app-screen="upsell-1"] #loading,
  body[data-app-screen="upsell-2"] #loading,
  body[data-app-screen="face"] .vf-overlay
) :is(h1, h2, h3, h4, p, span, strong, b, div, svg) {
  color: var(--app-white) !important;
  -webkit-text-fill-color: var(--app-white) !important;
}