/* ================================================================
   LMania — Design System v2.0
   Dark mode premium · Glassmorphism · Micro-animations
   ================================================================ */

/* ── 1. Design Tokens ────────────────────────────────────────── */
:root {
  /* Layout */
  --app-max-w:      480px;
  --header-h:       64px;
  --navbar-h:       72px;
  --radius-xl:      24px;
  --radius-lg:      18px;
  --radius-md:      12px;
  --radius-sm:       8px;
  --radius-pill:    40px;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;

  /* Typography */
  --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-2xs:     10px;
  --fs-xs:      11px;
  --fs-sm:      13px;
  --fs-md:      15px;
  --fs-lg:      17px;
  --fs-xl:      22px;
  --fs-2xl:     28px;
  --fs-3xl:     36px;

  /* Colors — Dark palette */
  --bg:           #080c14;
  --surface:      #0e1420;
  --card:         #131b2e;
  --card-hover:   #182035;
  --border:       rgba(255,255,255,0.07);
  --border-focus: rgba(255,255,255,0.18);
  --text:         #e8edf5;
  --text-muted:   #94a3b8;
  --text-dim:     #8899aa;

  /* Brand colors */
  --accent:    #f97316;   /* laranja — identidade LMania */
  --primary:   #3b82f6;   /* azul */
  --success:   #22c55e;   /* verde */
  --danger:    #ef4444;   /* vermelho */
  --purple:    #a855f7;   /* roxo */
  --cyan:      #06b6d4;

  /* Lottery identity gradients */
  --grad-home:   linear-gradient(160deg, #0f172a 0%, #1e3a5f 50%, #0f4c81 100%);
  --grad-mega:   linear-gradient(160deg, #052e16 0%, #166534 60%, #15803d 100%);
  --grad-facil:  linear-gradient(160deg, #2e1065 0%, #6b21a8 60%, #9333ea 100%);
  --grad-quina:  linear-gradient(160deg, #172554 0%, #1d4ed8 60%, #3b82f6 100%);
  --grad-mania:  linear-gradient(160deg, #450a0a 0%, #991b1b 60%, #dc2626 100%);
  --grad-about:  linear-gradient(160deg, #0c0a09 0%, #292524 60%, #44403c 100%);

  /* Glass / Blur */
  --glass-bg:     rgba(13, 20, 35, 0.88);
  --glass-border: rgba(255,255,255,0.08);
  --blur-sm:      8px;
  --blur-md:      16px;
  --blur-lg:      24px;

  /* Shadows */
  --sh-xs: 0 1px 4px rgba(0,0,0,0.4);
  --sh-sm: 0 2px 12px rgba(0,0,0,0.5);
  --sh-md: 0 8px 32px rgba(0,0,0,0.55);
  --sh-lg: 0 20px 60px rgba(0,0,0,0.65);
  --sh-glow-blue:  0 0 24px rgba(59,130,246,0.35);
  --sh-glow-green: 0 0 24px rgba(34,197,94,0.35);
  --sh-glow-orange:0 0 24px rgba(249,115,22,0.35);

  /* Transitions */
  --t-fast:   120ms ease;
  --t-normal: 220ms ease;
  --t-slow:   380ms cubic-bezier(.4,0,.2,1);
}

/* ── 3. Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:     var(--font);
  font-size:       var(--fs-md);
  line-height:     1.5;
  background:      var(--bg);
  color:           var(--text);
  min-height:      100dvh;
  overflow-x:      hidden;
  -webkit-font-smoothing: antialiased;
  user-select:     none;
}

a {
  text-decoration: none;
  color: inherit;
}

img { display: block; max-width: 100%; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ── 4. Layout Shell ─────────────────────────────────────────── */
#app {
  max-width:  var(--app-max-w);
  margin:     0 auto;
  min-height: 100dvh;
  position:   relative;
  /* Subtle side borders on desktop */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── 5. App Header ───────────────────────────────────────────── */
.app-header {
  position:        sticky;
  top:             0;
  z-index:         200;
  width:           100%;
  height:          var(--header-h);
  padding:         0 var(--sp-5);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  /* Background set dynamically per-screen via JS */
  background:      var(--grad-home);
  transition:      background var(--t-slow);
}

/* Glass overlay on header */
.app-header::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%);
  pointer-events: none;
}

.app-header h1 {
  font-size:      var(--fs-xl);
  font-weight:    800;
  color:          #fff;
  letter-spacing: -0.5px;
  text-shadow:    0 1px 6px rgba(0,0,0,0.4);
  line-height:    1;
}

/* Subtitle / screen name */
#titulo {
  font-size:   var(--fs-sm);
  font-weight: 600;
  color:       rgba(255,255,255,0.75);
  letter-spacing: 0.4px;
}

/* PWA install button */
#buttonInstall {
  display:       none;
  align-items:   center;
  gap:           var(--sp-1);
  padding:       6px 14px;
  border-radius: var(--radius-pill);
  background:    rgba(255,255,255,0.15);
  border:        1px solid rgba(255,255,255,0.25);
  color:         #fff;
  font-size:     var(--fs-sm);
  font-weight:   600;
  backdrop-filter: blur(var(--blur-sm));
  transition:    background var(--t-fast);
}
#buttonInstall:hover { background: rgba(255,255,255,0.25); }

/* ── 6. Main Content Area ────────────────────────────────────── */
.main {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  width:           100%;
  min-height:      calc(100dvh - var(--header-h) - var(--navbar-h));
  padding:         var(--sp-5) var(--sp-4);
  padding-bottom:  calc(var(--navbar-h) + var(--sp-6));
  background:      var(--bg);
}

.container {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          100%;
  padding:        0 var(--sp-4);
}

/* ── 7. Home — Lottery Card Grid ─────────────────────────────── */
.menu {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--sp-4);
  width:                 100%;
  max-width:             420px;
  padding:               var(--sp-2) 0;
}

.menu__item {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-3);
  padding:         var(--sp-5) var(--sp-4);
  background:      var(--card);
  border:          1px solid var(--border);
  border-radius:   var(--radius-xl);
  cursor:          pointer;
  overflow:        hidden;
  transition:
    transform    var(--t-normal),
    border-color var(--t-normal),
    box-shadow   var(--t-normal);
  /* Subtle shine overlay */
}

.menu__item::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  opacity:    0;
  transition: opacity var(--t-normal);
  pointer-events: none;
}

.menu__item:hover,
.menu__item:focus-visible {
  transform:    translateY(-5px) scale(1.01);
  border-color: rgba(255,255,255,0.16);
  box-shadow:   var(--sh-md);
}
.menu__item:hover::before { opacity: 1; }

.menu__item:active { transform: scale(0.97); }

/* Link wrapper — reset */
.menu > a {
  display:       contents; /* link inherits grid placement */
  text-decoration: none;
}

/* Icon circle */
.menu__icon {
  width:         68px;
  height:        68px;
  border-radius: 50%;
  object-fit:    contain;
  padding:       10px;
  background:    rgba(255,255,255,0.07);
  border:        1px solid rgba(255,255,255,0.1);
  transition:    transform var(--t-normal);
}

/* SVG icon variant */
.menu__icon--svg {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.menu__icon--svg svg {
  width:  32px;
  height: 32px;
}

.menu__item:hover .menu__icon {
  transform: rotate(-8deg) scale(1.08);
}
.menu__item:hover .menu__icon--svg {
  transform: scale(1.1);
}

/* Label */
.menu__span,
.menu > a > span[data-i18n] {
  font-size:   var(--fs-sm);
  font-weight: 700;
  color:       var(--text);
  letter-spacing: 0.6px;
  text-align:  center;
  text-transform: uppercase;
}

.menu__content { display: none; } /* legacy — hide the empty spans */

/* ── 8. Screen sub-menus (Mega / Fácil / etc.) ───────────────── */
/* Sub-menus reuse .menu and .menu__item with a 2-col grid */

/* ── 9. Navbar ───────────────────────────────────────────────── */
#navbar {
  position:        fixed;
  bottom:          0;
  left:            50%;
  transform:       translateX(-50%);
  width:           100%;
  max-width:       var(--app-max-w);
  height:          var(--navbar-h);
  background:      var(--glass-bg);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-top:      1px solid var(--glass-border);
  border-radius:   var(--radius-xl) var(--radius-xl) 0 0;
  display:         flex;
  align-items:     center;
  justify-content: space-around;
  padding:         0 var(--sp-2) env(safe-area-inset-bottom, 0px);
  z-index:         999;
  transition:      bottom var(--t-slow);
  box-shadow:      0 -2px 32px rgba(0,0,0,0.6);
}

/* Nav item */
.nav-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  min-width:       44px;
  padding:         var(--sp-2) var(--sp-2);
  border-radius:   var(--radius-md);
  color:           var(--text-muted);
  font-size:       var(--fs-2xs);
  font-weight:     600;
  letter-spacing:  0.3px;
  text-align:      center;
  cursor:          pointer;
  transition:
    color       var(--t-fast),
    background  var(--t-fast),
    transform   var(--t-fast);
  position: relative;
}

/* Active indicator pill above icon */
.nav-item::before {
  content:       '';
  position:      absolute;
  top:           -1px;
  left:          50%;
  transform:     translateX(-50%) scaleX(0);
  width:         24px;
  height:        3px;
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  background:    var(--primary);
  transition:    transform var(--t-normal);
}
.nav-item.active::before { transform: translateX(-50%) scaleX(1); }

.nav-item.active {
  color: var(--primary);
}

.nav-item:hover {
  color:      var(--text);
  background: rgba(255,255,255,0.04);
}

.nav-item:active { transform: scale(0.9); }

/* Icon inside nav item */
.nav-item__icon {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  object-fit:    contain;
  background:    transparent;
  transition:
    transform var(--t-fast),
    background var(--t-fast);
}
.nav-item.active .nav-item__icon {
  background:    rgba(59,130,246,0.15);
  transform:     scale(1.12);
}

/* Fallback icon (emoji or first letter) */
.nav-item__icon-fallback {
  font-size:   20px;
  line-height: 1;
}

/* Nav label */
.nav-item__label {
  font-size:    var(--fs-2xs);
  font-weight:  600;
  white-space:  nowrap;
  letter-spacing: 0.2px;
}

/* ── 10. Number grid (Teclado) ───────────────────────────────── */
#teclado {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   var(--sp-1);
  width:                 100%;
  max-width:             360px;
  margin-bottom:         calc(var(--navbar-h) + var(--sp-4));
  padding:               var(--sp-2);
}

.bolas {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  border:          2px solid var(--border);
  background:      var(--card);
  color:           var(--text);
  font-size:       var(--fs-sm);
  font-weight:     700;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          2px auto;
  transition:
    background    var(--t-fast),
    border-color  var(--t-fast),
    transform     var(--t-fast),
    box-shadow    var(--t-fast);
}

.bolas:hover {
  background:   rgba(59,130,246,0.18);
  border-color: var(--primary);
  transform:    scale(1.1);
}

.bolas:active { transform: scale(0.93); }

.bolas-selecionadas {
  background:   var(--success) !important;
  border-color: var(--success) !important;
  color:        #fff;
  box-shadow:   var(--sh-glow-green);
  transform:    scale(1.08);
}

/* ── 11. Display área (números selecionados) ─────────────────── */

/* Display novo — bolinhas */
.cad-display {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             var(--sp-1);
  width:           100%;
  min-height:      80px;
  padding:         var(--sp-3) var(--sp-4);
  border-radius:   var(--radius-lg);
  border:          1px solid var(--border-focus);
  background:      var(--card);
  transition:      border-color var(--t-fast);
}

.cad-display__hint {
  color:       var(--text-muted);
  font-size:   var(--fs-sm);
  font-weight: 500;
  margin:      auto;
}

.cad-display__ball {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      rgba(34,197,94,0.15);
  border:          1.5px solid rgba(34,197,94,0.45);
  color:           var(--success);
  font-size:       var(--fs-xs);
  font-weight:     800;
  flex-shrink:     0;
}

/* Cores das bolas selecionadas no teclado por loteria */
[data-loteria="megasena"]  .bolas-selecionadas { background: #22c55e !important; border-color: #22c55e !important; box-shadow: 0 0 10px rgba(34,197,94,0.5) !important; }
[data-loteria="lotofacil"] .bolas-selecionadas { background: #a855f7 !important; border-color: #a855f7 !important; box-shadow: 0 0 10px rgba(168,85,247,0.5) !important; }
[data-loteria="quina"]     .bolas-selecionadas { background: #3b82f6 !important; border-color: #3b82f6 !important; box-shadow: 0 0 10px rgba(59,130,246,0.5) !important; }
[data-loteria="lotomania"] .bolas-selecionadas { background: #f97316 !important; border-color: #f97316 !important; box-shadow: 0 0 10px rgba(249,115,22,0.5) !important; }

/* Barra de progresso */
.cad-progress-wrap {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  width:       100%;
  margin:      var(--sp-2) 0 var(--sp-3);
}

.cad-counter {
  font-size:   var(--fs-xs);
  font-weight: 700;
  color:       var(--text-muted);
  white-space: nowrap;
  min-width:   40px;
  text-align:  right;
}

.cad-progress-bar {
  flex:          1;
  height:        4px;
  border-radius: var(--radius-pill);
  background:    rgba(255,255,255,0.08);
  overflow:      hidden;
}

.cad-progress-fill {
  height:        100%;
  border-radius: var(--radius-pill);
  background:    var(--primary);
  transition:    width var(--t-normal), background var(--t-normal);
  width:         0%;
}

/* ── Barra de ação cadastrar ─────────────────────────────────── */
.cad-action-bar {
  display:        flex;
  gap:            0;
  width:          100%;
  margin-top:     var(--sp-3);
  margin-bottom:  var(--sp-4);
  border-radius:  var(--radius-md);
  overflow:       hidden;
}

.cad-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         14px var(--sp-4);
  border-radius:   0;
  font-family:     var(--font);
  font-size:       var(--fs-sm);
  font-weight:     700;
  cursor:          pointer;
  border:          none;
  transition:      opacity var(--t-fast), transform var(--t-fast), background var(--t-fast);
  letter-spacing:  0.3px;
}
.cad-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.cad-btn:active { opacity: 0.8; }

.cad-btn--clear {
  flex:       1;
  background: rgba(239,68,68,0.14);
  color:      var(--danger);
  border-right: 1px solid rgba(255,255,255,0.06);
}
.cad-btn--clear:hover { background: rgba(239,68,68,0.24); }

.cad-btn--save {
  flex:       1;
  background: linear-gradient(135deg, #15803d, var(--success));
  color:      #fff;
}
.cad-btn--save:hover   { opacity: 0.9; }
.cad-btn--save:disabled {
  opacity:   0.35;
  cursor:    not-allowed;
}

/* FAB de upload */
.cad-fab {
  border: 1px solid rgba(255,255,255,0.18);
}
.cad-fab:hover {
  border-color: rgba(255,255,255,0.35);
}
.cad-fab svg { width: 22px; height: 22px; }

/* ══════════════════════════════════════════════════════════════
   FECHAMENTO CONDICIONAL
   ══════════════════════════════════════════════════════════════ */
.fech-wrap {
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-3);
  width:         100%;
  padding:       var(--sp-4);
  padding-bottom: calc(var(--navbar-h) + var(--sp-6));
}

/* Barra superior: contador + botão limpar */
.fech-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-3);
}
.fech-counter {
  font-size:   var(--fs-sm);
  font-weight: 700;
  color:       var(--text-muted);
}
.fech-clear {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-md);
  background:      rgba(239,68,68,0.12);
  color:           var(--danger);
  border:          none;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background var(--t-fast);
}
.fech-clear:hover { background: rgba(239,68,68,0.22); }
.fech-clear svg   { width: 16px; height: 16px; }

/* Nota de desempenho */
/* Banner de aviso no Fechamento */
.fech-disclaimer {
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-2);
  background:    rgba(217,119,6,0.08);
  border:        1px solid rgba(217,119,6,0.3);
  border-radius: var(--radius-lg);
  padding:       var(--sp-3) var(--sp-4);
}
.fech-disclaimer-icon {
  display:      flex;
  align-items:  center;
  gap:          var(--sp-2);
  color:        #d97706;
}
.fech-disclaimer-icon svg { width: 20px; height: 20px; flex-shrink: 0; }

/* reorganiza como row: ícone + texto juntos */
.fech-disclaimer {
  flex-direction: row;
  align-items:    flex-start;
}
.fech-disclaimer-text {
  flex:        1;
  font-size:   var(--fs-xs);
  color:       var(--text-muted);
  line-height: 1.55;
  display:     flex;
  flex-direction: column;
  gap:         var(--sp-2);
}
.fech-disclaimer-text strong { color: #fbbf24; }

/* Botão Políticas de Uso */
.fech-pol-btn {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        6px 12px;
  border-radius:  var(--radius-pill);
  background:     rgba(217,119,6,0.15);
  border:         1px solid rgba(217,119,6,0.35);
  color:          #fbbf24;
  font-size:      var(--fs-2xs);
  font-weight:    700;
  cursor:         pointer;
  white-space:    nowrap;
  align-self:     flex-start;
  letter-spacing: 0.3px;
  transition:     background var(--t-fast);
}
.fech-pol-btn:hover { background: rgba(217,119,6,0.25); }

/* ══════════════════════════════════════════════════════════════
   POLÍTICAS DE USO
   ══════════════════════════════════════════════════════════════ */
.pol-wrap {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
  width:          100%;
  padding:        var(--sp-4);
  padding-bottom: calc(var(--navbar-h) + var(--sp-6));
}

/* Hero */
.pol-hero {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--sp-2);
  padding:         var(--sp-6) var(--sp-4);
  background:      rgba(217,119,6,0.08);
  border:          1px solid rgba(217,119,6,0.2);
  border-radius:   var(--radius-xl);
  text-align:      center;
}
.pol-hero-icon {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      rgba(217,119,6,0.15);
  border:          1.5px solid rgba(217,119,6,0.4);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #f59e0b;
}
.pol-hero-icon svg { width: 28px; height: 28px; }
.pol-hero-title {
  font-size:   var(--fs-2xl);
  font-weight: 900;
  color:       #fff;
  letter-spacing: -0.5px;
}
.pol-hero-sub {
  font-size:  var(--fs-xs);
  color:      var(--text-muted);
  font-weight:600;
  letter-spacing: 0.3px;
}

/* Cards de seção */
.pol-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow:      hidden;
}
.pol-card--warn {
  background:  rgba(217,119,6,0.06);
  border-color:rgba(217,119,6,0.3);
}
.pol-card-header {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  padding:     var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background:  rgba(255,255,255,0.03);
}
.pol-card--warn .pol-card-header { border-color: rgba(217,119,6,0.2); }
.pol-card-icon {
  font-size: var(--fs-lg);
  line-height: 1;
}
.pol-card-title {
  font-size:   var(--fs-sm);
  font-weight: 800;
  color:       var(--text);
  letter-spacing: 0.2px;
}
.pol-card-body {
  padding:     var(--sp-4);
  display:     flex;
  flex-direction: column;
  gap:         var(--sp-3);
}
.pol-card-body p,
.pol-card-body li {
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: 1.65;
}
.pol-card-body ul {
  padding-left: var(--sp-5);
  display:      flex;
  flex-direction: column;
  gap:          var(--sp-1);
}
.pol-card-body strong { color: var(--text); }
.pol-card-body code {
  font-size:   var(--fs-xs);
  background:  rgba(255,255,255,0.07);
  padding:     1px 6px;
  border-radius: 4px;
  color:       var(--text);
}

/* Rodapé da página de políticas */
.pol-footer {
  font-size:  var(--fs-xs);
  color:      var(--text-dim);
  text-align: center;
  padding:    var(--sp-4) 0;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* Painel de escolha de matriz */
.fech-panel {
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-2);
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:       var(--sp-4);
}
.fech-panel-title {
  font-size:      var(--fs-xs);
  font-weight:    700;
  color:          var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom:  var(--sp-1);
}

/* Lista de matrizes */
.fech-matrix-list {
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-1);
  max-height:    260px;
  overflow-y:    auto;
  scrollbar-width: thin;
}
.fech-matrix-row {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-3);
  padding:         10px var(--sp-3);
  border-radius:   var(--radius-md);
  background:      rgba(255,255,255,0.03);
  border:          1px solid transparent;
  cursor:          pointer;
  text-align:      left;
  transition:      background var(--t-fast), border-color var(--t-fast);
}
.fech-matrix-row:hover   { background: rgba(255,255,255,0.07); }
.fech-matrix-row--active {
  background:   rgba(255,255,255,0.09) !important;
  border-color: var(--border-focus) !important;
}
.fech-matrix-row--slow { opacity: 0.8; }
.fech-matrix-id {
  font-size:   var(--fs-xs);
  font-weight: 800;
  font-family: monospace;
  color:       var(--text);
  white-space: nowrap;
  min-width:   90px;
}
.fech-matrix-desc {
  font-size: var(--fs-xs);
  color:     var(--text-muted);
  flex:      1;
}
.fech-badge {
  font-size:  var(--fs-2xs);
  color:      var(--accent);
  flex-shrink:0;
}
.fech-no-matrices {
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: 1.5;
  padding:     var(--sp-3);
}

/* Botão gerar */
.fech-btn-gerar {
  width:           100%;
  padding:         13px;
  margin-top:      var(--sp-2);
  border-radius:   var(--radius-md);
  background:      var(--primary);
  color:           #fff;
  font-family:     var(--font);
  font-size:       var(--fs-sm);
  font-weight:     700;
  cursor:          pointer;
  border:          none;
  transition:      opacity var(--t-fast);
  letter-spacing:  0.3px;
}
.fech-btn-gerar:disabled { opacity: 0.35; cursor: not-allowed; }
.fech-btn-gerar:not(:disabled):hover { opacity: 0.88; }

/* Área de resultados */
.fech-results {
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-4);
}

/* Spinner de loading */
.fech-computing {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--sp-3);
  padding:         var(--sp-8) 0;
}
.fech-computing-label {
  font-size:  var(--fs-sm);
  color:      var(--text-muted);
  font-weight:700;
}
.fech-spinner {
  width:         36px;
  height:        36px;
  border:        3px solid rgba(255,255,255,0.12);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation:     fech-spin 0.75s linear infinite;
}
@keyframes fech-spin { to { transform: rotate(360deg); } }
.fech-slow-warn {
  font-size:  var(--fs-xs);
  color:      var(--accent);
  text-align: center;
}

/* Card de resumo */
.fech-summary {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:       var(--sp-4);
  display:       flex;
  flex-direction:column;
  gap:           10px;
}
.fech-summary-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-3);
}
.fech-summary-label {
  font-size:  var(--fs-xs);
  color:      var(--text-muted);
  font-weight:600;
}
.fech-summary-value {
  font-size:  var(--fs-sm);
  color:      var(--text);
  font-weight:700;
  text-align: right;
}
.fech-price {
  font-size:   var(--fs-lg) !important;
  color:       var(--success) !important;
}

/* Aviso de cobertura parcial */
.fech-warn {
  font-size:     var(--fs-xs);
  color:         var(--accent);
  background:    rgba(249,115,22,0.08);
  border:        1px solid rgba(249,115,22,0.2);
  border-radius: var(--radius-md);
  padding:       var(--sp-3) var(--sp-4);
  line-height:   1.5;
}

/* Lista de talões gerados */
.fech-ticket-list {
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-2);
}
.fech-ticket {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-2);
  padding:        var(--sp-2) var(--sp-3);
  background:     rgba(255,255,255,0.03);
  border:         1px solid var(--border);
  border-radius:  var(--radius-md);
  flex-wrap:      wrap;
}
.fech-ticket-num {
  font-size:   var(--fs-2xs);
  font-weight: 700;
  color:       var(--text-dim);
  min-width:   28px;
  font-family: monospace;
}
.fech-ball {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--ball-bg, rgba(34,197,94,0.15));
  border:          1.5px solid var(--ball-border, rgba(34,197,94,0.4));
  color:           var(--ball-color, #22c55e);
  font-size:       var(--fs-2xs);
  font-weight:     800;
  flex-shrink:     0;
}

/* Cores das bolas do fechamento por loteria (via CSS vars no container) */
[data-loteria="megasena"]  { --ball-bg: rgba(34,197,94,0.15);  --ball-border: rgba(34,197,94,0.4);  --ball-color: #22c55e; }
[data-loteria="lotofacil"] { --ball-bg: rgba(168,85,247,0.15); --ball-border: rgba(168,85,247,0.4); --ball-color: #a855f7; }
[data-loteria="quina"]     { --ball-bg: rgba(59,130,246,0.15); --ball-border: rgba(59,130,246,0.4); --ball-color: #3b82f6; }
[data-loteria="lotomania"] { --ball-bg: rgba(249,115,22,0.15); --ball-border: rgba(249,115,22,0.4); --ball-color: #f97316; }

/* Botão salvar talões */
.fech-btn-save {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  width:           100%;
  padding:         14px;
  border-radius:   var(--radius-md);
  background:      linear-gradient(135deg, #15803d, var(--success));
  color:           #fff;
  font-family:     var(--font);
  font-size:       var(--fs-sm);
  font-weight:     700;
  cursor:          pointer;
  border:          none;
  box-shadow:      0 4px 16px rgba(34,197,94,0.3);
  transition:      opacity var(--t-fast);
  letter-spacing:  0.3px;
}
.fech-btn-save svg  { width: 18px; height: 18px; flex-shrink: 0; }
.fech-btn-save:hover { opacity: 0.9; }

/* ── Reaproveitamento das CSS vars nas bolas do Cadastrar ─────── */
[data-loteria="megasena"]  .cad-display__ball { background: var(--ball-bg); border-color: var(--ball-border); color: var(--ball-color); }
[data-loteria="lotofacil"] .cad-display__ball { background: var(--ball-bg); border-color: var(--ball-border); color: var(--ball-color); }
[data-loteria="quina"]     .cad-display__ball { background: var(--ball-bg); border-color: var(--ball-border); color: var(--ball-color); }
[data-loteria="lotomania"] .cad-display__ball { background: var(--ball-bg); border-color: var(--ball-border); color: var(--ball-color); }

/* Legado — manter compatibilidade com outros componentes */
#display,
#displaymania {
  width:         95%;
  min-height:    90px;
  padding:       var(--sp-3) var(--sp-4);
  margin:        var(--sp-3) 0;
  border-radius: var(--radius-lg);
  border:        1px solid var(--border-focus);
  background:    var(--card);
  color:         var(--primary);
  font-size:     var(--fs-lg);
  font-weight:   700;
  text-align:    right;
  letter-spacing: 1px;
  box-shadow:    var(--sh-sm);
  transition:    border-color var(--t-fast);
}
#displaymania { min-height: 220px; }

/* ── 12. Buttons ─────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         12px 20px;
  border-radius:   var(--radius-lg);
  font-size:       var(--fs-sm);
  font-weight:     700;
  letter-spacing:  0.4px;
  cursor:          pointer;
  border:          1px solid transparent;
  transition:
    background  var(--t-fast),
    transform   var(--t-fast),
    box-shadow  var(--t-fast),
    opacity     var(--t-fast);
  user-select: none;
}

.btn:active { transform: scale(0.96); }

/* Primary — blue */
.btn-primary {
  background:    var(--primary);
  color:         #fff;
  border-color:  rgba(255,255,255,0.1);
  box-shadow:    0 4px 16px rgba(59,130,246,0.35);
}
.btn-primary:hover { background: #2563eb; box-shadow: var(--sh-glow-blue); }

/* Success — green */
.buy,
#colocarnocarrinho,
.salvaCombinacoes {
  width:         96%;
  padding:       14px var(--sp-4);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:    linear-gradient(135deg, #15803d, var(--success));
  color:         #fff;
  font-size:     var(--fs-sm);
  font-weight:   700;
  text-align:    center;
  cursor:        pointer;
  border:        none;
  box-shadow:    0 4px 16px rgba(34,197,94,0.3);
  transition:    background var(--t-fast), transform var(--t-fast);
}
.buy:hover,
#colocarnocarrinho:hover,
.salvaCombinacoes:hover { background: linear-gradient(135deg, var(--success), #4ade80); }

/* Danger — red */
#bclear {
  width:         96%;
  padding:       12px var(--sp-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background:    linear-gradient(135deg, #991b1b, var(--danger));
  color:         #fff;
  font-size:     var(--fs-sm);
  font-weight:   700;
  text-align:    center;
  cursor:        pointer;
  border:        none;
  box-shadow:    0 4px 16px rgba(239,68,68,0.3);
  transition:    background var(--t-fast);
}
#bclear:hover { background: linear-gradient(135deg, var(--danger), #f87171); }

/* Purple — combinações */
.sell,
.limpa-lista {
  background:   linear-gradient(135deg, #6b21a8, var(--purple));
  color:        #fff;
  border:       none;
  box-shadow:   0 4px 16px rgba(168,85,247,0.3);
  cursor:       pointer;
  transition:   background var(--t-fast), transform var(--t-fast);
  border-radius: var(--radius-lg);
  padding:      12px var(--sp-4);
  font-weight:  700;
  font-size:    var(--fs-sm);
}
.sell {
  width:         96%;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-bottom: var(--sp-4);
}
.limpa-lista {
  width: 50%;
  margin: 0 auto var(--sp-3);
}
.sell:hover,
.limpa-lista:hover { background: linear-gradient(135deg, var(--purple), #c084fc); }

/* ── 13. Input fields ────────────────────────────────────────── */
input[type="text"],
input[type="number"],
select {
  background:    var(--card);
  border:        1px solid var(--border-focus);
  border-radius: var(--radius-md);
  color:         var(--text);
  font-family:   var(--font);
  font-size:     var(--fs-md);
  padding:       10px var(--sp-4);
  outline:       none;
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
  width:         100%;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  border-color: var(--primary);
  box-shadow:   var(--sh-glow-blue);
}

#buscaConcursos {
  width:         95%;
  margin-bottom: var(--sp-3);
  padding:       12px var(--sp-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background:    var(--card);
  border:        1px solid var(--border-focus);
  color:         var(--text);
  font-size:     var(--fs-md);
  font-family:   var(--font);
  outline:       none;
}

/* Select da tela de análise */
.analise-select {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-8);
  cursor: pointer;
}

.analise-select option {
  background: var(--card);
  color:      var(--text);
}

/* Botão Analisar */
.analise-btn-analisar {
  flex:          1;
  padding:       10px var(--sp-4);
  background:    linear-gradient(135deg, var(--primary), #6366f1);
  color:         #fff;
  font-weight:   800;
  font-size:     var(--fs-sm);
  border-radius: var(--radius-md);
  letter-spacing: 0.4px;
  box-shadow:    var(--sh-glow-blue);
  transition:    opacity var(--t-fast), transform var(--t-fast);
}
.analise-btn-analisar:hover  { opacity: 0.9; }
.analise-btn-analisar:active { transform: scale(0.97); }

/* Status */
.analise-status {
  width:      100%;
  padding:    var(--sp-2) 0;
  text-align: center;
  font-size:  var(--fs-sm);
  color:      var(--text-muted);
  min-height: 28px;
}

/* Painel de estatísticas */
.analise-stats {
  width:         100%;
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:       var(--sp-4) var(--sp-5);
  display:       flex;
  flex-direction: column;
  gap:           var(--sp-3);
  margin-bottom: var(--sp-3);
}

.analise-stats__title {
  font-size:   var(--fs-sm);
  font-weight: 800;
  color:       var(--text);
}

.analise-stats__row {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}

.analise-stats__label {
  font-size:   var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Bolinhas reutilizáveis */
.analise-balls {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-1);
}

.analise-ball {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border-radius:   50%;
  border:          1.5px solid var(--border);
  font-size:       var(--fs-xs);
  font-weight:     800;
  background:      rgba(255,255,255,0.04);
  color:           var(--text);
  letter-spacing:  0.3px;
  flex-shrink:     0;
}

.analise-ball--forte {
  background: rgba(249,115,22,0.12);
  border-color: rgba(249,115,22,0.4);
  color:        #fb923c;
}

.analise-ball--rotativo {
  background: rgba(167,139,250,0.10);
  border-color: rgba(167,139,250,0.35);
  color:        #a78bfa;
}

/* Card de jogo gerado */
.analise-jogo-card {
  width:         100%;
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-4);
  display:       flex;
  flex-direction: column;
  gap:           var(--sp-3);
}

.analise-jogo-card__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.analise-jogo-card__num {
  font-size:   var(--fs-sm);
  font-weight: 700;
  color:       var(--text-muted);
}

.analise-jogo-card__save {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-1);
  padding:       4px 12px;
  border-radius: var(--radius-pill);
  background:    rgba(34,197,94,0.12);
  border:        1px solid rgba(34,197,94,0.25);
  color:         var(--success);
  font-size:     var(--fs-xs);
  font-weight:   700;
  cursor:        pointer;
  font-family:   var(--font);
  transition:    background var(--t-fast), transform var(--t-fast);
}
.analise-jogo-card__save:hover  { background: rgba(34,197,94,0.2); }
.analise-jogo-card__save:active { transform: scale(0.96); }

/* Ações globais */
.analise-actions {
  display: flex;
  gap:     var(--sp-3);
  width:   100%;
  padding-bottom: var(--sp-10);
}

.analise-btn-todos {
  flex:        1;
  padding:     12px;
  background:  linear-gradient(135deg, var(--success), #16a34a);
  color:       #fff;
  font-weight: 800;
  font-size:   var(--fs-sm);
  border-radius: var(--radius-lg);
  box-shadow:  var(--sh-glow-green);
}

.analise-btn-txt {
  flex:        1;
  padding:     12px;
  background:  var(--card);
  border:      1px solid var(--border-focus);
  color:       var(--text);
  font-weight: 700;
  font-size:   var(--fs-sm);
  border-radius: var(--radius-lg);
}

/* ── 14. Combo display (combinações) ─────────────────────────── */
#combinadisplay {
  width:         95%;
  min-height:    60px;
  padding:       var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background:    var(--card);
  border:        1px solid var(--border-focus);
  color:         var(--primary);
  font-size:     var(--fs-md);
  font-weight:   600;
  box-shadow:    var(--sh-sm);
}

/* ── 15. Ticket list ─────────────────────────────────────────── */
.lista-tens {
  display:      flex;
  list-style:   none;
  border-radius: var(--radius-lg);
  width:         100%;
  padding:       var(--sp-3) var(--sp-4);
  align-items:   baseline;
  word-wrap:     break-word;
  word-break:    break-all;
  flex-direction:column;
  background:    var(--card);
  border:        1px solid var(--border);
  margin-bottom: var(--sp-2);
  transition:    border-color var(--t-fast);
}
.lista-tens:hover { border-color: var(--border-focus); }

li { width: 100%; word-wrap: break-word; word-break: break-all; }

/* ── 16. Modal ───────────────────────────────────────────────── */
.modal {
  display:          none;
  position:         fixed;
  z-index:          1000;
  inset:            0;
  background:       rgba(0,0,0,0.65);
  backdrop-filter:  blur(var(--blur-sm));
}

.modal-content {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--sp-4);
  background:      var(--card);
  border:          1px solid var(--border-focus);
  border-radius:   var(--radius-xl);
  margin:          15% auto;
  padding:         var(--sp-6) var(--sp-5);
  width:           min(320px, 90vw);
  color:           var(--text);
  box-shadow:      var(--sh-lg);
  animation:       modalIn var(--t-slow) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.93) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.close-button {
  position:    absolute;
  top:         var(--sp-3);
  right:       var(--sp-4);
  color:       var(--danger);
  font-size:   var(--fs-xl);
  font-weight: 700;
  cursor:      pointer;
  line-height: 1;
  transition:  color var(--t-fast);
}
.close-button:hover { color: #f87171; }

/* ── 17. FAB ─────────────────────────────────────────────────── */
.fab {
  position:        fixed;
  top:             calc(var(--header-h) + var(--sp-4));
  right:           var(--sp-5);
  width:           50px;
  height:          50px;
  border-radius:   var(--radius-md);
  background:      var(--glass-bg);
  backdrop-filter: blur(var(--blur-md));
  border:          1px solid var(--glass-border);
  color:           var(--text);
  font-size:       var(--fs-lg);
  cursor:          pointer;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--sh-md);
  transition:
    transform  var(--t-fast),
    box-shadow var(--t-fast),
    background var(--t-fast);
}
.fab:hover {
  transform:  scale(1.08) rotate(-5deg);
  box-shadow: var(--sh-lg);
}

/* ── 18. Save multi button ───────────────────────────────────── */
.salvarCombinacoes {
  width:         96%;
  margin:        var(--sp-5) 0 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size:     var(--fs-sm);
  font-weight:   700;
  border:        none;
  background:    linear-gradient(135deg, #6b21a8, var(--purple));
  color:         #fff;
  padding:       14px;
  cursor:        pointer;
  transition:    background var(--t-fast);
}
.salvarCombinacoes:hover { background: linear-gradient(135deg, var(--purple), #c084fc); }

/* ── 19. Page-enter animation ────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-enter {
  animation: pageIn var(--t-slow) both;
}

/* ── 20. Utility ─────────────────────────────────────────────── */
.hidden     { display: none !important; }
.selected   { background: var(--success) !important; color: #fff; }
.selectered { background: var(--danger)  !important; color: #fff; }

/* ── 21. Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background:    rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
}

/* ── 22. Responsive ──────────────────────────────────────────── */
@media (min-width: 480px) {
  .menu { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  body { background: #04060d; }
  #app { box-shadow: 0 0 80px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.06); }
}

/* ── 23. Skeleton shimmer (blog loading) ─────────────────────── */
.skeleton {
  background:      linear-gradient(90deg, var(--card) 25%, var(--border-focus) 50%, var(--card) 75%);
  background-size: 300% 100%;
  animation:       shimmer 1.4s infinite linear;
  border-radius:   var(--radius-md);
}
@keyframes shimmer {
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}

/* ── 24. Blog ────────────────────────────────────────────────── */
.blog-view { padding-top: var(--sp-3); }

.blog-header { padding: var(--sp-5) var(--sp-4) var(--sp-3); }

.blog-header__eyebrow {
  font-size:      var(--fs-xs);
  font-weight:    700;
  letter-spacing: 4px;
  color:          var(--text-muted);
  text-transform: uppercase;
  margin-bottom:  var(--sp-1);
}

.blog-header__title {
  font-size:   var(--fs-2xl);
  font-weight: 900;
  color:       var(--text);
  line-height: 1.15;
}

.blog-filters {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  overflow-x:    auto;
  padding:       var(--sp-2) var(--sp-4) var(--sp-4);
  scrollbar-width: none;
}
.blog-filters::-webkit-scrollbar { display: none; }

.blog-filter-btn {
  padding:       4px 12px;
  border-radius: var(--radius-pill);
  border:        1px solid var(--border-focus);
  background:    transparent;
  color:         var(--text-muted);
  font-size:     var(--fs-xs);
  font-weight:   700;
  white-space:   nowrap;
  cursor:        pointer;
  transition:
    background   var(--t-fast),
    color        var(--t-fast),
    border-color var(--t-fast);
}
.blog-filter-btn.active,
.blog-filter-btn:hover {
  background:   var(--primary);
  color:        #fff;
  border-color: var(--primary);
}

.blog-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:       var(--sp-5);
  margin:        0 var(--sp-4) var(--sp-4);
  cursor:        pointer;
  overflow:      hidden;
  position:      relative;
  transition:
    transform    var(--t-normal),
    border-color var(--t-normal),
    box-shadow   var(--t-normal);
}
.blog-card:hover {
  transform:    translateY(-3px);
  border-color: var(--border-focus);
  box-shadow:   var(--sh-md);
}
.blog-card:active { transform: scale(0.98); }
.blog-card::after {
  content:    '→';
  position:   absolute;
  right:      var(--sp-5);
  bottom:     var(--sp-5);
  color:      var(--text-muted);
  font-size:  var(--fs-lg);
  transition: transform var(--t-fast), color var(--t-fast);
}
.blog-card:hover::after { transform: translateX(4px); color: var(--primary); }

.blog-card__category {
  font-size:      var(--fs-xs);
  font-weight:    700;
  color:          var(--primary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom:  var(--sp-2);
}
.blog-card h3 {
  font-size:     var(--fs-lg);
  font-weight:   800;
  line-height:   1.3;
  margin-bottom: var(--sp-2);
}
.blog-card__excerpt {
  font-size:            var(--fs-sm);
  color:                var(--text-dim);
  line-height:          1.6;
  margin-bottom:        var(--sp-4);
  display:              -webkit-box;
  -webkit-line-clamp:   2;
  -webkit-box-orient:   vertical;
  overflow:             hidden;
}
.blog-card__meta {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--fs-xs);
  color:           var(--text-muted);
  border-top:      1px solid var(--border);
  padding-top:     var(--sp-2);
}

/* Blog post detail */
.blog-post-view { padding-bottom: calc(var(--navbar-h) + var(--sp-10)); }

.blog-back-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-2);
  background:    rgba(255,255,255,0.05);
  border:        1px solid var(--border-focus);
  color:         var(--text-muted);
  border-radius: var(--radius-pill);
  padding:       8px 18px;
  font-size:     var(--fs-sm);
  font-weight:   600;
  cursor:        pointer;
  margin:        var(--sp-5) var(--sp-4) 0;
  transition:    background var(--t-fast), color var(--t-fast);
}
.blog-back-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); }

.blog-post-content {
  background:    var(--card);
  border-radius: var(--radius-xl);
  border:        1px solid var(--border);
  padding:       var(--sp-8) var(--sp-5);
  margin:        var(--sp-4);
}
.blog-post__category {
  font-size:      var(--fs-xs);
  font-weight:    700;
  color:          var(--primary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom:  var(--sp-3);
}
.blog-post-content h1 {
  font-size:     var(--fs-2xl);
  font-weight:   900;
  line-height:   1.2;
  margin-bottom: var(--sp-5);
}
.blog-post__meta {
  display:        flex;
  gap:            var(--sp-5);
  font-size:      var(--fs-xs);
  color:          var(--text-muted);
  margin-bottom:  var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom:  1px solid var(--border);
}
.blog-post__body {
  font-size:   var(--fs-md);
  line-height: 1.9;
  color:       var(--text);
  white-space: pre-line;
}

/* ── 25. Settings ────────────────────────────────────────────── */
.settings-view { padding: var(--sp-5) var(--sp-4); }

.settings-section {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:       var(--sp-5);
  margin-bottom: var(--sp-4);
}

.settings-section__title {
  font-size:      var(--fs-xs);
  font-weight:    700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  var(--sp-4);
}

.theme-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--sp-2);
}

.theme-btn {
  padding:       var(--sp-2) var(--sp-1);
  border-radius: var(--radius-md);
  border:        2px solid var(--border);
  background:    var(--card);
  cursor:        pointer;
  transition:    border-color var(--t-fast), transform var(--t-fast);
  text-align:    center;
}
.theme-btn.active,
.theme-btn:hover { border-color: var(--primary); transform: scale(1.04); }

.font-size-grid {
  display: flex;
  gap:     var(--sp-2);
  flex-wrap: wrap;
}
.font-size-btn {
  padding:       8px 12px;
  border-radius: var(--radius-md);
  border:        1px solid var(--border-focus);
  background:    var(--card);
  color:         var(--text);
  font-size:     var(--fs-sm);
  font-weight:   700;
  cursor:        pointer;
  transition:    background var(--t-fast), border-color var(--t-fast);
}
.font-size-btn.active,
.font-size-btn:hover {
  background:   rgba(59,130,246,0.15);
  border-color: var(--primary);
  color:        var(--primary);
}

.apply-btn {
  width:         100%;
  padding:       16px;
  border-radius: var(--radius-lg);
  background:    linear-gradient(135deg, var(--primary), #6366f1);
  border:        none;
  color:         #fff;
  font-size:     var(--fs-md);
  font-weight:   800;
  cursor:        pointer;
  letter-spacing: 0.6px;
  box-shadow:    var(--sh-glow-blue);
  transition:    opacity var(--t-fast), transform var(--t-fast);
  margin-top:    var(--sp-4);
}
.apply-btn:hover  { opacity: 0.9; }
.apply-btn:active { transform: scale(0.98); }

/* ── 26. Blog Post Detail extras ─────────────────────────────── */
.blog-post__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-5) 0;
}

.blog-loading {
  text-align:  center;
  color:       var(--text-muted);
  font-size:   var(--fs-sm);
  padding:     var(--sp-10) 0;
  animation:   pulse 1.5s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.blog-error {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         var(--sp-10) var(--sp-4);
  color:           var(--text-muted);
  font-size:       var(--fs-sm);
}

.blog-post__title {
  font-size:     var(--fs-2xl);
  font-weight:   900;
  line-height:   1.2;
  margin-bottom: var(--sp-5);
}

/* Markdown-like body rendering */
.blog-post__body p  { margin-bottom: var(--sp-4); }
.blog-post__body h2 { font-size: var(--fs-xl); font-weight: 800; margin: var(--sp-6) 0 var(--sp-3); }
.blog-post__body h3 { font-size: var(--fs-lg); font-weight: 700; margin: var(--sp-5) 0 var(--sp-2); }
.blog-post__body strong { color: var(--text); font-weight: 700; }
.blog-post__body em     { color: var(--text-dim); font-style: italic; }
.blog-post__body ul,
.blog-post__body ol {
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.blog-post__body li { margin-bottom: var(--sp-1); }

/* ── 27. Navbar — Home button elevado com notch ──────────────── */

/* Wrap dos ícones regulares */
.nav-item__icon-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  transition:
    background   var(--t-fast),
    transform    var(--t-fast),
    box-shadow   var(--t-fast);
}

/* Home: botão central elevado acima da barra */
.nav-item--home {
  position:   relative;
  margin-top: -22px;
}

/* Notch — preenchimento atrás do pill para ilusão de recorte */
.nav-item--home::after {
  content:       '';
  position:      absolute;
  bottom:        -2px;
  left:          50%;
  transform:     translateX(-50%);
  width:         68px;
  height:        30px;
  background:    var(--glass-bg);
  border-radius: 0 0 50% 50%;
  z-index:       -1;
  pointer-events: none;
}

/* O círculo colorido que "flutua" */
.home-pill {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      linear-gradient(145deg, var(--accent) 0%, #fb923c 100%);
  box-shadow:
    0 6px 22px rgba(249,115,22,0.6),
    0 0 0 3px rgba(249,115,22,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22);
  border:          2px solid rgba(255,255,255,0.18);
  transition:
    transform  var(--t-normal),
    box-shadow var(--t-normal);
}

.home-pill__icon {
  width:  28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

.nav-item--home:hover .home-pill,
.nav-item--home.active .home-pill {
  transform:  scale(1.1) translateY(-4px);
  box-shadow:
    0 10px 32px rgba(249,115,22,0.75),
    0 0 0 4px rgba(249,115,22,0.28),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Suprimir o indicador padrão — o pill já destaca visualmente */
.nav-item--home::before { display: none; }

/* Cor ativa */
.nav-item--home.active { color: var(--accent); }

/* ── 28. Conferir ────────────────────────────────────────────── */
.conf-input {
  width:         100%;
  padding:       14px var(--sp-4);
  background:    var(--card);
  border:        1px solid var(--border-focus);
  border-radius: var(--radius-lg);
  color:         var(--text);
  font-family:   var(--font);
  font-size:     var(--fs-xl);
  font-weight:   700;
  text-align:    center;
  letter-spacing: 2px;
  outline:       none;
  transition:    border-color var(--t-fast);
  margin-bottom: var(--sp-2);
}
.conf-input:focus { border-color: var(--primary); }

.conf-hint {
  text-align:  center;
  font-size:   var(--fs-xs);
  color:       var(--text-muted);
  min-height:  18px;
  margin-bottom: var(--sp-3);
  letter-spacing: 0.3px;
}
.conf-hint strong { color: var(--text); }

.conf-acumulou {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: var(--radius-pill);
  background:    rgba(249,115,22,0.15);
  color:         var(--accent);
  font-size:     var(--fs-xs);
  font-weight:   700;
  letter-spacing: 0.5px;
}

.conf-btn { width: 100%; margin-bottom: var(--sp-5); }

.conf-result-area {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  width:          100%;
}

/* Card do sorteio */
.conf-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:       var(--sp-5);
}

.conf-card__header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--sp-3);
}

.conf-card__numero {
  font-size:   var(--fs-md);
  font-weight: 800;
  color:       var(--text);
}

.conf-card__data {
  font-size:   var(--fs-sm);
  color:       var(--accent);
  font-weight: 600;
}

.conf-dezenas {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--sp-2);
  margin:          var(--sp-3) 0;
}

.conf-dezena {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.07);
  border:          1px solid rgba(255,255,255,0.12);
  font-size:       var(--fs-sm);
  font-weight:     800;
  color:           var(--text);
}

.conf-card__footer {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--fs-xs);
  color:           var(--text-muted);
  padding-top:     var(--sp-3);
  border-top:      1px solid var(--border);
  gap:             var(--sp-2);
  flex-wrap:       wrap;
}
.conf-card__footer b { color: var(--text); }

/* Seção label */
.conf-section-label {
  font-size:      var(--fs-xs);
  font-weight:    700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--text-muted);
  padding:        var(--sp-2) 0 0;
}

/* Talão */
.conf-talao {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-4);
  transition:    border-color var(--t-fast);
}
.conf-talao--hit {
  border-color:  rgba(34,197,94,0.35);
  background:    rgba(34,197,94,0.05);
}

.conf-talao__head {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--sp-2);
}

.conf-talao__num {
  font-size:   var(--fs-sm);
  font-weight: 700;
  color:       var(--text-muted);
}

.conf-talao__acertos {
  font-size:   var(--fs-sm);
  font-weight: 800;
  color:       var(--success);
  padding:     2px 10px;
  border-radius: var(--radius-pill);
  background:  rgba(34,197,94,0.12);
}
.conf-talao:not(.conf-talao--hit) .conf-talao__acertos {
  color:       var(--text-muted);
  background:  rgba(255,255,255,0.05);
}

.conf-talao__numeros {
  font-size:      var(--fs-sm);
  color:          var(--text);
  letter-spacing: 0.5px;
  line-height:    1.6;
  word-break:     break-word;
}

/* ── 29. Gráfico Pares/Ímpares ───────────────────────────────── */
.grafico-container {
  flex-direction: column;
  gap:            var(--sp-5);
  padding-top:    var(--sp-5);
}

/* Linha de concurso + data */
.concurso-info {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  width:           100%;
  padding:         var(--sp-3) var(--sp-5);
  background:      var(--card);
  border:          1px solid var(--border);
  border-radius:   var(--radius-pill);
  font-size:       var(--fs-sm);
  color:           var(--text-muted);
  letter-spacing:  0.2px;
}

.ci-badge strong {
  color:       var(--text);
  font-weight: 800;
}

.ci-sep {
  opacity: 0.35;
}

.ci-date {
  font-weight: 600;
  color:       var(--accent);
}

/* Grid de bolinhas */
.numeros-sorteados {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--sp-2);
  width:           100%;
  padding:         var(--sp-4);
  background:      var(--card);
  border:          1px solid var(--border);
  border-radius:   var(--radius-xl);
}

.bola-num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.06);
  border:          1px solid rgba(255,255,255,0.10);
  font-size:       var(--fs-sm);
  font-weight:     800;
  color:           var(--text);
  letter-spacing:  0.5px;
}

/* ── 29. Install Prompt ──────────────────────────────────────── */
#install-prompt {
  position:   fixed;
  inset:      0;
  z-index:    2000;
  pointer-events: none;
}
#install-prompt.ip-visible {
  pointer-events: all;
}

#install-prompt__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    background      380ms cubic-bezier(.4,0,.2,1),
    backdrop-filter 380ms cubic-bezier(.4,0,.2,1);
}
#install-prompt.ip-visible #install-prompt__backdrop {
  background:      rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#install-prompt__sheet {
  position:       absolute;
  bottom:         0;
  left:           50%;
  transform:      translateX(-50%) translateY(100%);
  width:          100%;
  max-width:      var(--app-max-w);
  background:     linear-gradient(180deg, #111827 0%, #0d1117 100%);
  border-radius:  var(--radius-xl) var(--radius-xl) 0 0;
  border-top:     1px solid rgba(255,255,255,0.10);
  padding:        0 var(--sp-6) calc(env(safe-area-inset-bottom, 0px) + var(--sp-8));
  box-shadow:     0 -12px 60px rgba(0,0,0,0.8);
  text-align:     center;
  transition:     transform 400ms cubic-bezier(.4,0,.2,1);
}
#install-prompt.ip-visible #install-prompt__sheet {
  transform: translateX(-50%) translateY(0);
}

.ip-handle {
  width:         40px;
  height:        4px;
  border-radius: var(--radius-pill);
  background:    rgba(255,255,255,0.15);
  margin:        var(--sp-3) auto var(--sp-5);
}

.ip-icon-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           72px;
  height:          72px;
  border-radius:   22px;
  background:      linear-gradient(145deg, #1e3a5f, #0f4c81);
  border:          1px solid rgba(255,255,255,0.12);
  box-shadow:      0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.2);
  margin:          0 auto var(--sp-5);
}

.ip-icon {
  width:  52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
}

.ip-eyebrow {
  font-size:      var(--fs-xs);
  font-weight:    700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  var(--sp-2);
}

.ip-title {
  font-size:      var(--fs-2xl);
  font-weight:    900;
  letter-spacing: -0.5px;
  color:          #fff;
  margin-bottom:  var(--sp-3);
  line-height:    1.1;
}

.ip-desc {
  font-size:     var(--fs-sm);
  color:         rgba(255,255,255,0.55);
  line-height:   1.6;
  margin-bottom: var(--sp-5);
  max-width:     300px;
  margin-left:   auto;
  margin-right:  auto;
}

.ip-features {
  display:         flex;
  justify-content: center;
  gap:             var(--sp-4);
  flex-wrap:       wrap;
  margin-bottom:   var(--sp-6);
}

.ip-feature {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   var(--fs-xs);
  font-weight: 600;
  color:       rgba(255,255,255,0.65);
}

.ip-feature__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}

#ip-install-btn {
  display:       block;
  width:         100%;
  padding:       16px;
  border-radius: var(--radius-lg);
  background:    linear-gradient(135deg, var(--accent) 0%, #fb923c 100%);
  border:        none;
  color:         #fff;
  font-family:   var(--font);
  font-size:     var(--fs-md);
  font-weight:   800;
  letter-spacing: 0.4px;
  cursor:        pointer;
  box-shadow:    0 4px 20px rgba(249,115,22,0.45);
  transition:    opacity var(--t-fast), transform var(--t-fast);
  margin-bottom: var(--sp-3);
}
#ip-install-btn:hover  { opacity: 0.92; }
#ip-install-btn:active { transform: scale(0.98); }

#ip-dismiss-btn {
  display:     block;
  width:       100%;
  padding:     12px;
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.35);
  font-family: var(--font);
  font-size:   var(--fs-sm);
  font-weight: 500;
  cursor:      pointer;
  transition:  color var(--t-fast);
}
#ip-dismiss-btn:hover { color: rgba(255,255,255,0.65); }