/* ════════════════════════════════════════════════════
   FONTES LOCAIS
   ════════════════════════════════════════════════════ */

/* Arial MT Pro — títulos principais */
@font-face {
  font-family: 'Arial MT Pro';
  src: url('../fonts/arialmtlight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arial MT Pro';
  src: url('../fonts/arialmt.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arial MT Pro';
  src: url('../fonts/arialmtmedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arial MT Pro';
  src: url('../fonts/arialboldmt.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arial MT Pro';
  src: url('../fonts/arialmtblack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Open Sauce One — subtítulos e rótulos */
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sauce One';
  src: url('../fonts/OpenSauceOne-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ══════════════════════════════════════════════════════
   TOKENS GLOBAIS
   ══════════════════════════════════════════════════════ */
:root {
  /* ── Paleta principal ─────────────────────────────── */
  --c-primary:  #2ED47A;
  --c-bg:       #000000;
  --c-text:     #FFFFFF;
  --c-muted:    #999999;
  --c-dim:      #AAAAAA;

  /* ── Superfícies ──────────────────────────────────── */
  --c-surface:   #111111;
  --c-surface-2: #1A1A1A;

  /* ── Bordas ───────────────────────────────────────── */
  --c-border:   rgba(46, 212, 122, 0.15);
  --c-border-2: rgba(46, 212, 122, 0.25);

  /* ── Contextos ────────────────────────────────────── */
  --c-primary-h:  #2ED47A;
  --c-primary-bg: #000000;
  --c-gold:       #D4A017;
  --c-silver:     #A0A8B8;
  --c-bronze:     #C07840;
  --c-danger:     #2ED47A;
  --c-danger-bg:  #000000;
  --c-purple:     #2ED47A;
  --c-purple-bg:  #000000;

  /* ── Tipografia ───────────────────────────────────── */
  --f-title:   'Arial MT Pro', 'Arial MT', Arial, sans-serif;   /* TÍTULOS */
  --f-display: 'Open Sauce One', 'Open Sauce', Arial, sans-serif; /* SUBTÍTULOS */
  --f-body:    'Open Sauce One', Arial, sans-serif;

  /* ── Gradientes ───────────────────────────────────── */
  --g-primary: linear-gradient(135deg, #2ED47A 0%, #15873E 100%);
  --g-gold:    linear-gradient(135deg, #D4A017 0%, #F0C040 50%, #A07010 100%);
  --g-silver:  linear-gradient(135deg, #8090A8 0%, #C0C8D8 50%, #606878 100%);
  --g-bronze:  linear-gradient(135deg, #C07840 0%, #E09860 50%, #904820 100%);

  /* ── Formas ───────────────────────────────────────── */
  --radius:    8px;
  --radius-lg: 12px;

  /* ── Animações ────────────────────────────────────── */
  --ease:   cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .12s;
  --t-med:  .25s;
  --t-slow: .5s;

  /* ── Glassmorphism ────────────────────────────────── */
  --g-bg:     rgba(6, 10, 8, 0.60);
  --g-blur:   16px;
  --g-border: rgba(46, 212, 122, 0.10);
  --g-glow:   0 0 28px rgba(46, 212, 122, 0.06), 0 4px 24px rgba(0, 0, 0, 0.42);
}


/* ══════════════════════════════════════════════════════
   RESET E BASE
   ══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: clamp(13px, 1.1vw, 19px); }

body {
  color: var(--c-text);
  font-family: var(--f-body);
  min-height: 100vh;
  padding: clamp(10px, 2vw, 32px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}


/* ══════════════════════════════════════════════════════
   FUNDO GLOBAL
   ══════════════════════════════════════════════════════ */
body {
  background-color: #000000;
  background-image:
    radial-gradient(ellipse at 18% 28%, rgba(46, 212, 122, 0.08) 0%, transparent 48%),
    radial-gradient(ellipse at 82% 72%, rgba(46, 212, 122, 0.06) 0%, transparent 46%),
    radial-gradient(ellipse at 50%  6%, rgba(46, 212, 122, 0.05) 0%, transparent 36%),
    radial-gradient(ellipse at 65% 92%, rgba(20, 90, 45,  0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 80%, rgba(10, 60, 28,  0.05) 0%, transparent 38%);
  background-attachment: fixed;
}

/* Linhas sutis de profundidade */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(46, 212, 122, 0.03) 0%,
      transparent 20%,
      transparent 80%,
      rgba(46, 212, 122, 0.03) 100%),
    linear-gradient(180deg,
      rgba(46, 212, 122, 0.015) 0%,
      transparent 50%,
      rgba(46, 212, 122, 0.015) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Luz difusa central */
body::after {
  content: '';
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(46, 212, 122, 0.03) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}


/* ══════════════════════════════════════════════════════
   ANIMAÇÕES GLOBAIS
   ══════════════════════════════════════════════════════ */

/* Base */
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.15} }
@keyframes barfill   { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes fadein    { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes critpulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes marcoin   { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@keyframes dash-in   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Glow pulsante — card do líder */
@keyframes glow {
  0%,100% { box-shadow: var(--g-glow); }
  50%     { box-shadow: 0 0 48px rgba(46, 212, 122, 0.22), 0 4px 28px rgba(0,0,0,0.55); }
}

/* Neon pulse aprimorado */
@keyframes neon-pulse {
  0%,100% { box-shadow: 0 0 14px rgba(46,212,122,0.18), 0 4px 24px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 36px rgba(46,212,122,0.38), 0 4px 28px rgba(0,0,0,0.5), inset 0 0 12px rgba(46,212,122,0.04); }
}

/* Flutuação suave do avatar líder */
@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-5px); }
}

/* Shimmer no nome do líder */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Pop elástico nos scores */
@keyframes score-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* Slide QW */
@keyframes qw-slide {
  from { opacity:0; transform: translateX(-12px); }
  to   { opacity:1; transform: translateX(0); }
}

/* Entrada do podium card */
@keyframes pod-rise {
  from { opacity:0; transform: translateY(24px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Brilho elite */
@keyframes glow-elite {
  0%,100% { filter: drop-shadow(0 0 4px rgba(212,160,23,.45)) brightness(.95); }
  50%     { filter: drop-shadow(0 0 16px rgba(212,160,23,.95)) brightness(1.25); }
}

/* Scan-line sutil */
@keyframes scanline-move {
  from { background-position: 0 0; }
  to   { background-position: 0 100%; }
}

/* Entrada suave geral */
.is-animated { animation: fadein var(--t-med) var(--ease) both; }
.is-pulsing  { animation: pulse 1.4s ease-in-out infinite; }
.is-critical { animation: critpulse 1.9s ease-in-out infinite; }
.is-glowing  { animation: glow 3s ease-in-out infinite; }
.is-marco    { animation: marcoin .35s var(--spring) both; }


/* ══════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════ */
.app { max-width: min(96vw, 1400px); margin: 0 auto; }


/* ══════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════ */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: .5px solid var(--c-border);
}

.header__brand { display: flex; align-items: center; gap: 10px; }

.header__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--g-primary);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(46,212,122,0.5);
}

/* TÍTULO principal — Arial MT Pro */
.header__title {
  font-family: var(--f-title);
  font-weight: 900;
  font-size: clamp(16px, 1.5vw, 26px);
  line-height: 1;
  letter-spacing: 2px;
}
.header__title span {
  background: var(--g-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtítulos do header — Open Sauce One */
.header__meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.header__tag  { font: 400 0.65rem var(--f-display); letter-spacing: 2px; color: var(--c-muted); }
.header__sep  { width: 1px; height: 10px; background: var(--c-border); }
.header__clock { font: 400 0.78rem var(--f-display); color: var(--c-muted); text-align: right; }
.header__year  { font: 400 0.65rem var(--f-display); color: var(--c-dim); letter-spacing: 1.5px; }


/* ══════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  background: rgba(6, 10, 8, 0.72);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  padding: 4px;
  border-radius: 7px;
  border: .5px solid var(--g-border);
  box-shadow: var(--g-glow);
}

.tabs__btn {
  flex: 1;
  background: none;
  border: none;
  text-align: center;
  font: 400 0.72rem var(--f-display);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-muted);
  cursor: pointer;
  padding: clamp(8px, 1vw, 12px) 0;
  border-radius: 5px;
  transition: color var(--t-fast), background var(--t-fast);
}
.tabs__btn:hover { color: var(--c-primary); }
.tabs__btn--active {
  background: rgba(46, 212, 122, 0.07);
  color: var(--c-primary);
  border: .5px solid rgba(46, 212, 122, 0.20);
  box-shadow: 0 0 12px rgba(46,212,122,0.08);
}


/* ══════════════════════════════════════════════════════
   CARDS — glassmorphism
   ══════════════════════════════════════════════════════ */
.card {
  background: var(--g-bg);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  border: .5px solid var(--g-border);
  border-radius: 8px;
  padding: 13px;
  box-shadow: var(--g-glow);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.card--flush { padding: 0; overflow: hidden; border-radius: var(--radius-lg); }

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* Rótulos — Open Sauce One */
.card__label { font: 400 10px var(--f-display); color: var(--c-muted); letter-spacing: 2px; }
.card__hint  { font: 400 8px var(--f-display); color: var(--c-dim); letter-spacing: 1px; background: rgba(46, 212, 122, 0.05); padding: 2px 8px; border-radius: 3px; }
.card__sub   { font: 400 8px var(--f-display); color: var(--c-dim); letter-spacing: 1px; margin-top: 6px; }


/* ══════════════════════════════════════════════════════
   TOP 3 — PÓDIO
   ══════════════════════════════════════════════════════ */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.podium__card {
  background: var(--g-bg);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  border: .5px solid var(--g-border);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  margin-top: 22px;
  box-shadow: var(--g-glow);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
  animation: pod-rise .5s var(--spring) both;
}
.podium__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 32px rgba(46, 212, 122, 0.12);
}

/* Camada de vidro fosco */
.podium__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 8, 0.30);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Linha brilhante no topo do card */
.podium__card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46,212,122,0.25), transparent);
  border-radius: 100px;
  z-index: 2;
}

.podium__card > * { position: relative; z-index: 2; }

/* Delay escalonado por posição */
.podium__card:nth-child(1) { animation-delay: .1s; }
.podium__card:nth-child(2) { animation-delay: 0s; }
.podium__card:nth-child(3) { animation-delay: .2s; }

/* Card líder — TOP 1 */
.podium__card--leader {
  margin-top: 0;
  padding: 22px 14px;
  border: 1px solid rgba(46, 212, 122, 0.30);
  background: rgba(4, 14, 8, 0.75);
  animation: neon-pulse 4s ease-in-out infinite, pod-rise .5s var(--spring) both;
}

/* Badge do líder */
.podium__crown {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--g-primary);
  color: var(--c-bg);
  font: 700 8px var(--f-display);
  letter-spacing: 3px;
  padding: 3px 16px;
  border-radius: 4px;
  z-index: 3;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(46,212,122,0.4);
}

/* Textos internos do pódio — NOMES usam Arial MT Pro */
.podium__pos    { font: 400 0.65rem var(--f-display); letter-spacing: 2px; text-align: center; width: 100%; }
.podium__name   {
  font-family: var(--f-title);
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  width: 100%;
}
/* Shimmer no nome do líder */
.podium__card--leader .podium__name {
  background: linear-gradient(90deg, #fff 0%, #2ED47A 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Score usa Arial MT Pro */
.podium__score  {
  font-family: var(--f-title);
  font-weight: 900;
  line-height: 1;
  margin: 4px 0;
  text-align: center;
  width: 100%;
  animation: score-pop .45s var(--spring) both;
}
.podium__sub    { font: 400 0.6rem var(--f-display); color: var(--c-muted); letter-spacing: 2px; }
.podium__proofs { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; }

.podium__score-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 4px;
}

/* Container flex do pódio */
.podium-flex {
  display: flex;
  gap: clamp(4px, 1vw, 14px);
  align-items: flex-end;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 24px;
}

/* Avatares responsivos */
.pod-av--lg { width: clamp(48px, 4.5vw, 82px) !important; height: clamp(48px, 4.5vw, 82px) !important; }
.pod-av--md { width: clamp(36px, 3.2vw, 60px) !important; height: clamp(36px, 3.2vw, 60px) !important; }
.pod-av--sm { width: clamp(28px, 2.5vw, 46px) !important; height: clamp(28px, 2.5vw, 46px) !important; }

/* Emblemas responsivos */
.pod-em--lg { width: clamp(64px, 6vw, 110px) !important; height: clamp(64px, 6vw, 110px) !important; }
.pod-em--md { width: clamp(48px, 4.5vw, 82px) !important; height: clamp(48px, 4.5vw, 82px) !important; }
.pod-em--sm { width: clamp(36px, 3.2vw, 60px) !important; height: clamp(36px, 3.2vw, 60px) !important; }


/* ══════════════════════════════════════════════════════
   TABELA DE RANKING
   ══════════════════════════════════════════════════════ */
.table__head,
.table__row {
  display: grid;
  padding: 9px 14px;
  align-items: center;
  gap: 4px;
  grid-template-columns: 34px 1fr 60px 100px 70px 70px 65px;
}

.table__head {
  border-bottom: .5px solid var(--g-border);
  font: 400 8px var(--f-display);
  color: var(--c-dim);
  letter-spacing: 2px;
}

.table__row {
  border-bottom: .5px solid rgba(46, 212, 122, 0.04);
  transition: background var(--t-fast), transform .15s;
  cursor: default;
}
.table__row:hover      { background: rgba(46, 212, 122, 0.04); transform: translateX(2px); }
.table__row:last-child { border-bottom: none; }

/* Posição e score usam Arial MT Pro */
.table__pos   { font-family: var(--f-title); font-weight: 700; font-size: 1rem; }
.table__exec  { display: flex; align-items: center; gap: 8px; }
.table__name  { font: 600 0.86rem var(--f-display); color: var(--c-text); letter-spacing: .5px; }
.table__meta  { display: flex; gap: 5px; align-items: center; }
.table__score { text-align: center; font-family: var(--f-title); font-weight: 900; font-size: 1.25rem; }
.table__fat   { text-align: right; font: 400 0.7rem var(--f-display); }
.table__views { font-size: 0.57rem; color: var(--c-muted); margin-top: 1px; }

@media (max-width: 600px) {
  .table__head,
  .table__row { grid-template-columns: 26px 1fr 46px 0 0 0 56px; }
  .table__row > div:nth-child(4),
  .table__row > div:nth-child(5),
  .table__row > div:nth-child(6),
  .table__head > span:nth-child(4),
  .table__head > span:nth-child(5),
  .table__head > span:nth-child(6) { display: none; }
}


/* ══════════════════════════════════════════════════════
   AVATARS E EXECUTORES
   ══════════════════════════════════════════════════════ */
.avatar {
  border-radius: 50%;
  background: rgba(15, 22, 18, 0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-title);
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.avatar:hover {
  transform: scale(1.07);
  box-shadow: 0 0 14px rgba(46,212,122,0.2);
}

/* Float no avatar do líder */
.podium__card--leader .avatar {
  animation: float 3.5s ease-in-out infinite;
}

.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(20%) saturate(90%) brightness(0.95) contrast(1.05);
}

.exec-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: transform var(--t-fast);
}
.exec-card:hover { transform: translateX(3px); }
.exec-card__info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.exec-card__name { font: 600 0.9rem var(--f-display); color: var(--c-text); }
.exec-card__meta { display: flex; gap: 6px; margin-top: 3px; align-items: center; flex-wrap: wrap; }


/* ══════════════════════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════════════════════ */
.btn {
  font-family: var(--f-display);
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 10px;
  transition: all var(--t-fast);
  border: .5px solid transparent;
  padding: 7px 16px;
  background: none;
}
.btn:disabled { opacity: .3; cursor: default; }

.btn--primary { border-color: var(--c-primary); color: var(--c-primary); }
.btn--primary:hover:not(:disabled) { background: var(--c-primary); color: var(--c-bg); box-shadow: 0 0 16px rgba(46,212,122,0.25); }

.btn--ghost { border-color: var(--c-border-2); color: var(--c-muted); }
.btn--ghost:hover:not(:disabled) { border-color: var(--c-muted); color: var(--c-primary); }

.btn--danger { border-color: #5a1818; color: #884444; font-size: 9px; padding: 4px 9px; }
.btn--danger:hover:not(:disabled) { border-color: var(--c-danger); color: #f08080; }

.btn--purple { border-color: #7c5ab8; color: var(--c-purple); }
.btn--purple:hover:not(:disabled) { background: rgba(124, 90, 184, 0.10); }

.btn--submit {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 7px;
  background: var(--g-primary);
  color: var(--c-bg);
  font: 700 13px var(--f-display);
  letter-spacing: 3px;
  transition: opacity var(--t-fast), box-shadow var(--t-fast), transform .1s;
}
.btn--submit:hover:not(:disabled)  { opacity: .88; box-shadow: 0 0 20px rgba(46,212,122,0.28); }
.btn--submit:disabled              { opacity: .18; background: var(--c-border-2); color: var(--c-dim); }
.btn--submit:active:not(:disabled) { transform: scale(.99); }

.qgrid { display: flex; gap: 6px; flex-wrap: wrap; }

.qbtn {
  background: rgba(6, 10, 8, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: .5px solid var(--g-border);
  border-radius: 5px;
  color: var(--c-muted);
  min-width: 44px;
  text-align: center;
  font: 400 11px var(--f-display);
  letter-spacing: .5px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.qbtn:hover:not(.qbtn--on) {
  border-color: var(--c-border-2);
  color: var(--c-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.qbtn--on {
  border-color: var(--c-primary);
  color: var(--c-primary-h);
  background: rgba(46, 212, 122, 0.08);
  box-shadow: 0 0 16px rgba(46, 212, 122, 0.14);
}
.qbtn--green.qbtn--on  { border-color: var(--c-primary); color: var(--c-primary-h); background: rgba(10, 30, 14, 0.70); }
.qbtn--danger.qbtn--on { border-color: var(--c-danger);  color: #f08080; background: rgba(40, 0, 0, 0.60); }


/* ══════════════════════════════════════════════════════
   FORMULÁRIOS
   ══════════════════════════════════════════════════════ */
.input, .textarea {
  width: 100%;
  background: rgba(6, 10, 8, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: .5px solid var(--g-border);
  border-radius: var(--radius);
  color: var(--c-text);
  outline: none;
  line-height: 1.7;
  font: 400 11px var(--f-body);
  padding: 10px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .textarea:focus {
  border-color: rgba(46, 212, 122, 0.30);
  box-shadow: 0 0 14px rgba(46, 212, 122, 0.10);
}
.textarea { resize: none; }

.select {
  width: 100%;
  background: rgba(6, 10, 8, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: .5px solid var(--g-border);
  border-radius: 5px;
  color: var(--c-text);
  outline: none;
  cursor: pointer;
  font: 400 11px var(--f-body);
  padding: 9px 10px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.select:focus {
  border-color: rgba(46, 212, 122, 0.30);
  box-shadow: 0 0 14px rgba(46, 212, 122, 0.10);
}


/* ══════════════════════════════════════════════════════
   BADGES E STATUS
   ══════════════════════════════════════════════════════ */
.badge {
  display: inline-block;
  font: 400 8px var(--f-display);
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 3px;
}
.badge--start  { background: rgba(46, 212, 122, 0.06); border: .5px solid var(--g-border); color: var(--c-primary); }
.badge--growth { background: rgba(46, 212, 122, 0.06); border: .5px solid var(--g-border); color: var(--c-primary); }

.status {
  display: inline-block;
  font: 400 8px var(--f-display);
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 4px;
  border: .5px solid transparent;
  transition: opacity var(--t-fast);
}

/* Tags de prova */
.proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 20, 8, 0.65);
  border: .5px solid #2a5035;
  border-radius: 4px;
  padding: 3px 8px;
  font: 400 10px var(--f-display);
  color: var(--c-primary);
  letter-spacing: .5px;
}
.proof--gold { background: rgba(26, 20, 0, 0.70); border-color: #4a380a; color: var(--c-gold); }


/* ══════════════════════════════════════════════════════
   MARCOS (conquistas)
   ══════════════════════════════════════════════════════ */
.marco {
  background: rgba(8, 5, 16, 0.65);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  border: .5px solid rgba(124, 90, 184, 0.28);
  border-radius: 8px;
  padding: 13px;
  margin-top: 10px;
  box-shadow: 0 0 28px rgba(124, 90, 184, 0.10);
}
.marco__head   { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.marco__dot    { width: 5px; height: 5px; border-radius: 50%; background: var(--c-purple); flex-shrink: 0; }
.marco__tag    { font: 400 8px var(--f-display); color: var(--c-purple); letter-spacing: 2.5px; }
.marco__title  { font: 600 14px var(--f-display); color: #c8b0f0; margin-bottom: 5px; }
.marco__reason { font: 400 10px var(--f-body); color: #6a5080; line-height: 1.6; margin-bottom: 10px; }
.marco__footer { display: flex; align-items: center; justify-content: space-between; }
/* Bônus usa Arial MT Pro — número grande */
.marco__bonus  { font-family: var(--f-title); font-weight: 900; font-size: 28px; color: #c8b0f0; }
.marco__pts    { font: 400 9px var(--f-display); color: #6a5080; }
.marco__applied{ font: 400 9px var(--f-display); color: var(--c-purple); letter-spacing: 1px; }


/* ══════════════════════════════════════════════════════
   PAINEL IA
   ══════════════════════════════════════════════════════ */
.ai-panel {
  background: rgba(4, 12, 7, 0.70);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  border: .5px solid rgba(46, 212, 122, 0.18);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 0 32px rgba(46, 212, 122, 0.08);
}
.ai-panel__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ai-panel__tag  { font: 400 9px var(--f-display); color: var(--c-primary); letter-spacing: 2.5px; }
.ai-panel__body { font: 400 11px var(--f-body); color: var(--c-muted); line-height: 2; white-space: pre-wrap; }


/* ══════════════════════════════════════════════════════
   SCORES — Arial MT Pro para números grandes
   ══════════════════════════════════════════════════════ */
.score-big    {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  animation: score-pop .45s var(--spring) both;
}
.score-huge   {
  font-family: var(--f-title);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  animation: score-pop .45s var(--spring) both;
}
.score-medium {
  font-family: var(--f-title);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  animation: score-pop .45s var(--spring) both;
}


/* ══════════════════════════════════════════════════════
   BARRA DE PROGRESSO
   ══════════════════════════════════════════════════════ */
.bar { background: rgba(6, 10, 8, 0.70); border-radius: 2px; overflow: hidden; padding: 0 4px; }
.bar__fill {
  height: 5px;
  border-radius: 2px;
  transform-origin: left;
  animation: barfill 1s var(--ease) both;
  position: relative;
}
/* Ponto brilhante no fim da barra */
.bar__fill::after {
  content: '';
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 6px rgba(46,212,122,0.8);
  opacity: .8;
}


/* ══════════════════════════════════════════════════════
   ESTATÍSTICAS — valores em Arial MT Pro
   ══════════════════════════════════════════════════════ */
.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.stats__item { text-align: center; }
.stats__item + .stats__item { border-left: .5px solid var(--g-border); }
.stats__val {
  font-family: var(--f-title);
  font-weight: 900;
  font-size: 1.5rem;
  background: var(--g-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
.stats__label { font: 400 0.57rem var(--f-display); color: var(--c-dim); letter-spacing: 1.5px; margin-top: 2px; }

.stats-dual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-top: .5px solid var(--g-border);
  padding-top: 10px;
  margin-top: 4px;
}
.stats-dual__item  { display: flex; align-items: center; gap: 6px; }
.stats-dual__dot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.stats-dual__pct   { font-family: var(--f-title); font-weight: 700; font-size: 1.1rem; }
.stats-dual__label { font: 400 0.6rem var(--f-display); color: var(--c-dim); letter-spacing: 1.5px; }

.delivery-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  font: 700 0.55rem var(--f-display);
  letter-spacing: 1px;
  color: var(--c-dim);
  background: rgba(255,255,255,.04);
  border: .5px solid rgba(255,255,255,.1);
}
.delivery-pill--ok {
  color: #4A9EFF;
  background: rgba(74,158,255,.08);
  border-color: rgba(74,158,255,.25);
}
.delivery-pill__label { font-size: inherit; }
@media (max-width: 600px) { .delivery-pill__label { display: none; } }

.podium__delivery {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 3px;
}


/* ══════════════════════════════════════════════════════
   UTILITÁRIOS
   ══════════════════════════════════════════════════════ */
.divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.divider__line { flex: 1; height: .5px; background: var(--g-border); }
.divider__text { font: 400 8px var(--f-display); color: var(--c-dim); letter-spacing: 2px; }

.u-grid    { display: grid; gap: 10px; }
.u-flex    { display: flex; }
.u-between { justify-content: space-between; }
.u-center  { align-items: center; }
.u-gap-8   { gap: 8px; }
.u-gap-16  { gap: 16px; }
.u-right   { text-align: right; }


/* ══════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  font: 700 12px var(--f-display);
  letter-spacing: 2px;
  padding: 11px 28px;
  border-radius: 6px;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all .25s var(--ease);
}
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ══════════════════════════════════════════════════════
   ZONA DE UPLOAD DE AVATAR
   ══════════════════════════════════════════════════════ */
.avatar-zone {
  position: relative;
  border: 1px dashed var(--g-border);
  border-radius: 8px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 80px;
  margin-bottom: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.avatar-zone:hover,
.avatar-zone--drag {
  border-color: var(--c-primary);
  background: rgba(46, 212, 122, 0.04);
}
.avatar-zone--drag { border-style: solid; }

.avatar-zone__icon  { font-size: 18px; color: var(--c-muted); line-height: 1; }
.avatar-zone__label { font: 400 9px var(--f-display); color: var(--c-muted); letter-spacing: 2px; }
.avatar-zone__hint  { font: 400 8px var(--f-display); color: var(--c-dim); letter-spacing: 1px; }

.avatar-zone--preview {
  flex-direction: row;
  justify-content: flex-start;
  padding: 10px 14px;
  gap: 12px;
  cursor: default;
  border-style: solid;
  border-color: rgba(46, 212, 122, 0.20);
  background: rgba(46, 212, 122, 0.03);
}
.avatar-zone__preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(46, 212, 122, 0.30);
  filter: grayscale(20%) saturate(90%) brightness(0.95) contrast(1.05);
  flex-shrink: 0;
}
.avatar-zone__preview-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.avatar-zone__preview-label {
  font: 400 8px var(--f-display);
  color: var(--c-primary);
  letter-spacing: 2px;
}
.avatar-zone__clear {
  background: none;
  border: .5px solid #5a1818;
  border-radius: 4px;
  color: #884444;
  font: 400 8px var(--f-display);
  letter-spacing: 1px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all var(--t-fast);
  align-self: flex-start;
}
.avatar-zone__clear:hover { border-color: var(--c-danger); color: #f08080; }


/* ══════════════════════════════════════════════════════
   MODAL DE LOGIN
   ══════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.modal {
  position: relative;
  z-index: 101;
  width: 100%;
  max-width: 340px;
  background: rgba(4, 10, 6, 0.93);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: .5px solid rgba(46, 212, 122, 0.22);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: 0 0 64px rgba(46, 212, 122, 0.10), 0 24px 64px rgba(0,0,0,0.65);
}

.modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}


/* ══════════════════════════════════════════════════════
   BOTÃO INSTAGRAM
   ══════════════════════════════════════════════════════ */
.btn-ig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 5px 14px;
  border-radius: 5px;
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 55%, #fcb045 100%);
  color: #fff;
  font: 700 0.57rem var(--f-display);
  letter-spacing: 1.5px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.btn-ig:hover { opacity: .85; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(253,29,29,0.3); }

@media (max-width: 600px) {
  .btn-ig { padding: 5px 8px; }
  .btn-ig__text { display: none; }
}


/* ══════════════════════════════════════════════════════
   EMBLEMAS JDP
   ══════════════════════════════════════════════════════ */
.emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.emblem--elite { animation: glow-elite 3.5s ease-in-out infinite; }


/* ══════════════════════════════════════════════════════
   LISTA INLINE DE EXECUTORES
   ══════════════════════════════════════════════════════ */
.exec-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.exec-list__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: .5px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.exec-list__item:hover,
.exec-list__item:active {
  background: rgba(46,212,122,.08);
  border-color: rgba(46,212,122,.18);
}
.exec-list__name {
  font: 600 11px var(--f-display);
  color: var(--c-text);
  letter-spacing: .5px;
  flex: 1;
}
.exec-list__prog {
  font: 400 8px var(--f-display);
  color: var(--c-dim);
  letter-spacing: 1px;
}


/* ══════════════════════════════════════════════════════
   DASHBOARD — Overview
   ══════════════════════════════════════════════════════ */
.dash-section {
  animation: dash-in .48s cubic-bezier(.22, .68, 0, 1.15) both;
}

.dash-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dash-filter-pill {
  background: rgba(6, 10, 8, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: .5px solid var(--g-border);
  border-radius: 20px;
  color: var(--c-muted);
  font: 400 0.6rem var(--f-display);
  letter-spacing: 1.5px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.dash-filter-pill:hover { color: var(--c-primary); border-color: var(--c-border-2); }
.dash-filter-pill--active {
  background: rgba(46, 212, 122, .08);
  border-color: rgba(46, 212, 122, .28);
  color: var(--c-primary);
  box-shadow: 0 0 10px rgba(46,212,122,0.1);
}

/* Gauge */
.dash-gauge { display: flex; flex-direction: column; align-items: center; padding: 14px 16px; }
.dash-gauge__svg { width: 100%; max-width: 200px; }
.dash-gauge__st {
  font: 700 0.72rem var(--f-display);
  letter-spacing: 2px;
  margin-top: 4px;
}

/* Line chart */
.dash-chart__svg { width: 100%; display: block; }

/* Multi-line trend — hover effects */
@keyframes cl-draw { to { stroke-dashoffset: 0; } }
.cl-line { opacity: 0.78; transition: opacity 0.18s ease; cursor: pointer; }
.cl-line:hover { opacity: 1; }
.cl-name { opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }
.cl-line:hover .cl-name { opacity: 1; }

.dash-label {
  font: 400 0.6rem var(--f-display);
  color: var(--c-dim);
  letter-spacing: 3px;
  padding: 0 2px;
  margin-bottom: 12px;
}

/* 4 cards métricas */
.dash-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .dash-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* 2 colunas */
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .dash-grid-2 { grid-template-columns: 1fr; }
}

/* Card métrica — valor usa Arial MT Pro */
.dash-metric { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.dash-metric__val {
  font-family: var(--f-title);
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -0.5px;
}
.dash-metric__label {
  font: 400 0.62rem var(--f-display);
  color: var(--c-dim);
  letter-spacing: 2px;
  margin-top: 2px;
}
.dash-metric__sub {
  font: 400 0.6rem var(--f-display);
  color: var(--c-muted);
  letter-spacing: 1px;
}

/* Distribuição */
.dash-dist { display: flex; flex-direction: column; gap: 10px; }
.dash-dist__row {
  display: grid;
  grid-template-columns: 80px 1fr 28px;
  align-items: center;
  gap: 8px;
}
.dash-dist__label {
  font: 400 0.62rem var(--f-display);
  color: var(--c-muted);
  letter-spacing: 1.5px;
}
.dash-dist__count { font-family: var(--f-title); font-weight: 700; font-size: 0.7rem; text-align: right; }

/* Barra do dashboard */
.dash-bar { height: 4px; background: rgba(255,255,255,.05); border-radius: 2px; overflow: hidden; }
.dash-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width .7s var(--ease);
}

/* Número grande — Arial MT Pro */
.dash-big-num {
  font-family: var(--f-title);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  background: var(--g-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Top performers */
.dash-top { display: flex; flex-direction: column; gap: 6px; }
.dash-top__row {
  display: grid;
  grid-template-columns: 22px 28px 1fr 44px 60px;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 6px;
  border: .5px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.dash-top__row:hover {
  background: rgba(46,212,122,.04);
  border-color: rgba(46,212,122,.1);
}
.dash-top__pos { font-family: var(--f-title); font-weight: 700; font-size: 0.7rem; text-align: center; }
.dash-top__info { min-width: 0; }
.dash-top__name {
  font: 600 0.78rem var(--f-display);
  color: var(--c-text);
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-top__prog { font: 400 0.55rem var(--f-display); color: var(--c-dim); letter-spacing: 1px; }
.dash-top__score { font-family: var(--f-title); font-weight: 900; font-size: 1rem; text-align: right; }
.dash-top__st    { text-align: right; }


/* ══════════════════════════════════════════════════════
   DASHBOARD INDIVIDUAL — Hero do Cliente
   ══════════════════════════════════════════════════════ */
.client-hero {
  animation: neon-pulse 4s ease-in-out infinite;
}
.client-hero__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.client-hero__av-wrap {
  position: relative;
  flex-shrink: 0;
}
.client-hero__av-glow {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
  animation: float 3.5s ease-in-out infinite;
}
.client-hero__info { flex: 1; min-width: 0; }
/* Nome usa Arial MT Pro + shimmer */
.client-hero__name {
  font-family: var(--f-title);
  font-weight: 900;
  font-size: clamp(16px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: .5px;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(90deg, #fff 0%, #2ED47A 60%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}
.client-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.client-hero__days { font: 400 8px var(--f-display); color: var(--c-dim); letter-spacing: 1.5px; }
.client-hero__sub  { font: 400 8px var(--f-display); color: var(--c-dim); letter-spacing: 1.5px; margin-top: 4px; }
.client-hero__scores { display: flex; gap: 20px; flex-shrink: 0; }
.client-hero__score-block { text-align: center; }
/* Score do cliente — Arial MT Pro */
.client-hero__score-val {
  font-family: var(--f-title);
  font-weight: 900;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1;
  letter-spacing: -1px;
  animation: score-pop .5s var(--spring) both;
}
.client-hero__score-lbl {
  font: 400 7px var(--f-display);
  color: var(--c-dim);
  letter-spacing: 2px;
  margin-top: 4px;
}


/* ══════════════════════════════════════════════════════
   QUICK WINS
   ══════════════════════════════════════════════════════ */
.qw-list { display: flex; flex-direction: column; gap: 10px; }
.qw-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: qw-slide .4s var(--ease) both;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(46,212,122,0.03);
  border: .5px solid rgba(46,212,122,0.10);
  transition: background var(--t-fast), border-color var(--t-fast), transform .2s;
}
.qw-item:hover {
  background: rgba(46,212,122,0.06);
  border-color: rgba(46,212,122,0.20);
  transform: translateX(3px);
}
.qw-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
  flex-shrink: 0;
  margin-top: 4px;
  box-shadow: 0 0 8px rgba(46,212,122,0.6);
  animation: pulse 2.5s ease-in-out infinite;
}
.qw-item__body { flex: 1; min-width: 0; }
.qw-item__text { font: 400 11px var(--f-body); color: var(--c-text); line-height: 1.6; }
.qw-item__date { font: 400 8px var(--f-display); color: var(--c-dim); letter-spacing: 1.5px; margin-top: 4px; }


/* ══════════════════════════════════════════════════════
   ANTES × AGORA
   ══════════════════════════════════════════════════════ */
.ba-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 10px;
}
.ba-grid-head {
  display: grid;
  grid-template-columns: 110px 1fr 24px 1fr 60px;
  gap: 6px;
  padding: 0 4px 8px;
  border-bottom: .5px solid var(--g-border);
  margin-bottom: 4px;
}
.ba-col-head { font: 400 7px var(--f-display); color: var(--c-dim); letter-spacing: 2px; text-align: center; }
.ba-row {
  display: grid;
  grid-template-columns: 110px 1fr 24px 1fr 60px;
  gap: 6px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: .5px solid rgba(46,212,122,0.05);
  transition: background var(--t-fast);
}
.ba-row:hover { background: rgba(46,212,122,0.03); border-radius: 5px; }
.ba-row__label { font: 400 8px var(--f-display); color: var(--c-dim); letter-spacing: 1.5px; }
.ba-row__antes { font: 600 12px var(--f-display); color: var(--c-muted); text-align: center; }
.ba-row__arrow { font-family: var(--f-title); font-weight: 700; font-size: 14px; text-align: center; }
.ba-row__agora { font-family: var(--f-title); font-weight: 700; font-size: 12px; text-align: center; }
.ba-row__delta { font: 700 10px var(--f-display); text-align: center; letter-spacing: .5px; }
.ba-footer {
  display: flex;
  gap: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: .5px solid var(--g-border);
}
.ba-footer__item { flex: 1; text-align: center; padding: 0 8px; }
.ba-footer__item + .ba-footer__item { border-left: .5px solid var(--g-border); }
.ba-footer__val { font-family: var(--f-title); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.ba-footer__lbl { font: 400 7px var(--f-display); color: var(--c-dim); letter-spacing: 1.5px; margin-top: 4px; }

.btn-print {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(46,212,122,0.07);
  border: .5px solid rgba(46,212,122,0.25);
  border-radius: 6px;
  color: var(--c-primary);
  font: 700 9px var(--f-display);
  letter-spacing: 2px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.btn-print:hover {
  background: rgba(46,212,122,0.14);
  box-shadow: 0 0 18px rgba(46,212,122,0.20);
}


/* ══════════════════════════════════════════════════════
   ALERTAS
   ══════════════════════════════════════════════════════ */
.alert-card {
  background: var(--g-bg);
  backdrop-filter: blur(var(--g-blur));
  -webkit-backdrop-filter: blur(var(--g-blur));
  border: .5px solid;
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--g-glow);
  animation: dash-in .48s cubic-bezier(.22,.68,0,1.15) both;
}
.alert-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.alert-card__dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.alert-card__label { font: 700 8px var(--f-display); letter-spacing: 2px; }
.alert-card__list { display: flex; flex-direction: column; gap: 8px; }
.alert-card__item { display: flex; align-items: center; gap: 8px; }
.alert-card__name { flex: 1; font: 600 10px var(--f-display); color: var(--c-text); letter-spacing: .5px; }
.alert-card__val  { font: 700 9px var(--f-display); letter-spacing: 1px; }


/* ══════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════ */
#print-frame { display: none; }

.print-header { text-align: center; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 2px solid #2ED47A; }
.print-header__brand { font: 700 28px Arial, sans-serif; letter-spacing: 5px; color: #111; }
.print-header__sub   { font: 400 12px Arial, sans-serif; letter-spacing: 3px; color: #444; margin-top: 4px; }
.print-header__date  { font: 400 10px Arial, sans-serif; color: #888; margin-top: 6px; letter-spacing: 2px; }

@media print {
  body > *:not(#print-frame) { display: none !important; }
  #print-frame {
    display: block !important;
    padding: 32px;
    color: #111;
    font-family: Arial, sans-serif;
  }
  #print-frame .card { background: #fff !important; border: 1px solid #ddd !important; box-shadow: none !important; color: #111; }
  #print-frame .ba-row__label,
  #print-frame .ba-col-head,
  #print-frame .ba-footer__lbl,
  #print-frame .card__sub { color: #555 !important; }
  #print-frame .ba-row__antes { color: #777 !important; }
  #print-frame .btn-print { display: none !important; }
}


/* ══════════════════════════════════════════════════════
   ESTADO VAZIO
   ══════════════════════════════════════════════════════ */
.empty {
  text-align: center;
  padding: 48px 0;
  border: .5px dashed var(--g-border);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  font: 400 11px var(--f-display);
  color: var(--c-dim);
  letter-spacing: 3px;
  line-height: 3;
}


/* ══════════════════════════════════════════════════════
   GRADIENTES ESPECIAIS POR POSIÇÃO
   ══════════════════════════════════════════════════════ */

/* Ouro — posição #1 */
.rank-gold {
  background: var(--g-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Prata — posição #2 */
.rank-silver {
  background: var(--g-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Bronze — posição #3 */
.rank-bronze {
  background: var(--g-bronze);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Borda dourada no card líder */
.podium__card--rank-1 {
  border-color: rgba(212, 160, 23, 0.35);
  box-shadow: 0 0 32px rgba(212, 160, 23, 0.12), 0 8px 32px rgba(0,0,0,0.5);
}

/* Linha brilhante ouro no topo do líder */
.podium__card--rank-1::before {
  background: linear-gradient(90deg, transparent, rgba(212,160,23,0.4), transparent);
}