/* roulang page: index */
:root {
      --bg-main: #070B19;
      --bg-card: rgba(15, 23, 42, 0.72);
      --border-card: rgba(255, 255, 255, 0.12);
      --color-cyan: #00F2FE;
      --color-blue: #4FACFE;
      --color-green: #38EF7D;
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
    }
    
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }

    .glass-card {
      background: var(--bg-card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-card);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .glass-card:hover {
      border-color: rgba(0, 242, 254, 0.4);
      transform: translateY(-4px);
      box-shadow: 0 10px 30px -10px rgba(0, 242, 254, 0.2);
    }

    .glow-btn-primary {
      background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 100%);
      box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
      transition: all 0.25s ease;
    }
    .glow-btn-primary:hover {
      box-shadow: 0 0 30px rgba(0, 242, 254, 0.7);
      transform: scale(1.03);
    }
    .glow-btn-primary:active {
      transform: scale(0.98);
    }

    .glow-btn-secondary {
      background: rgba(15, 23, 42, 0.8);
      border: 1px solid rgba(0, 242, 254, 0.3);
      transition: all 0.25s ease;
    }
    .glow-btn-secondary:hover {
      border-color: #00F2FE;
      box-shadow: inset 0 0 12px rgba(0, 242, 254, 0.25);
    }
    .glow-btn-secondary:active {
      transform: scale(0.98);
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--color-green);
      box-shadow: 0 0 8px var(--color-green);
      animation: pulseAnim 2s infinite;
    }
    @keyframes pulseAnim {
      0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(56, 239, 125, 0.7); }
      70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 8px rgba(56, 239, 125, 0); }
      100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(56, 239, 125, 0); }
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #070B19;
    }
    ::-webkit-scrollbar-thumb {
      background: #1E293B;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #334155;
    }

/* roulang page: category1 */
:root {
      --bg-main: #070B19;
      --bg-card: rgba(15, 23, 42, 0.72);
      --border-card: rgba(255, 255, 255, 0.12);
      --color-cyan: #00F2FE;
      --color-blue: #4FACFE;
      --color-green: #38EF7D;
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .glass-card {
      background: var(--bg-card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-card);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-card:hover {
      border-color: rgba(0, 242, 254, 0.4);
      transform: translateY(-4px);
      box-shadow: 0 10px 30px -10px rgba(0, 242, 254, 0.2);
    }
    .glow-btn-primary {
      background: linear-gradient(135deg, #00F2FE 0%, #4FACFE 100%);
      box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
      transition: all 0.25s ease;
    }
    .glow-btn-primary:hover {
      box-shadow: 0 0 30px rgba(0, 242, 254, 0.7);
      transform: scale(1.03);
    }
    .glow-btn-primary:active {
      transform: scale(0.98);
    }
    .glow-btn-secondary {
      background: rgba(15, 23, 42, 0.8);
      border: 1px solid rgba(0, 242, 254, 0.3);
      transition: all 0.25s ease;
    }
    .glow-btn-secondary:hover {
      border-color: #00F2FE;
      box-shadow: inset 0 0 12px rgba(0, 242, 254, 0.25);
    }
    .glow-btn-secondary:active {
      transform: scale(0.98);
    }
    .pulse-indicator {
      box-shadow: 0 0 0 0 rgba(56, 239, 125, 0.7);
      animation: pulseGreen 2s infinite cubic-bezier(0.66, 0, 0, 1);
    }
    @keyframes pulseGreen {
      to {
        box-shadow: 0 0 0 8px rgba(56, 239, 125, 0);
      }
    }