/* roulang page: index */
:root {
      --bg-canvas: #0a0c16;
      --bg-panel: #111424;
      --bg-card: #181c32;
      --primary-pink: #ec4899;
      --primary-purple: #8b5cf6;
      --accent-cyan: #06b6d4;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --text-dim: #64748b;
      --border-dark: rgba(139, 92, 246, 0.25);
    }
    body {
      background-color: var(--bg-canvas);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .hero-glow-bg {
      background: radial-gradient(circle at 50% 30%, rgba(139, 92, 246, 0.22) 0%, rgba(236, 72, 153, 0.12) 35%, rgba(10, 12, 22, 0.95) 75%);
    }
    .custom-card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card-border:hover {
      border-color: rgba(236, 72, 153, 0.6);
      box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
      transform: translateY(-4px);
    }
    .badge-capsule {
      background: rgba(139, 92, 246, 0.15);
      border: 1px solid rgba(236, 72, 153, 0.35);
      color: #f472b6;
    }

/* roulang page: category1 */
:root {
      --bg-canvas: #0a0c16;
      --bg-panel: #111424;
      --bg-card: #181c32;
      --primary-pink: #ec4899;
      --primary-purple: #8b5cf6;
      --accent-cyan: #06b6d4;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --text-dim: #64748b;
      --border-dark: rgba(139, 92, 246, 0.25);
    }
    body {
      background-color: var(--bg-canvas);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card-border:hover {
      border-color: rgba(236, 72, 153, 0.6);
      box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
      transform: translateY(-4px);
    }
    .badge-capsule {
      background: rgba(139, 92, 246, 0.15);
      border: 1px solid rgba(236, 72, 153, 0.35);
      color: #f472b6;
    }
    .panel-header-glow {
      background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.18) 0%, rgba(17, 20, 36, 0.95) 75%);
    }

/* roulang page: category2 */
:root {
      --bg-canvas: #0a0c16;
      --bg-panel: #111424;
      --bg-card: #181c32;
      --primary-pink: #ec4899;
      --primary-purple: #8b5cf6;
      --accent-cyan: #06b6d4;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --text-dim: #64748b;
      --border-dark: rgba(139, 92, 246, 0.25);
    }
    body {
      background-color: var(--bg-canvas);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card-border:hover {
      border-color: rgba(236, 72, 153, 0.6);
      box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
      transform: translateY(-4px);
    }
    .badge-capsule {
      background: rgba(139, 92, 246, 0.15);
      border: 1px solid rgba(236, 72, 153, 0.35);
      color: #f472b6;
    }
    .hero-skew-cut {
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }
    @media (max-width: 768px) {
      .hero-skew-cut {
        clip-path: none;
      }
    }

/* roulang page: category3 */
:root {
      --bg-canvas: #0a0c16;
      --bg-panel: #111424;
      --bg-card: #181c32;
      --primary-pink: #ec4899;
      --primary-purple: #8b5cf6;
      --accent-cyan: #06b6d4;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --text-dim: #64748b;
      --border-dark: rgba(139, 92, 246, 0.25);
    }
    body {
      background-color: var(--bg-canvas);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card-border:hover {
      border-color: rgba(236, 72, 153, 0.6);
      box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
      transform: translateY(-3px);
    }
    .badge-capsule {
      background: rgba(139, 92, 246, 0.15);
      border: 1px solid rgba(236, 72, 153, 0.35);
      color: #f472b6;
    }
    .badge-cyan {
      background: rgba(6, 182, 212, 0.15);
      border: 1px solid rgba(6, 182, 212, 0.4);
      color: #22d3ee;
    }
    .badge-amber {
      background: rgba(245, 158, 11, 0.15);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #fbbf24;
    }

/* roulang page: category4 */
:root {
      --bg-canvas: #0a0c16;
      --bg-panel: #111424;
      --bg-card: #181c32;
      --primary-pink: #ec4899;
      --primary-purple: #8b5cf6;
      --accent-cyan: #06b6d4;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --text-dim: #64748b;
      --border-dark: rgba(139, 92, 246, 0.25);
    }
    body {
      background-color: var(--bg-canvas);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .hero-glow-bg {
      background: radial-gradient(circle at 50% 30%, rgba(139, 92, 246, 0.22) 0%, rgba(236, 72, 153, 0.12) 35%, rgba(10, 12, 22, 0.95) 75%);
    }
    .custom-card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card-border:hover {
      border-color: rgba(236, 72, 153, 0.6);
      box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
      transform: translateY(-4px);
    }
    .badge-capsule {
      background: rgba(139, 92, 246, 0.15);
      border: 1px solid rgba(236, 72, 153, 0.35);
      color: #f472b6;
    }
    .rank-num-top {
      background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

/* roulang page: category5 */
:root {
    --bg-canvas: #0a0c16;
    --bg-panel: #111424;
    --bg-card: #181c32;
    --primary-pink: #ec4899;
    --primary-purple: #8b5cf6;
    --accent-cyan: #06b6d4;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    --border-dark: rgba(139, 92, 246, 0.25);
  }
  body {
    background-color: var(--bg-canvas);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    overflow-x: hidden;
  }
  .hero-glow-bg {
    background: radial-gradient(circle at 50% 30%, rgba(139, 92, 246, 0.22) 0%, rgba(236, 72, 153, 0.12) 35%, rgba(10, 12, 22, 0.95) 75%);
  }
  .custom-card-border {
    border: 1px solid var(--border-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .custom-card-border:hover {
    border-color: rgba(236, 72, 153, 0.6);
    box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
    transform: translateY(-4px);
  }
  .badge-capsule {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(236, 72, 153, 0.35);
    color: #f472b6;
  }
  .tech-terminal {
    background: #0d101d;
    border: 1px solid rgba(6, 182, 212, 0.3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }