/* UPCANDLE TRADE — tema "futurista": roxo profundo, gradientes roxo→rosa→azul, vidro, brilho e movimento.
   Carregado depois do CSS de cada página, então só sobrescreve o visual. */
:root{
  --g1:#a855f7; --g2:#ec4899; --g3:#3b82f6;
  --grad:linear-gradient(90deg,#a855f7,#ec4899);
  --gradb:linear-gradient(90deg,#9333ea,#3b82f6);
  --glass:linear-gradient(160deg,rgba(76,29,149,.38),rgba(23,10,51,.55));
  --gline:rgba(168,85,247,.28);
  --ease:cubic-bezier(.22,1,.36,1);
}
html{background:#0d0221}
body{
  font-family:'Rajdhani','Inter',system-ui,sans-serif!important;font-weight:500;letter-spacing:.01em;
  background:
    radial-gradient(900px 600px at 85% -10%,rgba(168,85,247,.22),transparent 60%),
    radial-gradient(800px 600px at -10% 110%,rgba(59,130,246,.16),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 64px),
    linear-gradient(180deg,#120530,#0d0221 40%,#0a0118)!important;
  background-attachment:fixed!important;
}
/* partículas (canvas criado pelo fx.js) */
#fxStars{position:fixed;inset:0;pointer-events:none;z-index:0}
body>*:not(#fxStars):not(#winfx):not(#fxCurtain){position:relative;z-index:1}
body>nav.side{position:fixed!important;z-index:5}

/* tipografia de destaque */
h1,h2,.hello,.logo,.kpi b,.rankcard .pos,#last,.bal b,#trades .thead b,.card h3,.trade em,.trade b,#tape~*,.hero h1{font-family:'Orbitron','Inter',sans-serif!important;letter-spacing:.02em}
.card h3,#trades .thead b{font-size:13px!important;text-transform:uppercase;letter-spacing:.08em}
.hero h1 em,.hello span:first-child,.logo{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.logo i,.side .logo{-webkit-text-fill-color:#fff}
.kpi b{font-size:22px!important}

/* vidro: painéis e cartões */
.card,.wrap,aside,header,#trades,.side,.user,.chipb,.pill,.userchip{
  background:var(--glass)!important;border-color:var(--gline)!important;
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
}
header{background:rgba(13,2,33,.72)!important;border-bottom:1px solid var(--gline)!important}
.card{border-radius:18px;transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease)}
.card:hover{border-color:rgba(168,85,247,.55)!important;box-shadow:0 18px 50px -24px rgba(168,85,247,.55),inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(-3px)}
.card.tbl:hover,.card.chart:hover{transform:none}
.wrap{box-shadow:0 40px 120px -40px rgba(168,85,247,.45)!important}
.hero{background:radial-gradient(120% 90% at 0% 100%,rgba(236,72,153,.28),transparent 55%),radial-gradient(90% 70% at 100% 0%,rgba(59,130,246,.25),transparent 60%),linear-gradient(160deg,#2a0b5e,#12052e)!important}

/* botões principais: gradiente + brilho + varredura de luz */
.go,.cta,#tLogin.on,#tReg.on{position:relative;overflow:hidden}
.go,.cta{background:var(--gradb)!important;color:#fff!important;border:0;
  box-shadow:0 10px 30px -10px rgba(147,51,234,.9),0 0 0 1px rgba(255,255,255,.08) inset!important;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .2s!important;font-family:'Orbitron',sans-serif!important;font-size:13px!important;letter-spacing:.06em}
.go:hover,.cta:hover{transform:translateY(-2px) scale(1.02)!important;box-shadow:0 18px 40px -10px rgba(147,51,234,1),0 0 30px -6px rgba(236,72,153,.6)!important}
.go:active,.cta:active{transform:scale(.97)!important}
.go::after,.cta::after,.trade::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none}
.go:hover::after,.cta:hover::after,.trade:hover::before{left:130%}

/* botões secundários com contorno em gradiente */
.chipb,.lang,.seg,.reset,#tools{border:1px solid var(--gline)!important}
.chipb:hover,.lang:hover,.reset:hover{border-color:var(--g1)!important;box-shadow:0 0 18px -4px rgba(168,85,247,.7);color:#fff!important}
.seg button,.tab,#tools button,.chips button{transition:all .3s var(--ease)!important}
.seg button.on,.tab.on,#tools button.on{background:var(--grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 6px 20px -6px rgba(236,72,153,.7)}
.tab:hover:not(.on){border-color:var(--g1)!important;color:#fff!important}
input,select{background:rgba(13,2,33,.6)!important;border-color:var(--gline)!important;transition:border-color .25s,box-shadow .25s!important}
input:focus,select:focus{border-color:var(--g1)!important;box-shadow:0 0 0 4px rgba(168,85,247,.2),0 0 24px -6px rgba(168,85,247,.8)!important}

/* SOBE / DESCE */
.trade{transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .2s!important;position:relative;overflow:hidden}
#up{background:linear-gradient(135deg,#10b981,#059669)!important;box-shadow:0 12px 34px -12px rgba(16,185,129,.9)!important}
#down{background:linear-gradient(135deg,#ef4444,#db2777)!important;box-shadow:0 12px 34px -12px rgba(239,68,68,.9)!important}
#up:hover:not(:disabled){box-shadow:0 18px 44px -10px rgba(16,185,129,1),0 0 30px -4px rgba(16,185,129,.6)!important}
#down:hover:not(:disabled){box-shadow:0 18px 44px -10px rgba(239,68,68,1),0 0 30px -4px rgba(236,72,153,.6)!important}

/* barra lateral do dashboard: indicador em gradiente */
.side a.on{background:rgba(168,85,247,.18)!important;color:#fff!important;box-shadow:0 0 20px -6px rgba(168,85,247,.8)}
.side a.on::before{content:"";position:absolute;left:-16px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--grad)}
.side .logo,.logo i,.av,.userchip i{background:var(--grad)!important;box-shadow:0 0 22px -4px rgba(236,72,153,.7)!important}
.rankcard{background:radial-gradient(120% 120% at 100% 0%,rgba(236,72,153,.55),transparent 55%),linear-gradient(140deg,#9333ea,#3b82f6)!important;color:#fff!important}
.rankcard .go{background:#fff!important;color:#6d28d9!important;font-family:'Orbitron',sans-serif!important}

/* ---------- movimento ---------- */
/* entrada da página */
@keyframes pgIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
body.fx-in main,body.fx-in .wrap,body.fx-in header{animation:pgIn .7s var(--ease) both}
body.fx-in header{animation-duration:.5s}
/* cortina de saída ao trocar de página */
#fxCurtain{position:fixed;inset:0;z-index:99999;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(168,85,247,.35),#0d0221 70%);transition:opacity .35s var(--ease)}
body.fx-out #fxCurtain{opacity:1}
body.fx-out main,body.fx-out .wrap{transform:scale(.985);filter:blur(4px);transition:all .35s var(--ease)}
/* revelar ao rolar (escalonado) */
.fx-r{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.fx-r.fx-v{opacity:1;transform:none}
/* contorno pulsante sutil nos cartões de destaque */
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,0)}50%{box-shadow:0 0 40px -10px rgba(168,85,247,.55)}}
.rankcard,.wrap{animation:glowPulse 5s ease-in-out infinite}
/* títulos com gradiente animado */
@keyframes gradShift{to{background-position:200% 0}}
.hero h1 em,.logo{background-size:200% 100%!important;animation:gradShift 6s linear infinite}
.hero h1 em,.logo,.hello span:first-child{background-image:linear-gradient(90deg,#a855f7,#ec4899,#3b82f6,#a855f7)!important}

/* barras de rolagem */
*{scrollbar-width:thin;scrollbar-color:rgba(168,85,247,.45) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(168,85,247,.45);border-radius:8px}

@media (prefers-reduced-motion:reduce){
  .fx-r{opacity:1;transform:none;transition:none}
  body.fx-in main,body.fx-in .wrap,body.fx-in header{animation:none}
  .rankcard,.wrap,.hero h1 em,.logo{animation:none}
}

.hero svg{height:42%!important;opacity:.8!important}
.trade em{font-size:.82em;letter-spacing:.03em}.trade b{font-size:22px!important}
@media(max-width:560px){.hero{gap:14px;justify-content:flex-start!important}.hero h1{font-size:26px!important}}