/* =========================================================
   Nexus Monitor · Tailwind 补充样式（亮色主题）
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    background-image:
        radial-gradient(ellipse 60% 25% at 50% 0%, rgba(99, 102, 241, 0.04), transparent),
        radial-gradient(ellipse 40% 20% at 80% 90%, rgba(52, 211, 153, 0.03), transparent);
    background-attachment: fixed;
}

/* 进度条动画 */
.bar-fill {
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 实时灯脉冲 */
.live-pulse {
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* 页面淡入动画 */
.fade-in {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeInUp 0.5s ease forwards;
}

.fade-in:nth-child(1) { animation-delay: 0.05s; }
.fade-in:nth-child(2) { animation-delay: 0.10s; }
.fade-in:nth-child(3) { animation-delay: 0.15s; }
.fade-in:nth-child(4) { animation-delay: 0.20s; }

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 自定义滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.15); }