/* =========================================================
   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-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; }

/* ---------- 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 ---------- */
.pwa-footer {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .pwa-footer { box-shadow: 0 -2px 10px rgba(0,0,0,0.35); }

/* ---------- 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: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-dis); }

/* ---------- 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; }

/* --- 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) ---------- */
#theme-toggle-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 14px;
  z-index: 999998;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 1px solid var(--border-2);
  background: var(--bg-surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  font-size: 18px;
  transition: transform .15s ease, background-color .2s ease;
  user-select: none;
}
#theme-toggle-btn:active { transform: scale(0.95); }
html[data-theme="dark"] #theme-toggle-btn {
  background: var(--bg-surface-2);
  color: var(--theme-accent-gold);
}
/* Afasta do header quando houver scroll (desktop) */
@media (min-width: 640px) {
  #theme-toggle-btn { top: 14px; }
}

/* ---------- 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 */
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;
}
html body #betScopeAll.bg-primary-yellow,
html body #betScopeAll {
  background-image: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%) !important;
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 10px 22px -10px rgba(242, 93, 15, 0.6) !important;
}
html body #betScopeEach.bg-gray-100,
html body #betScopeEach {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 4px 10px -4px rgba(17, 24, 39, 0.06) !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 {
  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 {
  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 {
  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')"] {
  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 {
  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 {
  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 */
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 #betScopeEach.bg-gray-100,
html[data-theme="dark"] body #betScopeEach {
  background-color: #202123 !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.38) !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;
}

/* ================================================================ */
/* 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;
}