/* Ajustes de contraste sobre o tema escuro já existente. Não troca a marca. */

.treasure-screen,
.account-screen,
.recharge-screen,
.withdraw-screen,
.orders-screen,
.team-screen {
  background: #08080a !important;
  color: #f5f5f7;
}

.quick button,
.quick a,
.section-head p,
.welcome p {
  color: #e4e4ea;
}

.nav {
  background: #0c0c10f2 !important;
  border-top-color: #2c2c33 !important;
}

.nav a {
  color: #c5c5ce;
}

.nav a.active {
  color: #ff304a;
}

.coupon-card,
.treasure-result,
.withdraw-balance,
.recharge-card,
.recharge-how,
.orders-tabs,
.orders-summary div,
.member-panel,
.invite-card {
  background: #121216 !important;
  color: #f5f5f7 !important;
  border-color: #3a3428 !important;
}

.coupon-label,
.recharge-label,
.withdraw-card label,
.withdraw-balance span {
  color: #f3e6c4 !important;
}

.coupon-hint,
.checkin-status-inline,
.withdraw-balance small,
.recharge-how ol,
.recharge-how li,
.reward-note,
.reward-caption {
  color: #e4d7c2 !important;
}

.coupon-input,
.recharge-amount,
.withdraw-card input,
.withdraw-card select,
.recharge-card input,
#pix-holder,
#pix-holder-cpf,
#withdraw-password,
#withdraw-key,
#withdraw-amount,
#recharge-amount {
  background: #0e0e12 !important;
  color: #f7f7f8 !important;
  border-color: #4a4336 !important;
}

.coupon-input::placeholder,
.withdraw-card input::placeholder,
.recharge-card input::placeholder {
  color: #b7b0a4;
}

.amount-options button,
.withdraw-options button {
  background: #1c1c22 !important;
  color: #f5f5f7 !important;
  border-color: #3a3a44 !important;
}

.amount-options button.active,
.withdraw-options button.active {
  background: #3a220c !important;
  color: #ffd978 !important;
  border-color: #e6a323 !important;
}

.orders-tabs {
  background: #1a1a20 !important;
}

.orders-tabs button,
.orders-tabs a {
  color: #c8c8d0 !important;
}

.orders-tabs button.active,
.orders-tabs a.active {
  background: #2a1218 !important;
  color: #ffb3bc !important;
}

.member-row {
  border-bottom-color: #2a2a31 !important;
}

.member-id,
.member-money,
.order-title,
.order-price,
.account-menu a,
.account-menu button,
.account-action {
  color: #f5f5f7 !important;
}

.order-meta,
.member-status {
  color: #c8c8d2 !important;
}

.recharge-how h3 {
  color: #ffd978 !important;
}

.treasure-result {
  background: linear-gradient(180deg, #2a2112, #121216) !important;
  border-color: #8a6a32 !important;
}

.reward-value {
  color: #ffd978 !important;
}

.treasure-open-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.checkin-status-inline {
  display: block;
  min-height: 1.3em;
}

.account-cover-new {
  position: static !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 14px 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
}

.account-cover-new .account-cover-image,
.account-cover-new .mf-carousel {
  width: 100%;
  aspect-ratio: 16 / 7;
  height: auto;
  max-height: none;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 35, 55, 0.35);
  display: block;
}

.account-identity-card {
  background: #121216;
  border: 1px solid #3a3428;
  border-radius: 16px;
  padding: 14px 16px 16px;
  display: grid;
  gap: 6px;
}

.account-phone-on-cover {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  display: block;
  width: auto;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #e4d7c2 !important;
  font-size: 13px !important;
  font-weight: 700;
  text-shadow: none !important;
}

.account-balance-on-cover {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  max-width: none !important;
  z-index: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f5f5f7 !important;
  text-shadow: none !important;
}

.account-balance-on-cover span {
  color: #b7b0a4 !important;
  font-size: 12px;
}

.account-balance-on-cover strong {
  color: #ffd978 !important;
  font-size: 28px !important;
  line-height: 1.1;
}

.account-checkin-button:disabled {
  background: #2a1218 !important;
  color: #ffd0d6 !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: default;
}

main.app {
  padding-bottom: 120px !important;
}

.account-screen,
.treasure-screen,
.recharge-screen,
.withdraw-screen,
.orders-screen,
.team-screen {
  padding-bottom: 28px;
}

.chest-art {
  transform-origin: 50% 80%;
}

.chest-art.opening {
  animation: chestOpen 1.05s ease forwards !important;
}

.treasure-result .reward-caption,
.treasure-result .reward-value,
.treasure-result .reward-note {
  opacity: 0;
}

.treasure-result.revealed .reward-caption,
.treasure-result.revealed .reward-value,
.treasure-result.revealed .reward-note {
  animation: prizeIn 0.45s ease forwards;
}

@keyframes chestOpen {
  0% { transform: translateY(0) scale(1) rotate(0); filter: brightness(1); }
  18% { transform: translateY(2px) scale(1.02) rotate(-4deg); }
  36% { transform: translateY(-2px) scale(1.03) rotate(4deg); }
  58% { transform: translateY(-16px) scale(1.08) rotate(0); filter: brightness(1.35); }
  100% { transform: translateY(-6px) scale(1.04); filter: brightness(1.12); }
}

@keyframes prizeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

#coupon-message {
  color: #ffb4be !important;
}

#coupon-message.is-ok {
  color: #ffe09a !important;
}

.account-menu a,
.account-menu button {
  background: #121216 !important;
  color: #f5f5f7 !important;
  border-top: 1px solid #2a2a31;
}

#account-logout {
  color: #ffb4be !important;
}

.account-menu .menu-icon,
.account-action span {
  background: #2a1218 !important;
  color: #ff8a98 !important;
}

.copy-value,
.invite-link {
  background: #0e0e12 !important;
  color: #ffe7b0 !important;
  border-color: #4a4336 !important;
}

.copy-btn {
  color: #ffd978 !important;
  background: transparent !important;
}

.withdraw-balance strong,
.account-balance strong {
  color: #ffd978 !important;
}

.withdraw-info,
.withdraw-info h2,
.withdraw-info li,
.withdraw-info p {
  background: #1c1812 !important;
  color: #f3e6c4 !important;
  border-color: #4a3d28 !important;
}

#save-pix-key,
.delete-pix-key {
  background: #241016 !important;
  color: #ffb4be !important;
  border: 1px solid #5c2430 !important;
}

.member-status {
  color: #0d3b22 !important;
}

.order-status.pending {
  color: #4a2806 !important;
}

.order-status.done {
  color: #0d4a28 !important;
}

.order-icon {
  background: #2a161b !important;
  color: #ff8a98 !important;
}

.order-icon.dark {
  background: #1c1c22 !important;
  color: #e4e4ea !important;
}

.order-icon.gold {
  background: #3a2a10 !important;
  color: #ffd978 !important;
}

.earning {
  color: #ff8a98 !important;
}

#hw-welcome {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #050506c7;
  backdrop-filter: blur(6px);
}

#hw-welcome.is-out {
  animation: hwWelcomeOut 0.22s ease forwards;
}

.hw-welcome-card {
  width: min(100%, 420px);
  max-height: min(86vh, 720px);
  overflow: auto;
  position: relative;
  background: linear-gradient(180deg, #1a1216 0%, #101014 42%);
  color: #f7f1e8;
  border: 1px solid #6a2430;
  border-radius: 22px;
  padding: 28px 22px 18px;
  box-shadow: 0 24px 60px #000c;
  animation: hwWelcomeIn 0.28s ease;
}

.hw-welcome-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 1px solid #4a3036;
  border-radius: 50%;
  background: #120c10;
  color: #f5f5f7;
  font-size: 20px;
  line-height: 1;
}

.hw-welcome-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #e81936, #8d1024);
  color: #fff8e8;
  font-size: 26px;
  box-shadow: 0 8px 18px #e8193640;
}

.hw-welcome-card h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.3px;
}

.hw-welcome-copy {
  display: grid;
  gap: 10px;
}

.hw-welcome-card p,
.hw-welcome-card li {
  margin: 0;
  color: #f0e4d4;
  font-size: 15px;
  line-height: 1.55;
}

.hw-welcome-card ol,
.hw-welcome-card ul {
  margin: 4px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.hw-welcome-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.hw-welcome-card a,
.hw-welcome-close {
  display: block;
  width: 100%;
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  padding: 13px 14px;
}

.hw-welcome-card a {
  border: 0;
  color: #fff;
  background: linear-gradient(110deg, #ff3048, #c8102e);
  box-shadow: 0 8px 18px #c8102e40;
}

.hw-welcome-close {
  border: 1px solid #5a4048;
  background: transparent;
  color: #f0d6dc;
}

#hw-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 100002;
  width: min(92vw, 420px);
  padding: 12px 14px;
  border-radius: 14px;
  background: #1a1014;
  color: #fff6ea;
  border: 1px solid #e81936;
  box-shadow: 0 12px 30px #000a;
  font-size: 14px;
  line-height: 1.4;
}

#hw-toast[hidden] {
  display: none !important;
}

@keyframes hwWelcomeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes hwWelcomeOut {
  to { opacity: 0; }
}

@media (max-width: 640px) {
  #hw-welcome { padding: 12px; align-items: flex-end; }
  .hw-welcome-card { width: 100%; border-radius: 20px 20px 16px 16px; }
}

.orders-list[hidden],
#orders-empty[hidden] {
  display: none !important;
}

.level-card[data-level="1"] {
  background: #7a1020 !important;
  color: #fff6ea !important;
}

.level-card[data-level="2"] {
  background: #17171c !important;
  color: #f5f5f7 !important;
}

.level-card[data-level="3"],
.level-card[data-level="4"] {
  background: #3a2a12 !important;
  color: #ffe7a8 !important;
}

.level-card .level-rate,
.level-card .level-desc,
.level-card .level-count,
.level-card .level-top {
  color: inherit !important;
}

.orders-more {
  border: 1px solid #3a3428;
  background: #121216;
  color: #ffd978;
  border-radius: 12px;
  padding: 12px;
  font-weight: 800;
}

.invite-badge {
  background: #2a1218 !important;
  color: #ffb4be !important;
}

.mf-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 18px;
  overflow: hidden;
  background: #121216;
}

.mf-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s ease;
}

.mf-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
}

.mf-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mf-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #08080acc;
  color: #ffe7b0;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  z-index: 2;
}

.mf-arrow.prev { left: 8px; }
.mf-arrow.next { right: 8px; }

.mf-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.mf-dots button {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: #ffffff88;
  padding: 0;
}

.mf-dots button.on {
  background: #ffd978;
}

#hero.mf-has-banners,
.recharge-hero.mf-has-banners,
.withdraw-hero.mf-has-banners,
.treasure-screen .mf-carousel {
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
}

.mf-banner-caption {
  margin: 12px 14px 0;
  color: #f5f5f7;
}

.mf-banner-caption h1 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.15;
}

.mf-banner-caption p,
.mf-banner-caption .eyebrow {
  margin: 0;
  color: #e4d7c2;
  font-size: 12px;
}

.orders-hero .mf-carousel,
.team-hero .mf-carousel,
#hero .mf-carousel {
  border-radius: 18px;
}

.treasure-screen > .mf-carousel {
  margin: 0 14px 14px;
  width: calc(100% - 28px);
}

.recharge-hero.mf-has-banners,
.withdraw-hero.mf-has-banners,
#hero.mf-has-banners {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.level-card .level-rate {
  display: grid;
  gap: 1px;
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
}

.level-card .level-desc {
  font-size: 11px;
  line-height: 1.4;
}