/* NexusLab — estilos próprios (CSS puro).
   Os utilitários do Tailwind (flex, gap-2, text-sm...) continuam vindo do CDN no index.html. */

/* ===== Base ===== */
html{color-scheme:dark}
body{font-family:Inter,system-ui,sans-serif;
  background:radial-gradient(60% 420px at 50% 0,rgba(139,92,246,.22),transparent) no-repeat,#09090b}
select option{background:#16111f;color:#f4f4f5}

/* ===== Tipografia e marca ===== */
.h{font-family:'Inter Tight',Inter,sans-serif;font-weight:300;letter-spacing:-.04em}
.grad{background:linear-gradient(90deg,#9f7aea,#e4d4ff,#9f7aea);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(135deg,#7c3aed,#c4b5fd);color:#16092e;font-weight:800}

/* ===== Botões: .b1/.b3 = primário em degradê roxo → lilás, .b2 = contorno ===== */
.b{border-radius:9999px;padding:.625rem 1.25rem;font-size:.875rem;line-height:1.25rem;font-weight:500;
  transition:all .15s cubic-bezier(.4,0,.2,1)}
.b:disabled{opacity:.4}
.b1,.b3{background:linear-gradient(135deg,#a78bfa,#dccbff);color:#16092e;box-shadow:0 0 30px -8px rgba(167,139,250,.7)}
.b1:hover,.b3:hover{filter:brightness(1.1)}
.b1::after{content:'→';display:inline-block;margin-left:.6rem;transition:transform .2s}
.b2{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#f4f4f5}
.b2:hover{background:rgba(255,255,255,.1)}

/* ===== Cards e painéis ===== */
.c{border-radius:1rem;border:1px solid rgba(196,181,253,.15);background:rgba(196,181,253,.06);padding:1rem;
  transition:all .15s cubic-bezier(.4,0,.2,1)}
.c:hover{border-color:rgba(196,181,253,.3)}
.panel{border-radius:2rem;border:1px solid rgba(196,181,253,.15);padding:1rem;
  background:linear-gradient(180deg,rgba(167,139,250,.08),rgba(167,139,250,.02))}
@media (min-width:768px){.panel{padding:2rem}}

/* ===== Formulários ===== */
.i{width:100%;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:#f4f4f5}
.i::placeholder{color:#71717a}
.i:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #a78bfa}

/* ===== Navegação e etiquetas ===== */
.t{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;color:#a1a1aa;border-radius:9999px;white-space:nowrap}
.t:hover{color:#fff}
.on{background:rgba(255,255,255,.1);color:#fff}
.g{display:inline-block;border-radius:9999px;padding:.125rem .625rem;font-size:.75rem;line-height:1rem;font-weight:500}


/* ===== Animações minimalistas ===== */
html{scroll-behavior:smooth}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}
@keyframes lift{from{opacity:0;translate:0 12px}}
@keyframes shine{to{background-position:200% 0}}
@keyframes glow{from{opacity:.5}to{opacity:1}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(251,113,133,.55)}80%,100%{box-shadow:0 0 0 7px rgba(251,113,133,0)}}

/* brilho ambiente suave ao fundo */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 30% at 15% 8%,rgba(139,92,246,.16),transparent),radial-gradient(35% 28% at 88% 4%,rgba(216,180,254,.12),transparent);
  animation:glow 9s ease-in-out infinite alternate}

/* entrada: cabeçalho, hero e, em cascata, cards/estatísticas/linhas (classe .go aplicada pelo app.js) */
header{animation:drop .7s cubic-bezier(.2,.7,.2,1) backwards}
.hero>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
.hero>:nth-child(2){animation-delay:.12s}
.hero>:nth-child(3){animation-delay:.24s}
.hero>:nth-child(4){animation-delay:.36s}
.go .c,.go #stats>div{animation:rise .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0ms)}
.go tr{animation:fade .5s ease-out backwards;animation-delay:var(--d,0ms)}

/* modal, notificações e toast */
#m.flex{animation:fade .2s ease-out}
#m.flex #mb{animation:pop .28s cubic-bezier(.2,.7,.2,1)}
#bell:not(.hidden){animation:drop .22s ease-out}
#toast{animation:lift .3s cubic-bezier(.2,.7,.2,1)}
#cnt{animation:ping 2s ease-out infinite}

/* microinterações */
.b:active{transform:scale(.97)}
.b1:hover::after{transform:translateX(4px)}
.i{transition:box-shadow .2s,border-color .2s}
.i:focus{border-color:rgba(167,139,250,.6)}
.t{transition:color .2s,background-color .2s}
.logo{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
header .logo:hover{transform:rotate(-8deg) scale(1.06)}
@media (hover:hover){.c.cursor-pointer:hover{transform:translateY(-3px);box-shadow:0 14px 40px -18px rgba(167,139,250,.5)}}
#stz button{transition:transform .15s}
#stz button:hover{transform:scale(1.2)}
#stz button:active{transform:scale(.9)}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}