/* roulang page: index */
:root {
            --bg-main: #0B0F17;
            --bg-card: #111827;
            --bg-card-hover: #1F2937;
            --primary: #10B981;
            --cyan: #06B6D4;
            --amber: #F59E0B;
            --text-main: #F9FAFB;
            --text-muted: #9CA3AF;
            --border-line: rgba(255, 255, 255, 0.08);
        }
        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
            background-image: radial-gradient(rgba(16, 185, 129, 0.06) 1px, transparent 1px);
            background-size: 24px 24px;
        }
        .font-mono-code {
            font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        }
        .gradient-border {
            border: 1px solid var(--border-line);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .gradient-border:hover {
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 0 24px rgba(16, 185, 129, 0.12);
        }
        .gold-badge {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
            border: 1px solid rgba(245, 158, 11, 0.3);
            color: #FBBF24;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 2px;
        }

/* roulang page: category1 */
:root {
      --bg-main: #0B0F17;
      --bg-card: #111827;
      --bg-card-hover: #1F2937;
      --primary: #10B981;
      --cyan: #06B6D4;
      --amber: #F59E0B;
      --text-main: #F9FAFB;
      --text-muted: #9CA3AF;
      --border-line: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
      background-image: radial-gradient(rgba(16, 185, 129, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .font-mono-code {
      font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;
    }
    .gradient-border {
      border: 1px solid var(--border-line);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gradient-border:hover {
      border-color: rgba(16, 185, 129, 0.5);
      box-shadow: 0 0 24px rgba(16, 185, 129, 0.12);
    }
    .gold-badge {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
      border: 1px solid rgba(245, 158, 11, 0.3);
      color: #FBBF24;
    }

/* roulang page: category2 */
:root {
      --bg-main: #0B0F17;
      --bg-card: #111827;
      --bg-card-hover: #1F2937;
      --primary: #10B981;
      --cyan: #06B6D4;
      --amber: #F59E0B;
      --text-main: #F9FAFB;
      --text-muted: #9CA3AF;
      --border-line: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
      background-image: radial-gradient(rgba(16, 185, 129, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .font-mono-code {
      font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }
    .gradient-border {
      border: 1px solid var(--border-line);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gradient-border:hover {
      border-color: rgba(16, 185, 129, 0.5);
      box-shadow: 0 0 24px rgba(16, 185, 129, 0.12);
    }
    .gold-badge {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
      border: 1px solid rgba(245, 158, 11, 0.3);
      color: #FBBF24;
    }
    .custom-scrollbar::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #0B0F17;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #1F2937;
      border-radius: 3px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #10B981;
    }

/* roulang page: category3 */
:root {
        --bg-main: #0B0F17;
        --bg-card: #111827;
        --bg-card-hover: #1F2937;
        --primary: #10B981;
        --cyan: #06B6D4;
        --amber: #F59E0B;
        --text-main: #F9FAFB;
        --text-muted: #9CA3AF;
        --border-line: rgba(255, 255, 255, 0.08);
    }
    body {
        background-color: var(--bg-main);
        color: var(--text-main);
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
        background-image: radial-gradient(rgba(16, 185, 129, 0.06) 1px, transparent 1px);
        background-size: 24px 24px;
    }
    .font-mono-code {
        font-family: "JetBrains Mono", "Fira Code", monospace;
    }
    .gradient-border {
        border: 1px solid var(--border-line);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gradient-border:hover {
        border-color: rgba(16, 185, 129, 0.5);
        box-shadow: 0 0 24px rgba(16, 185, 129, 0.12);
    }
    .gold-badge {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
        border: 1px solid rgba(245, 158, 11, 0.3);
        color: #FBBF24;
    }

/* roulang page: category4 */
:root {
      --bg-main: #0B0F17;
      --bg-card: #111827;
      --bg-card-hover: #1F2937;
      --primary: #10B981;
      --cyan: #06B6D4;
      --amber: #F59E0B;
      --text-main: #F9FAFB;
      --text-muted: #9CA3AF;
      --border-line: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
      background-image: radial-gradient(rgba(16, 185, 129, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .font-mono-code {
      font-family: "JetBrains Mono", "Fira Code", monospace;
    }
    .gradient-border {
      border: 1px solid var(--border-line);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gradient-border:hover {
      border-color: rgba(16, 185, 129, 0.5);
      box-shadow: 0 0 24px rgba(16, 185, 129, 0.12);
    }
    .gold-badge {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
      border: 1px solid rgba(245, 158, 11, 0.3);
      color: #FBBF24;
    }
    .roadmap-badge-active {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%);
      border: 1px solid rgba(16, 185, 129, 0.4);
    }