/* roulang page: index */
:root {
      --bg-main: #0B0F19;
      --bg-card: #111827;
      --accent-cyan: #06B6D4;
      --accent-emerald: #10B981;
      --accent-amber: #F59E0B;
      --text-muted: #9CA3AF;
      --border-subtle: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: #F9FAFB;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .grid-pattern {
      background-size: 32px 32px;
      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);
    }
    .glow-cyan {
      box-shadow: 0 0 25px rgba(6, 182, 212, 0.2);
    }
    .code-scroll::-webkit-scrollbar {
      height: 4px;
      width: 4px;
    }
    .code-scroll::-webkit-scrollbar-thumb {
      background: #374151;
      border-radius: 2px;
    }

/* roulang page: category2 */
:root {
      --bg-main: #0B0F19;
      --bg-card: #111827;
      --accent-cyan: #06B6D4;
      --accent-emerald: #10B981;
      --accent-amber: #F59E0B;
      --text-muted: #9CA3AF;
      --border-subtle: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: #F9FAFB;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .grid-pattern {
      background-size: 32px 32px;
      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);
    }
    .hero-skew-box {
      position: relative;
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(17, 24, 39, 0.95) 100%);
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }
    @media (max-width: 768px) {
      .hero-skew-box {
        clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
      }
    }
    .glow-border {
      border: 1px solid rgba(6, 182, 212, 0.25);
      box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.15);
    }
    .tabular-mono {
      font-family: "JetBrains Mono", "Fira Code", monospace;
      font-variant-numeric: tabular-nums;
    }

/* roulang page: category1 */
:root {
      --bg-main: #0B0F19;
      --bg-card: #111827;
      --accent-cyan: #06B6D4;
      --accent-emerald: #10B981;
      --accent-amber: #F59E0B;
      --text-muted: #9CA3AF;
      --border-subtle: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: #F9FAFB;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .grid-pattern {
      background-size: 32px 32px;
      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);
    }
    /* 表格等宽数字排版 */
    .num-cell {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
    /* 自定义暗色滚动条 */
    .dark-scroll::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    .dark-scroll::-webkit-scrollbar-track {
      background: #0B0F19;
    }
    .dark-scroll::-webkit-scrollbar-thumb {
      background: #1F2937;
      border-radius: 3px;
    }
    .dark-scroll::-webkit-scrollbar-thumb:hover {
      background: #374151;
    }

/* roulang page: category3 */
:root {
      --bg-main: #0B0F19;
      --bg-card: #111827;
      --accent-cyan: #06B6D4;
      --accent-emerald: #10B981;
      --accent-amber: #F59E0B;
      --text-muted: #9CA3AF;
      --border-subtle: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: #F9FAFB;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .grid-pattern {
      background-size: 32px 32px;
      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);
    }
    .code-box {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #0d121f;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #1f2937;
      border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: #374151;
    }

/* roulang page: category4 */
:root {
      --bg-main: #0B0F19;
      --bg-card: #111827;
      --accent-cyan: #06B6D4;
      --accent-emerald: #10B981;
      --accent-amber: #F59E0B;
      --text-muted: #9CA3AF;
      --border-subtle: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: #F9FAFB;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .grid-pattern {
      background-size: 32px 32px;
      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);
    }
    .code-font {
      font-family: "JetBrains Mono", "Fira Code", monospace;
    }
    /* 自定义美化滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #0B0F19;
    }
    ::-webkit-scrollbar-thumb {
      background: #1F2937;
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #06B6D4;
    }