/* ==========================================================================
   KP-UI — camada visual compartilhada (celular, tablet e desktop)
   Carregada por último em todas as páginas públicas.
   ========================================================================== */
:root {
  --kp-bg: #050b08;
  --kp-surface: #0b1812;
  --kp-line: rgba(74, 222, 128, .14);
  --kp-green: #22c55e;
  --kp-green-2: #16a34a;
  --kp-lime: #a3e635;
  --kp-text: #e6f4ea;
  --kp-muted: #8aa597;
  --kp-gutter: 16px;
  /* Escala única de espaçamento */
  --kp-pad: 16px;          /* margem lateral/topo do conteúdo */
  --kp-gap-section: 28px;  /* entre blocos/seções */
  --kp-gap-head: 14px;     /* título da seção -> conteúdo */
  --kp-gap-grid: 14px;     /* entre cartões */
  --kp-header-h: 60px;
  --kp-radius: 28px;
  --kp-radius-sm: 18px;
  --kp-radius-lg: 34px;
}
@media (min-width: 768px)  { :root { --kp-pad: 24px; --kp-gap-section: 32px; --kp-gap-grid: 16px; --kp-header-h: 64px; } }
@media (min-width: 1280px) { :root { --kp-pad: 28px; --kp-gap-section: 36px; --kp-gap-grid: 18px; } }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.kp-lock, html.kp-lock body { overflow: hidden !important; }
body { line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; }
a, button, [role="button"], summary, label { touch-action: manipulation; }
img, video, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--kp-green); outline-offset: 2px; border-radius: 8px; }
::selection { background: rgba(34, 197, 94, .35); }

/* ------- Alvos de toque confortáveis ------- */
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
  button, .btn, input[type="submit"], input[type="button"], a[class*="btn"], select { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; min-height: 46px; }
  textarea { min-height: 96px; }
}

/* ------- Celular: mais ar entre os blocos ------- */
@media (max-width: 767px) {
  :root { --kp-gutter: 16px; }
  main, .main-content, .content, .page-content, .container, .wrap, .wrapper {
    padding-left: max(var(--kp-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--kp-gutter), env(safe-area-inset-right)) !important;
  }
  main { padding-top: 18px !important; }
  main.space-y-5 > * + *, main.space-y-4 > * + * { margin-top: 22px !important; }
  .space-y-3 > * + * { margin-top: 14px !important; }
  .space-y-2 > * + * { margin-top: 10px !important; }
  /* grades de jogos/cartões respiram mais */
  .grid.gap-2, .grid.gap-2\.5, .grid.gap-3 { gap: 12px !important; }
  .grid.gap-4 { gap: 16px !important; }
  /* cartões e painéis */
  .rounded-xl, .rounded-2xl, .card, .panel, .box { border-radius: 16px; }
  [class*="p-3"].rounded-xl, [class*="p-3"].rounded-2xl { padding: 14px !important; }
  [class*="p-4"].rounded-2xl { padding: 18px !important; }
  h1 { font-size: clamp(22px, 6.2vw, 28px); line-height: 1.2; }
  h2 { font-size: clamp(18px, 5vw, 22px); line-height: 1.25; }
  h3 { line-height: 1.3; }
  /* tabelas largas rolam sem quebrar a página */
  .table-responsive, .overflow-x-auto, .table-wrap { -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }
  /* modais ocupam a tela com margem segura */
  .modal, [role="dialog"]:not(.kp-sheet) { max-width: calc(100vw - 24px); }
  /* topo respeita o entalhe do aparelho */
  .bb-topbar, header.sticky, header[class*="sticky"] { padding-top: env(safe-area-inset-top); }
  /* botões principais em largura total nos formulários */
  form button[type="submit"], form .btn-primary { width: 100%; }
}

/* ------- Tablet ------- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --kp-gutter: 24px; }
  main { padding-left: var(--kp-gutter) !important; padding-right: var(--kp-gutter) !important; }
}

/* ------- Desktop: conteúdo centralizado e confortável ------- */
@media (min-width: 1280px) {
  main { max-width: 1440px; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   Navegação inferior (aparelhos < 1024px). Substitui as barras antigas.
   ========================================================================== */
.kamba-bottom-nav,
nav.fixed.bottom-0.lg\:hidden,
nav[class*="fixed"][class*="bottom-0"][class*="lg:hidden"] { display: none !important; }

.kp-nav { display: none; }
@media (max-width: 1023px) {
  .kp-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(7, 14, 10, .92);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--kp-line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
  }
  .kp-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
    color: var(--kp-muted); font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.1; text-decoration: none;
    border-radius: 14px; transition: color .15s, background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .kp-tab:active { transform: scale(.94); }
  .kp-tab .kp-ico { display: grid; place-items: center; width: 40px; height: 28px; border-radius: 999px; transition: background .2s; }
  .kp-tab.is-active { color: var(--kp-green); }
  .kp-tab.is-active .kp-ico { background: rgba(34, 197, 94, .16); }
  .kp-tab .kp-lbl { letter-spacing: .01em; white-space: nowrap; }

  /* Botão central "Depositar" em destaque */
  .kp-tab.kp-fab { color: #fff; }
  .kp-tab.kp-fab .kp-ico {
    width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
    background: linear-gradient(145deg, var(--kp-lime), var(--kp-green-2));
    color: #04130a; box-shadow: 0 8px 22px rgba(34, 197, 94, .45), 0 0 0 5px var(--kp-bg);
  }
  .kp-tab.kp-fab .kp-ico svg { width: 24px; height: 24px; }
  .kp-tab.kp-fab .kp-lbl { color: var(--kp-text); margin-top: 2px; }
  .kp-tab.kp-fab.is-active .kp-ico { background: linear-gradient(145deg, #c6f26a, var(--kp-green)); }
}

/* Folha "Mais" */
.kp-sheet-bg {
  position: fixed; inset: 0; z-index: 9994; background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s;
}
.kp-sheet-bg.open { opacity: 1; }
.kp-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9995;
  max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px var(--kp-gutter) calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #0d1f16, #081410);
  border-top: 1px solid var(--kp-line); border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .6);
  transform: translateY(100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  color: var(--kp-text);
}
.kp-sheet::before { content: ""; display: block; width: 44px; height: 4px; margin: -6px auto 14px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.kp-sheet.open { transform: none; }
.kp-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 17px; }
.kp-sheet-head button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--kp-text); cursor: pointer; }
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kp-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 6px;
  border: 1px solid var(--kp-line); border-radius: 16px; background: rgba(255, 255, 255, .03);
  color: var(--kp-text); font-size: 12.5px; font-weight: 600; text-align: center; text-decoration: none; transition: background .15s, transform .12s;
}
.kp-tile:active { transform: scale(.96); background: rgba(34, 197, 94, .12); }
.kp-tile-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(34, 197, 94, .14); color: var(--kp-green); }
@media (min-width: 640px) { .kp-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .kp-sheet, .kp-sheet-bg { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kp-sheet, .kp-sheet-bg, .kp-tab { transition: none; }
}

/* ==========================================================================
   PADRONIZAÇÃO — cabeçalho, conteúdo, títulos e cartões iguais em todas as páginas
   ========================================================================== */

/* ---- Cabeçalho único (todas as variações) ---- */
header.sticky, header[class*="sticky"], .bb-topbar {
  min-height: var(--kp-header-h) !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: 0 !important;
  padding-left: max(var(--kp-pad), env(safe-area-inset-left)) !important;
  padding-right: max(var(--kp-pad), env(safe-area-inset-right)) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important; box-sizing: border-box;
}
.bb-topbar-inner { height: var(--kp-header-h) !important; min-height: var(--kp-header-h) !important; padding: 0 !important; width: 100%; }
header.sticky > *, header[class*="sticky"] > * { align-items: center; min-width: 0; }
header.sticky img[src*="logo"], header[class*="sticky"] img[src*="logo"], .bb-topbar img[src*="logo"] {
  height: 36px !important; width: auto !important; max-width: 150px !important; object-fit: contain;
}
header.sticky a, header.sticky button, header[class*="sticky"] a, header[class*="sticky"] button { white-space: nowrap; }
header.sticky form, header[class*="sticky"] form { margin: 0; }

/* ---- Área de conteúdo com margens e ritmo vertical iguais ---- */
main, .kp-main {
  padding: var(--kp-pad) !important;
  box-sizing: border-box; width: 100%;
}
main > * + *, .kp-main > * + * { margin-top: var(--kp-gap-section) !important; }
main > .space-y-5 > * + *, main > .space-y-6 > * + * { margin-top: var(--kp-gap-grid) !important; }

/* ---- Seções: título e conteúdo alinhados à mesma borda dos cartões ---- */
main section > .flex.items-center.justify-between,
main section > div:first-child.flex.items-center.justify-between { padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0; }
main section.space-y-2 > * + *, main section.space-y-3 > * + *, main section.space-y-4 > * + * { margin-top: var(--kp-gap-head) !important; }
main section .px-1 { padding-left: 0 !important; padding-right: 0 !important; }
main section h2:not([class*="text-xs"]):not([class*="text-[1"]), main section h3:not([class*="text-xs"]):not([class*="text-[1"]):not([class*="text-sm"]) { font-size: 16px; line-height: 1.3; }
@media (min-width: 768px) { main section h2:not([class*="text-xs"]):not([class*="text-[1"]) { font-size: 18px; } }
main h1 { font-size: clamp(22px, 5.5vw, 30px) !important; line-height: 1.2 !important; margin: 0 0 4px; }

/* ---- Grades e carrosséis: mesmo respiro entre cartões ---- */
main .grid[class*="gap-"] { gap: var(--kp-gap-grid) !important; }
main .flex.overflow-x-auto, main .overflow-x-auto.flex, main [class*="snap-x"] { gap: 12px !important; scroll-padding-inline: var(--kp-pad); padding-bottom: 4px; }


/* ---- Cartões e painéis: raio, borda e padding consistentes ---- */
main .rounded-xl, main .rounded-2xl, main .rounded-lg.border, main .card, main .panel { border-radius: var(--kp-radius); }
main .rounded-xl.border, main .rounded-2xl.border { border-color: var(--kp-line); }
main [class*="p-4"].rounded-xl, main [class*="p-4"].rounded-2xl, main [class*="p-5"].rounded-2xl, main [class*="p-6"].rounded-2xl { padding: 18px !important; }
@media (min-width: 768px) { main [class*="p-4"].rounded-xl, main [class*="p-4"].rounded-2xl, main [class*="p-5"].rounded-2xl, main [class*="p-6"].rounded-2xl { padding: 22px !important; } }

/* ---- Formulários: rótulos, campos e botões com ritmo igual ---- */
main form > * + *, main form .space-y-3 > * + *, main form .space-y-4 > * + * { margin-top: 14px; }
/* (sem padding aqui: campos com ícone/prefixo, como o "R$" do depósito, definem o próprio recuo) */

/* ---- Menu lateral (desktop): mesma largura e respiro ---- */
aside#sidebar, aside[id*="sidebar"] { padding-top: 18px !important; padding-bottom: 18px !important; }
aside#sidebar nav > * + *, aside[id*="sidebar"] nav > * + * { margin-top: 4px; }

/* ---- Rodapé ---- */
footer { padding: 28px var(--kp-pad) !important; }
footer > * + * { margin-top: 18px; }

/* ==========================================================================
   BORDAS ARREDONDADAS — escala única, mais suave em todo o site
   ========================================================================== */
.rounded-md, .rounded { border-radius: 16px !important; }
.rounded-lg { border-radius: var(--kp-radius-sm) !important; }
.rounded-xl { border-radius: var(--kp-radius) !important; }
.rounded-2xl { border-radius: var(--kp-radius-lg) !important; }
.rounded-3xl { border-radius: 40px !important; }
/* cantos parciais (cartões com imagem em cima, abas) */
.rounded-t-xl { border-top-left-radius: var(--kp-radius) !important; border-top-right-radius: var(--kp-radius) !important; }
.rounded-b-xl { border-bottom-left-radius: var(--kp-radius) !important; border-bottom-right-radius: var(--kp-radius) !important; }
.rounded-t-2xl { border-top-left-radius: var(--kp-radius-lg) !important; border-top-right-radius: var(--kp-radius-lg) !important; }
.rounded-b-2xl { border-bottom-left-radius: var(--kp-radius-lg) !important; border-bottom-right-radius: var(--kp-radius-lg) !important; }

/* componentes com classes próprias */
.card, .panel, .box, .modal, .modal-content, .dropdown, .dropdown-menu, .popover, [class*="-card"], [class*="card-"],
.stat-card, .market-card, .game-card, .promo-card { border-radius: var(--kp-radius); }
.btn, button:not(.kp-tab):not([class*="rounded-full"]), input[type="submit"], input[type="button"], a[class*="btn"] { border-radius: var(--kp-radius-sm); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { border-radius: var(--kp-radius-sm) !important; }
input[type="file"]::file-selector-button { border-radius: 14px; }
.badge, .tag, .chip, .pill { border-radius: 999px; }
img.rounded-xl, img.rounded-2xl, .game-card-hover { border-radius: var(--kp-radius) !important; }
.game-card-hover, [class*="game-card"] { overflow: hidden; }
.table-wrap, .table-responsive { border-radius: var(--kp-radius); overflow: hidden; }
dialog, [role="dialog"]:not(.kp-sheet) { border-radius: var(--kp-radius-lg); }

/* cabeçalho/menu: itens e botões com forma de pílula suave */
header.sticky a[class*="rounded"], header.sticky button[class*="rounded"], .bb-topbar a, .bb-topbar button { border-radius: var(--kp-radius-sm); }
aside#sidebar a, aside[id*="sidebar"] a { border-radius: var(--kp-radius-sm) !important; }
footer a, footer .rounded-xl { border-radius: var(--kp-radius-sm); }

/* barra inferior e gaveta */
.kp-nav { border-radius: 30px 30px 0 0; }
.kp-tab { border-radius: 22px; }
.kp-sheet { border-radius: 36px 36px 0 0; }
.kp-tile { border-radius: 26px; }
.kp-tile-ico { border-radius: 20px; }
.kp-sheet-head button { border-radius: 14px; }

/* ==========================================================================
   MENU LATERAL / GAVETA — ícones limpos, sem o quadradinho colorido atrás
   ========================================================================== */
aside[id*="sidebar"] a > div[class*="w-6"],
aside[id*="sidebar"] a div[class*="w-6"][class*="h-6"],
#mobileDrawer a > div[class*="w-6"],
#mobileDrawer a div[class*="w-6"][class*="h-6"],
#mobileDrawer a div[class*="w-7"][class*="h-7"] {
  width: 22px !important; height: 22px !important; min-width: 22px;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  color: var(--kp-muted) !important;
  display: inline-flex; align-items: center; justify-content: center;
}
aside[id*="sidebar"] a i, #mobileDrawer a i { font-size: 16px !important; width: 20px; text-align: center; color: inherit !important; }
aside[id*="sidebar"] a svg, #mobileDrawer a svg { color: inherit; }

/* item ativo: fundo suave no lugar da barra lateral grossa; ícone e texto em verde */
aside[id*="sidebar"] a[class*="border-l-4"], #mobileDrawer a[class*="border-l-4"] {
  border-left: 0 !important; background: rgba(34, 197, 94, .12) !important; color: var(--kp-green) !important;
}
aside[id*="sidebar"] a[class*="border-l-4"] div[class*="w-6"], #mobileDrawer a[class*="border-l-4"] div[class*="w-6"] { color: var(--kp-green) !important; }
aside[id*="sidebar"] a:hover div[class*="w-6"], #mobileDrawer a:hover div[class*="w-6"] { color: var(--kp-text) !important; }

/* espaçamento confortável entre os itens */
aside[id*="sidebar"] a, #mobileDrawer nav a { gap: 12px; padding-top: 10px !important; padding-bottom: 10px !important; }
aside[id*="sidebar"] a > .space-x-2\.5 > * + *, aside[id*="sidebar"] a.space-x-2\.5 > * + * { margin-left: 0 !important; }

/* ==========================================================================
   CARROSSÉIS HORIZONTAIS (Jogos em Alta, provedores, categorias...)
   Primeiro card alinhado com o título; o próximo aparece cortado na ponta.
   ========================================================================== */
main > .overflow-x-auto, main > section > .overflow-x-auto, main > nav.overflow-x-auto,
main > section > div[id^="slider"], main > div > .overflow-x-auto.no-scrollbar {
  margin-left: calc(var(--kp-pad) * -1) !important;
  margin-right: calc(var(--kp-pad) * -1) !important;
  padding-left: var(--kp-pad) !important;
  padding-right: var(--kp-pad) !important;
  padding-top: 6px !important; padding-bottom: 10px !important;
  scroll-padding-left: var(--kp-pad) !important;
  scroll-padding-right: var(--kp-pad) !important;
  gap: 12px !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
/* os "space-x-*" do Tailwind somam margem; o gap acima já cuida do espaço */
main > section > .overflow-x-auto > * + *, main > section > div[id^="slider"] > * + *, main > nav.overflow-x-auto > * + * { margin-left: 0 !important; }
main > section > .overflow-x-auto > *, main > section > div[id^="slider"] > * { scroll-snap-align: start; flex-shrink: 0; }

/* celular: largura dos cards calculada para sempre sobrar um pedaço do próximo */
@media (max-width: 639px) {
  main > section > div[id^="slider"] > a {
    width: min(168px, calc((100vw - var(--kp-pad) * 2 - 12px) / 2.35)) !important;
  }
}

/* ==========================================================================
   Toast de ganhos reais
   ========================================================================== */
.kp-win {
  position: fixed; z-index: 9980; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  width: min(92vw, 360px); display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px;
  background: linear-gradient(135deg, rgba(13, 31, 22, .96), rgba(8, 20, 15, .96));
  border: 1px solid rgba(163, 230, 53, .35); border-radius: 22px; color: var(--kp-text);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(34, 197, 94, .08), 0 0 24px rgba(34, 197, 94, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translate(-50%, 24px) scale(.96); opacity: 0; pointer-events: none; overflow: hidden;
  transition: transform .45s cubic-bezier(.2, .9, .2, 1.15), opacity .3s;
  cursor: pointer;
}
.kp-win.on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.kp-win-av {
  flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #a3e635, #16a34a); color: #04130a; font-weight: 800; font-size: 16px;
}
.kp-win-body { flex: 1; min-width: 0; line-height: 1.25; }
.kp-win-line { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-win-line b { font-weight: 700; }
.kp-win-line strong { color: #a3e635; font-weight: 800; }
.kp-win-sub { margin-top: 2px; font-size: 11.5px; color: var(--kp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-win-coin { flex: 0 0 34px; filter: drop-shadow(0 3px 8px rgba(252, 211, 77, .45)); animation: kpCoin 2.4s ease-in-out infinite; }
.kp-win-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #22c55e, #a3e635); transform-origin: left; animation: kpBar 5.6s linear forwards; }
.kp-win:not(.on) .kp-win-bar { animation: none; }
@keyframes kpCoin { 0%, 100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-3px) rotateY(180deg); } }
@keyframes kpBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (min-width: 1024px) { .kp-win { left: 24px; bottom: 24px; transform: translate(0, 24px) scale(.96); } .kp-win.on { transform: none; } }
@media (prefers-reduced-motion: reduce) { .kp-win, .kp-win-coin, .kp-win-bar { transition: none; animation: none !important; } }

/* Aviso de saldo parado (variação do toast) */
.kp-win.kp-bal { cursor: default; padding-right: 40px; }
.kp-bal-ico { background: linear-gradient(145deg, #22c55e, #15803d); color: #fff; }
.kp-bal-btn {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 14px; font-size: 13px; font-weight: 800; text-decoration: none;
  background: linear-gradient(145deg, #a3e635, #22c55e); color: #04130a; box-shadow: 0 6px 16px rgba(34, 197, 94, .35);
}
.kp-bal-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; min-height: 0 !important; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--kp-muted); font-size: 18px; line-height: 1; cursor: pointer; }
@media (max-width: 400px) { .kp-bal-btn { padding: 7px 11px; } }

/* ==========================================================================
   Pop-up da oferta de boas-vindas
   ========================================================================== */
.kpo-bg { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 8, 5, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kpo-bg.on { display: flex; animation: kpoFade .25s ease; }
@keyframes kpoFade { from { opacity: 0; } to { opacity: 1; } }
.kpo { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: 28px; border: 1px solid rgba(163, 230, 53, .3); color: var(--kp-text);
  background: radial-gradient(120% 80% at 50% 0%, #123a22 0%, #0a1c13 45%, #07110c 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(34, 197, 94, .18); animation: kpoPop .4s cubic-bezier(.2, .9, .2, 1.15); }
@keyframes kpoPop { from { transform: translateY(24px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.kpo-x { position: absolute; top: 10px; right: 12px; z-index: 3; width: 34px; height: 34px; min-height: 0 !important; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.kpo-head { display: grid; place-items: center; padding: 18px 20px 0; }
.kpo-logo { width: min(210px, 56vw); height: auto; mix-blend-mode: screen; filter: drop-shadow(0 8px 24px rgba(132, 204, 22, .35)); animation: kpoFloat 3.2s ease-in-out infinite; }
@keyframes kpoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.kpo-body { padding: 4px 22px 22px; }
.kpo-title { margin: 6px 0 6px; text-align: center; font-size: 21px; line-height: 1.2; font-weight: 800; }
.kpo-p { margin: 0 0 14px; text-align: center; font-size: 14px; color: var(--kp-muted); }
.kpo-offer { margin: 12px 0 14px; padding: 14px 14px 12px; text-align: center; border-radius: 22px; position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(163, 230, 53, .16), rgba(34, 197, 94, .1)); border: 1px dashed rgba(163, 230, 53, .55); }
.kpo-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; background: #a3e635; color: #0a1c13; }
.kpo-line { margin-top: 8px; font-size: 16px; }
.kpo-line b { color: #fff; }
.kpo-big-n { color: #a3e635 !important; font-size: 30px; font-weight: 900; text-shadow: 0 0 18px rgba(163, 230, 53, .45); }
.kpo-sub { margin-top: 2px; font-size: 12.5px; color: var(--kp-muted); }
.kpo-timer { margin-top: 10px; display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(0, 0, 0, .35); border: 1px solid rgba(250, 204, 21, .35); color: #fde68a; }
.kpo-timer-v { font-variant-numeric: tabular-nums; font-weight: 900; color: #facc15; }
.kpo-form { display: grid; gap: 10px; }
.kpo-form input { width: 100%; height: 48px; padding: 0 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); color: #fff; font-size: 16px; outline: none; box-sizing: border-box; }
.kpo-form input:focus { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.kpo-err { min-height: 0; font-size: 13px; color: #fca5a5; text-align: center; }
.kpo-btn { display: block; width: 100%; padding: 14px 16px; border: 0; border-radius: 18px; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; font-weight: 800; color: #04130a;
  background: linear-gradient(145deg, #bef264, #22c55e); box-shadow: 0 10px 26px rgba(34, 197, 94, .4); transition: transform .12s; }
.kpo-btn:active { transform: scale(.97); } .kpo-btn[disabled] { opacity: .7; }
.kpo-foot { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--kp-muted); }
.kpo-foot a { color: #a3e635; font-weight: 700; }
.kpo-pix { display: grid; gap: 10px; justify-items: center; }
.kpo-pix img { background: #fff; padding: 8px; border-radius: 18px; }
.kpo-pix textarea { width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); color: #fff; font-size: 12px; padding: 10px; resize: none; }
.kpo-wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kp-muted); }
.kpo-wait i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #22c55e; border-top-color: transparent; animation: kpoSpin .8s linear infinite; }
@keyframes kpoSpin { to { transform: rotate(360deg); } }
.kpo-center { text-align: center; padding-top: 6px; }
.kpo-big { font-size: 54px; line-height: 1; margin-bottom: 4px; }
.kpo-bal { margin: 12px 0; padding: 14px; border-radius: 22px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(163, 230, 53, .3); }
.kpo-bal small { display: block; font-size: 12px; color: var(--kp-muted); }
.kpo-bal b { font-size: 34px; font-weight: 900; color: #a3e635; text-shadow: 0 0 20px rgba(163, 230, 53, .5); font-variant-numeric: tabular-nums; display: inline-block; }
.kpo-bal b.pop { animation: kpoPulse .5s ease; }
@keyframes kpoPulse { 50% { transform: scale(1.12); } }
.kpo-rows { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; }
.kpo-rows div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.kpo-rows b { color: #86efac; } .kpo-bonus-row b { color: #fde047; }
.kpo-link { margin-top: 8px; background: none; border: 0; color: var(--kp-muted); font-size: 13px; cursor: pointer; text-decoration: underline; }
.kpo-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 28px; z-index: 2; }
.kpo-fx span { position: absolute; top: -40px; animation-name: kpoFall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes kpoFall { to { transform: translate(var(--dx), 115vh) rotate(var(--rot)); opacity: .9; } }
.kpo-pill { position: fixed; z-index: 9985; left: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border: 1px solid rgba(163, 230, 53, .5); border-radius: 999px; cursor: pointer;
  background: linear-gradient(145deg, #12371f, #0a1c13); color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 22px rgba(34, 197, 94, .3); font-size: 13px; text-align: left; }
.kpo-pill.on { display: inline-flex; animation: kpoPop .35s ease; }
.kpo-pill b { display: block; } .kpo-pill small { display: block; color: #facc15; font-variant-numeric: tabular-nums; font-weight: 800; }
.kpo-pill-ico { font-size: 22px; }
@media (min-width: 1024px) { .kpo-pill { bottom: 24px; left: 24px; } }
@media (max-width: 480px) { .kpo-bg { padding: 10px; align-items: flex-end; } .kpo { border-radius: 26px 26px 20px 20px; } .kpo-big-n { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .kpo, .kpo-bg.on, .kpo-logo, .kpo-pill.on { animation: none; } }

/* ==========================================================================
   Menu lateral fixo (desktop): acompanha a tela, com rolagem própria.
   "Sair da conta" fica sempre visível, sem precisar descer a página.
   ========================================================================== */
@media (min-width: 1024px) {
  aside#sidebar, aside[id*="sidebar"] {
    position: sticky !important;
    top: var(--kp-header-h, 64px);
    align-self: flex-start !important;
    height: calc(100vh - var(--kp-header-h, 64px)) !important;
    max-height: calc(100vh - var(--kp-header-h, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 197, 94, .3) transparent;
    z-index: 30;
  }
  aside#sidebar::-webkit-scrollbar, aside[id*="sidebar"]::-webkit-scrollbar { width: 6px; }
  aside#sidebar::-webkit-scrollbar-thumb, aside[id*="sidebar"]::-webkit-scrollbar-thumb { background: rgba(34, 197, 94, .3); border-radius: 6px; }
  /* o bloco de cima rola só se faltar espaço; o rodapé (Sair) não some */
  aside#sidebar > div:first-child, aside[id*="sidebar"] > div:first-child { overflow-y: visible !important; }
}
/* "clip" impede rolagem lateral sem transformar o body em contêiner de rolagem (isso quebraria o menu fixo) */
html, body { overflow-x: clip !important; }