/* =========================================================
   Picinin Theme — Lottu Palette (Light + Dark)
   ========================================================= */

:root {
  --theme-primary:        #F6921E;
  --theme-primary-dark:   #ca7819;
  --theme-primary-darker: #a05f14;
  --theme-primary-light:  #f79f39;
  --theme-accent-gold:    #FBC82D;
  --theme-accent-orange:  #F25D0F;
  --theme-primary-soft:   #F6921E14;
  --theme-primary-soft-border: #F6921E44;

  --bg-page:       #F8F9FB;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #F3F4F6;
  --bg-surface-3:  #F3F4F6;
  --bg-invert:     #111827;

  --border:        #E5E7EB;
  --border-2:      #D1D5DB;

  --text:          #111827;
  --text-2:        #4B5563;
  --text-3:        #6B7280;
  --text-dis:      #9CA3AF;
  --text-onbrand:  #0C0C0D;
  --text-hi:       #111827;

  --success: #16A34A;
  --error:   #DC2626;
  --warn:    #D97706;
  --info:    #2563EB;

  --ring-primary: #F6921E80;
}

html[data-theme="dark"] {
  --theme-primary-soft:   #F6921E1F;
  --theme-primary-dark-soft: #F6921E22;
  --theme-primary-soft-border: #F6921E66;

  --bg-page:       #1A1B1D;
  --bg-surface:    #222427;
  --bg-surface-2:  #2A2D31;
  --bg-surface-3:  #202123;
  --bg-invert:     #DADDE5;

  --border:        rgba(224,226,242,0.09);
  --border-2:      rgba(224,226,242,0.18);

  --text:          #D1D3DB;
  --text-2:        #9599A6;
  --text-3:        #666B75;
  --text-dis:      #5A5E68;
  --text-onbrand:  #0C0C0D;
  --text-hi:       #F5F9FE;

  --success: #33C192;
  --error:   #F65A5A;
  --warn:    #DC8730;
  --info:    #59A4F9;
  --brand-green: #0FDC78;

  --ring-primary: #F6921E66;
}

/* ---------- Core layout ---------- */
html, body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}
body {
  background-color: var(--bg-page) !important;
  color: var(--text) !important;
  min-height: 100vh;
  min-height: 100dvh;
  transition: background-color .25s ease, color .25s ease;
}

button, a.btn, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Primary / Yellow legacy overrides ---------- */
.bg-yellow-500,
.bg-yellow-400,
.bg-yellow-600 { background-color: var(--theme-primary) !important; }
header.bg-yellow-500,
footer.bg-yellow-500 { background-color: var(--theme-primary) !important; }
span.bg-yellow-500,
.inline-block.bg-yellow-500 { background-color: var(--theme-primary) !important; }
.text-yellow-500,
.text-yellow-600,
.text-yellow-700,
.text-yellow-400 { color: var(--theme-primary) !important; }
.border-yellow-500,
.border-yellow-400 { border-color: var(--theme-primary) !important; }
.ring-yellow-500 { --tw-ring-color: var(--theme-primary) !important; }
.from-yellow-500 { --tw-gradient-from: var(--theme-primary) !important; }
.via-yellow-500  { --tw-gradient-via:  var(--theme-primary) !important; }
.to-yellow-500   { --tw-gradient-to:   var(--theme-primary) !important; }

.bg-primary-yellow { background-color: var(--theme-primary) !important; }
.text-primary-yellow { color: var(--theme-primary) !important; }
.border-primary-yellow { border-color: var(--theme-primary) !important; }
.bg-primary-orange { background-color: var(--theme-primary-dark) !important; }
.text-primary-orange { color: var(--theme-primary-dark) !important; }
.bg-primary-green { background-color: var(--success) !important; }
.text-primary-green { color: var(--success) !important; }

.hover\:bg-yellow-600:hover { background-color: var(--theme-primary-dark) !important; filter: none; }
.hover\:text-yellow-600:hover { color: var(--theme-primary-dark) !important; filter: none; }
.focus\:ring-yellow-500:focus { --tw-ring-color: var(--ring-primary) !important; }

/* ---------- Surface / Backgrounds ---------- */
.bg-white { background-color: var(--bg-surface) !important; }
.bg-gray-50  { background-color: var(--bg-surface-2) !important; }
.bg-gray-100 { background-color: var(--bg-surface-2) !important; }
.bg-gray-200 { background-color: var(--border) !important; }

html[data-theme="dark"] .bg-white  { background-color: var(--bg-surface) !important; }
html[data-theme="dark"] .bg-gray-50{ background-color: var(--bg-surface-2) !important; }
html[data-theme="dark"] .bg-gray-100{ background-color: var(--bg-surface-2) !important; }
html[data-theme="dark"] .bg-gray-200{ background-color: var(--border) !important; }

/* ---------- Hover / Active surface states ---------- */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-slate-50:hover { background-color: var(--bg-surface-2) !important; }

.hover\:bg-white:hover { background-color: var(--bg-surface) !important; }

.hover\:bg-gray-200:hover { background-color: var(--border) !important; }

.active\:bg-gray-50:active,
.active\:bg-gray-100:active,
.active\:bg-slate-50:active { background-color: var(--bg-surface-3) !important; }

.hover\:bg-red-50:hover { background-color: color-mix(in srgb, var(--error, #ef4444) 12%, var(--bg-surface) ) !important; }
.active\:bg-red-100:active { background-color: color-mix(in srgb, var(--error, #ef4444) 20%, var(--bg-surface) ) !important; }

.hover\:bg-yellow-50:hover { background-color: var(--theme-primary-soft) !important; }
.active\:bg-yellow-100:active { background-color: var(--theme-primary-soft-border) !important; }

html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: var(--bg-surface-2) !important; }

html[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--bg-surface) !important; }

html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--border) !important; }

html[data-theme="dark"] .active\:bg-gray-50:active,
html[data-theme="dark"] .active\:bg-gray-100:active,
html[data-theme="dark"] .active\:bg-slate-50:active { background-color: var(--bg-surface-3) !important; }

html[data-theme="dark"] .hover\:bg-red-50:hover { background-color: color-mix(in srgb, var(--error, #ef4444) 20%, var(--bg-surface) ) !important; }
html[data-theme="dark"] .active\:bg-red-100:active { background-color: color-mix(in srgb, var(--error, #ef4444) 30%, var(--bg-surface) ) !important; }

/* ---------- Cards / containers ---------- */
.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-md, .rounded {
  background-color: inherit;
}
.shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.08); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.09), 0 2px 4px -2px rgba(0,0,0,.09); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg { box-shadow: none; }

/* ---------- Borders ---------- */
.border        { border-color: var(--border) !important; }
.border-2      { border-color: var(--border-2) !important; }
.border-t      { border-top-color: var(--border) !important; }
.border-b      { border-bottom-color: var(--border) !important; }
.border-l      { border-left-color: var(--border) !important; }
.border-r      { border-right-color: var(--border) !important; }
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.divide-x > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* ---------- Text colors ---------- */
.text-gray-900, .text-black { color: var(--text) !important; }
.text-gray-800 { color: var(--text) !important; }
.text-gray-700 { color: var(--text) !important; }
.text-gray-600 { color: var(--text-2) !important; }
.text-gray-500 { color: var(--text-3) !important; }
.text-gray-400 { color: var(--text-dis) !important; }
.text-gray-300 { color: var(--text-dis) !important; }
.text-white    { color: var(--text-hi) !important; }
html[data-theme="dark"] .text-black { color: var(--text-hi) !important; }
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700 { color: var(--text-hi) !important; }
html[data-theme="dark"] .text-gray-600 { color: var(--text-2) !important; }
html[data-theme="dark"] .text-gray-500 { color: var(--text-3) !important; }
html[data-theme="dark"] .text-gray-400 { color: var(--text-dis) !important; }
html[data-theme="dark"] .text-white { color: var(--text-hi) !important; }

.text-green-500, .text-green-600, .text-green-700 { color: var(--success) !important; }
.text-red-500,   .text-red-600,   .text-red-700   { color: var(--error) !important; }
.text-orange-500,.text-orange-600,.text-orange-700{ color: var(--warn) !important; }
.text-blue-500,  .text-blue-600,  .text-blue-700  { color: var(--info) !important; }

.bg-green-500, .bg-green-600 { background-color: var(--success) !important; }
.bg-red-500,   .bg-red-600   { background-color: var(--error) !important; }
.bg-orange-500,.bg-orange-600{ background-color: var(--warn) !important; }
.bg-blue-500,  .bg-blue-600  { background-color: var(--info) !important; }

/* ---------- Inputs / Forms ---------- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="url"],
textarea,
select {
  background-color: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-dis) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--theme-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-primary);
}
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-2) !important;
}

/* ---------- Buttons ---------- */
button, .btn, a[role="button"] {
  transition: filter .15s ease, transform .1s ease, background-color .15s ease;
}
button:disabled, .btn:disabled, input:disabled { opacity: .55; cursor: not-allowed !important; }

.bg-primary, .btn-primary {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
  border-color: transparent !important;
  font-weight: 600;
}
.bg-primary:hover, .btn-primary:hover { filter: brightness(0.92); }
.bg-primary:active,.btn-primary:active { transform: translateY(1px); }

/* ---------- Navbar / header / footer — Picinin Bottom Nav Professional ---------- */
.pwa-footer {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border) !important;
  box-shadow:
    0 -6px 24px -8px rgba(0, 0, 0, 0.08),
    0 -1px 0 0 rgba(255,255,255,0.5) inset;
  padding-top: 0 !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  z-index: 40;
  position: sticky;
  bottom: 0;
}
html[data-theme="dark"] .pwa-footer {
  box-shadow:
    0 -6px 28px -10px rgba(0, 0, 0, 0.6),
    0 -1px 0 0 rgba(255,255,255,0.04) inset;
  border-top-color: var(--border) !important;
}

.pwa-footer > div { padding-top: 4px !important; }

.picinin-nav-wrap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  justify-items: center;
  padding: 6px 4px 2px;
  gap: 2px;
}

.picinin-nav-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 80px;
  padding: 8px 4px 6px;
  border-radius: 14px;
  color: var(--text-3);
  text-decoration: none;
  transition:
    color .22s ease,
    background-color .22s ease,
    transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.picinin-nav-item:active { transform: scale(0.94); }
.picinin-nav-item:hover {
  color: var(--text-2);
  background-color: var(--bg-surface-2);
}
.picinin-nav-item i {
  font-size: 19px;
  line-height: 1;
  margin-bottom: 5px;
  transition: transform .22s ease, color .22s ease;
}
.picinin-nav-item span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
  transition: color .22s ease;
}

.picinin-nav-item.nav-active {
  color: #fff;
  background-image: linear-gradient(135deg, #F6921E 0%, #F25D0F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 20px -10px rgba(242,93,15,.85);
  border-radius: 16px;
  transform: translateY(-2px);
}
html[data-theme="dark"] .picinin-nav-item.nav-active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 26px -12px rgba(242,93,15,.75);
}
.picinin-nav-item.nav-active i {
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  color: #fff;
}
.picinin-nav-item.nav-active span {
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---------- Picinin Section Headings (hierarquia profissional) ---------- */

.picinin-section-eyebrow {
  margin: 0 0 4px 0;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--text-hi) 45%, transparent);
}

.picinin-section-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-hi);
}

/* ---------- Picinin Premium Cards (clean, hover suave) ---------- */

.quick-actions-premium-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 380px) {
  .quick-actions-premium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .quick-action-premium { min-height: 135px; }
}

.quick-action-premium,
.game-premium-card,
.picinin-invite-premium {
  position: relative;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--theme-primary-dark) 22%, transparent);
  border-radius: 18px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
  cursor: pointer;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

.quick-action-premium {
  padding: 18px 10px;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 18px;
}

.game-premium-card {
  overflow: hidden;
  border-radius: 18px;
}
.game-premium-card img,
.game-premium-card > div,
.game-premium-card > * {
  display: block;
  border-radius: 17px;
}

.picinin-invite-premium {
  width: 100%;
  padding: 14px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.quick-action-premium::before,
.game-premium-card::before,
.picinin-invite-premium::before {
  content: "";
  position: absolute;
  top: 0; left: 30%; right: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-primary-dark) 32%, transparent), transparent);
  pointer-events: none;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  z-index: 2;
  opacity: .85;
}
.game-premium-card::before { left: 28%; right: 28%; }
.picinin-invite-premium::before { left: 28%; right: 28%; z-index: 2; }

.quick-action-premium-icon {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  transition: transform 0.2s ease;
}
.quick-action-premium-icon i {
  font-size: 32px;
  color: var(--theme-primary-dark);
}
.quick-action-premium-title {
  color: var(--text-hi);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}
.quick-action-premium-desc {
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.3;
  margin: 0;
}

@media (hover: hover) {
  .quick-action-premium:hover,
  .game-premium-card:hover,
  .picinin-invite-premium:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--theme-primary-dark) 55%, transparent);
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--theme-primary-dark) 35%, #000 10%);
    background-color: color-mix(in srgb, var(--theme-primary-dark) 3.5%, transparent);
  }
  .quick-action-premium:hover .quick-action-premium-icon { transform: scale(1.04); }
}

.quick-action-premium:active,
.game-premium-card:active,
.picinin-invite-premium:active { transform: scale(0.98); }

.picinin-invite-icon-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}
.picinin-invite-icon-wrap i {
  font-size: 32px;
  background: linear-gradient(180deg, #F0C75E 0%, #D4AF37 55%, #9F7B20 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.14));
}
.picinin-invite-texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-align: center;
}
.picinin-invite-title {
  color: var(--text-hi);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.picinin-invite-sub {
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.25;
  margin: 0;
}
@media (max-width: 420px) {
  .picinin-invite-premium { padding: 12px 16px; gap: 12px; }
  .picinin-invite-icon-wrap { width: 38px; height: 38px; }
  .picinin-invite-icon-wrap i { font-size: 26px; }
  .picinin-invite-texts { gap: 3px; }
  .picinin-invite-title { font-size: 15px; }
  .picinin-invite-sub { font-size: 11.5px; }
}

/* ---------- Tableaux ---------- */
table { color: var(--text) !important; background-color: transparent !important; }
thead, th { color: var(--text-2) !important; }
tr:nth-child(even) td { background-color: transparent; }
html[data-theme="dark"] tbody tr { border-color: var(--border) !important; }

/* ---------- Scrollbar ---------- */
.pwa-main::-webkit-scrollbar,
::-webkit-scrollbar { width: 0px; height: 0px; display: none; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: transparent; }

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html, body, .pwa-main, .max-w-lg, .max-w-sm, main, section, div[class*="max-w-"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ---------- Legacy style.css overrides (amarelo → Laranja Lottu) ---------- */
.header {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)) !important;
  color: var(--text-onbrand) !important;
}
.btn-yellow {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)) !important;
  color: var(--text-onbrand) !important;
}
.btn-yellow:hover {
  background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary)) !important;
}
.balance-section,
.game-card,
.btn-green {
  background: linear-gradient(135deg, #16A34A, #22C55E) !important;
}
.date-card {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)) !important;
  color: var(--text-onbrand) !important;
}
.search-box:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 5px var(--ring-primary) !important;
}
.palpite-input:focus { border-color: var(--theme-primary) !important; }
.palpite-item {
  background: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}
.palpite-item:hover { background: var(--theme-primary-dark) !important; }
.value-btn:hover {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}
.bet-number {
  background: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}
.lottery-item:hover { border-color: var(--theme-primary) !important; }
.ticket-logo { color: var(--theme-primary) !important; }
.ticket-number {
  background: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}
.list-item:hover { border-color: var(--theme-primary) !important; }

/* ---------- Extended palette missing classes (bet pills, filters, yellow scales) ---------- */
.bg-yellow-50   { background-color: var(--theme-primary-soft) !important; color: var(--text) !important; }
.bg-yellow-100  { background-color: var(--theme-primary-soft) !important; color: var(--text) !important; }
.bg-yellow-200  { background-color: var(--theme-primary-soft) !important; color: var(--text) !important; border-color: var(--theme-primary) !important; }
.border-yellow-200 { border-color: var(--theme-primary-soft-border) !important; }
.border-yellow-100 { border-color: var(--theme-primary-soft-border) !important; }

.bg-amber-50,
.bg-amber-100,
.bg-amber-200,
.bg-amber-50\/40,
.bg-orange-50,
.bg-orange-100 { background-color: var(--theme-primary-soft) !important; color: var(--text) !important; }

html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-yellow-100,
html[data-theme="dark"] .bg-yellow-200,
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-orange-50 {
  background-color: var(--theme-primary-dark-soft) !important;
  color: var(--text-hi) !important;
  border-color: var(--theme-primary) !important;
}

/* Cards / panels with explicit color tokens used inline */
.text-\[\#FDB913\], .text-\[\#fdb913\], .text-\[FDB913\] { color: var(--theme-primary) !important; }
.bg-\[\#FDB913\], .bg-\[\#fdb913\], .bg-\[FDB913\] { background-color: var(--theme-primary) !important; color: var(--text-onbrand) !important; }
.border-\[\#FDB913\], .border-\[\#fdb913\] { border-color: var(--theme-primary) !important; }
.text-\[\#F6921E\] { color: var(--theme-primary) !important; }
.bg-\[\#F6921E\] { background-color: var(--theme-primary) !important; color: var(--text-onbrand) !important; }

/* --- filter-pill (extrato.php e outros) --- */
.filter-pill {
  background-color: var(--bg-surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.filter-pill.active {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
  border-color: var(--theme-primary) !important;
}
html[data-theme="dark"] .filter-pill {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-hi) !important;
}
html[data-theme="dark"] .filter-pill.active {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}

/* --- Tab active / sheet-item (calculadora.php, saque.php key-option, etc.) --- */
.tab-active {
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
  font-weight: 600;
}
.sheet-item.selected { color: var(--theme-primary) !important; font-weight: 600; }
.key-option.selected {
  border-color: var(--theme-primary) !important;
  background-color: var(--theme-primary-soft) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .key-option.selected {
  background-color: var(--theme-primary-dark-soft) !important;
  color: var(--text-hi) !important;
}

/* --- bet-cursor, login-ring, spin (apostar.js/calculadora) --- */
.bet-cursor { background-color: var(--theme-primary) !important; }
.login-ring {
  border: 3px solid var(--border) !important;
  border-top-color: var(--theme-primary) !important;
}

/* --- toggle switch (permissoes.php, sonhos.php checkbox custom) --- */
.toggle-switch.active { background-color: var(--theme-primary) !important; }
.custom-checkbox.checked {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}

/* --- Sonhos/horoscopo component classes --- */
.dream-input {
  background-color: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}
.dream-input:focus {
  border-color: var(--theme-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ring-primary) !important;
}
html[data-theme="dark"] .dream-input {
  background-color: var(--bg-surface-2) !important;
}
.send-btn, .dream-chip, .bet-btn {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}
.message-bubble.user {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}
html[data-theme="dark"] .message-bubble.user {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}

/* --- Chips/palpite-box (apostar.js) bg-yellow-50 border-primary-yellow rounded-lg --- */
[data-palpite-idx],
.chip-number,
.bet-chip {
  background-color: var(--theme-primary-soft) !important;
  color: var(--text) !important;
  border-color: var(--theme-primary) !important;
}
[data-palpite-idx] span,
.chip-number span,
.bet-chip span {
  color: var(--text) !important;
}
html[data-theme="dark"] [data-palpite-idx],
html[data-theme="dark"] .chip-number,
html[data-theme="dark"] .bet-chip {
  background-color: var(--theme-primary-dark-soft) !important;
  border-color: var(--theme-primary) !important;
  color: var(--text-hi) !important;
}
html[data-theme="dark"] [data-palpite-idx] span,
html[data-theme="dark"] .chip-number span,
html[data-theme="dark"] .bet-chip span {
  color: var(--text-hi) !important;
}
/* Chip inner close btn (trash icon) — preserve red bg, but fix white border in dark */
[data-palpite-idx] button[onclick^="removePalpite"],
.bet-chip button[onclick^="removePalpite"],
.chip-number button {
  border-color: var(--theme-primary-soft-border) !important;
}
html[data-theme="dark"] [data-palpite-idx] button[onclick^="removePalpite"],
html[data-theme="dark"] .bet-chip button[onclick^="removePalpite"],
html[data-theme="dark"] .chip-number button {
  border-color: var(--bg-surface-2) !important;
}

/* --- Prize cards check grid (apostar.js prizesCheckGrid .selected) --- */
#prizesCheckGrid > div,
#prizesCheckGrid > label {
  background-color: var(--bg-surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
#prizesCheckGrid > div.selected,
#prizesCheckGrid > label.selected {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
  border-color: var(--theme-primary) !important;
}
html[data-theme="dark"] #prizesCheckGrid > div,
html[data-theme="dark"] #prizesCheckGrid > label {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-hi) !important;
  border-color: var(--border-2) !important;
}
html[data-theme="dark"] #prizesCheckGrid > div.selected,
html[data-theme="dark"] #prizesCheckGrid > label.selected {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
  border-color: var(--theme-primary) !important;
}

/* --- Valendo panel / bet mode selector labels (apostar.js inline) --- */
.bg-yellow-50.border.border-yellow-200.rounded-lg.p-3,
.valendo-info-box,
.valendo-tip {
  background-color: var(--theme-primary-soft) !important;
  border-color: var(--theme-primary-soft-border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .bg-yellow-50.border.border-yellow-200.rounded-lg.p-3,
html[data-theme="dark"] .valendo-info-box,
html[data-theme="dark"] .valendo-tip {
  background-color: var(--theme-primary-dark-soft) !important;
  border-color: rgba(246,146,30,0.25) !important;
  color: var(--text-hi) !important;
}
.bet-mode-label.selected,
label.flex.items-center.gap-3.p-3.border-2[class*="border-primary-yellow"] {
  background-color: var(--theme-primary-soft) !important;
  border-color: var(--theme-primary) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .bet-mode-label.selected,
html[data-theme="dark"] label.flex.items-center.gap-3.p-3.border-2[class*="border-primary-yellow"] {
  background-color: var(--theme-primary-dark-soft) !important;
  border-color: var(--theme-primary) !important;
  color: var(--text-hi) !important;
}

/* --- Horoscopo primary-btn / share / sonhos send --- */
.bet-btn {
  background-color: var(--theme-primary) !important;
  color: var(--text-onbrand) !important;
}
.bet-btn:hover { filter: brightness(0.92); }

/* --- Generic bg-white/black/neutral + explicit text contrast guard --- */
.bg-black, html[data-theme="light"] .bg-black { background-color: #111111 !important; color: #ffffff !important; }
html[data-theme="dark"] .bg-black { background-color: var(--bg-invert) !important; color: var(--text-hi) !important; }

/* --- Step bars (saque.php) --- */
.step-bar { background-color: var(--theme-primary) !important; }

/* ========== PREMIUM CLEAN STEP BARS (Lottu Style) — NÃO BOLINHAS ========== */
/* Garante que progresso SEMPRE será barrinha horizontal (nunca círculo/bola) */
.picinin-step-bar,
#progressBarWrap > div[id^="progress-"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 6px !important;
  min-height: 6px !important;
  max-height: 6px !important;
  display: block !important;
  flex: 1 1 0% !important;
  flex-shrink: 1 !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
}
/* Remove qualquer tentativa de fazer bola (width=height) via classes Tailwind antigas */
#progressBarWrap > div[id^="progress-"].h-1,
#progressBarWrap > div[id^="progress-"].h-2,
#progressBarWrap > div[id^="progress-"].h-3,
#progressBarWrap > div[id^="progress-"].w-1,
#progressBarWrap > div[id^="progress-"].w-2,
#progressBarWrap > div[id^="progress-"].w-3,
#progressBarWrap > div[id^="progress-"].w-8,
#progressBarWrap > div[id^="progress-"].w-10,
#progressBarWrap > div[id^="progress-"].w-12,
#progressBarWrap > div[id^="progress-"].rounded-full.w-*,
#progress-[id].h-*.w-* {
  width: auto !important;
  height: 6px !important;
  border-radius: 9999px !important;
  aspect-ratio: auto !important;
}
html[data-theme="dark"] #progressBarWrap > div[id^="progress-"] {
  background-color: var(--bg-surface-2, #222427) !important;
}
#progressCountLabel {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
#progressCountLabel span {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* --- Extrato history dots --- */
.ba-dot { background-color: var(--theme-primary) !important; }

/* ---------- Premium Guess Box (Milhar / Centena input container — apostar.php #guessWrapper) ---------- */
html body #guessWrapper,
#guessWrapper[id],
#guessWrapper[class] {
  background-color: var(--bg-surface) !important;
  background-image: none !important;
  border-top: 1.5px solid var(--border-2) !important;
  border-right: 1.5px solid var(--border-2) !important;
  border-bottom: 1.5px solid var(--border-2) !important;
  border-left: 1.5px solid var(--border-2) !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: var(--border-2) !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  border-radius: 20px !important;
  padding-top: 14px !important;
  padding-right: 20px !important;
  padding-bottom: 14px !important;
  padding-left: 20px !important;
  padding: 14px 20px !important;
  min-height: 72px !important;
  height: auto !important;
  box-shadow: none !important;
  box-shadow: 0 0 0 0 transparent !important;
  outline: none !important;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .1s ease !important;
  position: relative !important;
  overflow: visible !important;
}
html body #guessWrapper:focus-within,
#guessWrapper[id]:focus-within {
  border-color: var(--theme-primary) !important;
  border-width: 1.5px !important;
  box-shadow: 0 0 0 4px var(--ring-primary) !important;
}
/* Clean digit slots inside */
#guessWrapper > div,
#guessWrapper .flex.items-center {
  gap: 10px !important;
  column-gap: 10px !important;
  row-gap: 10px !important;
}
#guessWrapper .relative.flex.items-center.justify-center {
  min-width: 22px !important;
  font-size: 22px !important;
  line-height: 36px !important;
  padding: 0 2px !important;
}
#guessWrapper span.text-gray-900,
#guessWrapper .text-gray-900,
#guessWrapper .inline-flex:not(.bet-cursor) {
  color: var(--text-hi) !important;
  font-weight: 800 !important;
  -webkit-font-smoothing: antialiased;
}
#guessWrapper span[style*="color:#9ca3af"],
#guessWrapper svg {
  color: var(--text-dis) !important;
  fill: currentColor !important;
}

/* Dark mode premium clean dark guessbox (acaba bug borda marrom cortada) */
html[data-theme="dark"] body #guessWrapper,
html[data-theme="dark"] #guessWrapper[id],
html[data-theme="dark"] #guessWrapper[class] {
  background-color: #222427 !important;
  background-image: none !important;
  border-color: rgba(224,226,242,0.12) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-radius: 20px !important;
  padding: 14px 20px !important;
  min-height: 72px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 10px 30px -16px rgba(0,0,0,0.55) !important;
  overflow: visible !important;
}
html[data-theme="dark"] body #guessWrapper:focus-within,
html[data-theme="dark"] #guessWrapper[id]:focus-within {
  border-color: var(--theme-primary) !important;
  border-width: 1.5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 4px var(--ring-primary),
    0 10px 30px -16px rgba(0,0,0,0.55) !important;
}
html[data-theme="dark"] #guessWrapper span.text-gray-900,
html[data-theme="dark"] #guessWrapper .text-gray-900 {
  color: var(--text-hi) !important;
}
html[data-theme="dark"] #guessWrapper span.text-gray-400 { /* separador × entre grupos */
  color: var(--text-3) !important;
}

/* ---------- Premium Palpites List / Chips (afastar/fastar + radius premium + JUSTIFICAR alinhamento igual guessWrapper) ---------- */
html body #palpitesList,
#palpitesList[id] {
  margin-top: 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 16px !important;
  padding: 0 !important;
  justify-content: stretch !important;
  align-content: start !important;
}
/* Mobile: mantém 3 colunas até pelo menos 380px (padrão foto user 3 colunas). Só quebra para 2 abaixo disso */
@media (max-width: 500px) {
  html body #palpitesList,
  #palpitesList[id] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 360px) {
  html body #palpitesList,
  #palpitesList[id] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 280px) {
  html body #palpitesList,
  #palpitesList[id] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
html body #palpitesList [data-palpite-idx],
#palpitesList [data-palpite-idx] {
  width: 100% !important;
  justify-self: stretch !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 14px !important;
  padding-top: 10px !important;
  padding-right: 14px !important;
  padding-bottom: 10px !important;
  padding-left: 14px !important;
  padding: 10px 14px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  gap: 10px !important;
  column-gap: 10px !important;
  border-color: var(--theme-primary) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  box-shadow: 0 2px 8px -4px var(--ring-primary) !important;
  transition: transform .12s ease, box-shadow .2s ease !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative !important;
}
#palpitesList [data-palpite-idx]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px -6px var(--ring-primary) !important;
}
#palpitesList [data-palpite-idx] > span:first-child,
#palpitesList [data-palpite-idx] span:not(button span):not([class*="bet-cursor"]) {
  font-size: 20px !important;
  letter-spacing: 0.02em !important;
  font-weight: 700 !important;
}
#palpitesList [data-palpite-idx] button[onclick^="removePalpite"],
#palpitesList [data-palpite-idx] button[type="button"] {
  width: 22px !important;
  height: 22px !important;
  top: -8px !important;
  right: -8px !important;
  border-width: 2.5px !important;
  border-style: solid !important;
  border-color: var(--theme-primary-soft) !important;
  font-size: 11px !important;
  box-shadow: 0 4px 10px -3px rgba(232,64,64,0.55) !important;
}
html[data-theme="dark"] body #palpitesList [data-palpite-idx],
html[data-theme="dark"] #palpitesList [data-palpite-idx] {
  border-color: var(--theme-primary) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  box-shadow: 0 3px 16px -6px rgba(246,146,30,0.35) !important;
}
html[data-theme="dark"] #palpitesList [data-palpite-idx]:hover {
  box-shadow: 0 10px 24px -8px rgba(246,146,30,0.5) !important;
}
html[data-theme="dark"] #palpitesList [data-palpite-idx] button[onclick^="removePalpite"],
html[data-theme="dark"] #palpitesList [data-palpite-idx] button[type="button"] {
  border-color: var(--theme-primary-dark-soft) !important;
}
#palpitesList .relative.inline-flex.items-end.gap-1 {
  /* chips de bichos (animais png) */
  border-radius: 14px !important;
  padding-top: 10px !important;
  padding-right: 12px !important;
  padding-bottom: 6px !important;
  padding-left: 12px !important;
  padding: 10px 12px 6px !important;
  border-color: var(--theme-primary) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  gap: 8px !important;
  column-gap: 8px !important;
  background-color: var(--theme-primary-soft) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px -4px var(--ring-primary) !important;
}
html[data-theme="dark"] #palpitesList .relative.inline-flex.items-end.gap-1 {
  background-color: var(--theme-primary-dark-soft) !important;
  color: var(--text-hi) !important;
  border-color: var(--theme-primary) !important;
  border-width: 1.5px !important;
  box-shadow: 0 3px 16px -6px rgba(246,146,30,0.35) !important;
}

/* ---------- Dark mode extra tweaks ---------- */
html[data-theme="dark"] img { filter: none; }
html[data-theme="dark"] .logo-invertable { filter: invert(0.92) hue-rotate(180deg); }

html[data-theme="dark"] hr { border-color: var(--border) !important; }
html[data-theme="dark"] code, html[data-theme="dark"] pre {
  background: var(--bg-surface-2) !important;
  color: var(--text) !important;
}

/* ---------- Theme Toggle Button (floating) — REMOVIDO, agora está NO HEADER. Bloqueamos qualquer vestígio. ---------- */
#theme-toggle-btn,
body #theme-toggle-btn,
html body #theme-toggle-btn,
html[data-theme="dark"] body #theme-toggle-btn {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
}

/* ---------- PREMIUM CLEAN KEYPAD / TECLADO NUMÉRICO (Lottu Style) ---------- */

/* Containers dos paineis: afastar e limpar visual */
html body #keypadPanel,
html body #animalsPanel,
html body #palpitaoPanel {
  padding-left: 2px !important;
  padding-right: 2px !important;
  gap: 10px !important;
}

/* Grid do teclado numérico — 3 colunas, gap 12 clean (era 4px gap-1) */
html body #keypadGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
  padding: 6px 2px 2px !important;
}
html body #palpitaoGrid {
  gap: 12px !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
}
/* Grid dos animais (5 colunas) */
html body #animalsGrid {
  gap: 10px !important;
  column-gap: 10px !important;
  row-gap: 10px !important;
  padding: 4px 2px !important;
}

/* Botão recolher (keypadToggleBtn / animalsToggleBtn) */
html body #keypadToggleBtn,
html body #animalsToggleBtn {
  width: 52px !important;
  height: 26px !important;
  border-radius: 9999px !important;
  background-color: var(--bg-surface-2) !important;
  color: var(--text-3) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  transition: all .15s ease !important;
}
html body #keypadToggleBtn:hover,
html body #animalsToggleBtn:hover {
  background-color: var(--bg-surface) !important;
  color: var(--text-2) !important;
}

/* TODOS botões dígitos: keypad-btn, data-digit, valueKey, palpitao */
html body .keypad-btn,
html body #keypadGrid [data-digit],
html body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button,
html body #step-5 .grid.grid-cols-3.gap-1.mb-2 > div {
  border-radius: 16px !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: var(--border-2) !important;
  color: var(--text-hi) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: 60px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 4px 12px -6px rgba(17, 24, 39, 0.08) !important;
  transition: transform .08s ease, box-shadow .18s ease, background-color .15s ease, border-color .15s ease, color .15s ease !important;
  cursor: pointer !important;
}
html body .keypad-btn:hover,
html body #keypadGrid [data-digit]:hover,
html body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button:hover {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 8px 18px -8px rgba(17, 24, 39, 0.12) !important;
}
html body .keypad-btn:active,
html body #keypadGrid [data-digit]:active,
html body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 4px -2px rgba(17, 24, 39, 0.08) !important;
  background-color: var(--bg-surface-2) !important;
}

/* Botão COLAR (clipboard) — verde Lottu success (#33C192) */
html body #btnPaste,
html body #btnPasteAnimals {
  background-color: rgba(51, 193, 146, 0.08) !important;
  background-image: none !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: rgba(51, 193, 146, 0.45) !important;
  color: #1DAE7C !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 4px 14px -6px rgba(51, 193, 146, 0.22) !important;
}
html body #btnPaste:hover,
html body #btnPasteAnimals:hover {
  background-color: rgba(51, 193, 146, 0.14) !important;
  border-color: #33C192 !important;
  color: #148F64 !important;
}
html body #btnPaste svg,
html body #btnPasteAnimals svg {
  color: inherit !important;
}
html body #btnPaste.opacity-40,
html body #btnPaste.cursor-not-allowed {
  opacity: 0.45 !important;
  filter: saturate(0.4) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Botão APAGAR / BACKSPACE — vermelho Lottu error (#F65A5A) */
html body #btnBackspace,
html body #step-5 .grid.grid-cols-3.gap-1 button[style*="border-red-400"],
html body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button[onclick="keypadPress('back')"] {
  border-radius: 16px !important;
  background-color: rgba(246, 90, 90, 0.08) !important;
  background-image: none !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: rgba(246, 90, 90, 0.55) !important;
  color: #E73838 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 4px 14px -6px rgba(246, 90, 90, 0.25) !important;
}
html body #btnBackspace:hover,
html body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button[onclick="keypadPress('back')"]:hover {
  border-radius: 16px !important;
  background-color: rgba(246, 90, 90, 0.14) !important;
  border-color: #F65A5A !important;
  color: #D42828 !important;
}
html body #btnBackspace svg,
html body #step-5 button[onclick*="back"] svg,
html body #step-5 button[onclick*="back"] i {
  color: inherit !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* ---------- BOTÃO AVANÇAR / CONTINUAR (PRIMARY) ---------- */
html body #btnAdvanceNumbers,
html body #btnAdvanceAnimals,
html body #btnAdvancePalpitao,
html body #btnAdvanceValue,
html body #prizesContinueBtn,
html body button[onclick="advanceToLotteries()"],
html body .lt-review-footer button.lt-place-bet,
html body .apostar-confirm-btn {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  border-radius: 18px !important;
  border-style: solid !important;
  border-width: 0 !important;
  border-top-width: 0 !important;
  background-image: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%) !important;
  background-color: var(--theme-primary) !important;
  color: #FFFFFF !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 26px -10px rgba(242, 93, 15, 0.72) !important;
  transition: transform .12s ease, box-shadow .2s ease, filter .15s ease, opacity .2s ease !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}
html body #btnAdvanceNumbers:not(:disabled):hover,
html body #btnAdvanceAnimals:not(:disabled):hover,
html body #btnAdvancePalpitao:not(:disabled):hover,
html body #btnAdvanceValue:not(:disabled):hover,
html body #prizesContinueBtn:not(:disabled):hover,
html body button[onclick="advanceToLotteries()"]:not(:disabled):hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.06) brightness(1.03) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 16px 32px -12px rgba(242, 93, 15, 0.85) !important;
}
html body #btnAdvanceNumbers:not(:disabled):active,
html body #btnAdvanceAnimals:not(:disabled):active,
html body #btnAdvancePalpitao:not(:disabled):active,
html body #btnAdvanceValue:not(:disabled):active,
html body #prizesContinueBtn:not(:disabled):active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 6px 14px -6px rgba(242, 93, 15, 0.6) !important;
}
html body #btnAdvanceNumbers:disabled,
html body #btnAdvanceAnimals:disabled,
html body #btnAdvancePalpitao:disabled,
html body #btnAdvanceValue:disabled,
html body #prizesContinueBtn:disabled {
  background-image: none !important;
  background-color: var(--bg-disabled) !important;
  color: var(--text-dis) !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: not-allowed !important;
}

/* Grupo "gap-2" que contém Avançar + Sorte (limpar gap 2 → 12 clean) */
html body #keypadPanel > .flex.gap-2,
html body #animalsPanel > .flex.gap-2,
html body #palpitaoPanel > .flex.gap-2,
html body #keypadPanel + .flex.gap-2,
html body #animalsPanel + .flex.gap-2,
html body #palpitaoPanel + .flex.gap-2 {
  gap: 12px !important;
  padding: 4px 2px 0 !important;
}

/* ---------- BOTÃO SORTE / PRESENTE 🎁 (verde Lottu success) ---------- */
html body button[onclick="keypadRandom()"],
html body button[onclick="animalsRandom()"],
html body button[onclick="palpitaoRandom()"],
html body button[onclick="palpitaoClear()"],
html body button[aria-label="Sortear"],
html body button[aria-label="Limpar"],
html body button[onclick="presentearPalpites()"] {
  min-width: 58px !important;
  min-height: 56px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  border-radius: 18px !important;
  border-style: solid !important;
  border-width: 0 !important;
  background-image: linear-gradient(135deg, #36C898 0%, #1DAE7C 100%) !important;
  background-color: #33C192 !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 24px -10px rgba(29, 174, 124, 0.55) !important;
  transition: transform .12s ease, box-shadow .2s ease, filter .15s ease !important;
  cursor: pointer !important;
}
html body button[onclick="keypadRandom()"]:hover,
html body button[onclick="animalsRandom()"]:hover,
html body button[onclick="palpitaoRandom()"]:hover,
html body button[aria-label="Sortear"]:hover,
html body button[onclick="presentearPalpites()"]:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.06) brightness(1.03) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 16px 30px -12px rgba(29, 174, 124, 0.7) !important;
}
html body button[onclick="keypadRandom()"]:active,
html body button[onclick="animalsRandom()"]:active,
html body button[onclick="palpitaoRandom()"]:active,
html body button[aria-label="Sortear"]:active,
html body button[onclick="presentearPalpites()"]:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 6px 14px -6px rgba(29, 174, 124, 0.5) !important;
}
/* SVG/icon dentro do botão sorte/presente */
html body button[onclick="keypadRandom()"] svg,
html body button[onclick="animalsRandom()"] svg,
html body button[onclick="palpitaoRandom()"] svg,
html body button[aria-label="Sortear"] svg,
html body button[aria-label="Sortear"] i,
html body button[onclick="presentearPalpites()"] i {
  width: 24px !important;
  height: 24px !important;
  font-size: 22px !important;
  color: inherit !important;
}

/* Botão Limpar (palpitaoClear) — cinza neutro clean, não verde */
html body button[onclick="palpitaoClear()"],
html body button[aria-label="Limpar"] {
  background-image: linear-gradient(135deg, #8B93A5 0%, #6B7280 100%) !important;
  background-color: #6B7280 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 10px 22px -10px rgba(75, 85, 99, 0.5) !important;
}

/* ---------- STEP 5 (VALOR) PREMIUM: R$ buttons, escopo todos/cada, total bar ---------- */
html body #step-5 .grid.grid-cols-3.gap-1.mb-2 {
  gap: 12px !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
}
/* Botões +R$ 1 / 5 / 10 */
html body #step-5 .grid.grid-cols-3.gap-2 > button[onclick*="addBetAmount"] {
  border-radius: 14px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  background-color: var(--bg-surface) !important;
  background-image: none !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 4px 10px -4px rgba(17, 24, 39, 0.08) !important;
  transition: all .15s ease !important;
}
html body #step-5 .grid.grid-cols-3.gap-2 > button[onclick*="addBetAmount"]:hover {
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary) !important;
  background-color: var(--theme-primary-soft) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 8px 18px -8px rgba(246, 146, 30, 0.3) !important;
}
html body #step-5 .grid.grid-cols-3.gap-2 > button[onclick*="addBetAmount"]:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 4px -2px rgba(246, 146, 30, 0.2) !important;
}
/* Escopo de aposta: Todos / Cada — estilo gerenciado via JS (setBetScope) both-modes
   regras mínimas apenas para padding/borda-radius, sem overwrite de cor/fundo/texto */
html body #betScopeAll,
html body #betScopeEach {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  transition: all .15s ease !important;
  border-style: solid !important;
  border-width: 1.5px !important;
}

/* Barra total (valor) */
html body #step-5 > div.border-2.border-primary-yellow.rounded-lg,
html body #step-5 > div[class*="border-primary-yellow"] {
  border-radius: 16px !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: var(--theme-primary-soft-border) !important;
  background-color: var(--theme-primary-soft) !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 6px 16px -8px rgba(246, 146, 30, 0.35) !important;
}
html body #step-5 #betAmountDisplay {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--theme-accent) !important;
  letter-spacing: 0.01em !important;
}

/* Sumario totais (Palpites / Valor / Total) */
html body #step-5 .border-t.border-gray-200 { border-color: var(--border) !important; }
html body #step-5 #sumPalpitos,
html body #step-5 #sumPerPick,
html body #step-5 #sumTotal {
  color: var(--text-hi) !important;
}
html body #step-5 #sumPerPick,
html body #step-5 #sumTotal {
  color: var(--theme-accent) !important;
}

/* ---------- DARK MODE (teclado premium / avançar / sorte) ---------- */
html[data-theme="dark"] body #keypadToggleBtn,
html[data-theme="dark"] body #animalsToggleBtn {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-3) !important;
}
html[data-theme="dark"] body .keypad-btn,
html[data-theme="dark"] body #keypadGrid [data-digit],
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button,
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-2.mb-2 > button {
  background-color: var(--bg-surface-2) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  border-width: 1.5px !important;
  color: var(--text-hi) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 6px 16px -6px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] body .keypad-btn:hover,
html[data-theme="dark"] body #keypadGrid [data-digit]:hover,
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button:hover,
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-2.mb-2 > button:hover {
  background-color: #2E3136 !important;
  border-color: rgba(224, 226, 242, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 10px 22px -8px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] body .keypad-btn:active,
html[data-theme="dark"] body #keypadGrid [data-digit]:active,
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button:active,
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-2.mb-2 > button:active {
  background-color: #26282C !important;
}

/* Colar Dark */
html[data-theme="dark"] body #btnPaste,
html[data-theme="dark"] body #btnPasteAnimals {
  background-color: rgba(51, 193, 146, 0.1) !important;
  border-color: rgba(51, 193, 146, 0.42) !important;
  color: #3CD69F !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 18px -8px rgba(51, 193, 146, 0.35) !important;
}
html[data-theme="dark"] body #btnPaste:hover,
html[data-theme="dark"] body #btnPasteAnimals:hover {
  background-color: rgba(51, 193, 146, 0.18) !important;
  border-color: #33C192 !important;
  color: #53E3B0 !important;
}

/* Apagar Dark */
html[data-theme="dark"] body #btnBackspace,
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button[onclick="keypadPress('back')"],
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-2.mb-2 > button[onclick="keypadPress('back')"] {
  background-color: rgba(246, 90, 90, 0.1) !important;
  border-color: rgba(246, 90, 90, 0.5) !important;
  color: #FF7373 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 18px -8px rgba(246, 90, 90, 0.4) !important;
}
html[data-theme="dark"] body #btnBackspace:hover,
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-1.mb-2 > button[onclick="keypadPress('back')"]:hover,
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-2.mb-2 > button[onclick="keypadPress('back')"]:hover {
  background-color: rgba(246, 90, 90, 0.18) !important;
  border-color: #F65A5A !important;
  color: #FF8A8A !important;
}

/* Avançar Dark (mesmo gradiente, sombra mais forte no dark) */
html[data-theme="dark"] body #btnAdvanceNumbers,
html[data-theme="dark"] body #btnAdvanceAnimals,
html[data-theme="dark"] body #btnAdvancePalpitao,
html[data-theme="dark"] body #btnAdvanceValue,
html[data-theme="dark"] body #prizesContinueBtn,
html[data-theme="dark"] body button[onclick="advanceToLotteries()"] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 16px 36px -12px rgba(242, 93, 15, 0.85) !important;
}
html[data-theme="dark"] body #btnAdvanceNumbers:disabled,
html[data-theme="dark"] body #btnAdvanceAnimals:disabled,
html[data-theme="dark"] body #btnAdvancePalpitao:disabled,
html[data-theme="dark"] body #btnAdvanceValue:disabled,
html[data-theme="dark"] body #prizesContinueBtn:disabled {
  background-color: #2A2D31 !important;
  color: #666B75 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.015) !important;
}

/* Botão Sorte (presente) Dark */
html[data-theme="dark"] body button[onclick="keypadRandom()"],
html[data-theme="dark"] body button[onclick="animalsRandom()"],
html[data-theme="dark"] body button[onclick="palpitaoRandom()"],
html[data-theme="dark"] body button[aria-label="Sortear"],
html[data-theme="dark"] body button[onclick="presentearPalpites()"] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 16px 32px -12px rgba(29, 174, 124, 0.65) !important;
}

/* Step-5 Valor / Escopo Dark — estilo visual gerenciado via JS both-modes
   (setBetScope + inline styles). Apenas manter ajustes de box-shadow leve,
   sem sobrescrever background/color/border hardcoded. */
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-2 > button[onclick*="addBetAmount"] {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 6px 14px -5px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] body #step-5 .grid.grid-cols-3.gap-2 > button[onclick*="addBetAmount"]:hover {
  border-color: var(--theme-primary) !important;
  color: #FFB87A !important;
  background-color: rgba(246, 146, 30, 0.12) !important;
}
html[data-theme="dark"] body #step-5 > div[class*="border-primary-yellow"] {
  background-color: rgba(246, 146, 30, 0.12) !important;
  border-color: rgba(246, 146, 30, 0.4) !important;
}
html[data-theme="dark"] body #step-5 #betAmountDisplay {
  color: #FFC28B !important;
}
html[data-theme="dark"] body #step-5 #sumPalpitos { color: var(--text-hi) !important; }
html[data-theme="dark"] body #step-5 #sumPerPick,
html[data-theme="dark"] body #step-5 #sumTotal {
  color: #FFC28B !important;
}

/* Step-6 Revisão Aposta Both-modes Premium Clean
   Card total / botão outra aposta / botão avançar / headings
   (mantém !important para sobrepor classes tailwind antigas se houver) */

/* ===== Garante step-6 SEM FUNDO PRÓPRIO (nenhum bloco, herda 100% do container pai) =====
   Especificidade MÁXIMA: html + data-theme + body + main#id-opcional + #step-6
   Vence QUALQUER regra global .step-content (inclusive Tailwind classes) */
html body #step-6.step-content,
html body main #step-6.step-content {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-theme="dark"] body #step-6.step-content,
html[data-theme="dark"] body main #step-6.step-content {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-theme="light"] body #step-6.step-content,
html[data-theme="light"] body main #step-6.step-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* ================================================================ */
/* BET-CARDS (review step-6) — Both-modes fallback sobre classes LT */
/* ================================================================ */
/* Seletor específico para bet-cards-list (apenas no step-6) */
html body #step-6 #bet-cards-list {
  background: transparent !important;
}
html body #step-6 #bet-cards-list .lt-review-card {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-hi) !important;
  border-radius: 18px !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,.12) !important;
}
html body #step-6 #bet-cards-list .lt-review-card-header {
  border-bottom-color: var(--border) !important;
}
html body #step-6 #bet-cards-list .lt-review-card-header > span:first-child {
  color: var(--text-hi) !important;
}
html body #step-6 #bet-cards-list .lt-review-chip,
html body #step-6 #bet-cards-list .lt-review-chip-animal,
html body #step-6 #bet-cards-list .lt-review-chip-num {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-hi) !important;
  border-radius: 12px !important;
  border-style: solid !important;
  border-width: 1.5px !important;
}
html body #step-6 #bet-cards-list .lt-review-chip-num {
  color: var(--text-hi) !important;
}
html body #step-6 #bet-cards-list .lt-review-valendo-btn {
  background-color: color-mix(in srgb, var(--theme-primary) 4%, var(--bg-surface)) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 55%, var(--border)) !important;
  color: var(--theme-primary) !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-radius: 14px !important;
}
html body #step-6 #bet-cards-list .lt-review-valendo-btn:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 9%, var(--bg-surface)) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 65%, var(--border)) !important;
}

/* Dark mode refinamento bet-cards */
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-card {
  background-color: var(--bg-surface) !important;
  border-color: color-mix(in srgb, var(--text-hi) 8%, var(--border)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 2px 10px -4px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-chip,
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-chip-animal,
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-chip-num {
  background-color: var(--bg-surface-2) !important;
  border-color: color-mix(in srgb, var(--text-hi) 6%, var(--border)) !important;
}
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-chip-animal span,
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-chip span { color: var(--text-2) !important; }
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-card > div:nth-child(2),
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-card > div:nth-child(3),
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-card > div:nth-child(4),
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-card-header {
  border-bottom-color: color-mix(in srgb, var(--text-hi) 7%, var(--border)) !important;
}
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-valendo-btn {
  background-color: rgba(246, 146, 30, 0.08) !important;
  border-color: rgba(246, 146, 30, 0.42) !important;
  color: #FFB87A !important;
}
html[data-theme="dark"] body #step-6 #bet-cards-list .lt-review-valendo-btn:hover {
  background-color: rgba(246, 146, 30, 0.14) !important;
  border-color: rgba(246, 146, 30, 0.62) !important;
  color: #FFCB9A !important;
}

html body #step-6 h2 {
  color: var(--text-hi) !important;
}
html body #step-6 p {
  color: var(--text-2) !important;
}
html body #step-6 .lt-review-footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-top: 14px !important;
  border-top: 1.5px solid var(--border) !important;
  background: transparent !important;
  background-color: transparent !important;
}
html body #step-6 .lt-review-footer > .space-y-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Dark mode lt-review-footer e filhos wrapper — garantia total fundo */
html[data-theme="dark"] body #step-6 .lt-review-footer,
html[data-theme="dark"] body #step-6 .lt-review-footer > * {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-theme="light"] body #step-6 .lt-review-footer,
html[data-theme="light"] body #step-6 .lt-review-footer > * {
  background: transparent !important;
  background-color: transparent !important;
}
html body #step-6 .lt-review-total-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: color-mix(in srgb, var(--theme-primary) 8%, var(--bg-surface)) !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: color-mix(in srgb, var(--theme-primary) 35%, var(--border)) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--theme-primary) 22%, transparent) !important;
}
html body #step-6 .lt-review-total-card .lt-review-total-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-hi) !important;
  letter-spacing: 0.1px !important;
}
html body #step-6 .lt-review-total-card #review-total,
html body #step-6 .lt-review-total-card .lt-review-total-value {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: var(--theme-primary) !important;
}
html body #step-6 button[onclick="addAnotherBet()"] {
  width: 100% !important;
  background-color: var(--bg-surface) !important;
  background-image: none !important;
  color: var(--theme-primary) !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: color-mix(in srgb, var(--theme-primary) 55%, var(--border)) !important;
  border-radius: 18px !important;
  padding: 14px 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px -8px color-mix(in srgb, var(--theme-primary) 20%, transparent) !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
html body #step-6 button[onclick="addAnotherBet()"]:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 7%, var(--bg-surface)) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 65%, var(--border)) !important;
}
html body #step-6 button[onclick="addAnotherBet()"]:active {
  transform: scale(.988) !important;
}

/* Step-6 Dark mode aprimorado */
html[data-theme="dark"] body #step-6 h2 { color: var(--text-hi) !important; }
html[data-theme="dark"] body #step-6 p  { color: var(--text-2) !important; }
html[data-theme="dark"] body #step-6 .lt-review-total-card {
  background-color: rgba(246, 146, 30, 0.10) !important;
  border-color: rgba(246, 146, 30, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 16px -6px rgba(246, 146, 30, 0.28) !important;
}
html[data-theme="dark"] body #step-6 .lt-review-total-card .lt-review-total-label {
  color: var(--text-hi) !important;
}
html[data-theme="dark"] body #step-6 .lt-review-total-card #review-total,
html[data-theme="dark"] body #step-6 .lt-review-total-card .lt-review-total-value {
  color: #FFC28B !important;
}
html[data-theme="dark"] body #step-6 button[onclick="addAnotherBet()"] {
  background-color: var(--bg-surface-2) !important;
  border-color: rgba(246, 146, 30, 0.42) !important;
  color: #FFB87A !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 4px 14px -8px rgba(246, 146, 30, 0.2) !important;
}
html[data-theme="dark"] body #step-6 button[onclick="addAnotherBet()"]:hover {
  background-color: rgba(246, 146, 30, 0.12) !important;
  border-color: rgba(246, 146, 30, 0.62) !important;
  color: #FFCB9A !important;
}

/* ===== ÚLTIMA REGRA: Escopo de aposta (Para Todos / Para Cada) =====
   Ativo/Inativo both-modes. Sobrescreve qualquer regra anterior. */
html body #betScopeAll.scope-active,
html body #betScopeEach.scope-active {
  background-color: var(--theme-primary) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: var(--theme-primary) !important;
}
html[data-theme="dark"] body #betScopeAll.scope-active,
html[data-theme="dark"] body #betScopeEach.scope-active {
  background-color: var(--theme-primary) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: var(--theme-primary) !important;
}
html body #betScopeAll:not(.scope-active),
html body #betScopeEach:not(.scope-active) {
  background-color: var(--bg-surface) !important;
  background-image: none !important;
  color: var(--text-hi) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] body #betScopeAll:not(.scope-active),
html[data-theme="dark"] body #betScopeEach:not(.scope-active) {
  background-color: var(--bg-surface) !important;
  background-image: none !important;
  color: var(--text-hi) !important;
  border-color: var(--border) !important;
}

/* ================================================================ */
/* STEP-7: Extrações / Lotéricas — Both-modes Premium Clean         */
/* (garante que TODOS elementos respeitam tema dark/light)          */
/* ================================================================ */

/* 1. Container geral step-7 SEM fundo próprio (transparente both-modes) */
html body #step-7,
html body main #step-7.step-fullscreen,
html[data-theme="dark"] body #step-7,
html[data-theme="dark"] body main #step-7.step-fullscreen,
html[data-theme="light"] body #step-7,
html[data-theme="light"] body main #step-7.step-fullscreen {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2. Botões de data (anterior/próxima) both-modes fallback + dark premium refine */
html body #step-7 button[onclick*="changeDrawDate(-1)"],
html body #step-7 button[onclick*="changeDrawDate(1)"] {
  background-color: var(--theme-primary) !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: color-mix(in srgb, var(--theme-primary) 65%, var(--border)) !important;
  box-shadow: 0 2px 6px -3px color-mix(in srgb, var(--theme-primary) 42%, transparent) !important;
  transition: transform .08s ease, box-shadow .18s ease, background-color .15s ease !important;
}
html body #step-7 button[onclick*="changeDrawDate(-1)"]:active,
html body #step-7 button[onclick*="changeDrawDate(1)"]:active {
  transform: scale(.96) !important;
}
html[data-theme="dark"] body #step-7 button[onclick*="changeDrawDate(-1)"],
html[data-theme="dark"] body #step-7 button[onclick*="changeDrawDate(1)"] {
  box-shadow:
    0 2px 8px -4px rgba(246,146,30,.38),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* 3. Data display (data atual entre botões) both-modes */
html body #step-7 #drawDateDisplay {
  color: var(--text-hi) !important;
}

/* 4. Footer step-7 (resumo + botão concluir): wrappers transparentes + borda both-modes */
html body #step-7 > div:nth-child(3),
html body #step-7 > div:last-child:not(.step-content):not(#step-8) {
  border-top-color: var(--border) !important;
  border-top-style: solid !important;
  border-top-width: 1.5px !important;
  background: transparent !important;
  background-color: transparent !important;
}
/* Resumo valores (esquerda: Valor / qtd extrações; direita: total a pagar) */
html body #step-7 #extracao-valor,
html body #step-7 #extracao-count {
  color: var(--text-hi) !important;
}
html body #step-7 #extracao-total {
  color: var(--theme-primary) !important;
}
html body #step-7 > div:nth-child(3) p,
html body #step-7 .pt-2.border-t.border-gray-200 p {
  color: var(--text-2) !important;
}

/* 5. Botão CONCLUIR APOSTA both-modes fallback (habilitado e desabilitado) */
html body #step-7 #btn-next-draws {
  background-color: var(--theme-primary) !important;
  color: #FFFFFF !important;
  border-radius: 18px !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: color-mix(in srgb, var(--theme-primary) 70%, var(--border)) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  padding: 14px 0 !important;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--theme-primary) 48%, transparent) !important;
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .18s ease, transform .08s ease, opacity .12s ease !important;
}
html body #step-7 #btn-next-draws:disabled {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-2) !important;
  opacity: 0.55 !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
html body #step-7 #btn-next-draws:not(:disabled):active {
  transform: scale(.988) !important;
}
html[data-theme="dark"] body #step-7 #btn-next-draws:not(:disabled) {
  box-shadow:
    0 5px 18px -5px rgba(246,146,30,.45),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* 6. Accordion grupos (cidades/lotéricas) both-modes fallback */
html body #step-7 #draws-accordion .lt-draw-group {
  border-bottom-color: var(--border) !important;
  border-bottom-style: solid !important;
  border-bottom-width: 1.5px !important;
  background: transparent !important;
}
html body #step-7 #draws-accordion .lt-draw-group-header {
  background-color: transparent !important;
  color: var(--text-hi) !important;
}
html body #step-7 #draws-accordion .lt-draw-group-header:hover {
  background-color: color-mix(in srgb, var(--text-hi) 6%, var(--bg-page)) !important;
}
html body #step-7 #draws-accordion .lt-draw-group-header > div > span:first-child {
  color: var(--text-hi) !important;
}
html body #step-7 #draws-accordion .lt-draw-group-header > i {
  color: var(--text-2) !important;
}
html body #step-7 #draws-accordion .lt-draw-group-count {
  background-color: color-mix(in srgb, var(--theme-primary) 14%, var(--bg-page)) !important;
  color: var(--theme-primary) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 40%, var(--border)) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}

/* 7. Itens de extração (cada linha com checkbox + nome + horário) both-modes */
html body #step-7 #draws-accordion .lt-draw-item {
  border-bottom-color: var(--border) !important;
  border-bottom-style: solid !important;
  border-bottom-width: 1.5px !important;
  background-color: transparent !important;
  color: var(--text-hi) !important;
}
html body #step-7 #draws-accordion .lt-draw-item:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 5%, var(--bg-page)) !important;
}
html body #step-7 #draws-accordion .lt-draw-item > div:first-child > span,
html body #step-7 #draws-accordion .lt-draw-item > div:nth-child(1) > span:last-child {
  color: var(--text-hi) !important;
}
/* Horário (direita de cada extração) sempre discreto text-2 (cinza suave both-modes) */
html body #step-7 #draws-accordion .lt-draw-item > div:last-child,
html body #step-7 #draws-accordion .lt-draw-item > div:last-child span {
  color: var(--text-2) !important;
}

/* 8. CHECKBOX custom both-modes fallback (garante estilo LT ao invés de branco) */
html body #step-7 #draws-accordion .lt-draw-check-box {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-radius: 6px !important;
}
/* ESTILO MARCADO (checkbox checked) — laranja primary both-modes */
html body #step-7 #draws-accordion .draw-checkbox:checked ~ .lt-draw-check-box,
html body #step-7 #draws-accordion .lt-draw-check[data-checked="true"] .lt-draw-check-box {
  background-color: var(--theme-primary) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 70%, var(--border)) !important;
}
html body #step-7 #draws-accordion .draw-checkbox:checked ~ .lt-draw-check-mark,
html body #step-7 #draws-accordion .lt-draw-check[data-checked="true"] .lt-draw-check-mark {
  display: block !important;
}

/* 9. Mensagens de estado (Carregando / Vazio) both-modes */
html body #step-7 #draws-accordion > div.text-center.py-8 {
  color: var(--text-2) !important;
}

/* 10. Dark mode PREMIUM refinements step-7 (sutis, sem glows) */
html[data-theme="dark"] body #step-7 #draws-accordion .lt-draw-item {
  border-bottom-color: color-mix(in srgb, var(--text-hi) 7%, var(--border)) !important;
}
html[data-theme="dark"] body #step-7 #draws-accordion .lt-draw-group {
  border-bottom-color: color-mix(in srgb, var(--text-hi) 7%, var(--border)) !important;
}
html[data-theme="dark"] body #step-7 #draws-accordion .lt-draw-check-box {
  background-color: var(--bg-surface) !important;
  border-color: color-mix(in srgb, var(--text-hi) 10%, var(--border)) !important;
}
html[data-theme="dark"] body #step-7 #draws-accordion .draw-checkbox:checked ~ .lt-draw-check-box {
  background-color: var(--theme-primary) !important;
  border-color: rgba(246, 146, 30, .75) !important;
}

/* ================================================================ */
/* STEP-8: Bilhete / Comprovante / Pix-Drawer — Both-modes Premium  */
/* ================================================================ */

/* 1. Container step-8 SEM fundo próprio (transparent both-modes) */
html body #step-8,
html[data-theme="dark"] body #step-8,
html[data-theme="light"] body #step-8 {
  background: transparent !important;
  background-color: transparent !important;
}
html body #step-8 > div {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2. COMPROVANTE (modal bilhete) — overlay e drawer both-modes  */
html body .lt-comprovante-overlay.is-open {
  background-color: rgba(10, 12, 14, 0.74) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
html body #comprovanteDrawer.lt-comprovante-drawer {
  background-color: var(--bg-page) !important;
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;
  box-shadow: 0 -10px 40px -14px rgba(0,0,0,0.35) !important;
}
html[data-theme="light"] body #comprovanteDrawer.lt-comprovante-drawer {
  background-color: #FFFFFF !important;
  box-shadow: 0 -12px 42px -18px rgba(0,0,0,0.22) !important;
}

/* Header drawer (fechar + kebab) both-modes */
html body .lt-comprovante-header {
  background: transparent !important;
  border-bottom: 1.5px solid var(--border) !important;
}
html body .lt-comprovante-close,
html body .lt-comprovante-share {
  background-color: var(--bg-surface) !important;
  color: var(--text-hi) !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--border) !important;
}
html body .lt-comprovante-close:hover,
html body .lt-comprovante-share:hover {
  background-color: color-mix(in srgb, var(--text-hi) 5%, var(--bg-surface)) !important;
}
html body .lt-comprovante-close:active,
html body .lt-comprovante-share:active { transform: scale(.96); }

/* Kebab menu both-modes */
html body #comprovanteKebab.lt-comprovante-kebab {
  background-color: var(--bg-surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.30);
}
html body #comprovanteKebab.lt-comprovante-kebab button {
  background-color: transparent !important;
  color: var(--text-hi) !important;
  border-radius: 10px !important;
}
html body #comprovanteKebab.lt-comprovante-kebab button:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 7%, var(--bg-surface)) !important;
  color: var(--theme-primary) !important;
}
html body #comprovanteKebab.lt-comprovante-kebab .lt-cancel {
  color: #EF4444 !important;
}
html body #comprovanteKebab.lt-comprovante-kebab .lt-cancel:hover {
  background-color: color-mix(in srgb, #EF4444 10%, var(--bg-surface)) !important;
  color: #EF4444 !important;
}

/* 3. BILHETE (lt-ticket header/content/footer) — PREMIUM redesign inspirado Império */
html body #comprovanteContent .lt-ticket {
  background-color: var(--bg-surface) !important;
  border-radius: 26px !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary) 22%, var(--border)) !important;
  box-shadow: 0 18px 48px -20px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in srgb, var(--theme-primary) 6%, transparent) inset !important;
  overflow: hidden !important;
}
html[data-theme="light"] body #comprovanteContent .lt-ticket {
  background-color: #FFFFFF !important;
  border-color: color-mix(in srgb, var(--theme-primary) 30%, #E5E7EB) !important;
  box-shadow: 0 16px 48px -22px rgba(246, 146, 30, 0.22), 0 16px 42px -20px rgba(17,24,39,0.12) !important;
}

/* ============ HEADER PREMIUM (logo área com marca d'água coroa) ============ */
html body #comprovanteContent .lt-ticket-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 14%, var(--bg-surface)) 0%, color-mix(in srgb, var(--theme-primary) 4%, var(--bg-surface)) 60%, color-mix(in srgb, var(--theme-primary) 9%, var(--bg-surface)) 100%) !important;
  border-bottom: 1.5px solid color-mix(in srgb, var(--theme-primary) 24%, var(--border)) !important;
  padding: 22px 20px 18px 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-header {
  background: linear-gradient(135deg, rgba(246, 146, 30, 0.18) 0%, rgba(246, 146, 30, 0.05) 55%, rgba(246, 146, 30, 0.12) 100%) !important;
  border-bottom-color: rgba(246, 146, 30, 0.28) !important;
}
html body #comprovanteContent .lt-ticket-header-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body #comprovanteContent .lt-ticket-logo-img {
  height: 54px !important;
  max-width: 72% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--theme-primary) 35%, transparent)) !important;
}
html body #comprovanteContent .lt-ticket-header-crown-bg {
  position: absolute !important;
  right: -22px !important;
  top: -26px !important;
  width: 170px !important;
  height: 170px !important;
  z-index: 1 !important;
  opacity: .14 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23F6921E' stroke-width='2' stroke-linejoin='round'><path d='M6 48 L6 20 L16 30 L32 12 L48 30 L58 20 L58 48 Z' fill='%23F6921E' fill-opacity='0.6'/><rect x='14' y='50' width='36' height='6' rx='1' fill='%23F6921E'/></g></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: right top !important;
}

/* ============ CONTEÚDO BILHETE ============ */
html body #comprovanteContent .lt-ticket-content {
  background: transparent !important;
  padding: 20px 18px 4px 18px !important;
}

/* ============ INFO BLOCK (dados do bilhete) PREMIUM COM ÍCONES ============ */
html body #comprovanteContent .lt-ticket-infoBlock {
  background-color: color-mix(in srgb, var(--text-hi) 2.5%, var(--bg-surface)) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 8px 14px 10px 14px !important;
  margin-bottom: 18px !important;
}
html body #comprovanteContent .lt-info-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 2px !important;
  border-bottom: 1px dashed color-mix(in srgb, var(--text-hi) 6%, var(--border)) !important;
}
html body #comprovanteContent .lt-info-row:last-child { border-bottom: 0 !important; }
html body #comprovanteContent .lt-info-row--status { padding-top: 12px !important; }
html body #comprovanteContent .lt-info-row-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}
html body #comprovanteContent .lt-info-row-icon {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: color-mix(in srgb, var(--theme-primary) 10%, var(--bg-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 22%, var(--border)) !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}
html body #comprovanteContent .lt-info-row-label {
  color: var(--text-2) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  opacity: .92 !important;
}
html body #comprovanteContent .lt-info-row-value {
  color: var(--text-hi) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-align: right !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
}
html body #comprovanteContent .lt-info-row-value.lt-ticket-placement-text {
  color: var(--theme-primary) !important;
}

/* STATUS CHIP / BADGE elegante primary (Aguardando / Premiada / Não / Cancelada) */
html body #comprovanteContent .lt-ticket-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px 7px 12px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary) 45%, transparent) !important;
  background-color: color-mix(in srgb, var(--theme-primary) 12%, var(--bg-surface)) !important;
  color: var(--theme-primary) !important;
}
html body #comprovanteContent .lt-ticket-status-chip-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 22%, transparent) !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-status-chip--pending,
html body #comprovanteContent .lt-ticket-status-chip--pending {
  color: #FFB06A !important;
  background-color: rgba(246, 146, 30, 0.13) !important;
  border-color: rgba(246, 146, 30, 0.50) !important;
}
html body #comprovanteContent .lt-ticket-status-chip--won {
  color: #10B981 !important;
  background-color: color-mix(in srgb, #10B981 12%, var(--bg-surface)) !important;
  border-color: color-mix(in srgb, #10B981 45%, transparent) !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-status-chip--won {
  color: #6EE7B7 !important;
  background-color: rgba(16, 185, 129, 0.13) !important;
  border-color: rgba(16, 185, 129, 0.50) !important;
}
html body #comprovanteContent .lt-ticket-status-chip--won .lt-ticket-status-chip-dot {
  background-color: #10B981 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #10B981 22%, transparent) !important;
}
html body #comprovanteContent .lt-ticket-status-chip--lost {
  color: var(--text-2) !important;
  background-color: color-mix(in srgb, var(--text-hi) 5%, var(--bg-surface)) !important;
  border-color: color-mix(in srgb, var(--text-hi) 14%, var(--border)) !important;
}
html body #comprovanteContent .lt-ticket-status-chip--lost .lt-ticket-status-chip-dot {
  background-color: var(--text-2) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-hi) 14%, transparent) !important;
}
html body #comprovanteContent .lt-ticket-status-chip--cancelled {
  color: #EF4444 !important;
  background-color: color-mix(in srgb, #EF4444 10%, var(--bg-surface)) !important;
  border-color: color-mix(in srgb, #EF4444 40%, transparent) !important;
}
html body #comprovanteContent .lt-ticket-status-chip--cancelled .lt-ticket-status-chip-dot {
  background-color: #EF4444 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #EF4444 20%, transparent) !important;
}

/* ============ SEÇÃO SEU PALPITE PREMIUM HEADER ============ */
html body #comprovanteContent .lt-section-palpite-header {
  background-color: color-mix(in srgb, var(--text-hi) 2.5%, var(--bg-surface)) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
html body #comprovanteContent .lt-section-palpite-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body #comprovanteContent .lt-section-palpite-icon {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: color-mix(in srgb, var(--theme-primary) 14%, var(--bg-surface)) !important;
  color: var(--theme-primary) !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary) 38%, transparent) !important;
  border-radius: 11px !important;
  font-size: 18px !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-section-palpite-icon {
  background-color: rgba(246, 146, 30, 0.15) !important;
  color: #FFB06A !important;
  border-color: rgba(246, 146, 30, 0.50) !important;
}
html body #comprovanteContent .lt-section-palpite-title {
  color: var(--text-hi) !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  letter-spacing: .02em !important;
  line-height: 1.1 !important;
}
html body #comprovanteContent .lt-section-palpite-sub {
  color: var(--text-2) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  margin-top: 2px !important;
  line-height: 1.25 !important;
}
html body #comprovanteContent .lt-section-palpite-count {
  padding: 7px 14px !important;
  border-radius: 12px !important;
  background-color: color-mix(in srgb, var(--text-hi) 4%, var(--bg-surface)) !important;
  border: 1.5px solid color-mix(in srgb, var(--text-hi) 10%, var(--border)) !important;
  color: var(--text-hi) !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: .03em !important;
}

/* ============ CARD DO JOGO PREMIUM (barra lateral esquerda primary + 2 colunas) ============ */
html body #comprovanteContent .lt-ticket-palpite {
  position: relative !important;
  background-color: color-mix(in srgb, var(--text-hi) 3%, var(--bg-surface)) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 16px 16px 16px 18px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-palpite {
  background-color: color-mix(in srgb, #000 10%, var(--bg-surface)) !important;
  border-color: color-mix(in srgb, #000 20%, var(--border)) !important;
}
html body #comprovanteContent .lt-palpite-side-bar {
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 4px !important;
  border-radius: 0 4px 4px 0 !important;
  background: linear-gradient(180deg, var(--theme-primary) 0%, color-mix(in srgb, var(--theme-primary) 55%, var(--bg-surface)) 100%) !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-palpite-side-bar {
  background: linear-gradient(180deg, #FFA85C 0%, #F6921E 100%) !important;
}
html body #comprovanteContent .lt-ticket-palpite--won {
  border-color: color-mix(in srgb, #10B981 34%, var(--border)) !important;
  background-color: color-mix(in srgb, #10B981 5%, var(--bg-surface)) !important;
}
html body #comprovanteContent .lt-ticket-palpite--won .lt-palpite-side-bar {
  background: linear-gradient(180deg, #10B981 0%, color-mix(in srgb, #10B981 60%, var(--bg-surface)) 100%) !important;
}
html body #comprovanteContent .lt-palpite-inner {
  padding-left: 8px !important;
}

/* TOP ROW jogo (JOGO N / Modalidade / Status / Escopo) */
html body #comprovanteContent .lt-palpite-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
html body #comprovanteContent .lt-palpite-top-left { display: flex; flex-direction: column; gap: 6px; }
html body #comprovanteContent .lt-ticket-palpite-jogo {
  color: var(--theme-primary) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
}
html body #comprovanteContent .lt-palpite-mod-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html body #comprovanteContent .lt-ticket-palpite-mod {
  color: var(--text-hi) !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}
html body #comprovanteContent .lt-palpite-scope-right {
  color: var(--text-2) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-align: right !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  max-width: 44% !important;
}
html body #comprovanteContent .lt-ticket-palpite-status-won {
  color: #10B981 !important;
  font-weight: 800 !important;
  background-color: color-mix(in srgb, #10B981 16%, var(--bg-surface)) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-palpite-status-won {
  color: #6EE7B7 !important;
  background-color: rgba(16, 185, 129, 0.16) !important;
}
html body #comprovanteContent .lt-ticket-palpite-status-pending,
html body #comprovanteContent .lt-ticket-palpite-status-paid {
  color: var(--theme-primary) !important;
  font-weight: 800 !important;
  background-color: color-mix(in srgb, var(--theme-primary) 14%, var(--bg-surface)) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-palpite-status-pending,
html[data-theme="dark"] body #comprovanteContent .lt-ticket-palpite-status-paid {
  color: #FFB06A !important;
  background-color: rgba(246, 146, 30, 0.15) !important;
}
html body #comprovanteContent .lt-ticket-palpite-status-lost {
  color: var(--text-2) !important;
  font-weight: 700 !important;
  background-color: color-mix(in srgb, var(--text-hi) 6%, var(--bg-surface)) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

/* 2 COLUNAS (esquerda: animais/números | direita: valores) */
html body #comprovanteContent .lt-palpite-2col {
  display: grid !important;
  grid-template-columns: 1.18fr 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
}
@media (max-width: 380px) {
  html body #comprovanteContent .lt-palpite-2col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
html body #comprovanteContent .lt-palpite-col-left {
  background-color: transparent !important;
}
html body #comprovanteContent .lt-palpite-col-right {
  background-color: color-mix(in srgb, var(--bg-surface-2) 60%, var(--bg-surface)) !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--border) !important;
  padding: 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-palpite-col-right {
  background-color: rgba(255,255,255,0.025) !important;
}

/* Bolinhas / chips número/animal (MELHORADOS: quadrados com imagem acima + número abaixo) */
html body #comprovanteContent .lt-ticket-palpite-animalsList {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html body #comprovanteContent .lt-ticket-palpite-ball,
html body #comprovanteContent .lt-ticket-palpite-ball-animal {
  background-color: var(--bg-surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-hi) !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  padding: 10px 12px !important;
  min-width: 44px !important;
  text-align: center !important;
}
html[data-theme="light"] body #comprovanteContent .lt-ticket-palpite-ball,
html[data-theme="light"] body #comprovanteContent .lt-ticket-palpite-ball-animal {
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 10px -7px rgba(0,0,0,0.18) !important;
}
html body #comprovanteContent .lt-ticket-palpite-ball-animal {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 84px !important;
  min-height: 92px !important;
  padding: 10px 8px 8px 8px !important;
  background-color: var(--bg-surface) !important;
  border-radius: 16px !important;
  border: 1.5px solid var(--border) !important;
}
html[data-theme="light"] body #comprovanteContent .lt-ticket-palpite-ball-animal {
  background-color: #FFFFFF !important;
  box-shadow: 0 5px 14px -8px rgba(246, 146, 30, 0.22), 0 5px 12px -8px rgba(0,0,0,0.12) !important;
  border-color: #F1F5F9 !important;
}
html body #comprovanteContent .lt-ticket-palpite-ball-animal img,
html body #comprovanteContent .lt-ticket-palpite-ball-animal .animal-emoji {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  display: block !important;
  font-size: 42px !important;
  line-height: 1 !important;
  text-align: center !important;
}
html body #comprovanteContent .lt-ticket-palpite-group {
  background-color: color-mix(in srgb, var(--theme-primary) 7%, var(--bg-surface)) !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary) 26%, var(--border)) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
html body #comprovanteContent .lt-ticket-palpite-palpiteGroups,
html body #comprovanteContent .lt-ticket-palpite-balls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* COLUNA DIREITA VALORES */
html body #comprovanteContent .lt-ticket-palpite-each {
  color: var(--text-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-bottom: 2px !important;
}
html body #comprovanteContent .lt-palpite-val-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
}
html body #comprovanteContent .lt-palpite-val-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px 10px !important;
  background-color: color-mix(in srgb, var(--text-hi) 2%, transparent) !important;
  border-radius: 10px !important;
}
html body #comprovanteContent .lt-palpite-val-label {
  color: var(--text-2) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}
html body #comprovanteContent .lt-info-i {
  display: inline-block !important;
  color: var(--text-2) !important;
  opacity: .8 !important;
  font-size: 12px !important;
  margin-left: 2px !important;
}
html body #comprovanteContent .lt-ticket-palpite-amt-inline {
  color: var(--theme-primary) !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: .01em !important;
  line-height: 1.1 !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-palpite-amt-inline {
  color: #FFB06A !important;
}
html body #comprovanteContent .lt-ticket-palpite-premio-inline {
  color: var(--theme-primary) !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-palpite-premio-inline {
  color: #FFB06A !important;
}
html body #comprovanteContent .lt-ticket-palpite-premio-inline--won,
html body #comprovanteContent .lt-palpite-val-line--won .lt-ticket-palpite-premio-inline--won {
  color: #10B981 !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-palpite-premio-inline--won,
html[data-theme="dark"] body #comprovanteContent .lt-palpite-val-line--won .lt-ticket-palpite-premio-inline--won {
  color: #6EE7B7 !important;
}
html body #comprovanteContent .lt-palpite-val-line--won .lt-palpite-val-label {
  color: #10B981 !important;
  font-weight: 700 !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-palpite-val-line--won .lt-palpite-val-label {
  color: #6EE7B7 !important;
}
html body #comprovanteContent .lt-palpite-val-line--estimate {
  background-color: color-mix(in srgb, var(--theme-primary) 4%, var(--bg-surface)) !important;
  border: 1px dashed color-mix(in srgb, var(--theme-primary) 22%, var(--border)) !important;
}

/* Botão "+ X palpites" premium */
html body #comprovanteContent .lt-ticket-palpite-showMore {
  margin-top: 8px !important;
  width: 100% !important;
  background-color: color-mix(in srgb, var(--theme-primary) 8%, var(--bg-surface)) !important;
  color: var(--theme-primary) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary) 35%, var(--border)) !important;
  padding: 10px 0 !important;
}

/* ============ CARD VALOR TOTAL PREMIUM (mesmo estilo header, coroa marca d'água) ============ */
html body #comprovanteContent .lt-ticket-footer {
  position: relative !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 14%, var(--bg-surface)) 0%, color-mix(in srgb, var(--theme-primary) 4%, var(--bg-surface)) 60%, color-mix(in srgb, var(--theme-primary) 10%, var(--bg-surface)) 100%) !important;
  border-top: 1.5px solid color-mix(in srgb, var(--theme-primary) 28%, var(--border)) !important;
  padding: 18px 20px 20px 20px !important;
  overflow: hidden !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-footer {
  background: linear-gradient(135deg, rgba(246, 146, 30, 0.16) 0%, rgba(246, 146, 30, 0.05) 55%, rgba(246, 146, 30, 0.12) 100%) !important;
  border-top-color: rgba(246, 146, 30, 0.32) !important;
}
html body #comprovanteContent .lt-ticket-footer-crown-bg {
  position: absolute !important;
  right: -26px !important;
  bottom: -30px !important;
  width: 180px !important;
  height: 180px !important;
  z-index: 1 !important;
  opacity: .12 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23F6921E' stroke-width='2' stroke-linejoin='round'><path d='M6 48 L6 20 L16 30 L32 12 L48 30 L58 20 L58 48 Z' fill='%23F6921E' fill-opacity='0.6'/><rect x='14' y='50' width='36' height='6' rx='1' fill='%23F6921E'/></g></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: right bottom !important;
}
html body #comprovanteContent .lt-ticket-totalCard {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 10px 2px !important;
}
html body #comprovanteContent .lt-ticket-totalIcon {
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: color-mix(in srgb, var(--theme-primary) 16%, var(--bg-surface)) !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary) 40%, transparent) !important;
  border-radius: 14px !important;
  font-size: 26px !important;
  color: var(--theme-primary) !important;
  flex: 0 0 auto !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-totalIcon {
  background-color: rgba(246, 146, 30, 0.18) !important;
  color: #FFB06A !important;
  border-color: rgba(246, 146, 30, 0.55) !important;
}
html body #comprovanteContent .lt-ticket-totalContent { flex: 1 1 auto !important; display: flex; flex-direction: column; gap: 4px; }
html body #comprovanteContent .lt-ticket-totalLabel {
  color: var(--text-2) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  opacity: .95 !important;
}
html body #comprovanteContent .lt-ticket-totalValue {
  color: var(--theme-primary) !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  letter-spacing: .005em !important;
  line-height: 1.05 !important;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--theme-primary) 20%, transparent) !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-totalValue {
  color: #FFC28B !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3) !important;
}
html body #comprovanteContent .lt-ticket-currency {
  color: var(--theme-primary) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  opacity: .95 !important;
  margin-right: 2px !important;
}
html[data-theme="dark"] body #comprovanteContent .lt-ticket-currency {
  color: #FFC28B !important;
}

/* ============ FOOTER COMPROVANTE: Botão "Repetir bilhete" PREMIUM ============ */
html body #step-8 .lt-comprovante-footer,
html body .lt-comprovante-footer {
  background: transparent !important;
  border-top: 1.5px solid var(--border) !important;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) 16px !important;
}
html body #step-8 .lt-comprovante-footer button,
html body .lt-comprovante-footer button {
  background-color: var(--bg-surface) !important;
  color: var(--theme-primary) !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary) 45%, var(--border)) !important;
  border-top: 2px solid color-mix(in srgb, var(--theme-primary) 55%, var(--border)) !important;
  border-radius: 20px !important;
  padding: 16px 0 !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: .01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--theme-primary) 20%, transparent) inset !important;
  transition: background-color .15s, transform .08s !important;
}
html body #step-8 .lt-comprovante-footer button::before {
  content: "↻";
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: inherit !important;
  display: inline-block !important;
  transform: translateY(-1px) !important;
}
html body #step-8 .lt-comprovante-footer button:hover,
html body .lt-comprovante-footer button:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 9%, var(--bg-surface)) !important;
}
html body #step-8 .lt-comprovante-footer button:active,
html body .lt-comprovante-footer button:active {
  transform: scale(.988) !important;
}
html[data-theme="dark"] body #step-8 .lt-comprovante-footer button,
html[data-theme="dark"] body .lt-comprovante-footer button {
  background-color: var(--bg-surface) !important;
  color: #FFB06A !important;
  border-color: rgba(246, 146, 30, .45) !important;
  border-top-color: rgba(246, 146, 30, .62) !important;
  box-shadow: 0 2px 0 rgba(246, 146, 30, 0.18) inset !important;
}

/* Paginação dots (várias loterias) */
html body .lt-comprovante-pagination-dot {
  background-color: var(--border) !important;
  width: 7px; height: 7px; border-radius: 999px;
}
html body .lt-comprovante-pagination-dot.is-active {
  background-color: var(--theme-primary) !important;
  width: 20px;
}

/* 5. MODAL CANCELAMENTO aposta (estilizado, substitui alert nativo) */
html body #cancelConfirmModal.lt-cancel-modal {
  background-color: rgba(10, 12, 14, 0.74) !important;
  backdrop-filter: blur(6px);
}
html body #cancelConfirmModal .lt-cancel-modal-card {
  background-color: var(--bg-surface) !important;
  border-radius: 20px !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 20px 60px -18px rgba(0,0,0,0.4);
}
html body #cancelConfirmModal .lt-cancel-modal-title {
  color: var(--text-hi) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}
html body #cancelConfirmModal .lt-cancel-modal-sub {
  color: var(--text-2) !important;
  font-size: 14px !important;
}
html body #cancelConfirmModal .lt-cancel-btn-no {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-hi) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
  padding: 12px 0 !important;
}
html body #cancelConfirmModal .lt-cancel-btn-yes {
  background-color: #EF4444 !important;
  color: #FFFFFF !important;
  border-radius: 16px !important;
  font-weight: 800 !important;
  padding: 12px 0 !important;
  box-shadow: 0 4px 12px -3px rgba(239,68,68,.40) !important;
}

/* 6. PIX DRAWER (slide-up modal pagamento via PIX) both-modes */
html body #pix-drawer.pix-drawer-overlay {
  background-color: rgba(10, 12, 14, 0.74) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
html body #pix-drawer .pix-drawer {
  background-color: var(--bg-surface) !important;
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 -14px 40px -18px rgba(0,0,0,0.35) !important;
}
html[data-theme="light"] body #pix-drawer .pix-drawer {
  background-color: #FFFFFF !important;
  box-shadow: 0 -16px 42px -20px rgba(17,24,39,0.22) !important;
}
html body #pix-drawer .pix-close-btn {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-hi) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
}
html body #pix-drawer .pix-qr-area {
  background-color: var(--bg-surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 14px !important;
}
html body #pix-drawer .pix-expiry-row {
  background-color: color-mix(in srgb, var(--theme-primary) 8%, var(--bg-surface)) !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-primary) 40%, var(--border)) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: var(--text-2) !important;
}
html body #pix-drawer .pix-expiry-row b { color: var(--text-hi) !important; font-weight: 800; }

/* ================================================================ */
/* PREMIUM LOTTU HEADER (menu e cabeçalho)                          */
/* ================================================================ */

/* ======= Header container geral (light mode Lottu surface) ======= */
html body header.bg-white.shadow-sm,
html body header.shadow-sm {
  background-color: var(--bg-page) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ======= Avatar inicial ======= */
html body header .rounded-full.bg-primary-yellow {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 9999px !important;
  background-image: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%) !important;
  background-color: var(--theme-primary) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 6px 16px -6px rgba(242, 93, 15, 0.55) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}
/* ======= Linha 1 do header: NOME USUÁRIO (Primeiro Nome) ======= */
html body header p.text-sm.text-gray-600,
html body header p.font-semibold.text-gray-900,
html body header p:first-of-type p.font-bold {
  color: var(--text-hi) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}
html body header p:first-child a > div > div > p:last-child {
  color: var(--theme-accent) !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
}

/* ======= Botão DEPOSITAR (header) ======= */
html body header a[href*="deposito"]:has(.text-white),
html body header a[href="deposito.php"] {
  border-radius: 18px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  background-image: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%) !important;
  background-color: var(--theme-primary) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 10px 22px -12px rgba(242,93,15,0.8) !important;
  color: #FFFFFF !important;
  transition: transform .12s ease, filter .15s ease, box-shadow .2s ease !important;
  cursor: pointer !important;
  cursor: pointer !important;
  overflow: hidden !important;
  position: relative !important;
}
html body header a[href*="deposito"]:hover,
html body header a[href="deposito.php"]:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.05) brightness(1.03) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 14px 28px -12px rgba(242,93,15,0.9) !important;
}
html body header a[href*="deposito"]:active,
html body header a[href="deposito.php"]:active {
  transform: translateY(1px) !important;
  filter: brightness(0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 14px -8px rgba(242,93,15,0.6) !important;
}
html body header a[href*="deposito"] .text-xs,
html body header a[href="deposito.php"] span {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
}

/* ======= Ícones do grupo direito (carrinho, sino, lupa SE existir) ======= */
html body header i.fa-shopping-cart,
html body header i.fa-bell,
html body header i.fa-search,
html body header button[onclick*="openPendingModal"] i,
html body header button[onclick*="openNotifPanel"] i,
html body header button[onclick*="showToast"] i {
  font-size: 20px !important;
  color: var(--text) !important;
  transition: transform .12s ease, color .15s ease !important;
}
html body header button[onclick*="openPendingModal"]:hover i,
html body header button[onclick*="openNotifPanel"]:hover i,
html body header button[onclick*="showToast"]:hover i {
  color: var(--text-hi) !important;
  transform: translateY(-1px) !important;
}
html body header button[onclick*="openPendingModal"]:active,
html body header button[onclick*="openNotifPanel"]:active {
  transform: scale(0.95) !important;
}

/* ======= Badge (número no carrinho e notificações ======= */
html body header #cartBadge,
html body header #notifBadge,
html body header span.bg-red-500.text-white.rounded-full {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 9999px !important;
  top: -6px !important;
  right: -6px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  border: 2px solid var(--bg-page) !important;
  box-shadow: 0 2px 6px rgba(231, 56, 56, 0.5) !important;
}
html body header #cartBadge {
  background-image: linear-gradient(135deg, #F65A5A 0%, #E73838 100%) !important;
}
html body header #notifBadge {
  background-image: linear-gradient(135deg, #F65A5A 0%, #E73838 100%) !important;
  background-color: #F65A5A !important;
}

/* ======= OLD box saldo (SALDO duplicate que ficava ABAIXO — ocultar ======= */
html body header > div > div.mt-3.bg-gray-50.rounded-lg,
html body header div.bg-gray-50.rounded-lg.p-3.flex,
html body header div:has(> div > p.text-xs.text-gray-500.uppercase) {
  display: none !important;
}
html body header p.text-xs.text-gray-500.uppercase,
html body header p:has(+ p#balance-display) {
  display: none !important;
}
html body header div#balance-display,
html body header p#balance-display {
  display: none !important;
}
html body header i#balance-icon {
  display: none !important;
}

/* ======= OLD pesquisa lupa ícone (some — substituído por Depositar) ======= */
html body header button[onclick*="showToast"],
html body header i.fa-search {
  display: none !important;
}
html body header button:has(> i.fa-search) {
  display: none !important;
}

/* ================================================================ */
/* DARK MODE HEADER LOTTU                                           */
/* ================================================================ */
html[data-theme="dark"] body header.bg-white.shadow-sm,
html[data-theme="dark"] body header.shadow-sm {
  background-color: rgba(26, 27, 29) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.015), transparent) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) !important;
}
html[data-theme="dark"] body header .rounded-full.bg-primary-yellow {
  border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] body header p.font-bold.text-gray-900 {
  color: var(--text-hi) !important;
}
html[data-theme="dark"] body header i.fa-shopping-cart,
html[data-theme="dark"] body header i.fa-bell,
html[data-theme="dark"] body header i.fa-search {
  color: var(--text-2) !important;
}
html[data-theme="dark"] body header i.fa-shopping-cart:hover,
html[data-theme="dark"] body header i.fa-bell:hover {
  color: var(--text-hi) !important;
}
html[data-theme="dark"] body header #cartBadge,
html[data-theme="dark"] body header #notifBadge {
  border-color: #1A1B1D !important;
}

/* ================================================================ */
/* MENU PERFIL DROPDOWN / DRAWER — Premium + toggle TEMA (sol/lua)          */
/* ================================================================ */
/* Profile Menu card base (caso exista em outras pages) */
html body #profileMenuDropdown,
html body .profile-dropdown,
html body .user-menu,
html body #userMenu,
html body .dropdown-menu,
html body .profile-dropdown-menu {
  border-radius: 20px !important;
  border: 1.5px solid var(--border) !important;
  background-color: var(--bg-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 24px 60px -18px rgba(0,0,0,0.25) !important;
  padding: 8px !important;
  overflow: hidden !important;
}
/* Menu top row: Olá! Nome */
html body #profileMenuDropdown .hello-row,
html body .profile-dropdown .hello-row,
html body .user-menu .hello-row,
html body #profileMenuDropdown > div:first-child,
html body .profile-dropdown > div:first-child,
html body .user-menu > div:first-child {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border) !important;
  margin: -8px -8px 8px !important;
  background: var(--theme-primary-soft) !important;
}
/* Item theme toggle dentro do menu */
html body .menu-item-theme-toggle,
html body #menuItemTheme {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  background-color: var(--bg-surface-2) !important;
  border: 1.5px solid var(--border) !important;
  margin: 6px 6px 4px !important;
  font-weight: 700 !important;
  color: var(--text-hi) !important;
  transition: all .15s ease !important;
}
html body .menu-item-theme-toggle:hover,
html body #menuItemTheme:hover {
  background-color: var(--theme-primary-soft) !important;
  border-color: var(--theme-primary-soft-border) !important;
}
html body .menu-item-theme-toggle .theme-icon-sun,
html body #menuItemTheme .theme-icon-sun,
html body .menu-item-theme-toggle .theme-icon-moon,
html body #menuItemTheme .theme-icon-moon {
  font-size: 18px !important;
  color: var(--theme-primary) !important;
}
/* Switch pequeno (toggle) theme dentro do menu */
html body .menu-theme-switch {
  width: 46px !important;
  height: 26px !important;
  border-radius: 9999px !important;
  background-color: var(--bg-surface) !important;
  border: 1.5px solid var(--border-3) !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: all .2s ease !important;
}
html body .menu-theme-switch::after {
  content: '' !important;
  position: absolute !important;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%) !important;
  transition: transform .22s cubic-bezier(.4,0,.2,1) !important;
  box-shadow: 0 2px 6px rgba(242, 93, 15, 0.4) !important;
}
html[data-theme="dark"] body .menu-theme-switch {
  background-color: rgba(246, 146, 30, 0.15) !important;
  border-color: rgba(246, 146, 30, 0.4) !important;
}
html[data-theme="dark"] body .menu-theme-switch::after {
  transform: translateX(20px) !important;
}