/* roulang page: index */
:root {
      --bg-dark: #0B0F19;
      --bg-card: #111827;
      --border-line: rgba(51, 65, 85, 0.6);
      --accent-emerald: #10B981;
      --accent-violet: #6366F1;
      --text-white: #F9FAFB;
      --text-muted: #9CA3AF;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-white);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .grid-bg-pattern {
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .status-pulse {
      animation: pulse-glow 2s infinite ease-in-out;
    }
    @keyframes pulse-glow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(1.15); }
    }
    .hover-glow {
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hover-glow:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.2), 0 8px 10px -6px rgba(16, 185, 129, 0.2);
    }

/* roulang page: category1 */
:root {
      --bg-dark: #0B0F19;
      --bg-card: #111827;
      --border-line: rgba(51, 65, 85, 0.6);
      --accent-emerald: #10B981;
      --accent-violet: #6366F1;
      --text-white: #F9FAFB;
      --text-muted: #9CA3AF;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-white);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .grid-bg-pattern {
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .status-pulse {
      animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(1.15); }
    }
    .hover-glow:hover {
      box-shadow: 0 0 25px rgba(16, 185, 129, 0.22);
      border-color: rgba(16, 185, 129, 0.6);
    }

/* roulang page: category2 */
:root {
            --bg-dark: #0B0F19;
            --bg-card: #111827;
            --border-line: rgba(51, 65, 85, 0.6);
            --accent-emerald: #10B981;
            --accent-violet: #6366F1;
            --text-white: #F9FAFB;
            --text-muted: #9CA3AF;
        }
        body {
            background-color: var(--bg-dark);
            color: var(--text-white);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.8;
            overflow-x: hidden;
        }
        .grid-bg-pattern {
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }
        .status-pulse {
            animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse-glow {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.9); }
        }
        .tag-active {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.8);
            color: #10B981;
        }

/* roulang page: category3 */
:root {
      --bg-dark: #0B0F19;
      --bg-card: #111827;
      --border-line: rgba(51, 65, 85, 0.6);
      --accent-emerald: #10B981;
      --accent-violet: #6366F1;
      --text-white: #F9FAFB;
      --text-muted: #9CA3AF;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-white);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .grid-bg-pattern {
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .status-pulse {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(1.15); }
    }
    .sec-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.2rem 0.65rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }
    .filter-btn.active {
      background-color: rgba(16, 185, 129, 0.15);
      border-color: #10B981;
      color: #34D399;
    }

/* roulang page: category4 */
:root {
      --bg-dark: #0B0F19;
      --bg-card: #111827;
      --border-line: rgba(51, 65, 85, 0.6);
      --accent-emerald: #10B981;
      --accent-violet: #6366F1;
      --text-white: #F9FAFB;
      --text-muted: #9CA3AF;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-white);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .grid-bg-pattern {
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .status-pulse {
      animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulseGlow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 2px;
    }