:root {
  --bg-primary: #0d0808;
  --bg-secondary: #130d0d;
  --bg-card: #1a1010;
  --bg-hover: #221414;
  --border: #2e1515;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #4a5568;
  --accent-green: #cc1f1f;
  --accent-blue: #3b82f6;
  --accent-yellow: #c8962a;
  --accent-red: #ef4444;
  --accent-purple: #8b5cf6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  display: flex; flex-direction: column; overflow: hidden;
}
a { color: var(--accent-blue); text-decoration: none; }

/* Layout */
.app-body { display: flex; flex: 1; overflow: hidden; }
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bg-secondary); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 0; z-index: 20;
  overflow-y: auto; position: relative;
  scrollbar-width: thin; scrollbar-color: rgba(204,26,0,.3) transparent;
}
.brand { font-size: 16px; font-weight: 700; padding: 8px 20px 20px; display: flex; gap: 8px; align-items: center; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { color: var(--text-secondary); padding: 11px 20px; border-left: 3px solid transparent; }
.sidebar nav a:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar nav a.active { color: var(--text-primary); border-left-color: var(--accent-green); background: var(--bg-hover); }
.sidebar-foot { margin-top: auto; padding: 12px 20px; color: var(--text-muted); font-size: 12px; }

.main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 14px 24px;
  border-bottom: 1px solid var(--border); background: var(--bg-secondary); position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 18px; margin: 0; flex: 1; }
.badge-total { background: var(--bg-card); border: 1px solid var(--border); padding: 6px 12px; border-radius: 20px; color: var(--accent-green); font-weight: 600; }
.hamburger { display: none; cursor: pointer; font-size: 20px; }
.content { padding: 24px; flex: 1; }
.footer { padding: 16px 24px; color: var(--text-muted); border-top: 1px solid var(--border); font-size: 12px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.3); margin-bottom: 20px; }
.card h3 { margin: 0 0 14px; font-size: 15px; }
.stat { display: flex; align-items: center; gap: 14px; margin-bottom: 0; }
.stat-icon { font-size: 26px; }
.stat-num { font-size: 24px; font-weight: 700; }
.stat-label { color: var(--text-secondary); font-size: 12px; }
.muted { color: var(--text-secondary); font-size: 12px; }

.country-card { margin-bottom: 0; }
.country-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 10px; }
.progress { background: var(--bg-primary); border-radius: 6px; height: 8px; overflow: hidden; margin-bottom: 6px; }
.progress-bar { background: linear-gradient(90deg, var(--accent-green), var(--accent-blue)); height: 100%; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2 > .card { margin-bottom: 0; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.table tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
.table tbody tr:hover { background: var(--bg-hover); }
.leads-table .lead-row { cursor: pointer; }

/* Badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-green { background: rgba(34,197,94,.15); color: var(--accent-green); }
.badge-blue { background: rgba(59,130,246,.15); color: var(--accent-blue); }
.badge-yellow { background: rgba(245,158,11,.15); color: var(--accent-yellow); }
.badge-red { background: rgba(239,68,68,.15); color: var(--accent-red); }
.badge-gray { background: rgba(139,148,158,.15); color: var(--text-secondary); }
.badge-purple { background: rgba(139,92,246,.18); color: #a78bfa; }
.badge-done { background: rgba(34,197,94,.15); color: var(--accent-green); }
.badge-pending { background: rgba(139,148,158,.15); color: var(--text-secondary); }
.badge-running { background: rgba(59,130,246,.15); color: var(--accent-blue); }
.badge-error { background: rgba(239,68,68,.15); color: var(--accent-red); }

/* Buttons */
.btn { display: inline-block; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn:hover { border-color: var(--accent-blue); }
.btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Filters */
.filters .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.filters label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.filters label.wide { grid-column: span 2; }
.filters input, .filters select, .inline-form input, .inline-form select {
  background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 10px; border-radius: 6px; font-size: 13px;
}
.status-checks { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.filter-actions { display: flex; gap: 10px; align-items: center; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.bar-between { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 16px; flex-wrap: wrap; gap: 12px; }
.bulk { display: flex; gap: 8px; }
.filter-links { display: flex; gap: 8px; }

/* Lead detail */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; padding: 8px 4px; }

/* Pagination */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagination > div { display: flex; gap: 6px; }

/* Funnel */
.funnel { display: flex; flex-direction: column; gap: 12px; }
.funnel-row { display: grid; grid-template-columns: 130px 1fr 50px; align-items: center; gap: 12px; }
.funnel-bar { background: var(--bg-primary); border-radius: 6px; height: 22px; overflow: hidden; }
.funnel-bar > div { height: 100%; background: var(--accent-blue); }
.funnel-bar .fb-green { background: var(--accent-green); }
.funnel-bar .fb-yellow { background: var(--accent-yellow); }
.funnel-bar .fb-red { background: var(--accent-red); }

/* Misc */
.config-box { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 12px; overflow: auto; font-size: 12px; color: var(--text-secondary); max-height: 360px; }
.action-list { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 12px; }

/* Alert banner (ex: religar 4G) */
.alert-banner { background: rgba(239,68,68,.18); border: 1px solid var(--accent-red); color: #fecaca; padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-weight: 600; animation: rt-pulse 1.6s infinite; }

/* Alarme SMTP — barra grande/berrante quando a porta 25 cai (trocar IP 4G) */
.smtp-alarm { background: #dc2626; color: #fff; padding: 22px 18px; border-radius: 10px; margin-bottom: 16px; font-weight: 800; font-size: 1.35rem; line-height: 1.35; text-align: center; box-shadow: 0 0 26px rgba(220,38,38,.85); border: 2px solid #fff3; animation: rt-pulse .8s infinite; }

/* ===== TEMA POR PAÍS — o seletor troca a cara do dashboard ===== */
:root { --country-accent: #38bdf8; } /* default AR (celeste) */
.country-AR { --country-accent: #38bdf8; }   /* Argentina — celeste */
.country-MX { --country-accent: #22c55e; }   /* México — verde */
/* Chile — vermelho (primário) + azul (secundário); sidebar fica vermelha pra leitura imediata. */
.country-CL { --country-accent: #dc2626; --country-primary: #dc2626; --country-secondary: #2563eb; }
/* Colômbia — bandeira amarelo+azul+vermelho. Accent/primária = azul #003893 (bom contraste com o
   texto escuro das tags/seletor); amarelo #FCD116 fica de secundária (mesma lógica de leitura do CL). */
.country-CO { --country-accent: #003893; --country-primary: #003893; --country-secondary: #FCD116; }
/* Paraguai — bandeira vermelho+branco+azul. Accent/primária = azul #0038A8; vermelho #D52B1E secundária. */
.country-PY { --country-accent: #0038A8; --country-primary: #0038A8; --country-secondary: #D52B1E; }
/* indicador de país na sidebar */
.country-tag { display:flex; align-items:center; gap:8px; margin:6px 14px 14px; padding:8px 12px; border-radius:8px; font-weight:800; font-size:1.05rem; color:#0b1220; background:var(--country-accent); box-shadow:0 0 14px var(--country-accent); }
/* faixa lateral colorida na sidebar + topo colorido = óbvio qual país */
.country-AR .sidebar, .country-MX .sidebar, .country-CL .sidebar, .country-CO .sidebar, .country-PY .sidebar { border-right: 4px solid var(--country-accent); }
.country-AR .topbar, .country-MX .topbar, .country-CL .topbar, .country-CO .topbar, .country-PY .topbar { border-bottom: 3px solid var(--country-accent); }
.country-AR .brand, .country-MX .brand, .country-CL .brand, .country-CO .brand, .country-PY .brand { color: var(--country-accent); }
/* PY: nome em azul sólido + link ativo barra azul (espelha CO) */
.country-PY .brand span { background: none; -webkit-text-fill-color: var(--country-primary); color: var(--country-primary); }
.country-PY .sidebar nav a.active { background: linear-gradient(90deg, rgba(0,56,168,.18), transparent); border-left: 3px solid var(--country-primary); }
/* o nome "Email Brutale" no CL fica vermelho sólido (override do degradê verde/amarelo padrão) */
.country-CL .brand span { background: none; -webkit-text-fill-color: var(--country-primary); color: var(--country-primary); }
/* CO: nome em azul sólido (override do degradê padrão), espelha o CL */
.country-CO .brand span { background: none; -webkit-text-fill-color: var(--country-primary); color: var(--country-primary); }
/* link ativo do menu CL com barra esquerda vermelha (override do verde-Brasil padrão) */
.country-CL .sidebar nav a.active { background: linear-gradient(90deg, rgba(220,38,38,.18), transparent); border-left: 3px solid var(--country-primary); }
/* link ativo do menu CO com barra esquerda azul (override do verde-Brasil padrão) */
.country-CO .sidebar nav a.active { background: linear-gradient(90deg, rgba(0,56,147,.18), transparent); border-left: 3px solid var(--country-primary); }
/* seletor de país no topbar */
.country-selector { background:var(--country-accent); color:#0b1220; border:none; border-radius:8px; padding:10px 12px; font-weight:800; font-size:1rem; cursor:pointer; box-shadow:0 0 12px var(--country-accent); }
.country-selector:hover { filter: brightness(1.08); }
/* seletor de país na sidebar (bem visível, topo do menu) */
.country-switch { margin: 4px 14px 16px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.country-switch label { display:block; font-size:.68rem; letter-spacing:.06em; color:#94a3b8; margin-bottom:6px; font-weight:800; }
.country-switch .country-selector { width: 100%; }
.topbar-country { margin-left:auto; font-weight:800; color: var(--country-accent); }

/* Tier progress */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tier-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
.tier-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; }

/* Realtime indicator */
.rt-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); margin: -6px 0 14px; }
.rt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: rt-pulse 1.6s infinite; }
@keyframes rt-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: url(/static/img/kratos.png) center/cover no-repeat fixed; position: relative; }.login-body::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 0; }.login-card { position: relative; z-index: 1; }
.login-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.login-brand { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.login-card input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 10px; border-radius: 6px; font-size: 14px; }
.login-btn { margin-top: 6px; padding: 11px; }
.login-error { background: rgba(239,68,68,.15); color: var(--accent-red); padding: 8px 12px; border-radius: 6px; font-size: 13px; text-align: center; }

/* Responsive */
@media (max-width: 900px) {
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s; }
  #nav-toggle:checked ~ .sidebar { transform: translateX(0); }
  .hamburger { display: inline; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ===== LIVE FEED — barra de notificações no topo (todas as abas) ===== */
.live-feed{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:10px;
  width:max-content; max-width:92vw; pointer-events:none;
}
.live-toast{
  display:flex; align-items:center; gap:12px;
  min-width:300px; max-width:460px; padding:11px 16px 11px 13px;
  border-radius:14px; color:#e8eef6;
  background:linear-gradient(135deg, rgba(22,28,38,.96), rgba(15,20,28,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
  animation:lt-in .5s cubic-bezier(.18,.9,.3,1.2) both;
}
.live-toast.lt-out{ animation:lt-out .55s ease forwards; }
.live-toast::before{ /* faixa de cor à esquerda */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.lt-collected::before{ background:linear-gradient(#22c55e,#16a34a); box-shadow:0 0 14px #22c55e88; }
.lt-verified::before{ background:linear-gradient(#3b82f6,#8b5cf6); box-shadow:0 0 14px #3b82f688; }
.lt-ico{
  font-size:20px; line-height:1; width:34px; height:34px; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center; border-radius:10px;
}
.lt-collected .lt-ico{ background:rgba(34,197,94,.14); animation:lt-pulse 1.6s ease-in-out infinite; }
.lt-verified .lt-ico{ background:rgba(59,130,246,.16); }
.lt-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lt-email{ font-weight:600; font-size:14px; letter-spacing:.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:380px; }
.lt-sub{ font-size:11.5px; color:#9fb0c3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lt-tag{
  text-transform:uppercase; font-weight:700; font-size:10px; letter-spacing:.6px;
  padding:1px 7px; border-radius:999px; margin-right:2px;
}
.lt-collected .lt-tag{ color:#22c55e; background:rgba(34,197,94,.12); }
.lt-verified .lt-tag{ color:#7aa2ff; background:rgba(59,130,246,.14); }
/* brilho passando (mais forte no verificado) */
.live-toast::after{
  content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-18deg); animation:lt-shine 2.4s ease-in-out;
}
.lt-verified::after{ animation:lt-shine 1.4s ease-in-out infinite; }

@keyframes lt-in{
  0%{ opacity:0; transform:translateY(-22px) scale(.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes lt-out{
  0%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-14px) scale(.97); }
}
@keyframes lt-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,.45); }
  50%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
}
@keyframes lt-shine{
  0%{ left:-60%; } 60%,100%{ left:130%; }
}
@media (prefers-reduced-motion: reduce){
  .live-toast,.live-toast::after,.lt-ico{ animation:none !important; }
}

/* dot de legenda (barra de evolução Padrón) */
.dot{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:3px; vertical-align:middle; }

/* ===== Cards de lote (Downloads — verificados) ===== */
.dl-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.dl-card{
  background:linear-gradient(160deg, rgba(34,197,94,.07), rgba(22,28,38,.6));
  border:1px solid rgba(34,197,94,.25); border-radius:14px; padding:14px 16px;
  display:flex; flex-direction:column; gap:7px; position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.dl-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.dl-card.dl-done{ border-color:rgba(255,255,255,.08); background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(22,28,38,.6)); }
.dl-card-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dl-card-num{ font-size:26px; font-weight:800; color:#e8eef6; line-height:1; }
.dl-card-num small{ font-size:12px; font-weight:500; color:#9fb0c3; }
.dl-card-meta{ font-size:12.5px; color:#b9c6d6; }
.dl-card-meta b{ color:#8b9bb0; font-weight:600; }
.dl-card-file{ font-size:11px; color:#6b7a8d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:monospace; }
.btn-block{ display:block; text-align:center; margin-top:4px; }

/* ===== LIVE FEED — versão HORIZONTAL (override) + evento de variação ===== */
.live-feed{
  flex-direction:row !important; flex-wrap:nowrap; align-items:flex-start;
  gap:8px; max-width:96vw; overflow:hidden;
}
.live-toast{
  min-width:200px !important; max-width:260px;
  padding:9px 13px 9px 12px; gap:10px;
  animation:lt-in-h .5s cubic-bezier(.18,.9,.3,1.2) both;
}
.live-toast.lt-out{ animation:lt-out-h .5s ease forwards; }
.lt-ico{ width:30px; height:30px; flex:0 0 30px; font-size:17px; }
.lt-email{ font-size:13px; max-width:200px; }
.lt-sub{ font-size:11px; }
/* variação encontrada — roxo/dourado, com "pop" e brilho */
.lt-variation::before{ background:linear-gradient(#a855f7,#f59e0b); box-shadow:0 0 16px #a855f7aa; }
.lt-variation .lt-tag{ color:#d8b4fe; background:rgba(168,85,247,.16); }
.lt-variation .lt-ico{ background:rgba(168,85,247,.18); animation:lt-pop .7s cubic-bezier(.2,1.4,.4,1) both, lt-sparkle 1.6s ease-in-out .7s infinite; }
.lt-variation::after{ animation:lt-shine 1.2s ease-in-out infinite; }

@keyframes lt-in-h{
  0%{ opacity:0; transform:translateX(50px) scale(.94); }
  100%{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes lt-out-h{
  0%{ opacity:1; transform:translateX(0) scale(1); max-width:260px; }
  100%{ opacity:0; transform:translateX(-12px) scale(.96); max-width:0; padding:0; margin:0; }
}
@keyframes lt-pop{
  0%{ transform:scale(.3) rotate(-15deg); } 60%{ transform:scale(1.25) rotate(8deg); } 100%{ transform:scale(1) rotate(0); }
}
@keyframes lt-sparkle{
  0%,100%{ box-shadow:0 0 0 0 rgba(168,85,247,.5); } 50%{ box-shadow:0 0 12px 3px rgba(245,158,11,.45); }
}
@media (max-width:760px){
  .live-toast{ min-width:150px !important; max-width:190px; }
  .lt-email{ max-width:140px; }
}

/* ===== Variação: animação DIFERENCIADA (override) ===== */
.live-toast.lt-variation{
  border-color:rgba(168,85,247,.55);
  background:linear-gradient(135deg, rgba(88,28,135,.55), rgba(120,53,15,.40));
  animation:lt-in-pop .6s cubic-bezier(.2,1.5,.4,1) both, lt-burst 1.5s ease .25s 2;
}
.lt-variation .lt-tag{ color:#f0c674; background:rgba(245,158,11,.18); }
.lt-variation .lt-ico{
  background:rgba(168,85,247,.22);
  animation:lt-pop .7s cubic-bezier(.2,1.6,.4,1) both, lt-spin 2.2s ease-in-out .7s infinite;
}
@keyframes lt-in-pop{
  0%{ opacity:0; transform:translateX(40px) scale(.6); }
  60%{ opacity:1; transform:translateX(-4px) scale(1.12); }
  100%{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes lt-burst{
  0%{ box-shadow:0 0 0 0 rgba(168,85,247,.55); }
  50%{ box-shadow:0 0 22px 5px rgba(245,158,11,.55); }
  100%{ box-shadow:0 0 0 0 rgba(168,85,247,0); }
}
@keyframes lt-spin{
  0%,100%{ transform:scale(1) rotate(0); } 25%{ transform:scale(1.15) rotate(12deg); } 75%{ transform:scale(1.15) rotate(-12deg); }
}

/* ===== TEMA "EMAIL BRUTALE" — SÓ CORES (Brasil 🇧🇷 verde/amarelo, Argentina 🇦🇷 celeste) ===== */
:root{ --br-green:#00a651; --br-green-d:#007a3d; --br-yellow:#fedd00; --ar-celeste:#6cace4; }
/* nome do sistema com degradê verde→amarelo (Brasil) */
.brand span{
  font-weight:800;
  background:linear-gradient(92deg, var(--br-green) 0%, var(--br-yellow) 60%, var(--br-green) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--br-green);
}
/* item de menu ativo em verde-Brasil; hover com toque celeste */
.sidebar nav a.active{ background:linear-gradient(90deg, rgba(0,166,81,.18), transparent); border-left:3px solid var(--br-green); color:#fff; }
.sidebar nav a:hover{ color:#fff; }
/* botões primários e badge em verde-Brasil */
.btn-primary{ background:linear-gradient(100deg, var(--br-green), var(--br-green-d)); border-color:rgba(254,221,0,.30); color:#fff; }
.btn-primary:hover{ background:linear-gradient(100deg, #00b85a, var(--br-green)); }
.badge-total{ background:linear-gradient(100deg, var(--br-green-d), var(--br-green)); color:#eafff2; }
.badge-blue{ background:rgba(108,172,228,.18); color:var(--ar-celeste); }
.badge-green{ background:rgba(0,166,81,.18); color:#5ee9a0; }
/* barra de progresso em verde-Brasil */
.progress-bar{ background:linear-gradient(90deg, var(--br-green), var(--br-yellow)); }

/* ===== Card TRAVADO (showcase): verificado + variações surgindo ===== */
.live-pin{
  min-width:240px; max-width:320px; padding:11px 14px; border-radius:14px;
  background:linear-gradient(160deg, rgba(0,166,81,.14), rgba(22,28,38,.94));
  border:1px solid rgba(0,166,81,.4); box-shadow:0 10px 30px rgba(0,0,0,.45);
  backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:6px;
  animation:lt-in-h .5s cubic-bezier(.18,.9,.3,1.2) both;
}
.live-pin.lt-out{ animation:lt-out-h .5s ease forwards; }
.pin-head{ display:flex; align-items:center; gap:8px; }
.pin-ico{ font-size:16px; }
.pin-email{ font-weight:700; font-size:13.5px; color:#eafff2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pin-status{ font-size:11.5px; color:#9fb0c3; display:flex; align-items:center; gap:5px; }
.pin-spin{ display:inline-block; animation:pin-rotate 1.1s linear infinite; }
@keyframes pin-rotate{ to{ transform:rotate(360deg); } }
.pin-vars{ display:flex; flex-wrap:wrap; gap:5px; }
.pin-var{
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  color:#f0c674; background:rgba(168,85,247,.18); border:1px solid rgba(168,85,247,.35);
  animation:lt-in-pop .55s cubic-bezier(.2,1.5,.4,1) both, lt-burst 1.2s ease .2s 1;
}

/* variação APROVADA no card travado — email completo + ✓ verde, uma por linha */
.pin-vars{ flex-direction:column; align-items:flex-start; }
.pin-var{
  display:flex; align-items:center; gap:6px; width:auto; max-width:100%;
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:8px;
  color:#eafff2; background:rgba(0,166,81,.15); border:1px solid rgba(0,166,81,.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pin-var .pv-ok{ color:#22c55e; font-weight:900; }

/* ===== Página Variações ===== */
.var-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.var-chip{
  font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); transition:all .15s ease;
}
.var-chip.on{ background:rgba(0,166,81,.18); color:#5ee9a0; border-color:rgba(0,166,81,.45); }
.var-chip.off{ background:rgba(124,138,153,.12); color:#7c8a99; text-decoration:line-through; }
.var-chip:hover{ transform:translateY(-1px); border-color:var(--ar-celeste,#6cace4); }
.input{ background:#0d1117; border:1px solid #2a3340; color:#e8eef6; border-radius:8px; padding:7px 11px; font-size:13px; }
.input:focus{ outline:none; border-color:var(--br-green,#00a651); }

/* equação dos lotes verificados (total = lotes + em andamento) */
.dl-eq{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.dl-eq-total{ font-size:30px; font-weight:800; color:#5ee9a0; }
.dl-eq-op{ font-size:20px; color:#7c8a99; font-weight:700; }
.dl-eq-part{ font-size:14px; color:#b9c6d6; }
.dl-eq-part b{ font-size:20px; color:#e8eef6; }

/* botão bloqueado (viewer somente leitura) */
.btn-locked{ background:rgba(124,138,153,.18); color:#9fb0c3; border:1px dashed rgba(255,255,255,.18); cursor:not-allowed; }

/* ===== Composição de emails (Downloads) ===== */
.bd-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.bd-box{ background:rgba(255,255,255,.03); border:1px solid #1e2530; border-radius:12px; padding:12px 14px; }
.bd-num{ font-size:22px; font-weight:800; color:#e8eef6; }
.bd-lbl{ font-size:12px; color:#9fb0c3; margin-top:3px; }
.bd-lbl small{ color:#6b7a8d; font-size:10.5px; }
.bd-corp{ border-color:rgba(0,166,81,.4); } .bd-corp .bd-num{ color:#5ee9a0; }
.bd-fin{ border-color:rgba(245,158,11,.4); } .bd-fin .bd-num{ color:#fbbf24; }
.bd-adm{ border-color:rgba(139,92,246,.4); } .bd-adm .bd-num{ color:#c4b5fd; }
.bd-gmail .bd-num,.bd-ms .bd-num,.bd-yahoo .bd-num,.bd-free .bd-num{ color:#7aa2ff; }

/* toggle composição (Verificados / Pool) */
.bd-toggle{ background:rgba(255,255,255,.05); border:1px solid #2a3340; color:#9fb0c3; }
.bd-toggle.active{ background:rgba(0,166,81,.18); border-color:var(--br-green,#00a651); color:#5ee9a0; }

/* Topbar logout button */
.topbar-logout { color: var(--text-muted); font-size: 13px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; white-space: nowrap; }
.topbar-logout:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Logo Kratos */
.brand { flex-direction: column; align-items: flex-start !important; padding-bottom: 12px !important; }
.brand-logo { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; display: block; margin-bottom: 4px; border: 2px solid var(--accent-green); }
.brand-name { font-size: 16px; font-weight: 700; }
.brand-by { font-size: 10px; color: var(--text-muted); font-weight: 400; margin-top: 1px; }

/* Login logo */
.login-logo { display: none; }
.login-by { text-align: center; font-size: 11px; color: var(--text-muted); margin-bottom: 16px; }

/* Kratos faint background on main content */
.main::before { content: ""; position: fixed; right: 0; bottom: 0; width: 500px; height: 700px; background: url(/static/img/kratos.png) right bottom / contain no-repeat; opacity: 0.07; pointer-events: none; z-index: 0; }
.content, .topbar, .footer { position: relative; z-index: 1; }


/* Nav sections e melhorias sidebar */
.nav-section { padding: 14px 20px 4px; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(200,150,42,.45); font-family: "Cinzel", serif; font-weight: 700; pointer-events: none; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.nav-icon { display: inline-block; width: 20px; text-align: center; flex-shrink: 0; margin-right: 2px; }
.sidebar-logout { display: block; padding: 9px 12px; border-radius: 6px; background: rgba(204,26,0,.12); border: 1px solid rgba(204,26,0,.3); color: #c8962a; font-size: 12px; text-align: center; letter-spacing: 1px; transition: all .15s; }
.sidebar-logout:hover { background: rgba(204,26,0,.25); color: #fff; box-shadow: 0 0 12px rgba(204,26,0,.4); }
.sidebar-version { font-size: 10px; color: #5a4538; text-align: center; margin-top: 6px; letter-spacing: 1px; }
.country-switch-label { display: block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(200,150,42,.5); font-weight: 700; margin-bottom: 6px; }

/* ═══════════════════════════════════════════════════════════════
   GOD OF WAR THEME — Kratos Edition
   Vermelho sangue · Ouro das lâminas · Ferro envelhecido
═══════════════════════════════════════════════════════════════ */

:root {
  --gow-red:       #cc1a00;
  --gow-red-glow:  #ff3b1a;
  --gow-gold:      #c8962a;
  --gow-gold-lt:   #f0c060;
  --gow-ash:       #d8cfc4;
  --bg-primary:    #0d0608;
  --bg-secondary:  #130a09;
  --bg-card:       #1b1008;
  --bg-hover:      #261410;
  --border:        #3a1a10;
  --text-primary:  #e8dfd0;
  --text-secondary:#9a8878;
  --text-muted:    #5a4538;
  --accent-green:  #cc1a00;
  --accent-yellow: #c8962a;
  --accent-blue:   #6b9bd2;
}

body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, .brand-name, .login-brand, .topbar h1, .card h3, .stat-num {
  font-family: 'Cinzel', serif !important;
}

/* ── Sidebar ── */
.sidebar {
  background: linear-gradient(180deg, #130a09 0%, #0d0608 100%);
  border-right: 2px solid var(--gow-red);
  box-shadow: 3px 0 20px rgba(204,26,0,.25);
}
.sidebar::after {
  content: "";
  position: absolute; top: 0; right: -2px; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gow-red-glow), transparent);
  opacity: .5;
}

/* ── Brand / Logo ── */
.brand { padding: 16px 16px 14px !important; }
.brand-logo {
  border: 3px solid var(--gow-red) !important;
  box-shadow: 0 0 18px rgba(204,26,0,.6), 0 0 40px rgba(204,26,0,.25);
  filter: saturate(1.1) contrast(1.05);
}
.brand-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-weight: 700;
  font-size: 15px !important;
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--gow-red-glow), var(--gow-gold-lt), var(--gow-red-glow));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand span {
  background: linear-gradient(90deg, var(--gow-red-glow), var(--gow-gold-lt), var(--gow-red-glow)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.brand-by { color: var(--gow-gold) !important; font-size: 11px !important; letter-spacing: 2px; text-transform: uppercase; }

/* ── Nav ── */
.sidebar nav a { color: var(--text-secondary); border-left: 3px solid transparent; letter-spacing: .3px; }
.sidebar nav a:hover {
  background: linear-gradient(90deg, rgba(204,26,0,.15), transparent);
  color: var(--gow-ash);
  border-left-color: var(--gow-red);
}
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(204,26,0,.28), transparent) !important;
  border-left-color: var(--gow-red-glow) !important;
  color: var(--gow-ash) !important;
  box-shadow: inset 3px 0 12px rgba(204,26,0,.15);
  text-shadow: 0 0 8px rgba(255,59,26,.4);
}

/* ── Topbar ── */
.topbar {
  background: linear-gradient(90deg, #150b09, #1a0e0b, #150b09);
  border-bottom: 2px solid var(--gow-red) !important;
  box-shadow: 0 3px 16px rgba(204,26,0,.3);
}
.topbar h1 {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 16px !important;
  color: var(--gow-ash);
}
.topbar-logout { border-color: var(--gow-red) !important; color: var(--gow-gold) !important; }
.topbar-logout:hover {
  background: rgba(204,26,0,.2) !important;
  color: var(--gow-ash) !important;
  box-shadow: 0 0 10px rgba(204,26,0,.4);
}

/* badge total — ouro */
.badge-total {
  background: linear-gradient(100deg, rgba(200,150,42,.2), rgba(200,150,42,.08)) !important;
  border-color: var(--gow-gold) !important;
  color: var(--gow-gold-lt) !important;
  font-family: 'Cinzel', serif;
  letter-spacing: .5px;
  box-shadow: 0 0 10px rgba(200,150,42,.2);
}

/* ── Cards ── */
.card {
  background: linear-gradient(160deg, #1d1008, #150b06) !important;
  border-color: var(--border) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(200,150,42,.06) !important;
  position: relative;
}
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gow-red), transparent);
  opacity: .5;
  border-radius: 4px 4px 0 0;
}
.card h3 {
  color: var(--gow-ash);
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(200,150,42,.15);
  padding-bottom: 10px;
  margin-bottom: 16px !important;
}
.stat-num { color: var(--gow-gold-lt) !important; }

/* ── Progress bar ── */
.progress { background: rgba(0,0,0,.5) !important; border: 1px solid var(--border); }
.progress-bar {
  background: linear-gradient(90deg, var(--gow-red), var(--gow-red-glow), var(--gow-gold)) !important;
  box-shadow: 0 0 8px rgba(204,26,0,.5);
}

/* ── Botões ── */
.btn { border-radius: 3px !important; }
.btn-primary {
  background: linear-gradient(100deg, #8b0a00, var(--gow-red)) !important;
  border-color: var(--gow-red-glow) !important;
  color: #fff !important;
  font-family: 'Cinzel', serif;
  letter-spacing: .5px;
  box-shadow: 0 0 12px rgba(204,26,0,.4) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.btn-primary:hover {
  background: linear-gradient(100deg, var(--gow-red), var(--gow-red-glow)) !important;
  box-shadow: 0 0 20px rgba(255,59,26,.5) !important;
}

/* ── Badges ── */
.badge-green { background: rgba(204,26,0,.15) !important; color: #ff6b4a !important; }
.badge-done  { background: rgba(204,26,0,.15) !important; color: #ff6b4a !important; }

/* ── Tabela ── */
.table th {
  color: var(--gow-gold) !important;
  letter-spacing: .6px;
  border-bottom: 1px solid rgba(200,150,42,.3) !important;
}
.table tbody tr:hover { background: rgba(204,26,0,.08) !important; }

/* ── RT dot em vermelho ── */
.rt-dot { background: var(--gow-red-glow) !important; }
@keyframes rt-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,59,26,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255,59,26,0);  }
  100% { box-shadow: 0 0 0 0   rgba(255,59,26,0);  }
}

/* ── Fundo Kratos ── */
.main::before {
  opacity: 0.09 !important;
  width: 550px !important; height: 770px !important;
  filter: sepia(.4) saturate(1.3);
}

/* ── Login ── */
.login-card {
  background: linear-gradient(160deg, rgba(30,12,6,.97), rgba(18,8,4,.98)) !important;
  border: 1px solid var(--gow-red) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 40px rgba(204,26,0,.35), 0 20px 60px rgba(0,0,0,.7) !important;
  position: relative; overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gow-red-glow), var(--gow-gold), var(--gow-red-glow), transparent);
}
.login-brand {
  font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
  font-size: 22px !important;
  background: linear-gradient(90deg, var(--gow-red-glow), var(--gow-gold-lt));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}
.login-by { color: var(--gow-gold) !important; letter-spacing: 3px; text-transform: uppercase; font-size: 10px !important; }
.login-card input {
  background: rgba(0,0,0,.5) !important;
  border-color: var(--gow-red) !important;
  color: var(--gow-ash) !important;
}
.login-card input:focus { outline: none; box-shadow: 0 0 8px rgba(204,26,0,.5); border-radius: 6px; }
.login-btn {
  background: linear-gradient(100deg, #8b0a00, var(--gow-red)) !important;
  border-color: var(--gow-red-glow) !important;
  color: #fff !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
  box-shadow: 0 0 14px rgba(204,26,0,.5) !important;
}
.login-btn:hover { box-shadow: 0 0 24px rgba(255,59,26,.6) !important; filter: brightness(1.1); }

/* fundo do login — overlay mais dramático */
.login-body::before { background: rgba(0,0,0,.72) !important; }

/* ── Países: borda lateral mantém cor GoW base ── */
.country-AR .sidebar, .country-MX .sidebar,
.country-CL .sidebar, .country-CO .sidebar,
.country-PY .sidebar { border-right: 3px solid var(--country-accent) !important; }

/* Barra de sistema no topo */
.topbar-system-bar {
  background: linear-gradient(90deg, #0d0608, #1a0a06, #0d0608);
  border-bottom: 1px solid var(--gow-red, #cc1a00);
  color: var(--gow-gold, #c8962a);
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 24px;
  position: sticky;
  top: 0;
  z-index: 11;
}
.topbar-system-bar span { color: var(--gow-ash, #d8cfc4); font-weight: 400; letter-spacing: 1px; }
.topbar { top: 0 !important; }