/* roulang page: index */
:root {
      --bg-main: #0A0D12;
      --card-bg: #12161F;
      --card-alt: #181E29;
      --color-primary: #F59E0B;
      --color-primary-hover: #D97706;
      --color-accent: #10B981;
      --color-accent-indigo: #6366F1;
      --text-main: #F9FAFB;
      --text-muted: #D1D5DB;
      --text-sub: #9CA3AF;
      --border-line: rgba(255, 255, 255, 0.08);
      --border-active: rgba(245, 158, 11, 0.35);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-muted);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      letter-spacing: -0.01em;
    }
    .custom-glow {
      box-shadow: 0 0 35px -5px rgba(245, 158, 11, 0.15);
    }
    .card-panel {
      background-color: var(--card-bg);
      border: 1px solid var(--border-line);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-panel:hover {
      border-color: var(--border-active);
      transform: translateY(-2px);
      box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #0A0D12;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #232B3A;
      border-radius: 4px;
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(10, 13, 18, 0.72) 0%, rgba(10, 13, 18, 0.96) 80%, #0A0D12 100%);
    }

/* roulang page: category2 */
:root {
        --bg-main: #0A0D12;
        --card-bg: #12161F;
        --card-alt: #181E29;
        --color-primary: #F59E0B;
        --color-primary-hover: #D97706;
        --color-accent: #10B981;
        --color-accent-indigo: #6366F1;
        --text-main: #F9FAFB;
        --text-muted: #D1D5DB;
        --text-sub: #9CA3AF;
        --border-line: rgba(255, 255, 255, 0.08);
        --border-active: rgba(245, 158, 11, 0.35);
      }
      body {
        background-color: var(--bg-main);
        color: var(--text-muted);
        font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
        line-height: 1.75;
        letter-spacing: -0.01em;
      }
      .card-panel {
        background-color: var(--card-bg);
        border: 1px solid var(--border-line);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .card-panel:hover {
        border-color: var(--border-active);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
      }
      .badge-tag {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background-color: rgba(24, 30, 41, 0.7);
      }
      .glow-border {
        box-shadow: 0 0 15px -3px rgba(245, 158, 11, 0.15);
      }

/* roulang page: category1 */
:root {
        --bg-main: #0A0D12;
        --card-bg: #12161F;
        --card-alt: #181E29;
        --color-primary: #F59E0B;
        --color-primary-hover: #D97706;
        --color-accent: #10B981;
        --color-accent-indigo: #6366F1;
        --text-main: #F9FAFB;
        --text-muted: #D1D5DB;
        --text-sub: #9CA3AF;
        --border-line: rgba(255, 255, 255, 0.08);
        --border-active: rgba(245, 158, 11, 0.35);
      }
      body {
        background-color: var(--bg-main);
        color: var(--text-muted);
        font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
        line-height: 1.75;
        letter-spacing: -0.01em;
      }
      .card-panel {
        background-color: var(--card-bg);
        border: 1px solid var(--border-line);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .card-panel:hover {
        border-color: var(--border-active);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
      }
      .hero-mask {
        background: linear-gradient(180deg, rgba(10, 13, 18, 0.75) 0%, rgba(10, 13, 18, 0.94) 80%, #0A0D12 100%);
      }
      .code-tag {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      }

/* roulang page: category4 */
:root {
            --bg-main: #0A0D12;
            --card-bg: #12161F;
            --card-alt: #181E29;
            --color-primary: #F59E0B;
            --color-primary-hover: #D97706;
            --color-accent: #10B981;
            --color-accent-indigo: #6366F1;
            --text-main: #F9FAFB;
            --text-muted: #D1D5DB;
            --text-sub: #9CA3AF;
            --border-line: rgba(255, 255, 255, 0.08);
            --border-active: rgba(245, 158, 11, 0.35);
        }
        body {
            background-color: var(--bg-main);
            color: var(--text-muted);
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            line-height: 1.75;
            letter-spacing: -0.01em;
        }
        .card-panel {
            background-color: var(--card-bg);
            border: 1px solid var(--border-line);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .card-panel:hover {
            border-color: var(--border-active);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
        }
        .hero-mask {
            background: linear-gradient(180deg, rgba(10, 13, 18, 0.75) 0%, rgba(10, 13, 18, 0.94) 80%, #0A0D12 100%);
        }
        .code-block {
            background-color: #07090C;
            border: 1px solid rgba(255, 255, 255, 0.08);
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

/* roulang page: category3 */
:root {
      --bg-main: #0A0D12;
      --card-bg: #12161F;
      --card-alt: #181E29;
      --color-primary: #F59E0B;
      --color-primary-hover: #D97706;
      --color-accent: #10B981;
      --color-accent-indigo: #6366F1;
      --text-main: #F9FAFB;
      --text-muted: #D1D5DB;
      --text-sub: #9CA3AF;
      --border-line: rgba(255, 255, 255, 0.08);
      --border-active: rgba(245, 158, 11, 0.35);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-muted);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      letter-spacing: -0.01em;
    }
    .card-panel {
      background-color: var(--card-bg);
      border: 1px solid var(--border-line);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-panel:hover {
      border-color: var(--border-active);
      transform: translateY(-2px);
      box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(10, 13, 18, 0.72) 0%, rgba(10, 13, 18, 0.96) 80%, #0A0D12 100%);
    }