/* ============================================================================
 * IRCFG — FX layer: neon glow + motion. Pure add-on on top of the app CSS.
 * Only transform / opacity are animated (compositor-only, cheap on weak
 * phones). Glow is static text-shadow / box-shadow — never animated.
 * Remove this <link> and the fx <script> to get the old look back exactly.
 * ==========================================================================*/

:root{ --fx-acc: 0,163,255; }                 /* accent as "r,g,b" */

/* -------------------------------------------------------- tone channels */
.stat      {--fx-rgb:0,163,255}
.stat.blue {--fx-rgb:0,163,255}
.stat.green{--fx-rgb:57,255,20}
.stat.amber{--fx-rgb:255,176,32}
.stat.red  {--fx-rgb:255,77,94}
.stat.cyan {--fx-rgb:34,211,238}

/* ============================================================== NEON */
.stat{
  border-color:rgba(var(--fx-rgb),.17);
  background:
    linear-gradient(to left, rgba(var(--fx-rgb),.075), rgba(var(--fx-rgb),0) 48%),
    var(--card);
  box-shadow:0 0 0 1px rgba(var(--fx-rgb),.03), 0 6px 22px -14px rgba(var(--fx-rgb),.55);
}
.stat::before{
  background:rgb(var(--fx-rgb));
  box-shadow:0 0 6px rgba(var(--fx-rgb),.95), 0 0 16px rgba(var(--fx-rgb),.45);
}
.stat b{
  text-shadow:0 0 10px rgba(var(--fx-rgb),.55), 0 0 2px rgba(var(--fx-rgb),.35);
  font-variant-numeric:tabular-nums;
}

/* section titles: a line that glows at its start and fades out */
.sec-title::after{
  background:linear-gradient(to left, rgba(var(--fx-acc),.45), var(--border-soft) 35%, transparent);
}

/* top bar: a hairline of neon accent */
.topbar::before{
  content:'';position:absolute;inset-inline:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(var(--fx-acc),.75) 50%, transparent);
  box-shadow:0 0 8px rgba(var(--fx-acc),.55);
}

/* active tab: glowing icon and label */
.tabbar button.on svg{filter:drop-shadow(0 0 5px rgba(var(--fx-acc),.85))}
.tabbar button.on span{text-shadow:0 0 8px rgba(var(--fx-acc),.6)}

/* console id card */
.idmark{box-shadow:0 0 18px -4px rgba(var(--fx-acc),.55), inset 0 0 0 1px rgba(var(--fx-acc),.25)}
.idmark svg{filter:drop-shadow(0 0 4px rgba(var(--fx-acc),.8))}

/* critical cards in lists */
.card.crit{box-shadow:inset 3px 0 0 var(--red), 0 0 18px -8px rgba(255,77,94,.7)}
.card.hot {box-shadow:0 0 16px -9px rgba(255,176,32,.7)}

/* ====================================================== TAP FEEDBACK */
.stat[data-nav], .card:not(.static), .linklist button{
  transition:transform .16s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.stat[data-nav]:active, .card:not(.static):active, .linklist button:active{transform:scale(.975)}
.stat[data-nav]:active{border-color:rgba(var(--fx-rgb),.45)}

/* ================================================= PAGE ENTRANCE */
.fx-a{animation:fx-in-u .42s cubic-bezier(.2,.8,.2,1) both}
.fx-a.fx-l{animation-name:fx-in-l}
.fx-a.fx-r{animation-name:fx-in-r}
@keyframes fx-in-u{from{opacity:0;transform:translateY(12px)}}
@keyframes fx-in-l{from{opacity:0;transform:translateX(-26px)}}
@keyframes fx-in-r{from{opacity:0;transform:translateX(26px)}}

/* ============================================ PULSE (attention tiles) */
.stat.fx-alert::after, .stat.fx-warn::after{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px;pointer-events:none;
  background:rgb(var(--fx-rgb));
  box-shadow:0 0 10px 2px rgba(var(--fx-rgb),.95), 0 0 26px 4px rgba(var(--fx-rgb),.55);
  opacity:0;will-change:opacity;
}
/* heartbeat: two quick beats, then rest */
.stat.fx-alert::after{animation:fx-beat 1.25s ease-out infinite}
@keyframes fx-beat{
  0%{opacity:0} 12%{opacity:1} 26%{opacity:.15} 40%{opacity:.9} 70%,100%{opacity:0}
}
/* soft breathing */
.stat.fx-warn::after{animation:fx-breathe 2.6s ease-in-out infinite}
@keyframes fx-breathe{0%,100%{opacity:0} 50%{opacity:.75}}

/* ============================================ HEADER LIGHT SWEEP */
.fx-sweep{
  position:absolute;bottom:-1px;left:0;width:34%;height:2px;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(var(--fx-acc),1), #fff, rgba(var(--fx-acc),1), transparent);
  box-shadow:0 0 10px rgba(var(--fx-acc),.9);
  opacity:0;transform:translateX(300%);
}
.fx-sweep.go{animation:fx-sweep .9s cubic-bezier(.4,0,.2,1) 1}
@keyframes fx-sweep{
  0%{opacity:0;transform:translateX(300%)}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;transform:translateX(-100%)}
}

/* ======================================== SLIDING TAB INDICATOR */
.tabbar.fx-has-ind button.on::before{display:none}
.fx-ind{
  position:absolute;top:0;left:0;height:2px;border-radius:2px;pointer-events:none;
  background:rgb(var(--fx-acc));
  box-shadow:0 0 8px rgba(var(--fx-acc),.95), 0 0 18px rgba(var(--fx-acc),.5);
  transition:transform .38s cubic-bezier(.3,1.25,.5,1), width .2s ease;
  opacity:0;
}

/* ================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .fx-a{animation:none !important}
  .stat.fx-alert::after, .stat.fx-warn::after{animation:none;opacity:.6}
  .fx-sweep{display:none}
  .fx-ind{transition:none}
  .stat[data-nav], .card:not(.static), .linklist button{transition:none}
}