:root {
      --cyan: #06b6d4;
      --amber: #f59e0b;
      --red: #ef4444;
      --emerald: #22c55e;
      --slate: #64748b;
      --sky: #38bdf8;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Noto Sans SC', sans-serif;
      background-color: #060b14;
      color: #dde3ed;
      margin: 0;
      min-height: 100vh;
    }

    /* Status dot pulse */
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .animate-pulse-dot {
      animation: pulse-dot 2s ease-in-out infinite;
    }

    /* Glow effects */
    .glow-cyan {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Chart tooltip */
    .chart-tooltip {
      background: #0c1525 !important;
      border: 1px solid rgba(6,182,212,0.2) !important;
      border-radius: 4px !important;
      font-size: 11px !important;
      font-family: 'Noto Sans SC', sans-serif !important;
      padding: 8px 12px !important;
      color: #dde3ed !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }

    /* Gradient text */
    .text-gradient-cyan {
      background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Grid background pattern */
    .grid-bg {
      background-image:
        linear-gradient(#06b6d4 1px, transparent 1px),
        linear-gradient(90deg, #06b6d4 1px, transparent 1px);
    }

    /* Card hover lift */
    .hover-lift {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .hover-lift:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(6,182,212,0.08);
    }

    /* Tab transition */
    .tab-content { transition: opacity 0.25s ease; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #060b14; }
    ::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #2a5080; }

    /* Chart.js canvas */
    canvas { display: block; max-width: 100%; }

    /* Fade-in animation for stats */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease forwards;
    }

    /* Active tab indicator */
    .tab-btn.active {
      background: rgba(6,182,212,0.1);
      border-color: rgba(6,182,212,0.3);
      color: #06b6d4;
    }

    /* Protocol tag hover */
    .protocol-tag {
      transition: all 0.2s ease;
    }
    .protocol-tag:hover {
      border-color: rgba(6,182,212,0.5);
      color: #06b6d4;
    }