/* =========================================================
   THREADS + TIKTOK CLEAN THEME
   Fundo branco, textos pretos e botões vermelhos TikTok.
   Aplicado apenas via CSS.
   ========================================================= */
:root{
  --threads-bg:#ffffff;
  --threads-surface:#ffffff;
  --threads-soft:#f7f7f8;
  --threads-soft-2:#f1f1f2;
  --threads-text:#000000;
  --threads-muted:#4b5563;
  --threads-border:#e5e7eb;
  --threads-shadow:0 8px 28px rgba(0,0,0,.06);
  --tiktok-red:#fe2c55;
  --tiktok-red-dark:#e91f49;
  --tiktok-cyan:#25f4ee;
}

html,
body{
  background:var(--threads-bg)!important;
  background-color:var(--threads-bg)!important;
  background-image:none!important;
  color:var(--threads-text)!important;
}

body,
body *{
  color:var(--threads-text)!important;
  border-color:var(--threads-border)!important;
  text-shadow:none!important;
}

/* Áreas e containers */
#one,
#screens,
.screen,
.content,
.white,
.logo-container,
.circle-overlay,
main,
section,
article,
.container,
.wrapper,
.box,
.card,
.saldo,
.login-container,
.modal,
.popup,
.form,
.form-box,
.quiz-container,
.page,
.elementor-section,
.elementor-container,
.elementor-widget-wrap{
  background:var(--threads-bg)!important;
  background-color:var(--threads-bg)!important;
  background-image:none!important;
  color:var(--threads-text)!important;
}

.card,
.saldo,
.login-container,
.modal,
.popup,
.box,
.quiz-container,
.elementor-widget-container{
  border:1px solid var(--threads-border)!important;
  box-shadow:var(--threads-shadow)!important;
}

/* Topos, barras e rodapés */
header,
.header,
.footer,
.navbar,
.topbar,
.menu,
.bottom-bar,
.bottom-nav{
  background:var(--threads-bg)!important;
  background-color:var(--threads-bg)!important;
  background-image:none!important;
  color:var(--threads-text)!important;
  border-color:var(--threads-border)!important;
}

/* Textos */
a,
p,
span,
div,
label,
small,
strong,
b,
h1,
h2,
h3,
h4,
h5,
h6,
li,
td,
th,
.title,
.titulo-login,
.saldo-text,
.saldo-label,
.valor-currency,
.valor-int,
.valor-dec{
  color:var(--threads-text)!important;
}

.saldo-label,
.subtitle,
.description,
.muted,
small{
  color:var(--threads-muted)!important;
}

/* Inputs */
input,
textarea,
select{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:#000!important;
  border:1px solid var(--threads-border)!important;
  box-shadow:none!important;
  outline:none!important;
}

input::placeholder,
textarea::placeholder{
  color:#6b7280!important;
}

input:focus,
textarea:focus,
select:focus{
  border-color:#000!important;
  box-shadow:0 0 0 3px rgba(0,0,0,.08)!important;
}

/* Botões e CTAs: vermelho TikTok */
button,
.btn,
.button,
.login-button,
.btn-sacar,
input[type="button"],
input[type="submit"],
a.btn,
a.button,
[role="button"],
.elementor-button,
.wp-block-button__link{
  background:var(--tiktok-red)!important;
  background-color:var(--tiktok-red)!important;
  background-image:none!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 8px 20px rgba(254,44,85,.22)!important;
  text-shadow:none!important;
}

button *,
.btn *,
.button *,
.login-button *,
.btn-sacar *,
input[type="button"],
input[type="submit"],
a.btn *,
a.button *,
[role="button"] *,
.elementor-button *{
  color:#fff!important;
}

button:hover,
.btn:hover,
.button:hover,
.login-button:hover,
.btn-sacar:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.btn:hover,
a.button:hover,
[role="button"]:hover,
.elementor-button:hover{
  background:var(--tiktok-red-dark)!important;
  background-color:var(--tiktok-red-dark)!important;
  transform:translateY(-1px);
}

/* Seleções/etapas/badges */
.active,
.selected,
.checked,
.is-active,
.badge,
.tag,
.pix-badge,
.step.active,
.option.selected{
  border-color:var(--tiktok-red)!important;
}

.badge,
.tag{
  background:rgba(254,44,85,.08)!important;
  color:var(--threads-text)!important;
}

/* Remove roxo/gradientes pesados mantendo leitura limpa */
.square,
.squares .square{
  background:rgba(254,44,85,.18)!important;
}

hr,
.divider{
  border-color:var(--threads-border)!important;
  background:var(--threads-border)!important;
}

svg,
svg *{
  color:inherit!important;
}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:#fff;}
::-webkit-scrollbar-thumb{background:#000;border-radius:999px;}