@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600&display=swap');
/* Tema visual do painel — inspirado na dashboard do cliente.
   Fundo com gradientes, cards com hover, animações de entrada. */

body {
  background:
    radial-gradient(1100px 550px at 10% -10%, #1e1b4b 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #0e2a4a 0%, transparent 55%),
    #020617;
  background-attachment: fixed;
}

/* Animação de entrada: sobe + fade */
.rise { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Fade simples */
.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Pop (destaque ao mudar valor) */
.pop { animation: pop .5s ease both; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Cards que levantam no hover */
.card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.5); box-shadow: 0 12px 40px -18px rgba(0,0,0,.7); }

/* Ponto "ao vivo" piscando */
.live-dot { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Cabeçalho translúcido com blur mais forte */
.panel-header { background-color: rgba(15,23,42,.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Cartões padrão do painel */
.panel-card { background-color: rgba(15,23,42,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Escalona a animação de entrada por posição (efeito cascata) */
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .10s; }
.rise-3 { animation-delay: .15s; }
.rise-4 { animation-delay: .20s; }

/* Tema gamer — vale pra todas as abas (sobrescreve as classes do Tailwind) */
:root{--g-bg:#070b12;--g-pn:#0e1726;--g-pn2:#111d30;--g-ln:#1c2a42;--g-dim:#8a9cbd;--g-cy:#22e3ff;--g-mg:#ff2bd6;--g-gr:#3dff8b}

body{background:var(--g-bg)!important;font-family:'Barlow Semi Condensed',sans-serif!important;
  background-image:radial-gradient(1200px 500px at 50% -120px,#0f2a4a55,transparent),
  linear-gradient(transparent 31px,#ffffff05 32px),linear-gradient(90deg,transparent 31px,#ffffff05 32px)!important;
  background-size:auto,32px 32px,32px 32px!important;background-attachment:fixed!important}
h1,h2,h3,.font-semibold.text-lg,.text-2xl,.text-3xl,.font-mono,input[type=number]{font-family:'Chakra Petch',sans-serif!important}

/* topo */
.panel-header{background:#060a10ee!important;border-bottom:1px solid var(--g-ln)!important;box-shadow:0 1px 0 #22e3ff22}
.panel-header .bg-gradient-to-br{background:conic-gradient(from 200deg,var(--g-cy),#8a5cff,var(--g-mg),var(--g-cy))!important;
  clip-path:polygon(25% 0,100% 0,100% 75%,75% 100%,0 100%,0 25%);box-shadow:0 0 18px #22e3ff66}
.panel-header nav a,#navMenu a{background:transparent!important;color:var(--g-dim)!important;border-radius:6px}
#navMenu a.bg-slate-800:hover{color:#fff!important;background:var(--g-pn)!important}
#navMenu a:not(.bg-slate-800){color:var(--g-cy)!important;background:#22e3ff14!important;box-shadow:inset 0 -2px 0 var(--g-cy)}

/* cartões / painéis chanfrados */
.panel-card,.bg-slate-900,.bg-slate-900\/60,.bg-slate-900\/70,.bg-slate-900\/80{
  background:linear-gradient(180deg,var(--g-pn2),var(--g-pn))!important;border-color:var(--g-ln)!important}
.panel-card{border-top-color:#22e3ff55!important}
.border-slate-800,.border-slate-700{border-color:var(--g-ln)!important}
.card:hover{border-color:var(--g-cy)!important;box-shadow:0 0 0 1px var(--g-cy),0 0 22px -4px #22e3ff88!important;transform:translateY(-2px)}

/* botões */
.bg-sky-600,.bg-indigo-600,.bg-blue-600,.bg-emerald-600{background:linear-gradient(90deg,#16c6e6,#3d7bff)!important;color:#03121a!important;font-weight:600;
  box-shadow:0 0 14px -2px #22e3ff88;border:0!important}
.bg-sky-600:hover,.bg-indigo-600:hover,.bg-blue-600:hover,.bg-emerald-600:hover{filter:brightness(1.15)}
.bg-red-600,.bg-rose-600{background:linear-gradient(90deg,#ff3b5c,#ff2bd6)!important;box-shadow:0 0 14px -2px #ff2b8a88;color:#fff!important}
.bg-slate-800{background-color:#0c1524!important}
.hover\:bg-slate-700:hover{background-color:#15223a!important}
.bg-slate-700{background-color:#15223a!important}

/* campos */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{background-color:#060b14!important;color:#e6eeff!important}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([class*=border-red]):not([class*=border-rose]):not([class*=border-amber]),select,textarea{border-color:var(--g-ln)!important}
input:not([class*=border-red]):focus,select:focus,textarea:focus{border-color:var(--g-cy)!important;box-shadow:0 0 0 3px #22e3ff22!important;outline:none!important}
input[type=checkbox],input[type=radio]{accent-color:var(--g-cy)}

/* tabelas */
table thead th{font-family:'Chakra Petch',sans-serif;color:var(--g-dim)!important;font-weight:500;border-bottom:1px solid var(--g-ln)!important}
table tbody tr{border-color:#17233a!important}
table tbody tr:hover{background:#22e3ff08!important}

/* textos e destaques */
.text-slate-400,.text-slate-500{color:var(--g-dim)!important}
.text-sky-400,.text-indigo-400,.text-sky-300{color:var(--g-cy)!important}
.text-emerald-400{color:var(--g-gr)!important}
.bg-gradient-to-r.from-sky-500,.bg-sky-500{background:linear-gradient(90deg,var(--g-cy),#8a5cff,var(--g-mg))!important;box-shadow:0 0 8px #8a5cff}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#060a10}::-webkit-scrollbar-thumb{background:#1c2a42;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#22e3ff66}
/* botões pequenos nas tabelas: contorno neon */
td button.text-xs{background:transparent!important;border:1px solid #22e3ff66!important;color:#bff6ff!important;box-shadow:none!important;filter:none!important}
td button.text-xs:hover{background:#22e3ff1a!important;border-color:var(--g-cy)!important}
td button.text-xs[class*=emerald],td button.text-xs[class*=green]{border-color:#3dff8b77!important;color:#c6ffe0!important}
td button.text-xs[class*=red],td button.text-xs[class*=rose]{border-color:#ff3b5c88!important;color:#ffc2cc!important}
td button.text-xs[class*=red]:hover{background:#ff3b5c22!important}
/* outras cores de botão do painel, mantendo o significado */
.bg-cyan-600{background:linear-gradient(90deg,#16c6e6,#3d7bff)!important;color:#03121a!important;font-weight:600;box-shadow:0 0 14px -2px #22e3ff88}
.bg-fuchsia-700{background:linear-gradient(90deg,#b06bff,#ff2bd6)!important;color:#fff!important;box-shadow:0 0 14px -2px #ff2bd688}
.bg-amber-600{background:linear-gradient(90deg,#ffd000,#ff6a00)!important;color:#1a0d00!important;font-weight:600;box-shadow:0 0 14px -2px #ffb02088}
.bg-rose-700{background:linear-gradient(90deg,#ff3b5c,#ff2bd6)!important;color:#fff!important;box-shadow:0 0 14px -2px #ff2b8a88}
#navMenu a:not(.bg-slate-800){background:#22e3ff14!important;color:var(--g-cy)!important;box-shadow:inset 0 -2px 0 var(--g-cy)!important;font-weight:600}