/* ============================================================
   XJTEC — camada de refinamento CYBERPUNK (v1)
   Sobrepõe a estética do conceito do scanner XJ_DRB sobre o
   editor existente. Não muda estrutura/JS — só o visual.
   Casada com a mesma paleta (ciano/azul, Rajdhani/Mono).
   ============================================================ */
:root{
  --glow-cyan:0 0 20px rgba(0,229,255,.35);
  --glow-cyan-s:0 0 10px rgba(0,229,255,.5);
  --grid-line:rgba(44,50,68,.6);
}

/* grade de fundo sutil + brilhos radiais (como no conceito) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:46px 46px;
  mask:radial-gradient(circle at 70% 0%,#000 0%,transparent 70%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 85% -10%,rgba(0,229,255,.06),transparent 60%),
    radial-gradient(700px 450px at -5% 110%,rgba(30,144,255,.05),transparent 55%);
}
body>*{position:relative;z-index:1}

/* HEADER — vidro escuro com linha de brilho inferior */
header{
  background:linear-gradient(180deg,rgba(24,27,36,.92),rgba(16,18,24,.92))!important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-color)!important;
  box-shadow:0 1px 0 rgba(0,229,255,.12),0 10px 30px -20px rgba(0,0,0,.8);
  position:relative;
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent);opacity:.45;
}

/* LOGO — brilho de néon */
.brand-logo{
  background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue))!important;
  box-shadow:var(--glow-cyan);
  letter-spacing:1.5px!important;
}

/* BADGES de telemetria — pílula com ponto pulsante */
.telemetry-badge{
  border:1px solid var(--border-bright)!important;
  background:rgba(26,29,38,.8)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* SIDEBAR — item ativo com barra de néon à esquerda */
.sidebar-item{transition:background .18s,box-shadow .18s,border-color .18s;position:relative}
.sidebar-item:hover{background:rgba(0,229,255,.05)!important}
.sidebar-item.active,.sidebar-item.selected{
  background:rgba(0,229,255,.08)!important;
  box-shadow:inset 2px 0 0 var(--accent-cyan),var(--glow-cyan);
}

/* CARDS (escalares) — profundidade e borda que acende no hover */
.scalar-card{
  background:linear-gradient(180deg,var(--bg-card),#171a22)!important;
  border:1px solid var(--border-color)!important;
  border-radius:12px!important;
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.scalar-card:hover{
  border-color:var(--accent-cyan)!important;
  box-shadow:0 14px 36px -20px rgba(0,0,0,.95),var(--glow-cyan);
  transform:translateY(-2px);
}
.scalar-val-big,.scalar-card .val{
  font-family:var(--font-display)!important;
  text-shadow:0 0 18px rgba(0,229,255,.25);
}

/* BOTÕES — primário com brilho, acento com borda viva */
.btn-primary,.btn.btn-primary{
  background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue))!important;
  color:#042!important;border:none!important;
  box-shadow:var(--glow-cyan);font-family:var(--font-display);font-weight:600;letter-spacing:.3px;
}
.btn-primary:hover{box-shadow:0 0 26px rgba(0,229,255,.55)!important}
.btn-accent{border:1px solid var(--accent-cyan)!important;color:var(--accent-cyan)!important;background:transparent!important}
.btn-accent:hover{background:rgba(0,229,255,.08)!important;box-shadow:var(--glow-cyan-s)}
.tool-btn{transition:border-color .18s,box-shadow .18s}
.tool-btn:hover{border-color:var(--accent-cyan)!important}
.tool-btn.mode-btn.active{
  background:rgba(0,229,255,.12)!important;border-color:var(--accent-cyan)!important;
  box-shadow:var(--glow-cyan-s);color:var(--accent-cyan)!important;
}

/* TAGS — bordas com leve brilho por tipo */
.tag.tag-3d{border-color:var(--accent-blue)!important;color:var(--accent-blue)!important;box-shadow:0 0 10px rgba(30,144,255,.25)}
.tag.tag-scalar{border-color:var(--accent-green)!important;color:var(--accent-green)!important}
.tag.tag-review{border-color:var(--accent-orange)!important;color:var(--accent-orange)!important}

/* toolbar de tuning — faixa de vidro */
.tuning-toolbar{
  background:linear-gradient(180deg,rgba(19,21,27,.9),rgba(16,18,24,.9))!important;
  border:1px solid var(--border-color)!important;border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* célula modificada no heatmap — pulso de néon (reforça o que já existe) */
@keyframes xtCellGlow{0%{box-shadow:0 0 0 rgba(0,229,255,0)}50%{box-shadow:0 0 14px rgba(0,229,255,.6)}100%{box-shadow:0 0 0 rgba(0,229,255,0)}}
.cell-modified,.modified{animation:xtCellGlow 1.2s ease-out}

/* scrollbar fina estilo HUD */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:var(--bg-panel)}
*::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  .scalar-card:hover{transform:none}
  .cell-modified,.modified{animation:none}
}