/* roulang page: index */
:root {
            --bg-titanium: #F6F8F9;
            --bg-obsidian: #0B0F12;
            --color-ink: #0F172A;
            --color-green: #00E599;
            --color-hawk: #00D1FF;
            --border-light: #E2E8F0;
            --border-dark: rgba(255, 255, 255, 0.08);
            --radius-box: 14px;
        }

        body {
            background-color: var(--bg-titanium);
            color: #334155;
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }

        .code-font {
            font-family: "JetBrains Mono", Inter, monospace;
        }

        .dark-obsidian-surface {
            background-color: var(--bg-obsidian);
            border: 1px solid var(--border-dark);
        }

        .card-subtle-glow:hover {
            box-shadow: 0 16px 36px -10px rgba(0, 229, 153, 0.12);
            border-color: rgba(0, 229, 153, 0.4);
            transform: translateY(-2px);
        }

        .pulse-indicator {
            animation: pulse-glow 2s infinite ease-in-out;
        }

        @keyframes pulse-glow {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.15); }
        }

        .hero-pattern {
            background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
            background-size: 24px 24px;
        }

        .tech-grid-border {
            background-image: linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        /* 统一平滑过渡 */
        .trans-all {
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

/* roulang page: category1 */
:root {
      --bg-titanium: #F6F8F9;
      --bg-obsidian: #0B0F12;
      --color-ink: #0F172A;
      --color-green: #00E599;
      --color-hawk: #00D1FF;
      --border-light: #E2E8F0;
      --border-dark: rgba(255, 255, 255, 0.08);
      --radius-box: 14px;
    }
    body {
      background-color: var(--bg-titanium);
      color: #334155;
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .code-font {
      font-family: "JetBrains Mono", Inter, monospace;
    }
    .card-subtle-glow {
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid #E2E8F0;
    }
    .card-subtle-glow:hover {
      box-shadow: 0 16px 36px -10px rgba(0, 229, 153, 0.15);
      border-color: rgba(0, 229, 153, 0.5);
      transform: translateY(-2px);
    }
    .hero-pattern {
      background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .tech-grid-border {
      background-image: linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .dark-glow-card {
      background: #11171D;
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
    }
    .dark-glow-card:hover {
      border-color: rgba(0, 229, 153, 0.4);
      box-shadow: 0 12px 30px -10px rgba(0, 229, 153, 0.2);
      transform: translateY(-3px);
    }
    .badge-filter.active {
      background-color: #0F172A;
      color: #00E599;
      border-color: #0F172A;
    }
    .pulse-indicator {
      animation: pulseGlow 2s infinite;
    }
    @keyframes pulseGlow {
      0% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
      100% { opacity: 1; transform: scale(1); }
    }