/* ============================================================
 * style.css — Estilos do PokeAlliance Shop
 * Para editar o visual do site, mexa apenas neste arquivo.
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #04060e;
  --surface: #080f1e;
  --surface2: #0d1628;
  --surface3: #111e35;
  --border: rgba(56,140,255,0.18);
  --border-hover: rgba(56,140,255,0.5);
  --text: #dde8ff;
  --muted: #5a7099;
  --blue: #3a8cff;
  --blue-bright: #60aaff;
  --gold: #f0b429;
  --gold-dim: rgba(240,180,41,0.15);
  --gold-bright: #ffd166;
  --glow-blue: rgba(58,140,255,0.4);
  --glow-gold: rgba(240,180,41,0.35);
  --radius: 14px;
  --font-title: 'Baloo 2', 'Fredoka', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-display: 'Baloo 2', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }

/* ===================== BODY ===================== */
/* overflow-x:hidden quebra position:sticky — usar clip que não cria scroll container */
html { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  cursor: default;
  isolation: isolate;
}

/* ===================== ANIMATED BACKGROUND ===================== */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-canvas::before {
  content: '';
  position: absolute;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(58,140,255,0.07) 0%, transparent 70%);
  top: -200px; left: -200px;
  animation: none;
  will-change: auto;
}

.bg-canvas::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(240,180,41,0.05) 0%, transparent 70%);
  bottom: -100px; right: -100px;
  animation: none;
  will-change: auto;
}

@keyframes floatOrb1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 100px) scale(0.9); }
}

@keyframes floatOrb2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-60px, -80px) scale(1.15); }
}

.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 40%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 90%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 50%, rgba(58,140,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 30%, rgba(240,180,41,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,0.5) 0%, transparent 100%);
  /* Estrelas são estáticas — o twinkle é leve mas desnecessário no grid cheio */
  opacity: 0.7;
  will-change: auto;
}


@media (prefers-reduced-motion: reduce) {
  .bg-canvas::before, .bg-canvas::after, .stars { animation: none; }
}

/* ===================== PERFORMANCE: PARA ANIMAÇÕES INFINITAS PESADAS ===================== */
/* Orbs flutuantes do fundo — causam repaint constante na área toda */
.bg-canvas::before, .bg-canvas::after { animation: none !important; will-change: auto !important; }
/* Aurora rotante — layer extra na GPU */
.card-aurora { animation: none !important; }
/* scanLine do header — desnecessário */
header::after { animation: none !important; opacity: 0.7; }
/* shimmer no título e seller-name — desligado apenas em mobile (ver @media 700px) */
/* tagShine, moonPulse — pequenos mas acumulam */
.server-tag::before { animation: none !important; opacity: 0; }
.moon-icon { animation: none !important; }
/* placeholder do GIF pulsando */
.captura-card-img-placeholder { animation: none !important; }
/* hardGlow, evo3Glow, ultraRaroGlow, legendaryGlow, mythicalGlow, diveWave, warnPulse, pkgCardGlow */
.tier-hard, .evo3-tag, .ctag-ultra-raro, .ctag-legendary, .ctag-mythical, .ctag-dive { 
  animation: none !important; 
  text-shadow: none;
}
.warn-pulse, .pkg-card.featured { animation: none !important; }
/* shinyBtnPulse */
.shiny-toggle-btn { animation: none !important; }

/* ===================== HEADER ===================== */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(8,15,30,0.98);
  border-bottom: 1px solid var(--border);
  overflow: visible; /* era hidden — cortava o auth-dropdown; linha ::after usa pseudo-elemento, não precisa de clip */
  /* backdrop-filter removido — causa jank severo em elementos sticky */
}

header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--blue) 20%,
    var(--gold) 50%,
    var(--blue) 80%,
    transparent 100%);
  animation: scanLine 4s ease-in-out infinite;
}

@keyframes scanLine {
  0%,100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(16px, 4vw, 32px);
  max-width: 1600px;
  margin: 0 auto;
}

/* PA LOGO EMBLEM */
.pa-emblem {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.pa-emblem svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 12px var(--glow-blue)) drop-shadow(0 0 24px rgba(58,140,255,0.2));
  /* Sem flutuação contínua */
  animation: none;
}


/* SELLER INFO */
.seller-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seller-name {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(135deg, #fff 0%, var(--blue-bright) 40%, var(--gold) 70%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
  text-shadow: none;
  line-height: 1;
}

@keyframes shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.seller-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seller-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.server-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--gold-dim);
  border: 1px solid rgba(240,180,41,0.35);
  border-radius: 20px;
  padding: 2px 10px 2px 6px;
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.server-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(240,180,41,0.1), transparent);
  transform: translateX(-100%);
  animation: tagShine 3s ease-in-out infinite;
}

@keyframes tagShine {
  0%,100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.moon-icon {
  font-size: 12px;
  animation: moonPulse 2s ease-in-out infinite;
}

@keyframes moonPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.divider-v {
  width: 1px;
  height: 14px;
  background: var(--border);
}

.item-count-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
}

/* CART BUTTON */
.cart-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--blue) 0%, #1a6fe8 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px 22px;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
  text-transform: uppercase;
  box-shadow: 0 4px 20px var(--glow-blue), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}

.cart-trigger::before {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: rgba(255,255,255,0.15);
  transform: skewX(-20deg);
  transition: left 0.4s;
}

.cart-trigger:hover::before { left: 120%; }
.cart-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--glow-blue); }

.cart-count {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  min-width: 24px;
  text-align: center;
}

/* ===================== CART OVERLAY ===================== */
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 300;
  backdrop-filter: blur(6px);
}

.cart-overlay.open { display: flex; align-items: flex-end; justify-content: flex-end; }

.cart-panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  width: 100%;
  max-width: 440px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s cubic-bezier(.22,.68,0,1.2);
  position: relative;
  overflow: hidden;
}

.cart-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--gold), var(--blue));
  background-size: 200%;
  animation: cartTop 3s linear infinite;
}

@keyframes cartTop {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}

@keyframes slideIn {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.cart-header h2 {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--blue-bright), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.close-btn {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  width: 32px; height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.close-btn:hover { color: var(--text); border-color: var(--border-hover); }

.cart-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: border-color 0.15s;
}
.cart-row:hover { border-color: var(--border-hover); }

.cart-row-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text);
  font-family: var(--font-body);
}

.cart-row-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cart-qty { font-family: var(--font-mono); font-size: 12px; color: var(--blue-bright); }
.cart-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cart-price-kk { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--gold); }
.cart-price-brl { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }

.rem-btn {
  background: none; border: none;
  color: var(--muted); font-size: 14px;
  cursor: pointer; padding: 3px 5px;
  border-radius: 4px; transition: color 0.15s;
  line-height: 1;
}
.rem-btn:hover { color: #ff6b6b; }

/* CART FOOTER */
.cart-footer {
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.cart-total strong { color: var(--text); font-size: 13px; }

.cart-grand-total {
  background: linear-gradient(135deg, rgba(58,140,255,0.08), rgba(240,180,41,0.06));
  border: 1px solid rgba(240,180,41,0.25);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.cart-grand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.cart-grand-row:last-child { margin-bottom: 0; }
.cart-grand-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.cart-grand-val { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--blue-bright); }
.cart-grand-val-brl { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--gold); }

.whats-btn {
  width: 100%;
  background: linear-gradient(135deg, #25d366, #128c3e);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(37,211,102,0.25);
}
.whats-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,0.35); }

.contact-btns-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.contact-btns-row .whats-btn,
.contact-btns-row .discord-btn {
  width: 50%;
  margin-bottom: 0;
}
.discord-btn {
  background: linear-gradient(135deg, #5865F2, #3b45c4);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(88,101,242,0.25);
}
.discord-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(88,101,242,0.4); }

.enviar-pedido-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  border: none;
  border-radius: var(--radius);
  color: #0a0a12;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.enviar-pedido-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,175,55,0.45); }
.enviar-pedido-btn:active { transform: translateY(0); }
.enviar-pedido-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.clear-btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,100,100,0.25);
  border-radius: var(--radius);
  color: rgba(255,107,107,0.7);
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 9px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.clear-btn:hover { background: rgba(255,100,100,0.07); border-color: rgba(255,100,100,0.4); color: #ff6b6b; }

.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  gap: 12px;
}
.cart-empty svg { opacity: 0.15; }

/* ===================== TABS ===================== */
.tabs-nav {
  position: sticky;
  top: var(--header-h, 0px);
  z-index: 190;
  background: rgba(4,6,14,0.97);
  
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--blue-bright);
  border-bottom-color: var(--blue);
  background: rgba(58,140,255,0.05);
}

.tab-content { display: none; }
.tab-content.active { display: block; }


/* ===================== PAGAMENTO MODE SELECTOR ===================== */
.pay-mode-selector {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid var(--border);
}
.pay-mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--muted);
  font-family: var(--font-title);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 6px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.pay-mode-btn.active {
  background: var(--surface3);
  color: var(--text);
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.pay-mode-btn.active.kk  { color: var(--blue-bright); }
.pay-mode-btn.active.brl { color: #4ade80; }
.pay-mode-btn.active.dd  { color: #c084fc; }
.pay-mode-btn.active.mix { color: var(--gold); }

.pay-block { display: none; }
.pay-block.active { display: block; }

/* KK block */
.pay-kk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pay-kk-total {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--blue-bright);
}
.pay-kk-brl-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* BRL block */
.pay-brl-total {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: #4ade80;
  margin-bottom: 4px;
}
.pay-brl-kk-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.pay-dd-total {
  font-family: var(--font-title, monospace);
  font-size: 26px;
  font-weight: 900;
  color: #c084fc;
  letter-spacing: 1px;
}

.pay-dd-brl-hint {
  font-family: var(--font-body, sans-serif);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

/* MIX block */
.pay-mix-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pay-mix-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 28px;
}
.pay-mix-input {
  flex: 1;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  text-align: right;
}
.pay-mix-input:focus { border-color: var(--blue); }
.pay-mix-input.kk-input:focus { border-color: var(--blue-bright); }
.pay-mix-input.brl-input:focus { border-color: #4ade80; }
.pay-mix-balance {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  margin-top: 2px;
}
.pay-mix-balance.ok { color: #4ade80; }
.pay-mix-balance.over { color: #ff6b6b; }
.pay-mix-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* ===================== TAXA AVISO ===================== */
.taxa-aviso {
  background: linear-gradient(135deg, rgba(240,180,41,0.12), rgba(240,100,41,0.08));
  border: 1px solid rgba(240,180,41,0.4);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.taxa-aviso-icon { font-size: 14px; flex-shrink: 0; }
.taxa-aviso-text { font-family: var(--font-mono); font-size: 10px; color: var(--gold); line-height: 1.4; }
.taxa-aviso-text strong { color: #ffd166; }

.cart-taxa-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px dashed rgba(240,180,41,0.2);
  margin-top: 4px;
}
.cart-taxa-label { font-family: var(--font-mono); font-size: 10px; color: #ff9944; text-transform: uppercase; letter-spacing: 1px; }
.cart-taxa-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #ff9944; }

/* ===================== PACKAGES SEARCH ===================== */
.packages-controls {
  position: sticky;
  top: 0;
  z-index: 9;
  background: rgba(4,6,14,0.95);
  border-bottom: 1px solid var(--border);
  padding: 12px clamp(16px, 4vw, 32px);
  display: flex;
  gap: 12px;
  align-items: center;
}
.pkg-count-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* ===================== RESPONSIVE — MOBILE ===================== */
@media (max-width: 700px) {

  /* ── HEADER ── */
  .header-grid {
    grid-template-columns: auto 1fr auto;
    padding: 10px 14px;
    gap: 10px;
  }
  .pa-emblem { width: 44px; height: 44px; }
  .seller-name { font-size: 16px; letter-spacing: 3px; animation: none; background-position: 0% center; }
  .seller-title { display: none; }
  .divider-v { display: none; }
  .item-count-badge { display: none; }
  .cart-trigger {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 1px;
  }
  .cart-trigger .cart-label { display: none; }

  /* ── TABS ── */
  .tabs-nav { overflow-x: auto; scrollbar-width: none; }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn {
    padding: 12px 14px;
    font-size: 10px;
    letter-spacing: 1.5px;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
  }


  /* ── CARRINHO PANEL ── */
  .cart-panel { max-width: 100%; border-left: none; }
  .cart-overlay.open { align-items: flex-end; }
  .cart-panel { border-radius: 16px 16px 0 0; height: 92vh; }
  .cart-list { padding: 12px 14px; }
  .cart-footer { padding: 14px 16px; }


  /* ── ABA CAPTURA ── */
  .captura-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px 8px !important;
  }
  .captura-card { padding: 10px 8px 12px !important; }
  .captura-card-img { height: 70px !important; }
  .captura-card-name {
  position: relative;
  z-index: 1; font-size: 12px !important; }
  .captura-catch-btn {
  position: relative;
  z-index: 1;
    font-size: 10px !important;
    padding: 8px 6px !important;
    min-height: 36px !important;
  }

  /* Modal de captura — tela cheia no mobile */
  .captura-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .captura-modal {
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto;
  }
  .captura-ball-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .captura-ball-btn {
    padding: 10px 8px !important;
    font-size: 11px !important;
    min-height: 44px !important;
  }
}

/* ===================== CURSOR CUSTOM ===================== */
/* cursor padrão já definido no body principal */

/* ===================== RIPPLE CLICK ===================== */
.click-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  animation: rippleOut 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleOut {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
.click-sparks {
  position: absolute;
  transform: translate(-50%,-50%);
  pointer-events: none;
  animation: sparkFade 0.6s ease-out forwards;
}
@keyframes sparkFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ===================== CARD ENTRY ANIMATION ===================== */
/* Shared by captura and other tabs that use .cardIn */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* item-card 3D tilt + shine now in items.css */

/* ===================== BUTTON PRESS EFFECT ===================== */
.item-add-btn, .cart-trigger, .whats-btn, .pkg-add-btn, .pay-mode-btn {
  transition: all 0.2s;
}
.item-add-btn:active, .cart-trigger:active, .whats-btn:active, .pkg-add-btn:active, .pay-mode-btn:active {
  transform: scale(0.94) !important;
}

/* ===================== AURORA HEADER ===================== */
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.aurora::before {
  content: '';
  position: absolute;
  width: 200%; height: 300%;
  top: -100%; left: -50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(58,140,255,0.04) 30deg,
    rgba(240,180,41,0.03) 80deg,
    transparent 120deg,
    rgba(120,60,255,0.03) 180deg,
    rgba(58,140,255,0.04) 240deg,
    transparent 360deg
  );
  animation: auroraRotate 20s linear infinite;
}
@keyframes auroraRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===================== SCAN LINE EFFECT ===================== */
.bg-canvas::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(58,140,255,0.012) 2px,
    rgba(58,140,255,0.012) 4px
  ),
  radial-gradient(circle, rgba(58,140,255,0.07) 0%, transparent 70%);
  animation: none;
}
@keyframes scanPulse {
  0%,100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* ===================== CARD ADD BURST ===================== */
/* icBurst now in items.css */

/* ===================== FLOATING PARTICLES ===================== */
.particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: particleFloat linear infinite;
  opacity: 0;
}
@keyframes particleFloat {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ===================== GLITCH TITLE ===================== */
.seller-name {
  position: relative;
}
.seller-name::before,
.seller-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: linear-gradient(135deg, #fff 0%, var(--blue-bright) 40%, var(--gold) 70%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
}
.seller-name::before {
  animation: glitch1 8s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.seller-name::after {
  animation: glitch2 8s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@keyframes glitch1 {
  0%,89%,91%,100% { transform: translate(0); filter: none; }
  90% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); opacity: 0.8; }
}
@keyframes glitch2 {
  0%,89%,91%,100% { transform: translate(0); filter: none; }
  90% { transform: translate(2px, -1px); filter: hue-rotate(-90deg); opacity: 0.8; }
}

/* ===================== CART PANEL GLOW EDGE ===================== */
.cart-panel {
  box-shadow: -8px 0 60px rgba(58,140,255,0.12), -2px 0 20px rgba(240,180,41,0.06);
}

/* ===================== NUMBER TICKER ===================== */
@keyframes tickUp {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.tick-anim { animation: tickUp 0.25s ease-out; }

/* ===================== CAPTURA ===================== */
.captura-controls {
  /* BUG FIX: position declarado duas vezes causava z-index incorreto.
     A versão final está em captura-toolbar.css que carrega depois.
     Mantemos aqui apenas o fallback base sem conflito. */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: rgba(4,6,14,0.97);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 180;
  flex-shrink: 0;
}

.captura-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 45%), 1fr));
  gap: 12px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.captura-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
  animation: cardIn 0.3s ease both;
  position: relative;
  overflow: hidden;
  text-align: center;
  will-change: auto;
  contain: layout style;
  transform: translateZ(0);
}

.captura-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,80,255,0.8), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}

.captura-card:hover {
  border-color: rgba(160,80,255,0.45);
  background: var(--surface2);
  box-shadow: 0 0 0 1px rgba(160,80,255,0.1), 0 8px 30px rgba(0,0,0,0.4), 0 0 20px rgba(160,80,255,0.1);
  transform: translateY(-3px);
}

.captura-card:hover::before { opacity: 1; }

.captura-card-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: auto;
  will-change: auto;
  transition: transform 0.2s;
  position: relative;
  z-index: 1;
  /* Sem animation-play-state: não funciona para GIFs nativos */
}

.captura-card:hover .captura-card-img {
  transform: scale(1.08) translateY(-2px);
}

/* GIF captura placeholder */
.captura-img--gif {
  background: transparent;
  min-height: 96px;
}

.captura-card-img-placeholder {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.captura-card-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  filter: drop-shadow(0 0 8px rgba(160,80,255,0.4));
  animation: gifPlaceholderPulse 2.5s ease-in-out infinite;
}
@keyframes gifPlaceholderPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%       { opacity: 0.70; transform: scale(1.07); }
}
.captura-card:hover .captura-card-img-placeholder {
  display: none !important;
}

.captura-card-name {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
  text-transform: capitalize;
}

.captura-card-number {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1px;
}

.captura-catch-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(160,80,255,0.15), rgba(120,30,220,0.1));
  border: 1px solid rgba(160,80,255,0.4);
  border-radius: 8px;
  color: #d580ff;
  font-family: var(--font-title);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.captura-catch-btn:hover {
  background: linear-gradient(135deg, rgba(160,80,255,0.3), rgba(120,30,220,0.2));
  border-color: rgba(160,80,255,0.7);
  box-shadow: 0 0 12px rgba(160,80,255,0.3);
}

/* CAPTURA MODAL */
.captura-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.captura-overlay.open { display: flex; }

.captura-modal {
  background: var(--surface);
  border: 1px solid rgba(160,80,255,0.3);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: modalPop 0.3s cubic-bezier(.22,.68,0,1.2);
  position: relative;
  box-shadow: 0 0 60px rgba(160,80,255,0.2), 0 0 120px rgba(58,140,255,0.1);
}

@keyframes modalPop {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.captura-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), rgba(160,80,255,1), var(--gold));
  background-size: 200%;
  animation: cartTop 3s linear infinite;
  border-radius: 16px 16px 0 0;
}

.captura-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 16px 16px 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.captura-modal-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: capitalize;
  background: linear-gradient(135deg, #fff 0%, rgba(160,80,255,1) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.captura-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.captura-modal-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.captura-modal-img-wrap::before {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,80,255,0.12) 0%, transparent 70%);
  /* Sem animação — glow estático */
  animation: none;
}


.captura-modal-pokemon-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 24px rgba(160,80,255,0.5));
  position: relative;
  z-index: 1;
  /* Sem animação idle — estático até interação */
  animation: none;
}


.captura-modal-info {
  text-align: center;
}

.captura-modal-poke-name {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: capitalize;
  background: linear-gradient(135deg, #fff, rgba(160,80,255,1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.captura-modal-poke-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
}

/* Ball section removida — Ultra Ball pré-selecionada, sem UI de escolha */

.captura-sla-info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(58,140,255,0.07);
  border: 1px solid rgba(58,140,255,0.2);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.captura-sla-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.captura-sla-info strong {
  color: rgba(255,255,255,0.85);
}

.captura-confirm-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(160,80,255,0.2), rgba(58,140,255,0.15));
  border: 1px solid rgba(160,80,255,0.5);
  border-radius: var(--radius);
  color: #d580ff;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}

.captura-confirm-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(160,80,255,0.3), rgba(58,140,255,0.25));
  opacity: 0;
  transition: opacity 0.2s;
}

.captura-confirm-btn:hover::before { opacity: 1; }
.captura-confirm-btn:hover { box-shadow: 0 0 20px rgba(160,80,255,0.35); transform: translateY(-1px); }
.captura-confirm-btn span { position: relative; z-index: 1; }

.captura-confirm-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.captura-success-msg {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(37,211,102,0.1);
  border: 1px solid rgba(37,211,102,0.3);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  color: #25d366;
  width: 100%;
  justify-content: center;
  animation: cardIn 0.3s ease both;
}

.captura-success-msg.show { display: flex; }

/* ===================== CAPTURA TAG BADGES ===================== */
.captura-tag {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  width: fit-content;
  padding: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.ctag-t1         { color: #d580ff; text-shadow: 0 0 8px rgba(180,80,255,0.8); }
.ctag-t2         { color: #70b8ff; text-shadow: 0 0 8px rgba(58,140,255,0.8); }
.ctag-t3         { color: #60dd80; text-shadow: 0 0 8px rgba(60,200,100,0.8); }
.ctag-t4         { color: #d4a843; text-shadow: 0 0 8px rgba(220,160,40,0.7); }
.ctag-t5         { color: #7a90b0; text-shadow: 0 0 6px rgba(100,120,160,0.6); }
.ctag-t6         { color: #50d0e0; text-shadow: 0 0 8px rgba(80,200,220,0.8); }
.ctag-super-raro { color: #ff8c00; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,140,0,0.9), 0 0 18px rgba(255,100,0,0.6); animation: none; }
.ctag-ultra-raro { color: #ff70b0; text-shadow: 0 0 10px rgba(255,40,120,0.9); animation: ultraRaroGlow 2s ease-in-out infinite; }
.ctag-raro       { color: #ffd166; text-shadow: 0 0 8px rgba(240,180,41,0.8); }
.ctag-legendary  { color: #ffb830; text-shadow: 0 0 12px rgba(240,150,0,0.9); animation: legendaryGlow 2s ease-in-out infinite; }
.ctag-mythical   { color: #e060ff; text-shadow: 0 0 12px rgba(200,40,255,0.9); animation: mythicalGlow 2s ease-in-out infinite; }
@keyframes superRaroGlow { 0%,100% { text-shadow: 0 0 6px rgba(255,100,60,0.6); } 50% { text-shadow: 0 0 18px rgba(255,100,60,1), 0 0 30px rgba(255,100,60,0.4); } }
@keyframes ultraRaroGlow { 0%,100% { text-shadow: 0 0 6px rgba(255,40,120,0.6); } 50% { text-shadow: 0 0 18px rgba(255,40,120,1), 0 0 30px rgba(255,40,120,0.4); } }
@keyframes legendaryGlow  { 0%,100% { text-shadow: 0 0 8px rgba(240,150,0,0.6); } 50% { text-shadow: 0 0 20px rgba(240,150,0,1), 0 0 35px rgba(240,150,0,0.4); } }
@keyframes mythicalGlow   { 0%,100% { text-shadow: 0 0 8px rgba(200,40,255,0.6); } 50% { text-shadow: 0 0 20px rgba(200,40,255,1), 0 0 35px rgba(200,40,255,0.4); } }
.cpk-card[data-tier="dive"], .captura-card-dive {
  color: #00e5ff;
  box-shadow: 0 0 10px rgba(0,200,255,0.35);
  animation: diveWave 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.ctag-dive { color: #00ccff; text-shadow: 0 0 10px rgba(0,200,255,0.9); animation: diveWave 2s ease-in-out infinite; }
@keyframes diveWave { 0%,100% { text-shadow: 0 0 6px rgba(0,200,255,0.6); } 50% { text-shadow: 0 0 18px rgba(0,220,255,1), 0 0 30px rgba(0,200,255,0.4); } }

.captura-card-price {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.captura-price-kk {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  /* Glow suave na cor do tipo — sem background, sem borda */
  color: var(--type-color, rgba(160,80,255,0.95));
  text-shadow: 0 0 12px var(--type-color, rgba(160,80,255,0.6));
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.captura-price-brl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0.75;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

.captura-modal-price-block {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
  padding: 8px 16px;
  background: rgba(160,80,255,0.07);
  border: 1px solid rgba(160,80,255,0.2);
  border-radius: 8px;
}

.captura-modal-price-kk {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: rgba(160,80,255,0.95);
}

.captura-modal-price-sep {
  color: var(--muted);
  font-size: 12px;
}

.captura-modal-price-brl {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold);
}
.ball-mult {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.ball-price-kk {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.ball-price-brl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

.captura-modal-price-selected {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(58,140,255,0.07);
  border: 1px solid rgba(58,140,255,0.25);
  border-radius: var(--radius);
  animation: cardIn 0.2s ease both;
}

.captura-price-sel-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.captura-price-sel-vals {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.captura-price-sel-kk {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--blue-bright);
}

.captura-price-sel-brl {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold);
}

/* ===================== ENTREGAS ===================== */
.entregas-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 32px 0;
  flex-wrap: wrap;
}

.entregas-header-info {
  flex: 1;
}

.entregas-title {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
}

.entregas-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 3px;
}

.entregas-upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold) 0%, #c98a00 100%);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius);
  padding: 11px 22px;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 20px var(--glow-gold);
  white-space: nowrap;
}

.entregas-upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--glow-gold);
}

.entregas-count-bar {
  padding: 10px clamp(16px, 4vw, 32px) 4px;
}

.entregas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px clamp(16px, 4vw, 32px) 120px;
  position: relative;
  z-index: 1;
}

.entregas-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 80px 24px;
  text-align: center;
}

.entregas-empty-icon {
  font-size: 52px;
  opacity: 0.4;
}

.entregas-empty-text {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.5px;
}

.entregas-empty-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  opacity: 0.6;
}

.entrega-card {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  aspect-ratio: 1 / 1;
}

.entrega-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--gold);
  box-shadow: 0 8px 28px var(--glow-gold);
}

.entrega-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.entrega-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,6,14,0.85) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.entrega-card:hover .entrega-card-overlay {
  opacity: 1;
}

.entrega-card-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
}

.entrega-card-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
  margin-top: 2px;
}

.entrega-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(37,211,102,0.2);
  border: 1px solid rgba(37,211,102,0.5);
  border-radius: 20px;
  padding: 2px 9px;
  font-family: var(--font-title);
  font-size: 9px;
  font-weight: 700;
  color: #25d366;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Lightbox */
.entrega-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(4,6,14,0.95);
  backdrop-filter: blur(16px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.entrega-lightbox.open {
  display: flex;
}

.entrega-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.entrega-lightbox-img {
  max-width: 80vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--border-hover);
  box-shadow: 0 0 60px rgba(58,140,255,0.2);
}

.entrega-lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 1;
}

.entrega-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13,22,40,0.85);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entrega-lightbox-prev { left: -56px; }
.entrega-lightbox-next { right: -56px; }
.entrega-lightbox-nav:hover { background: var(--surface3); border-color: var(--blue); }

.entrega-lightbox-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

.entrega-lightbox-delete {
  background: rgba(255,60,60,0.1);
  border: 1px solid rgba(255,60,60,0.35);
  color: #ff6b6b;
  border-radius: 8px;
  padding: 7px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.entrega-lightbox-delete:hover {
  background: rgba(255,60,60,0.2);
  border-color: rgba(255,60,60,0.6);
}

@media (max-width: 600px) {
  .entregas-grid { grid-template-columns: repeat(2, 1fr); padding: 12px 16px 100px; }
  .entregas-header { padding: 16px 16px 0; }
  .entregas-count-bar { padding: 8px 16px 4px; }
  .entrega-lightbox-prev { left: -8px; }
  .entrega-lightbox-next { right: -8px; }
}

/* ===================== TYPE EFFECTS ===================== */
.captura-card .type-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius);
  z-index: 0;
  bottom: 0;
  top: auto;
  height: 60%;
}
.captura-card .type-particles span {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  left: var(--x, 50%);
  bottom: 0;
  width: var(--size, 6px);
  height: var(--size, 6px);
  animation: particleRise var(--dur, 2.5s) ease-in var(--delay, 0s) infinite;
  animation-play-state: paused;
}
/* Só anima quando o card está visível na tela (classe adicionada pelo observer) */
.captura-card.in-view .type-particles span {
  animation-play-state: running;
}
@keyframes particleRise {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  15%  { opacity: 0.9; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(-130px) translateX(var(--drift,0px)) scale(0.2); opacity: 0; }
}
@keyframes particleSpark {
  0%,100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.3) rotate(180deg); }
}
.type-fire     span { background: radial-gradient(circle,#fff5a0,#ff6a00); box-shadow:0 0 6px #ff4400; }
.type-water    span { background: radial-gradient(circle,#a0e4ff,#006eff); box-shadow:0 0 5px #00aaff; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }
.type-electric span { background: radial-gradient(circle,#fff,#ffe600);   box-shadow:0 0 8px #ffe600; border-radius:2px; animation-name:particleSpark !important; }
.type-grass    span { background: radial-gradient(circle,#c8ff90,#38c800); box-shadow:0 0 5px #44cc00; }
.type-ice      span { background: radial-gradient(circle,#fff,#a0f0ff);    box-shadow:0 0 6px #80e8ff; border-radius:2px; }
.type-psychic  span { background: radial-gradient(circle,#ffb0e8,#ff00aa); box-shadow:0 0 7px #ff44bb; animation-name:particleSpark !important; }
.type-ghost    span { background: radial-gradient(circle,#cc88ff,#5500aa); box-shadow:0 0 10px #9900ff; }
.type-dragon   span { background: radial-gradient(circle,#ffe080,#ff8800); box-shadow:0 0 8px #ffaa00; border-radius:2px; animation-name:particleSpark !important; }
.type-dark     span { background: radial-gradient(circle,#8888aa,#222244); box-shadow:0 0 6px #4444aa; }
.type-fairy    span { background: radial-gradient(circle,#fff,#ff88cc);    box-shadow:0 0 7px #ff66bb; animation-name:particleSpark !important; }
.type-poison   span { background: radial-gradient(circle,#dd88ff,#880088); box-shadow:0 0 6px #aa00cc; }
.type-ground   span { background: radial-gradient(circle,#f0d090,#c08020); box-shadow:0 0 5px #cc8800; }
.type-rock     span { background: radial-gradient(circle,#d0c090,#806040); box-shadow:0 0 4px #aa8855; }
.type-bug      span { background: radial-gradient(circle,#d0ff80,#88bb00); box-shadow:0 0 5px #99cc00; }
.type-flying   span { background: radial-gradient(circle,#d0eeff,#88aaff); box-shadow:0 0 5px #aabbff; }
.type-steel    span { background: radial-gradient(circle,#fff,#aabbcc);    box-shadow:0 0 6px #ccddee; border-radius:2px; animation-name:particleSpark !important; }
.type-normal   span { background: radial-gradient(circle,#eee,#aaa);       box-shadow:0 0 4px #bbb; }
.type-fighting span { background: radial-gradient(circle,#ffaa80,#cc3300); box-shadow:0 0 6px #ff4400; border-radius:2px; animation-name:particleSpark !important; }
.captura-card.type-fire     { border-color:rgba(255,100,0,0.5); }
.captura-card.type-water    { border-color:rgba(0,170,255,0.5); }
.captura-card.type-electric { border-color:rgba(255,230,0,0.5); }
.captura-card.type-grass    { border-color:rgba(68,200,0,0.5); }
.captura-card.type-ice      { border-color:rgba(128,232,255,0.5); }
.captura-card.type-psychic  { border-color:rgba(255,68,187,0.5); }
.captura-card.type-ghost    { border-color:rgba(153,0,255,0.5); }
.captura-card.type-dragon   { border-color:rgba(255,170,0,0.5); }
.captura-card.type-dark     { border-color:rgba(68,68,170,0.5); }
.captura-card.type-fairy    { border-color:rgba(255,102,187,0.5); }
.captura-card.type-poison   { border-color:rgba(170,0,204,0.5); }
.captura-card.type-ground   { border-color:rgba(204,136,0,0.5); }
.captura-card.type-rock     { border-color:rgba(170,136,85,0.5); }
.captura-card.type-bug      { border-color:rgba(153,204,0,0.5); }
.captura-card.type-flying   { border-color:rgba(170,187,255,0.5); }
.captura-card.type-steel    { border-color:rgba(204,221,238,0.5); }
.captura-card.type-normal   { border-color:rgba(187,187,187,0.5); }
.captura-card.type-fighting { border-color:rgba(255,68,0,0.5); }

/* ===================== BACKGROUND DINÂMICO POR TIPO (CARDS DE ITENS) ===================== */
/* Gradiente escuro + cor temática com 12-18% de opacidade — mantém estilo dark */
.item-card[data-type="fire"]     { background: linear-gradient(180deg, rgba(255,90,0,0.14) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="water"]     { background: linear-gradient(180deg, rgba(0,140,255,0.14) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="electric"]     { background: linear-gradient(180deg, rgba(255,210,0,0.12) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="grass"]     { background: linear-gradient(180deg, rgba(50,180,0,0.14) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="ice"]     { background: linear-gradient(180deg, rgba(100,220,255,0.12) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="psychic"]     { background: linear-gradient(180deg, rgba(230,50,160,0.14) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="ghost"]     { background: linear-gradient(180deg, rgba(120,0,210,0.16) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="dragon"]     { background: linear-gradient(180deg, rgba(200,120,0,0.14) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="dark"]     { background: linear-gradient(180deg, rgba(60,60,160,0.16) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="fairy"]     { background: linear-gradient(180deg, rgba(230,80,180,0.13) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="poison"]     { background: linear-gradient(180deg, rgba(160,0,200,0.16) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="ground"]     { background: linear-gradient(180deg, rgba(190,110,0,0.14) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="rock"]     { background: linear-gradient(180deg, rgba(150,110,60,0.14) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="bug"]     { background: linear-gradient(180deg, rgba(120,190,0,0.12) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="flying"]     { background: linear-gradient(180deg, rgba(130,160,255,0.12) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="steel"]     { background: linear-gradient(180deg, rgba(170,200,220,0.11) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="normal"]     { background: linear-gradient(180deg, rgba(160,160,160,0.10) 0%, #0d1220 45%, #080f1e 100%); }
.item-card[data-type="fighting"]     { background: linear-gradient(180deg, rgba(220,50,0,0.14) 0%, #0d1220 45%, #080f1e 100%); }

/* No hover, intensificar levemente o bg de tipo */
.item-card[data-type]:hover { filter: brightness(1.04); }

/* ===================== CORREÇÃO SUPER RARO — shimmer premium no lugar de spin ===================== */
/* Remove qualquer rotação que existia antes */
@keyframes superRaroShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes superRaroPulse {
  0%,100% { box-shadow: 0 0 4px rgba(255,150,80,0.3), inset 0 0 6px rgba(255,150,80,0.05); }
  50%      { box-shadow: 0 0 10px rgba(255,150,80,0.55), inset 0 0 10px rgba(255,150,80,0.1); }
}

/* ── SUPER RARO: destaque estático, SEM animação ─────────────────────────── */
.ctag-super-raro {
  color: #ff8c00 !important;
  -webkit-text-fill-color: #ff8c00 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  /* Glow fixo — chama atenção, mas totalmente estático */
  text-shadow:
    0 0 8px rgba(255,140,0,0.9),
    0 0 18px rgba(255,100,0,0.6),
    0 0 32px rgba(255,60,0,0.3) !important;
  /* ZERO animação */
  animation: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Badge "Super Raro" quando aparece como elemento com borda */
.super-raro-badge {
  border: 1px solid rgba(255,140,60,0.35);
  border-radius: 6px;
  padding: 2px 8px;
  background: rgba(255,110,40,0.06);
  animation: none;
}

/* ===================== PARTÍCULAS: sempre ativas (são leves) ===================== */
/* Garante que type-particles nunca são afetadas pelo paused */
.type-particles span {
  animation-play-state: running !important;
}

/* ===================== RESET FINAL — preços sem badge/box ===================== */
/* Garante que NENHUM elemento de preço tenha fundo, borda ou caixa             */
.price-block,
.price-row,
.price-kk,
.price-total-kk,
.price-total-brl,
.price-brl,
.captura-price-brl,
.price-sep + .price-row,
#grid .price-total-kk,
#grid .price-total-brl {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* O preço inline de total gerado pelo JS com color: ${typeColor}99 não deve ter fundo */
span[id^="total-kk-"],
span[id^="total-brl-"] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===================== TYPE DROPDOWN ===================== */
.type-dropdown {
  position: relative;
  flex-shrink: 0;
}

.type-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.type-dropdown-btn:hover { border-color: var(--border-hover); }
.type-dropdown.open .type-dropdown-btn { border-color: var(--blue); background: var(--surface3); }

.type-dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.type-dropdown-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.type-dropdown-all-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  display: block;
}
.type-dropdown-arrow {
  color: var(--muted);
  transition: transform 0.2s;
  margin-left: 2px;
}
.type-dropdown.open .type-dropdown-arrow { transform: rotate(180deg); }

.type-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: var(--surface2);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(58,140,255,0.08);
  padding: 6px;
  min-width: 160px;
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
}
.type-dropdown.open .type-dropdown-menu { display: flex; }

.type-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  width: 100%;
}
.type-dropdown-item:hover { background: var(--surface3); }
.type-dropdown-item.active { background: rgba(58,140,255,0.12); color: var(--blue-bright); }
.type-dropdown-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.type-dropdown-menu::-webkit-scrollbar { width: 4px; }
.type-dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.type-dropdown-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ===================== WIKI TAB BUTTON ===================== */
.tab-btn--wiki {
  position: relative;
  color: var(--gold) !important;
}
.tab-btn--wiki::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.tab-btn--wiki:hover::after,
.tab-btn--wiki.active::after { opacity: 1; }
.tab-btn--wiki.active { color: var(--gold-bright) !important; }

/* ===================== WIKI BANNER ===================== */
.wiki-banner {
  width: 100%;
  padding: 52px clamp(16px, 4vw, 32px) 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
    rgba(240,180,41,0.08) 0%,
    rgba(240,180,41,0.03) 40%,
    transparent 100%);
  border-bottom: 1px solid rgba(240,180,41,0.18);
  position: relative;
  overflow: hidden;
}
.wiki-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(240,180,41,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.wiki-banner-title {
  font-family: var(--font-title);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 900;
  letter-spacing: 18px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffe082 0%, #f0b429 30%, #ffd166 55%, #c88a00 75%, #ffe082 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
  line-height: 1;
  text-shadow: none;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
}
.wiki-banner-sub {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.65;
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
}
.wiki-banner-ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.wiki-banner-line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,180,41,0.6), transparent);
}
.wiki-banner-diamond {
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--gold);
}

/* ===================== WIKI CONTROLS ===================== */
.wiki-controls {
  padding: 14px clamp(16px, 4vw, 32px);
  background: rgba(4,6,14,0.9);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: calc(var(--header-h, 0px) + var(--tabs-h, 0px) + var(--wiki-subtabs-h, 52px));
  z-index: 170;
}
.wiki-search-wrap {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.wiki-search-wrap svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
  pointer-events: none;
}
#wiki-search {
  width: 100%;
  background: var(--surface2);
  border: 1px solid rgba(240,180,41,0.25);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 14px 10px 40px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#wiki-search:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240,180,41,0.1);
}
.wiki-count-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ===================== WIKI LIST ===================== */
.wiki-wrap {
  padding: 16px clamp(16px, 4vw, 32px) 100px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Linha de item da lista */
.wiki-row {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.wiki-row:first-child { border-top: 1px solid var(--border); }

.wiki-row-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.wiki-row-header:hover {
  background: rgba(240,180,41,0.05);
}
.wiki-row.open .wiki-row-header {
  background: rgba(240,180,41,0.07);
}

.wiki-row-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.wiki-row-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
  flex: 1;
  min-width: 0;
}
.wiki-row.open .wiki-row-name {
  color: var(--gold-bright);
}
.wiki-row-sources {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.wiki-row-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.25s;
}
.wiki-row.open .wiki-row-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

/* Painel expandido com os Pokémon */
.wiki-row-panel {
  display: none;
  padding: 0 16px 16px 58px;
  gap: 10px;
  flex-wrap: wrap;
}
.wiki-row.open .wiki-row-panel {
  display: flex;
}

/* Card de pokémon dentro do painel */
.wiki-poke-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(13,22,40,0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 10px;
  min-width: 100px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.wiki-poke-card:hover {
  border-color: rgba(240,180,41,0.4);
  background: rgba(240,180,41,0.06);
  transform: translateY(-2px);
}
.wiki-poke-sprite {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
}
.wiki-poke-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

.wiki-no-results {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted);
}

@media (max-width: 600px) {
  .wiki-controls { padding: 10px 16px; }
  .wiki-wrap { padding: 10px 12px 80px; }
  .wiki-banner { padding: 36px 20px 28px; }
  .wiki-banner-title { letter-spacing: 10px; }
  .wiki-row-panel { padding-left: 16px; }
}

/* ===================== WIKI SUB-TABS ===================== */
.wiki-subtabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 32px 0;
  background: transparent;
}

.wiki-subtab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  background: rgba(13,22,40,0.6);
  border: 1px solid rgba(240,180,41,0.2);
  border-radius: 40px;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(240,180,41,0.55);
  cursor: pointer;
  transition: all 0.22s;
  position: relative;
  overflow: hidden;
}

.wiki-subtab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(240,180,41,0.06), transparent);
  transform: translateX(-100%);
  transition: transform 0.4s;
}

.wiki-subtab-btn:hover {
  color: var(--gold);
  border-color: rgba(240,180,41,0.45);
  background: rgba(240,180,41,0.07);
}

.wiki-subtab-btn:hover::before { transform: translateX(100%); }

.wiki-subtab-btn.active {
  color: var(--gold-bright);
  background: rgba(240,180,41,0.12);
  border-color: rgba(240,180,41,0.55);
  box-shadow: 0 0 18px rgba(240,180,41,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}

.wiki-subtab-icon {
  font-size: 14px;
  line-height: 1;
}

/* ===================== WIKI RESPAWN TAB ===================== */
.wiki-respawn-wrap {
  padding: 16px clamp(16px, 4vw, 32px) 100px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: none;
}
.wiki-respawn-wrap.active { display: block; }

.respawn-row {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.respawn-row:first-child { border-top: 1px solid var(--border); }

.respawn-row-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.respawn-row-header:hover { background: rgba(240,180,41,0.05); }
.respawn-row.open .respawn-row-header { background: rgba(240,180,41,0.07); }

.respawn-row-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.respawn-row-sprite {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.respawn-row-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
  flex: 1;
  min-width: 0;
}
.respawn-row.open .respawn-row-name { color: var(--gold-bright); }

.respawn-row-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.25s;
}
.respawn-row.open .respawn-row-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

.respawn-row-panel {
  display: none;
  padding: 16px 16px 20px 58px;
  gap: 16px;
  flex-direction: column;
}
.respawn-row.open .respawn-row-panel { display: flex; }

.respawn-panel-inner {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.respawn-sprite-big {
  width: 100px;
  height: 100px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 1px solid rgba(240,180,41,0.2);
  border-radius: 12px;
  background: rgba(13,22,40,0.7);
  padding: 8px;
  flex-shrink: 0;
}

.respawn-map-img {
  flex: 1;
  min-width: 200px;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(240,180,41,0.25);
  object-fit: cover;
  max-height: 240px;
}

.respawn-map-placeholder {
  flex: 1;
  min-width: 200px;
  min-height: 160px;
  border-radius: 12px;
  border: 1px dashed rgba(240,180,41,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  background: rgba(13,22,40,0.4);
}

.respawn-map-placeholder .placeholder-icon { font-size: 28px; opacity: 0.4; }

.respawn-location-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-dim);
  border: 1px solid rgba(240,180,41,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  align-self: flex-start;
}

/* ===================== WIKI QUESTS TAB ===================== */
.wiki-quests-wrap {
  padding: 16px clamp(16px, 4vw, 32px) 100px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: none;
}
.wiki-quests-wrap.active { display: block; }

/* quest-row styles removidos — definidos em app.js (quest-rich-css) para evitar conflito e flash visual */

.quest-description {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.85;
  line-height: 1.6;
  max-width: 680px;
}

.quest-image {
  width: 100%;
  max-width: 580px;
  border-radius: 12px;
  border: 1px solid rgba(58,140,255,0.25);
  object-fit: cover;
}

.quest-image-placeholder {
  width: 100%;
  max-width: 580px;
  min-height: 160px;
  border-radius: 12px;
  border: 1px dashed rgba(58,140,255,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  background: rgba(8,15,30,0.5);
}
.quest-image-placeholder .placeholder-icon { font-size: 28px; opacity: 0.4; }

.wiki-empty-state {
  text-align: center;
  padding: 70px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.wiki-empty-state .empty-icon { font-size: 40px; opacity: 0.35; }
.wiki-empty-state .empty-label { font-size: 14px; letter-spacing: 1px; }

@media (max-width: 600px) {
  .wiki-subtabs { padding: 14px 16px 0; gap: 4px; }
  .wiki-subtab-btn { padding: 8px 16px; font-size: 10px; letter-spacing: 1px; }
  .wiki-respawn-wrap, .wiki-quests-wrap { padding: 10px 12px 80px; }
  .respawn-panel-inner { flex-direction: column; }
  .respawn-sprite-big { align-self: center; }
}

/* ============================================================
   Estilos movidos de index.html — consolidados aqui em style.css
   ============================================================ */

/* ── Entregas: Grupos por Data ── */
.entregas-date-group {
  width: 100%;
  margin-bottom: 36px;
}

.entregas-date-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.entregas-date-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58,140,255,0.3), transparent);
}

.entregas-date-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(58,140,255,0.08);
  border: 1px solid rgba(58,140,255,0.25);
  border-radius: 30px;
  padding: 7px 16px 7px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.entregas-date-icon {
  font-size: 13px;
  line-height: 1;
}

.entregas-date-text {
  font-family: var(--font-title, 'Cinzel', serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(96,170,255,0.95);
}

.entregas-date-count {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: 0.5px;
}

.entregas-date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

@media (max-width: 600px) {
  .entregas-date-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  .entregas-date-text {
    font-size: 10px;
    letter-spacing: 1px;
  }
}

/* ── Respawn Topbar ── */
.rsp-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 14px;
  flex-wrap: wrap;
}

.rsp-topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 0 12px;
  height: 38px;
  color: rgba(255,255,255,0.35);
  transition: border-color .2s, background .2s;
  min-width: 200px;
  max-width: 320px;
  flex: 1;
}
.rsp-topbar-search:focus-within {
  border-color: rgba(96,170,255,0.45);
  background: rgba(96,170,255,0.06);
  color: rgba(96,170,255,0.8);
}
.rsp-topbar-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  letter-spacing: 0.3px;
}
.rsp-topbar-search input::placeholder {
  color: rgba(255,255,255,0.28);
}

.rsp-topbar-count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.rsp-topbar-views {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 3px;
}
.rsp-topbar-view-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.38);
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.rsp-topbar-view-btn:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.7);
}
.rsp-topbar-view-btn.active {
  background: rgba(96,170,255,0.15);
  color: #60aaff;
  border: 1px solid rgba(96,170,255,0.25);
}

@media (max-width: 480px) {
  .rsp-topbar-view-btn span { display: none; }
  .rsp-topbar-view-btn { padding: 6px 10px; }
}

/* ── Captura List: Broke Badge ── */
.captura-list-broke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px 2px 5px;
  background: rgba(255, 90, 50, 0.10);
  border: 1px solid rgba(255, 90, 50, 0.28);
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.captura-list-broke .broke-icon { font-size: 10px; }
.captura-list-broke .broke-label {
  color: rgba(255,150,110,0.7);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 9px;
}
.captura-list-broke .broke-val {
  color: #ff9060;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

/* ── Brokes Wiki Page ── */
.brokes-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.brokes-hero {
  text-align: center;
  padding: 36px 20px 28px;
  margin-bottom: 28px;
  background: linear-gradient(145deg, rgba(255,90,50,0.08) 0%, rgba(255,60,30,0.04) 100%);
  border: 1px solid rgba(255,90,50,0.2);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.brokes-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,90,50,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.brokes-hero-icon {
  font-size: 48px;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 16px rgba(255,90,50,0.5));
}
.brokes-hero-title {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, #ff9060 60%, #ff4a20 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.brokes-hero-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.brokes-section {
  margin-bottom: 28px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
}
.brokes-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.brokes-section-icon { font-size: 15px; }
.brokes-section-note {
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,150,80,0.8);
  background: rgba(255,100,30,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  letter-spacing: 0.3px;
}

/* Table */
.brokes-table-wrap { overflow-x: auto; padding: 0; }
.brokes-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}
.brokes-table thead tr {
  background: rgba(255,255,255,0.04);
}
.brokes-table th {
  padding: 10px 20px;
  text-align: left;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.brokes-table td {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.brokes-table tbody tr:last-child td { border-bottom: none; }
.brokes-table tbody tr:hover { background: rgba(255,255,255,0.025); }

.broke-val-cell {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.broke-number {
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  font-weight: 700;
  color: #ff9060;
}
.broke-unit {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: rgba(255,150,100,0.6);
  letter-spacing: 1px;
}
.broke-approx {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: rgba(255,150,100,0.5);
  margin-right: 1px;
}
.broke-question {
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,0.3);
}
.broke-tbd {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-left: 4px;
}
.broke-equiv {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.tier-mythical-row td { opacity: 0.6; }

/* Balls grid */
.brokes-balls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 45%), 1fr));
  gap: 12px;
  padding: 16px 20px;
}
.brokes-ball-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.brokes-ball-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.brokes-ball-card--elemental { border-color: rgba(150,100,255,0.2); }
.brokes-ball-emoji {
  font-size: 36px;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
}
.brokes-ball-name {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}
.brokes-ball-rate {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  font-weight: 900;
  padding: 4px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.rate-ub { color: var(--gold); background: rgba(255,209,102,0.1); }
.rate-pb { color: #fff; background: rgba(255,255,255,0.08); }
.rate-ab { color: #60d0ff; background: rgba(96,208,255,0.08); }
.rate-el { color: #b060ff; background: rgba(176,96,255,0.1); }
.brokes-ball-desc {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: 0.2px;
}

/* Obs list */
.brokes-obs-list { padding: 8px 20px 16px; }
.brokes-obs-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.brokes-obs-item:last-child { border-bottom: none; }
.brokes-obs-item--highlight {
  color: #fff;
  background: rgba(255,90,50,0.07);
  margin: 4px -8px;
  padding: 10px 8px;
  border-radius: 8px;
  border-bottom: none;
}
.brokes-obs-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: rgba(255,90,50,0.15);
  border: 1px solid rgba(255,90,50,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: #ff9060;
  margin-top: 1px;
}
.brokes-obs-text strong { color: #fff; }

/* ── Wiki Subtabs — sticky nativo, sem JS de placeholder ── */
#wiki-subtabs-sentinel { display: none; }
#wiki-subtabs-placeholder { display: none !important; }

#wiki-subtabs {
  position: sticky;
  top: calc(var(--header-h, 0px) + var(--tabs-h, 0px));
  z-index: 200;
  background: rgba(6, 10, 22, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(58, 140, 255, 0.25);
  box-shadow: 0 4px 32px rgba(0,0,0,0.6);
  padding: 10px 24px;
}

/* wiki-controls gruda abaixo do header + tabs (subtabs não existem mais na wiki nova) */
.wiki-controls {
  top: calc(var(--header-h, 0px) + var(--tabs-h, 0px)) !important;
}

/* ══════════════════════════════════════════════
   PUNCHING BAG WIKI STYLES
══════════════════════════════════════════════ */
.pb-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 48px;
}
.pb-hero {
  position: relative;
  text-align: center;
  padding: 40px 24px 32px;
  margin-bottom: 32px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,90,30,0.12) 0%, rgba(255,180,0,0.08) 50%, rgba(30,90,255,0.10) 100%);
  border: 1px solid rgba(255,120,40,0.25);
  overflow: hidden;
}
.pb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,100,30,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.pb-hero-icon {
  font-size: 52px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(255,120,40,0.5));
  animation: pb-bounce 2.5s ease-in-out infinite;
}
@keyframes pb-bounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}
.pb-hero-title {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(255,120,40,0.4);
}
.pb-hero-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}

/* ── How To Section ── */
.pb-howto {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 28px;
}
.pb-howto-title {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,180,60,0.9);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pb-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.pb-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,120,40,0.18);
  border: 1px solid rgba(255,120,40,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: #ff9060;
  margin-top: 1px;
}
.pb-step strong { color: #fff; }
.pb-step .pb-tag-dd {
  display: inline-block;
  background: rgba(58,140,255,0.15);
  border: 1px solid rgba(58,140,255,0.3);
  color: #60a5fa;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
}
.pb-step .pb-tag-kk {
  display: inline-block;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.28);
  color: #4ade80;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
}
.pb-tip-box {
  margin-top: 12px;
  background: rgba(255,200,0,0.07);
  border: 1px solid rgba(255,200,0,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,220,100,0.85);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.5;
}

/* ── Stats Table ── */
.pb-section {
  margin-bottom: 28px;
}
.pb-section-title {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
}
.pb-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 45%), 1fr));
  gap: 10px;
}
.pb-stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  cursor: default;
}
.pb-stat-card:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,120,40,0.3);
  transform: translateY(-2px);
}
.pb-stat-icon { font-size: 22px; margin-bottom: 6px; }
.pb-stat-name {
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.pb-stat-bonus {
  font-family: var(--font-mono, monospace);
  font-size: 17px;
  font-weight: 900;
  color: #ff9060;
}
.pb-stat-per-lvl {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-top: 3px;
}

/* ── Calculator ── */
.pb-calc-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,120,40,0.2);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 28px;
}
.pb-calc-header {
  background: rgba(255,100,30,0.1);
  border-bottom: 1px solid rgba(255,120,40,0.15);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pb-calc-header-icon { font-size: 20px; }
.pb-calc-header-text {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
}
.pb-calc-body { padding: 20px; }
.pb-calc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pb-calc-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  min-width: 90px;
}
.pb-level-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.pb-level-input {
  width: 90px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,120,40,0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  font-weight: 700;
  color: #ff9060;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}
.pb-level-input:focus { border-color: rgba(255,120,40,0.7); }
.pb-level-slider {
  flex: 1;
  min-width: 120px;
  accent-color: #ff7030;
  cursor: pointer;
  height: 4px;
}
.pb-level-max {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}
/* Results grid */
.pb-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 8px;
}
.pb-result-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  transition: border-color 0.25s, background 0.25s;
}
.pb-result-cell.has-bonus {
  border-color: rgba(255,120,40,0.25);
  background: rgba(255,90,20,0.06);
}
.pb-result-icon { font-size: 16px; margin-bottom: 4px; }
.pb-result-name {
  font-family: var(--font-title);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.pb-result-val {
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  transition: color 0.25s;
}
.pb-result-cell.has-bonus .pb-result-val { color: #ff9060; }
.pb-result-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-top: 2px;
}
.pb-zero-msg {
  text-align: center;
  padding: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}

/* ── Bag variants section ── */
.pb-bags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.pb-bag-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.pb-bag-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,120,40,0.3);
  transform: translateY(-2px);
}
.pb-bag-icon { font-size: 36px; margin-bottom: 8px; }
.pb-bag-name {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
}
.pb-bag-poke {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255,120,40,0.12);
  color: #ff9060;
  margin-bottom: 8px;
}
.pb-bag-desc {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}

/* ===== ROUPAS DE SPEED ===== */
.rsp-page { padding: 20px 0 60px; }
.rsp-hero { text-align:center; padding:28px 20px 36px; }
.rsp-hero-icon { font-size:48px; line-height:1; margin-bottom:10px; }
.rsp-hero-title {
  font-family: var(--font-title);
  font-size:26px; font-weight:900; color:#fff;
  letter-spacing:3px; margin-bottom:8px;
}
.rsp-hero-sub {
  font-family: var(--font-body);
  font-size:14px; color:rgba(255,255,255,0.38);
}
.rsp-card {
  border-radius:18px;
  border:1.5px solid var(--rsp-borda, rgba(255,255,255,0.12));
  background: var(--rsp-bg, rgba(255,255,255,0.04));
  margin-bottom:14px;
  overflow:hidden;
  transition: border-color .25s, box-shadow .25s;
}
.rsp-card.open {
  border-color: var(--rsp-cor, #fff);
  box-shadow: 0 0 40px var(--rsp-glow, rgba(255,255,255,0.1)), 0 6px 30px rgba(0,0,0,0.5);
}
.rsp-head {
  display:flex; align-items:center; gap:16px;
  padding:20px 24px; cursor:pointer; user-select:none;
  transition: background .2s;
}
.rsp-head:hover { background:rgba(255,255,255,0.025); }
.rsp-badge {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background: var(--rsp-bg2, rgba(255,255,255,0.07));
  border: 1px solid var(--rsp-borda, rgba(255,255,255,0.12));
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
}
.rsp-head-info { flex:1; min-width:0; }
.rsp-nome {
  font-family: var(--font-title);
  font-size:17px; font-weight:700; color:var(--rsp-cor,#fff); letter-spacing:0.5px;
  margin-bottom:4px;
}
.rsp-subtitulo {
  font-family: var(--font-body);
  font-size:13px; color:rgba(255,255,255,0.42);
}
.rsp-pill {
  font-family: var(--font-mono,monospace);
  font-size:12px; font-weight:700;
  padding:6px 14px; border-radius:20px;
  border:1px solid var(--rsp-borda,rgba(255,255,255,0.15));
  color:var(--rsp-cor,#fff); background:var(--rsp-bg,rgba(255,255,255,0.05));
  white-space:nowrap; flex-shrink:0;
}
.rsp-arrow {
  width:22px; height:22px; flex-shrink:0;
  color:rgba(255,255,255,0.3);
  transition: transform .35s cubic-bezier(.4,0,.2,1), color .2s;
}
.rsp-card.open .rsp-arrow { transform:rotate(180deg); color:var(--rsp-cor,#fff); }
.rsp-body {
  max-height:0; overflow:hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s;
  opacity:0;
}
.rsp-card.open .rsp-body { max-height:700px; opacity:1; }
.rsp-expanded {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:22px;
  padding:0 24px 28px;
  align-items:start;
}
@media(max-width:640px){ .rsp-expanded{ grid-template-columns:1fr; } }
.rsp-img-box {
  border-radius:14px; overflow:hidden;
  border:1px solid var(--rsp-borda,rgba(255,255,255,0.1));
  background:rgba(0,0,0,0.25); line-height:0;
}
.rsp-img-box img {
  width:100%; height:auto;
  max-height:400px; object-fit:contain; display:block;
}
.rsp-info { display:flex; flex-direction:column; gap:20px; }
.rsp-info-label {
  font-family: var(--font-title);
  font-size:9px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:rgba(255,255,255,0.28);
  margin-bottom:7px;
}
.rsp-terreno-row { display:flex; align-items:center; gap:10px; }
.rsp-terreno-emoji { font-size:30px; }
.rsp-terreno-name {
  font-family: var(--font-title);
  font-size:22px; font-weight:700; color:var(--rsp-cor,#fff);
}
.rsp-req-box {
  border-radius:14px;
  border:1px solid var(--rsp-borda,rgba(255,255,255,0.1));
  background:rgba(0,0,0,0.2);
  padding:16px 18px;
  display:flex; align-items:center; gap:14px;
}
.rsp-req-num {
  font-family: var(--font-mono,monospace);
  font-size:38px; font-weight:900; color:var(--rsp-cor,#fff); line-height:1;
}
.rsp-req-pedra {
  font-family: var(--font-title);
  font-size:15px; font-weight:700; color:#fff; margin-bottom:4px;
}
.rsp-req-hint {
  font-family: var(--font-body);
  font-size:12px; color:rgba(255,255,255,0.35);
}
.rsp-sep { height:1px; background:linear-gradient(90deg,var(--rsp-borda,rgba(255,255,255,0.1)),transparent); }
.rsp-dica {
  font-family: var(--font-body);
  font-size:13px; color:rgba(255,255,255,0.45);
  line-height:1.65; font-style:italic;
}
/* ── Carrinho aberto: sidebar direita sem bloquear conteúdo (desktop) ────── */
@media (min-width: 769px) {
  .cart-overlay.open {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    /* Limita overlay à largura do painel — não cobre conteúdo à esquerda */
    left: auto;
    width: 440px;
    right: 0;
  }
  /* O conteúdo ativo ganha margem direita quando carrinho aberto */
  body:has(.cart-overlay.open) .tab-content.active {
    margin-right: 440px;
    transition: margin-right 0.3s cubic-bezier(.22,.68,0,1.2);
  }
  body:has(.cart-overlay.open) nav,
  body:has(.cart-overlay.open) .top-bar,
  body:has(.cart-overlay.open) .tabs-bar {
    margin-right: 440px;
    transition: margin-right 0.3s cubic-bezier(.22,.68,0,1.2);
  }
}

/* ── Send Order Button ── */
.send-order-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: var(--font-title, 'Cinzel', serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #3a8cff 0%, #1a5fcc 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(58,140,255,0.35);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.send-order-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(58,140,255,0.5); }
.send-order-btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(58,140,255,0.25); }
.send-order-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ============================================================
 * MERCADÃO ALIANCE — Mundo Moon / Sun + métricas admin
 * Fundação do redesign da comunidade.
 * ============================================================ */

/* ---- TEMA SUN: troca o acento azul-frio por dourado/âmbar quente ----
 * O site inteiro usa --blue/--blue-bright/--glow-blue como acento.
 * Sobrescrevendo essas variáveis quando data-server="sun", todo o
 * visual (abas, botões, brilhos, bordas) migra para o tom quente —
 * mantendo a MESMA base escura. */
html[data-server="sun"], body[data-server="sun"] {
  --blue:        #f0a02a;
  --blue-bright: #ffc24d;
  --glow-blue:   rgba(240,160,42,0.40);
  --border:        rgba(240,160,42,0.20);
  --border-hover:  rgba(240,160,42,0.55);
}
/* Transição suave ao trocar de mundo */
header, .tabs-nav, .tab-btn, .world-switch, .cart-trigger {
  transition: background-color .35s ease, border-color .35s ease, color .25s ease;
}

/* ---- Padronização do tom escuro (header + abas no mesmo deep tone) ---- */
header   { background: rgba(5,8,18,0.98); }
.tabs-nav{ background: rgba(5,8,18,0.98); }

/* ============================================================
 * WORLD SWITCH (Moon / Sun) — no header
 * ============================================================ */
.world-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.world-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, background .2s, box-shadow .2s;
}
.world-opt svg { width: 13px; height: 13px; opacity: 0.85; }
.world-count {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  min-width: 16px;
  text-align: center;
}
.world-count:empty { display: none; }
.world-opt.active .world-count { background: rgba(0,0,0,0.28); color: #fff; }
.world-opt:hover { color: var(--text); }
.world-opt.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  box-shadow: 0 0 14px var(--glow-blue);
}
/* Moon ativo brilha azul; Sun ativo brilha âmbar — automático via vars */

/* ============================================================
 * MÉTRICAS DE ADMIN (online + visitas) — só admin
 * ============================================================ */
.admin-metrics {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.metric-chip svg { opacity: 0.7; }
.metric-online { color: #6effa0; border-color: rgba(110,255,160,0.25); }
.metric-online .metric-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2ee87a;
  box-shadow: 0 0 8px #2ee87a;
  animation: metricPulse 1.8s ease-in-out infinite;
}
.metric-visits { color: var(--gold-bright); border-color: rgba(240,180,41,0.3); }
@keyframes metricPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.85); }
}

/* Responsivo: em telas estreitas, esconde os rótulos longos */
@media (max-width: 760px) {
  .world-opt span { display: none; }
  .world-opt { padding: 6px 9px; }
  .admin-metrics { display: none; }
}

/* ============================================================
 * HISTÓRICO DE PREÇO — botão no card + popup
 * ============================================================ */
.mk-price-hist-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 7px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s, border-color .15s, background .15s;
}
.mk-price-hist-btn:hover {
  opacity: 1;
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.1);
}

.ph-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,4,10,0.72);
  backdrop-filter: blur(3px);
  padding: 20px;
}
.ph-overlay.open { display: flex; animation: phFade .18s ease; }
@keyframes phFade { from { opacity: 0; } to { opacity: 1; } }

.ph-modal {
  position: relative;
  width: min(360px, 94vw);
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px var(--glow-blue);
}
.ph-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.3);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.ph-close:hover { color: var(--text); border-color: var(--border-hover); }
.ph-header { margin-bottom: 16px; }
.ph-title {
  display: block;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.ph-sub {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.ph-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ph-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ph-stat--avg { border-color: var(--border-hover); background: rgba(58,140,255,0.08); }
.ph-stat-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.ph-stat-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-bright);
}
.ph-spark { width: 100%; height: 70px; display: block; margin-bottom: 10px; }
.ph-spark-line { fill: none; stroke: var(--blue-bright); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ph-spark-area { fill: var(--glow-blue); opacity: 0.18; stroke: none; }
.ph-spark-dots circle { fill: var(--blue-bright); }
.ph-note {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}
.ph-empty {
  text-align: center;
  font-size: 13px;
  color: var(--text);
  padding: 18px 6px;
  line-height: 1.6;
}
.ph-empty span { font-size: 11px; color: var(--muted); }
.ph-loading { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ============================================================
 * REPUTAÇÃO DO VENDEDOR — badge no card + modais (print/avaliação)
 * ============================================================ */
.mk-card { position: relative; }
.mk-rep-badge-wrap {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3;
  pointer-events: none;
}
.mk-rep-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(8,12,24,0.92);
  border: 1px solid rgba(240,180,41,0.35);
  color: var(--gold-bright);
  /* backdrop-filter removido: fundo já opaco; blur custava GPU em cada card (jank de scroll) */
}
.mk-rep-badge--new {
  border-color: var(--border);
  color: var(--muted);
}

/* Modais de reputação (print / confirmação) */
.rep-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2,4,10,0.74);
  backdrop-filter: blur(3px);
  padding: 20px;
}
.rep-overlay.open { display: flex; animation: phFade .18s ease; }
.rep-modal {
  position: relative;
  width: min(380px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px var(--glow-blue);
}
.rep-close {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.3);
  color: var(--muted);
  cursor: pointer; font-size: 13px;
}
.rep-close:hover { color: var(--text); border-color: var(--border-hover); }
.rep-head { margin-bottom: 12px; }
.rep-title { display: block; font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--text); }
.rep-sub { font-size: 12px; color: var(--muted); }
.rep-hint { font-size: 12px; color: var(--muted); margin: 8px 0; line-height: 1.5; }
.rep-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  margin-bottom: 10px;
}
.rep-input:focus { outline: none; border-color: var(--border-hover); }
.rep-textarea { min-height: 60px; resize: vertical; }
.rep-preview { margin-bottom: 12px; text-align: center; }
.rep-preview img {
  max-width: 100%; max-height: 200px;
  border-radius: 10px; border: 1px solid var(--border);
}
.rep-stars { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.rep-star {
  background: none; border: none; cursor: pointer;
  font-size: 30px; line-height: 1;
  color: rgba(255,255,255,0.18);
  transition: color .12s, transform .12s;
}
.rep-star:hover { transform: scale(1.12); }
.rep-star.on { color: var(--gold-bright); }
.rep-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
 * HUB DO MARKETPLACE — seletor de tipo (Vendendo/Procurando/Services)
 * ============================================================ */
.hub-kind {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 4px 0 18px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.hub-kind-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: color .18s, background .18s, box-shadow .18s;
}
.hub-kind-btn:hover { color: var(--text); }
.hub-kind-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  box-shadow: 0 4px 18px var(--glow-blue);
}
@media (max-width: 600px) {
  .hub-kind { display: flex; width: 100%; }
  .hub-kind-btn { flex: 1; justify-content: center; padding: 9px 6px; font-size: 11px; }
}

/* ============================================================
 * SERVICES — cards
 * ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.svc-card {
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .18s, transform .18s;
}
.svc-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.svc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.svc-card-title { font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; }
.svc-card-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.svc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }
.svc-card-provider { font-size: 12px; color: var(--muted); }
.svc-card-provider b { color: var(--text); }
.svc-card-price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--gold-bright); }
.svc-card-price--neg { color: var(--muted); font-weight: 600; }
.svc-empty { text-align: center; padding: 48px 16px; color: var(--text); font-size: 14px; line-height: 1.6; }
.svc-empty span { font-size: 12px; color: var(--muted); }

/* ============================================================
 * POKÉMON FLAVOR — pokébola, ambiência Sun/Moon, holo nos cards
 * Camada de polish visual (só CSS). Mantém a base escura.
 * ============================================================ */

/* ---- Marca d'água de pokébola no fundo ---- */
.poke-watermark {
  position: absolute;
  bottom: -180px;
  right: -160px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  color: var(--blue);            /* vira âmbar no mundo Sun via --blue */
  opacity: 0.05;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 6.5%, currentColor 6.5% 9%, transparent 9% 12.5%, currentColor 12.5% 14%, transparent 14%),
    linear-gradient(to bottom, transparent 0 47.5%, currentColor 47.5% 52.5%, transparent 52.5%),
    radial-gradient(circle at 50% 50%, transparent 0 48%, currentColor 48% 50%, transparent 50%);
  transition: color .4s ease;
}
@media (max-width: 700px) { .poke-watermark { width: 360px; height: 360px; bottom: -120px; right: -120px; } }

/* ---- Ambiência do mundo (dia/noite) ---- */
.world-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .5s ease, background .5s ease;
}
/* Moon (noite): leve brilho frio no topo */
body[data-server="moon"] .world-ambient {
  background: radial-gradient(900px 480px at 80% -10%, rgba(58,140,255,0.10) 0%, transparent 60%);
}
/* Sun (dia): sol quente no canto + clareira âmbar */
body[data-server="sun"] .world-ambient {
  background:
    radial-gradient(420px 420px at 88% 4%, rgba(255,196,80,0.22) 0%, rgba(240,160,42,0.10) 35%, transparent 62%),
    radial-gradient(1000px 600px at 50% -20%, rgba(240,160,42,0.08) 0%, transparent 60%);
}
/* No mundo Sun as estrelas somem (é dia) */
body[data-server="sun"] .stars { opacity: 0.12; }

/* ---- Spinner = pokébola girando ---- */
.mk-spinner {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #eef2f9 0 4px, #2a3142 4px 6px, #eef2f9 6px 7.5px, transparent 7.5px),
    linear-gradient(to bottom, #ff5566 0 calc(50% - 3px), #11151d calc(50% - 3px) calc(50% + 3px), #f5f8fc calc(50% + 3px) 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.45), 0 0 16px var(--glow-blue);
  animation: pokeSpin .9s cubic-bezier(.5,.15,.5,.85) infinite;
}
@keyframes pokeSpin { to { transform: rotate(360deg); } }

/* Pokébola reutilizável em estados vazios */
.poke-emblem {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 5px, transparent 5px 8px, currentColor 8px 9px, transparent 9px),
    linear-gradient(to bottom, currentColor 0 47%, transparent 47% 53%, currentColor 53% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 47%, currentColor 47% 50%, transparent 50%);
  color: var(--muted);
  opacity: 0.5;
}
.svc-empty::before {
  content: '';
  display: block;
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--blue) 0 5px, transparent 5px 8px, var(--blue) 8px 9px, transparent 9px),
    linear-gradient(to bottom, var(--blue) 0 47%, transparent 47% 53%, var(--blue) 53% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 47%, var(--blue) 47% 50%, transparent 50%);
  opacity: 0.35;
}

/* ---- Brilho holográfico nos cards ao passar o mouse ---- */
.mk-card::before, .svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.10) 45%,
    rgba(120,190,255,0.14) 50%,
    rgba(255,255,255,0.10) 55%,
    transparent 70%);
  background-size: 250% 250%;
  background-position: 120% 0;
  opacity: 0;
  transition: opacity .25s ease, background-position .65s ease;
  mix-blend-mode: screen;
}
.svc-card { position: relative; overflow: hidden; }
.mk-card:hover::before, .svc-card:hover::before {
  opacity: 1;
  background-position: -20% 0;
}

/* Realce do card no mundo ativo (acento dinâmico) */
.mk-card:hover, .svc-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 6px 28px rgba(0,0,0,0.35), 0 0 22px var(--glow-blue);
}
/* fina linha de acento no topo do card */
.mk-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--gold), transparent);
  opacity: 0.45;
  z-index: 2;
  pointer-events: none;
}

/* ---- World switch: pulso de vida na opção ativa ---- */
.world-opt.active { position: relative; }
.world-opt.active::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--glow-blue);
  opacity: 0;
  animation: worldPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes worldPulse { 0%,100% { opacity: 0; } 50% { opacity: 0.5; } }

/* ---- Hub kind switch: leve glow no ativo ---- */
.hub-kind-btn.active { text-shadow: 0 0 12px rgba(255,255,255,0.35); }

/* ============================================================
 * REDESIGN POKÉMON v2 — tipografia chunky, logo pokébola, botões de jogo
 * Bloco no fim do arquivo = vence no cascade.
 * ============================================================ */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- MARCA estilo logo Pokémon (amarelo + contorno azul) ---- */
.seller-name::before, .seller-name::after { display: none !important; } /* mata o glitch */
.seller-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 33px);
  letter-spacing: 0.5px;
  line-height: 1.05;
  background: none !important;
  color: #ffde00 !important;
  -webkit-text-fill-color: #ffde00 !important;
  -webkit-text-stroke: 2.4px #2a63b4;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #143a7a, 0 4px 7px rgba(0,0,0,0.55);
  animation: none !important;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  display: inline-block;
}
.seller-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: #7fb0ff;
  text-transform: uppercase;
}
body[data-server="sun"] .seller-title { color: #ffc24d; }

/* ---- POKÉBOLA emblema: glow do mundo + flutuação ---- */
.pa-emblem { width: 66px; height: 66px; }
.pa-emblem svg {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 14px var(--glow-blue));
  animation: pbBob 3.2s ease-in-out infinite !important;
}
@keyframes pbBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .pa-emblem svg { animation: none !important; } }

/* ---- BOTÕES CHUNKY (estilo candy/game UI: base sólida + borda inferior 3D) ---- */
.mk-btn--primary,
.cart-trigger,
.auth-login-btn,
.send-order-btn,
#mk-btn-create, #wtb-btn-create, #svc-btn-create {
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, var(--blue-bright) 0%, var(--blue) 100%) !important;
  color: #06122b !important;
  box-shadow: 0 4px 0 0 #11418f, 0 6px 14px rgba(0,0,0,0.35) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
body[data-server="sun"] .mk-btn--primary,
body[data-server="sun"] .cart-trigger,
body[data-server="sun"] .auth-login-btn,
body[data-server="sun"] #mk-btn-create,
body[data-server="sun"] #wtb-btn-create,
body[data-server="sun"] #svc-btn-create { box-shadow: 0 4px 0 0 #9a6a06, 0 6px 14px rgba(0,0,0,0.35) !important; color: #2a1800 !important; }
.mk-btn--primary:hover,
.cart-trigger:hover,
.auth-login-btn:hover,
.send-order-btn:hover,
#mk-btn-create:hover, #wtb-btn-create:hover, #svc-btn-create:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
}
.mk-btn--primary:active,
.cart-trigger:active,
.auth-login-btn:active,
#mk-btn-create:active, #wtb-btn-create:active, #svc-btn-create:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 0 #11418f, 0 2px 6px rgba(0,0,0,0.3) !important;
}
.cart-count { background: #ef2d3c !important; color: #fff !important; }

/* ---- ABAS principais: pílulas chunky centralizadas ---- */
.tabs-nav {
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  flex: 0 0 auto;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
  padding: 10px 22px;
  color: var(--muted);
}
.tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.tab-btn.active {
  color: #06122b !important;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue)) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.35), 0 0 18px var(--glow-blue) !important;
}
body[data-server="sun"] .tab-btn.active { color: #2a1800 !important; }

/* ---- Pílulas de filtro/mundo: mais redondas e gordinhas ---- */
.mk-filter-chip, .mk-ball-chip, .hub-kind-btn { font-family: var(--font-title); }
.hub-kind { border-radius: 999px; }
.hub-kind-btn { border-radius: 999px; }

/* ---- Títulos de seção em Baloo (já via --font-title) — só reforça peso ---- */
.mk-title, .ph-title, .rep-title, .svc-card-title { font-weight: 700; letter-spacing: 0.2px; }

/* ---- Cards: cantos mais redondos (mais amigável) ---- */
.mk-card, .svc-card { border-radius: 18px; }

/* ============================================================
 * CARDS COLORIDOS POR TIPO — a cara mais "Pokémon" possível
 * ============================================================ */
.mk-card[data-type="normal"]   { --type: #9aa0aa; }
.mk-card[data-type="fire"]     { --type: #ff7a3d; }
.mk-card[data-type="water"]    { --type: #4aa0ff; }
.mk-card[data-type="electric"] { --type: #ffd23d; }
.mk-card[data-type="grass"]    { --type: #5ecb6a; }
.mk-card[data-type="ice"]      { --type: #6fd6d6; }
.mk-card[data-type="fighting"] { --type: #e0533b; }
.mk-card[data-type="poison"]   { --type: #b667d6; }
.mk-card[data-type="ground"]   { --type: #e0b457; }
.mk-card[data-type="flying"]   { --type: #8fa9ff; }
.mk-card[data-type="psychic"]  { --type: #ff6fa3; }
.mk-card[data-type="bug"]      { --type: #a7c93b; }
.mk-card[data-type="rock"]     { --type: #cbb868; }
.mk-card[data-type="ghost"]    { --type: #8a6fd6; }
.mk-card[data-type="dragon"]   { --type: #7a6bff; }
.mk-card[data-type="dark"]     { --type: #7a6c66; }
.mk-card[data-type="steel"]    { --type: #8fb2c9; }
.mk-card[data-type="fairy"]    { --type: #ff8fd0; }

/* Topo do card recebe um halo da cor do tipo */
.mk-card[data-type] .mk-card-top { position: relative; }
.mk-card[data-type] .mk-card-top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 130% 90% at 50% -15%, var(--type) 0%, transparent 60%),
    linear-gradient(180deg, var(--type) 0%, transparent 48%);
  opacity: 0.42;
  pointer-events: none;
}
/* faixa de cor sólida no topo do card (assinatura de tipo) */
.mk-card[data-type] .mk-card-top {
  border-top: 3px solid var(--type);
  box-shadow: inset 0 14px 26px -14px var(--type);
}
.mk-card[data-type] .mk-card-top > * { position: relative; z-index: 1; }

/* Linha de acento e glow do card seguem a cor do tipo */
.mk-card[data-type]::after {
  background: linear-gradient(90deg, transparent, var(--type), transparent);
  opacity: 0.75;
}
.mk-card[data-type]:hover {
  border-color: var(--type);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 26px var(--type);
}
/* aro da bola atrás do sprite ganha leve tom do tipo */
.mk-card[data-type] .mk-sprite-wrap { filter: drop-shadow(0 0 10px var(--type)); }

/* ============================================================
 * FILTROS + BUSCA + SCROLLBAR (polish v2)
 * ============================================================ */

/* Linha de filtros: um respiro e alinhamento melhores */
.mk-filters { gap: 9px; align-items: center; margin-bottom: 12px; }
.mk-ball-filters-label,
.mk-filters--balls .mk-ball-filters-label {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Chips chunky e arredondados */
.mk-filter-chip {
  font-family: var(--font-title) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background: rgba(255,255,255,0.055) !important;
  color: var(--muted) !important;
  transition: transform .12s ease, background .15s, color .15s, box-shadow .15s !important;
}
.mk-filter-chip:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,0.10) !important;
  transform: translateY(-1px);
}
.mk-filter-chip.active {
  color: #06122b !important;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue)) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.30), 0 0 14px var(--glow-blue) !important;
}
body[data-server="sun"] .mk-filter-chip.active { color: #2a1800 !important; }
/* "Minhas/Meus": acento dourado fixo para diferenciar do filtro normal */
.mk-filter-chip--mine.active {
  background: linear-gradient(180deg, #ffd86b, #f0b429) !important;
  color: #2a1800 !important;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.30), 0 0 14px var(--glow-gold) !important;
}

/* Chips de bola: pílula com bolinha colorida */
.mk-ball-chip {
  font-family: var(--font-title) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 6px 13px 6px 11px !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--muted) !important;
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform .12s, background .15s, color .15s !important;
}
.mk-ball-chip::before {
  content: '';
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ball, var(--muted));
  box-shadow: 0 0 7px var(--ball, transparent);
  flex-shrink: 0;
}
.mk-ball-chip:hover { color: var(--text) !important; background: rgba(255,255,255,0.10) !important; transform: translateY(-1px); }
.mk-ball-chip.active {
  color: #06122b !important;
  background: var(--ball, var(--blue)) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.30) !important;
}
.mk-ball-chip.active::before { background: #06122b; box-shadow: none; }

/* Busca arredondada com foco aceso */
.mk-search {
  border-radius: 999px !important;
  padding: 9px 16px !important;
  border: 2px solid var(--border) !important;
  background: rgba(0,0,0,0.28) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
}
.mk-search:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--glow-blue); }

/* ---- SCROLLBAR estilizada (segue o acento do mundo) ---- */
* { scrollbar-width: thin; scrollbar-color: var(--blue) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  border-radius: 999px;
  border: 3px solid var(--bg);     /* "respiro" que afina e arredonda o thumb */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.12); }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
 * FILTROS v3 — barra/painel coeso + busca com ícone
 * ============================================================ */

/* Painel da linha principal de filtros (tipo + busca). Usa ID p/ não pegar a linha de bola. */
#mk-filters, #wtb-type-filters, #svc-filters {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.20)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
  gap: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 10px rgba(0,0,0,0.25) !important;
  flex-wrap: wrap;
}

/* Busca empurrada pra direita, com lupa embutida */
#mk-search, #wtb-search, #svc-search {
  margin-left: auto !important;
  flex: 0 1 240px !important;
  min-width: 170px !important;
  background-color: rgba(0,0,0,0.32) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238293b0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 15px 15px !important;
  padding: 10px 16px 10px 38px !important;
  border: 2px solid var(--border) !important;
  border-radius: 999px !important;
}
#mk-search:focus, #wtb-search:focus, #svc-search:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--glow-blue) !important;
  background-color: rgba(0,0,0,0.4) !important;
}

/* Linha de bola: sub-row enxuta, alinhada e mais discreta (fica sob o painel) */
#mk-ball-filters, #wtb-ball-filters {
  gap: 7px !important;
  padding: 4px 4px 0 !important;
  margin-top: 8px !important;
}
#mk-ball-filters .mk-ball-filters-label,
#wtb-ball-filters .mk-ball-filters-label { margin-right: 2px; opacity: 0.75; }

/* Active do chip um tom mais suave/premium (menos "berrante") */
.mk-filter-chip.active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--blue) 88%, #fff 12%),
    var(--blue)) !important;
}