body{font-family:'Inter',sans-serif}
.font-mono,.mono{font-family:'Space Mono',monospace}
*{scroll-behavior:smooth}

/* ── glass panels ─────────────────────────────────────────────────────── */
.glass-panel{background:rgba(27,33,34,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(61,73,76,.5);transition:border-color .3s,box-shadow .3s,transform .25s cubic-bezier(.16,1,.3,1)}
.glass-edge{box-shadow:inset 1px 1px 0 0 rgba(255,255,255,.05)}

/* ── glow text ────────────────────────────────────────────────────────── */
.glow-cyan{text-shadow:0 0 10px rgba(76,215,246,.5)}
.glow-emerald{text-shadow:0 0 10px rgba(16,185,129,.5)}
.glow-rose{text-shadow:0 0 10px rgba(244,63,94,.5)}
.glow-active{box-shadow:0 0 15px rgba(76,215,246,.15),inset 0 0 10px rgba(76,215,246,.05);border-color:rgba(76,215,246,.5)!important}

/* ── ambient pulses ───────────────────────────────────────────────────── */
.pulse-dot{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.pulse-slow{animation:pulse-slow 3s infinite}
@keyframes pulse-slow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.95)}}

/* ── scrollbars ───────────────────────────────────────────────────────── */
.scroll-thin::-webkit-scrollbar{width:5px;height:5px}
.scroll-thin::-webkit-scrollbar-track{background:transparent}
.scroll-thin::-webkit-scrollbar-thumb{background:#3d494c;border-radius:4px;transition:background .2s}
.scroll-thin::-webkit-scrollbar-thumb:hover{background:#4cd7f6}

.progress-ring__circle{transition:stroke-dashoffset .5s;transform:rotate(-90deg);transform-origin:50% 50%}

/* ── nav + cards: snappier, springier micro-interactions ─────────────── */
.nav-link{transition:all .25s cubic-bezier(.16,1,.3,1);position:relative}
.nav-link:hover{transform:translateX(4px)}
.card-hover{transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.card-hover:hover{border-color:rgba(76,215,246,.45);transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(76,215,246,.25)}

button{transition:transform .12s ease,filter .15s ease,background-color .2s,border-color .2s,color .2s}
button:active{transform:scale(.95)}

::selection{background:rgba(76,215,246,.3)}

/* ── page-load entrance animation (applied by shared.js to every card) ─ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.animate-in{animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--stagger-delay,0ms)}
@media (prefers-reduced-motion: reduce){.animate-in{animation:none}}

/* ── animated gradient accent border, for hero/important panels ──────── */
.glass-panel-glow{position:relative;isolation:isolate}
.glass-panel-glow::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,rgba(76,215,246,.55),rgba(208,188,255,.45),rgba(16,185,129,.4),rgba(76,215,246,.55));
  background-size:300% 300%;animation:gradientShift 8s ease infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;
}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── value flash: briefly glow a number when it changes ───────────────── */
@keyframes flashUp{0%{text-shadow:0 0 0 rgba(16,185,129,0)}25%{text-shadow:0 0 18px rgba(16,185,129,1)}100%{text-shadow:0 0 10px rgba(16,185,129,.5)}}
@keyframes flashDown{0%{text-shadow:0 0 0 rgba(244,63,94,0)}25%{text-shadow:0 0 18px rgba(244,63,94,1)}100%{text-shadow:0 0 10px rgba(244,63,94,.5)}}
.flash-up{animation:flashUp .9s ease-out}
.flash-down{animation:flashDown .9s ease-out}

/* ── loading skeleton shimmer ─────────────────────────────────────────── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.03) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite;border-radius:.5rem;color:transparent!important}

/* ── table rows: subtle highlight sweep on hover ──────────────────────── */
tbody tr{transition:background-color .15s}

/* ── badges: soft breathing glow on the live status dot ───────────────── */
@keyframes dotGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 4px rgba(16,185,129,0)}}
.live-dot{animation:dotGlow 1.8s ease-in-out infinite}