/* Visual claro no tom Chute da Sorte — classes próprias do EsporteBet */
:root {
  --brand: #e8542b;
  --brand-hover: #c73610;
  --brand-soft: rgba(232, 65, 21, .12);
  --bg: #eaeef9;
  --price: #3a7824;
}
body.page-chute {
  --brand: #e84115;
  --brand-hover: color-mix(in srgb, var(--brand) 86%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
}
body {
  font-family: Geist, Manrope, "Segoe UI", Robino, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.app { background: var(--bg); }
.top-rail { display: none; }
.top {
  background: var(--brand) !important;
  color: #fff;
  height: var(--top-h);
  min-height: var(--top-h);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.top-brand span { font-weight: 800; letter-spacing: -.02em; }
.top-nav a { color: rgba(255,255,255,.88); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; }
.top-nav a.on, .top-nav a:hover {
  color: #fff;
  box-shadow: inset 0 -3px 0 #fff;
}
.top-login {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  border-radius: 999px;
  height: 36px;
  padding: 0 16px;
  font-weight: 800;
}
.top-login:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.top-register {
  background: #fff;
  color: var(--brand);
  border: 1.5px solid #fff;
  border-radius: 999px;
  height: 36px;
  padding: 0 16px;
  font-weight: 800;
}
.top-register:hover { filter: brightness(.96); color: var(--brand); border-color: #fff; }
.top-rew {
  border-color: rgba(255,255,255,.7);
  color: #fff;
  border-radius: 999px;
}
.top-rew:hover { background: rgba(255,255,255,.12); }
.top-acc-chip {
  background: rgba(0,0,0,.16);
  border-color: rgba(255,255,255,.28);
}
.top-acc-plus { background: #fff; color: var(--brand); }
.top-acc-user {
  background: rgba(0,0,0,.16);
  border-color: rgba(255,255,255,.28);
}
.menu-toggle { background: rgba(0,0,0,.18); border-radius: 10px; }

.sidebar {
  background: #fff;
  color: var(--text);
  border-right: 1px solid var(--line);
}
.side-label { color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.item, .group-btn, .sub-btn, .sublink { color: #243044; }
.item:hover, .group-btn:hover, .sub-btn:hover, .sublink:hover, .item.on {
  background: var(--brand-soft);
  color: var(--brand);
}
.item.on { box-shadow: inset 3px 0 0 var(--brand); }
.login-btn {
  background: var(--brand);
  color: #fff;
  border-radius: 12px;
}
.side-user { color: var(--text); border-top: 1px solid var(--line); }
.side-user a { color: var(--brand); }

.content { color: var(--text); }
.sb-search {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(21,25,35,.04);
}
.sb-search i { color: var(--muted); }
.sb-search input { color: var(--text); }
.sb-search input::placeholder { color: #8a9bb8; }
.sb-chip {
  background: #fff;
  border: 1px solid var(--line);
  color: #243044;
  box-shadow: 0 1px 2px rgba(21,25,35,.04);
}
.sb-chip i { color: var(--brand); }
.sb-chip.on, .sb-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: #fff;
}
.sb-pills { background: var(--bg); border-bottom-color: var(--line); }
.sb-pill { color: var(--muted); }
.sb-pill.on, .sb-pill:hover { color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); }
.sb-section-head h2, .sb-section-head { color: var(--text); }
.sb-section-head a { color: var(--brand); }

.sb-promo {
  background:
    radial-gradient(circle at 88% 0%, rgba(255,255,255,.28), transparent 42%),
    linear-gradient(135deg, #ff7a4d 0%, #e8542b 62%);
  color: #fff;
  border-radius: 16px;
}
.sb-promo--alt {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.35), transparent 46%),
    linear-gradient(135deg, #ff8a62 0%, #d94822 78%);
}
.sb-promo h2 { color: #fff; }
.sb-promo-kicker { color: #fff; background: rgba(0,0,0,.16); padding: 3px 8px; border-radius: 6px; }

.jl-page .match.jl-match,
.jl-match--live {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(21,25,35,.05);
}
.jl-page .match.jl-match:hover,
.jl-match--live:hover { background: #f7f9fc; }
.jl-page .jl-match .team,
.jl-page .team { color: var(--text); font-style: normal; }
.jl-page .odd-btn,
.gm-page .odd-btn {
  background: #fff;
  color: var(--price);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.jl-page .odd-btn:hover:not(:disabled),
.gm-page .odd-btn:hover:not(:disabled) {
  background: #f3f6fc;
  border-color: #c5d0ea;
}
.jl-page .odd-btn.on,
.gm-page .odd-btn.on {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.jl-page .odd-btn.on small,
.gm-page .odd-btn.on small { color: rgba(255,255,255,.88); }
.jl-group-head, .jl-group-title { color: var(--text); }
.jl-group-odds { color: var(--muted); }
.jl-tab { color: var(--muted); }
.jl-tab.on, .jl-tab:hover { color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); }
.site-footer {
  background: #fff;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.site-footer-brand strong, .site-footer-col h3 { color: var(--text); }
.site-footer-col a, .site-footer-nav a { color: var(--muted); border-bottom-color: var(--line); }
.site-footer-col a:hover { color: var(--brand); }

.sb-tabbar-row {
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 20px rgba(21,25,35,.08);
}
.sb-tab { color: #8a9bb8; }
.sb-tab.on, .sb-tab:hover { color: var(--brand); }
.sb-tab-bal, .sb-tab-bal.on { color: var(--brand); }

.btn { background: var(--brand); border-radius: 12px; }
.btn:hover:not(:disabled) { background: var(--brand-hover); }
.btn-ghost {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost:hover:not(:disabled) { background: #f3f6fc; color: var(--text); }
.btn-clear { background: var(--surface-2); color: var(--text); }
.btn-clear:hover:not(:disabled) { background: var(--line); color: var(--text); }
.slip {
  background: #fff;
  color: var(--text);
  border-left: 1px solid var(--line);
}
.slip-head { background: var(--brand); }
.slip-foot { background: #fff; border-top-color: var(--line); }
.pick { border-color: var(--line); }
.odd-return strong { color: var(--text); }

.panel, .kpi, .jl-empty, .gm-empty, .market, .hero, .leagues, .eventlist, .tkt-card, .auth, .acc-card, .pix-card {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.country, .heads, .market h3, .title { background: var(--brand); }
.hint, .gm-hint { color: var(--muted); }
.toast { background: #fff; color: var(--text); box-shadow: var(--shadow); }
.auth-screen, .auth-screen--compact, .auth-screen--register { background: var(--bg); }
.auth-card, .ticket-card {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.auth-form label { color: var(--text); }
.auth-input, .auth-input:focus-within,
.auth-input, .auth-form input, .filters input, .form-row input, .panel input, .panel select, .panel textarea {
  background: #fff;
  color: var(--text);
  border-color: var(--line);
}
.auth-input input { color: var(--text); }

.acc-hero, .reg-hero {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.28), transparent 46%),
    linear-gradient(135deg, #ff7a4d 0%, #e8542b 72%);
  color: #fff;
  border: 0;
}
.acc-hero h1, .reg-hero h1, .acc-balance { color: #fff; }
.acc-badge { background: rgba(255,255,255,.16); color: #fff; }
.acc-hero-actions .btn { background: #fff; color: var(--brand); }
.acc-hero-actions .btn-ghost {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.acc-card, .reg-card {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}
.acc-card h2, .reg-card h2 { color: var(--text); }
.acc-card h2 i, .reg-card h2 i { color: var(--brand); }
.acc-card .hint, .reg-card .hint, .acc-empty { color: var(--muted); }
.acc-link { color: var(--brand); }
.acc-list li { background: var(--surface-2); border: 1px solid var(--line); }
.acc-pos { color: var(--price); }
.acc-page > .ok { background: #e8f8ee; color: var(--price); }
.acc-page > .err { background: #fde8e8; color: #b42318; }
.acc-card .auth-form select, .acc-card .auth-input {
  background: #fff;
  color: var(--text);
  border-color: var(--line);
}

.mb-overlay { background: rgba(8,10,16,.45); backdrop-filter: blur(3px); }
.mb-sheet { background: #fff; color: var(--text); }
.mb-head { background: var(--brand); color: #fff; }
.mb-tile { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.mb-exit { color: var(--brand); }

.sl-overlay, .ra-overlay, .bcpx-overlay, .ticket-modal {
  background: rgba(8, 10, 16, .45) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 200 !important;
  bottom: 0 !important;
}
.sl-overlay:not([hidden]),
.ra-overlay:not([hidden]),
.bcpx-overlay:not([hidden]),
.ticket-modal:not([hidden]) {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 20px 16px 28px !important;
  overflow-y: auto !important;
}
.sl-overlay:not([hidden]) {
  align-items: center !important;
}
.sl-box, .sl-page {
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  color: var(--text);
  border-radius: 20px;
  padding: 28px 24px 22px;
  box-shadow: 0 24px 60px rgba(21, 25, 35, .22);
}
.sl-t {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #151923;
}
.sl-x {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f3f6fc;
  color: #526789;
  top: 16px; right: 16px;
}
.sl-x:hover { background: var(--line); color: var(--text); }
.sl-form { gap: 12px; }
.sl-field { display: grid; gap: 6px; }
.sl-field > span {
  font-size: 13px; font-weight: 700; color: #243044;
}
.sl-in {
  height: 48px;
  background: #fff;
  border: 1.5px solid #d7deee;
  border-radius: 12px;
  color: var(--text);
  padding: 0 14px;
  font: 600 15px/1 Geist, Manrope, sans-serif;
}
.sl-in:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.sl-in::placeholder { color: #8a9bb8; font-weight: 500; }
.sl-btn {
  height: 48px;
  margin-top: 6px;
  background: var(--brand);
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sl-btn:hover:not(:disabled) { background: var(--brand-hover); }
.sl-links {
  justify-content: space-between;
  margin-top: 8px;
}
.sl-forgot-a {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--brand); font: 700 13px/1.3 Geist, sans-serif;
}
.sl-signup { color: #526789; font-size: 13px; font-weight: 600; }
.sl-link-btn { color: var(--brand); }
.sl-err { background: #fde8e8; color: #b42318; padding: 8px 10px; border-radius: 10px; }

.ra-overlay { place-items: start center; }
.ra-wrap, .auth-screen--register { width: min(440px, calc(100vw - 32px)); }
.ra-wrap {
  margin: 0 auto;
  max-height: calc(100dvh - 40px);
  overflow: auto;
}
.ra-panel {
  background: #fff;
  color: var(--text);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(21, 25, 35, .22);
  overflow: visible;
}
.ra-top {
  background: #fff;
  color: var(--text);
  padding: 24px 24px 0;
  display: block;
  grid-template-columns: none;
}
.ra-col { display: block; }
.ra-t {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #151923;
}
.ra-x {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f3f6fc;
  color: #526789;
  z-index: 2;
}
.ra-panel { position: relative; }
.ra-x:hover { background: var(--line); color: var(--text); }
.ra-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 4px;
}
.ra-tab {
  height: 4px;
  padding: 0;
  border-radius: 99px;
  background: #e2e8f8;
  color: transparent;
  box-shadow: none;
  font-size: 0;
}
.ra-tab.on, .ra-tab.done { background: var(--brand); color: transparent; box-shadow: none; }
.ra-tab span { display: none; }
.ra-body { padding: 12px 24px 22px; gap: 12px; }
.ra-step-kicker {
  display: none;
}
.ra-lbl { color: #243044; font-weight: 700; }
.ra-p { color: var(--muted); }
.ra-f { display: grid; gap: 6px; }
.ra-f > span { font-size: 13px; font-weight: 700; color: #243044; }
.ra-in {
  height: 48px;
  border: 1.5px solid #d7deee;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  padding: 0 14px;
  font: 600 15px/1 Geist, Manrope, sans-serif;
}
.ra-in:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}
.ra-phone {
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 0;
  row-gap: 6px;
}
.ra-phone > span:first-child { grid-column: 1 / -1; }
.ra-pre {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 12px;
  border: 1.5px solid #d7deee; border-right: 0;
  border-radius: 12px 0 0 12px;
  background: #f7f9fc;
  font-weight: 800; color: var(--text);
}
.ra-phone .ra-in {
  border-radius: 0 12px 12px 0;
  border-left: 0;
}
.ra-btn {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.ra-btn:hover { background: var(--brand-hover); }
.ra-login { color: var(--muted); font-size: 13px; font-weight: 600; text-align: left; }
.ra-login-a { color: var(--brand); }
.ra-seg { display: flex; gap: 8px; }
.ra-segb {
  height: 36px; padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}
.ra-segb.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.ra-check { color: var(--text); }
.ra-check a { color: var(--brand); }
.ra-paisb { background: var(--surface-2); border-color: var(--line); }

.bcpx-panel {
  width: min(420px, calc(100vw - 32px));
  margin: 0 auto;
  background: #fff;
  color: var(--text);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(21, 25, 35, .22);
  overflow: hidden;
}
.bcpx-head {
  background: #fff;
  color: #151923;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  padding: 22px 22px 8px;
}
.bcpx-x {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f3f6fc;
  color: #526789;
  font-size: 22px;
}
.bcpx-x:hover { background: var(--line); color: var(--text); }
.bcpx-bal small { color: var(--muted); }
.bcpx-bal b { color: var(--brand); }
.bcpx-tabs { border-bottom-color: var(--line); }
.bcpx-tabs button { color: var(--muted); }
.bcpx-tabs button.on { color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.bcpx-f > span { color: #243044; }
.bcpx-money, .bcpx-sel, .bcpx-key {
  background: #fff;
  border: 1.5px solid #d7deee;
  border-radius: 12px;
}
.bcpx-money i, .bcpx-money input, .bcpx-sel, .bcpx-key input { color: var(--text); }
.bcpx-chips button {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--text);
  border-radius: 10px;
}
.bcpx-chips button.on, .bcpx-chips button:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.bcpx-note, .bcpx-copy-lbl, .bcpx-wait { color: var(--muted); }
.bcpx-btn {
  background: var(--brand);
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bcpx-btn-ghost { background: var(--surface-2); color: var(--text); }
.bcpx-err { background: #fde8e8; color: #b42318; }
.bcpx-pay-val { color: var(--brand); }
.bcpx-code {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
.bcpx-ok-ico { color: var(--price); }

.admin-top { background: var(--brand); }

.leaf a { color: #243044; }
.leaf a:hover { background: var(--brand-soft); color: var(--brand); padding-left: 14px; }
.jl-match-kick { color: var(--text); }
.jl-match-comp, .jl-match-meta .jl-done { color: var(--muted); }
.jl-match-more { background: var(--brand); color: #fff; }
.jl-empty, .gm-empty { color: var(--muted); }
.acc-hero, .reg-hero {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.28), transparent 46%),
    linear-gradient(135deg, #ff7a4d 0%, #e8542b 72%) !important;
  border-color: transparent !important;
}
body.page-account .acc-card,
body.page-rules .reg-card,
.acc-card, .reg-card {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.page-account .acc-card h2,
.acc-card h2, .reg-card h2 { color: var(--text) !important; }
body.page-account .acc-list li,
.acc-list li { background: #f7f9fc !important; border-color: var(--line) !important; }
body.page-account .acc-card .auth-form label,
body.page-account .acc-card .auth-input,
.acc-card .auth-form select, .acc-card .auth-input {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.site-footer-brand strong, .site-footer-col h3 { color: var(--text) !important; }
.site-footer-col a:hover, .site-footer-nav a:hover { color: var(--brand) !important; }
.pix-side, .pix-card { background: #fff; color: var(--text); }
.pix-side h2 { color: var(--text); }

.jl-time, .jl-page .team, .pick-match, .panel h2, .kpi strong, .tkt-card h1 {
  color: var(--text) !important;
}
.gm-page .odd-btn {
  background: #fff !important;
  color: var(--price) !important;
  border: 1px solid var(--line) !important;
}
.gm-page .odd-btn small { color: var(--muted) !important; }
.gm-page .odd-btn:hover:not(:disabled) { background: #f3f6fc !important; }
.gm-page .odd-btn.on { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
.gm-hint, .hint { color: var(--muted) !important; }
.slip { background: #fff !important; color: var(--text) !important; border-left-color: var(--line) !important; }
.slip-head { background: var(--brand) !important; }
.slip-foot { background: #fff !important; border-top-color: var(--line) !important; }
.pick { border-color: var(--line) !important; }
.odd-return strong { color: var(--text) !important; }
.tkt-stats div, .tkt-picks li { background: #f7f9fc !important; color: var(--text); }
.tkt-code { color: var(--brand) !important; }
.auth-input, .auth-form input, .filters input, .form-row input, .panel input, .panel select, .panel textarea {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.jl-hero {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.28), transparent 46%),
    linear-gradient(135deg, #ff7a4d 0%, #e8542b 72%) !important;
  color: #fff;
}
.seller-strip { background: var(--brand) !important; }
.toast { background: #fff !important; color: var(--text) !important; box-shadow: var(--shadow) !important; }
.auth-screen, .auth-screen--compact, .auth-screen--register { background: var(--bg) !important; }
.auth-card, .ticket-card { background: #fff !important; color: var(--text) !important; border-color: var(--line) !important; }
.empty-state, .line-item { background: #fff !important; color: var(--text) !important; }
.leaf a:hover { background: var(--brand-soft) !important; color: var(--brand) !important; }
.item:hover, .group-btn:hover, .sub-btn:hover, .sublink:hover, .item.on {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
.item.on { box-shadow: inset 3px 0 0 var(--brand) !important; }
.country, .heads, .market h3, .title { background: var(--brand) !important; }
.bcpx-tabs button.on { color: var(--brand) !important; box-shadow: inset 0 -2px 0 var(--brand) !important; }
.bcpx-f > span { color: #243044 !important; }
.bcpx-money, .bcpx-sel, .bcpx-key, .bcpx-code {
  background: #fff !important;
  border: 1.5px solid #d7deee !important;
}
.bcpx-money input, .bcpx-key input, .bcpx-sel { color: var(--text) !important; }
.bcpx-chips button { background: #fff !important; color: var(--text) !important; border-color: var(--line) !important; }
.bcpx-btn { background: var(--brand) !important; color: #fff !important; }
.login-btn { background: var(--brand) !important; color: #fff !important; }

@media (max-width: 820px) {
  .sl-box, .ra-wrap, .bcpx-panel { width: min(420px, calc(100vw - 24px)); }
  .ra-body { padding: 10px 18px 18px; }
  .sl-box { padding: 24px 18px 18px; }
}