/* roulang page: index */
:root {
            --bg-base: #0c0a14;
            --bg-surface: #130e24;
            --bg-card: rgba(29, 21, 51, 0.72);
            --bg-card-hover: rgba(43, 31, 74, 0.88);
            --primary-purple: #8b5cf6;
            --neon-pink: #ec4899;
            --cyan-sky: #06b6d4;
            --amber-gold: #f59e0b;
            --emerald-online: #10b981;
            --text-main: #f8fafc;
            --text-sub: #cbd5e1;
            --text-muted: #94a3b8;
            --border-glow: rgba(139, 92, 246, 0.28);
            --border-highlight: rgba(236, 72, 153, 0.45);
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-sub);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }

        /* 沉浸紫黑渐变背景 */
        .ambient-bg {
            background: radial-gradient(circle at 50% 0%, #1f143d 0%, #0c0a14 75%);
        }

        /* 品牌霓虹文字渐变 */
        .text-neon-gradient {
            background: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #38bdf8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* 品牌核心主按钮 */
        .btn-brand-glow {
            background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
            box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .btn-brand-glow::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: rotate(30deg);
            transition: all 0.6s ease;
        }
        .btn-brand-glow:hover::after {
            left: 100%;
        }
        .btn-brand-glow:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 28px rgba(236, 72, 153, 0.55);
        }

        /* 次级磨砂按钮 */
        .btn-glass-sub {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(8px);
            color: #f8fafc;
            transition: all 0.25s ease;
        }
        .btn-glass-sub:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: var(--primary-purple);
            color: #ffffff;
        }

        /* 圆角大卡规范 */
        .vault-card {
            background: var(--bg-card);
            border-radius: 20px;
            border: 1px solid var(--border-glow);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
            transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
            backdrop-filter: blur(12px);
        }
        .vault-card:hover {
            transform: translateY(-6px);
            background: var(--bg-card-hover);
            border-color: var(--border-highlight);
            box-shadow: 0 16px 40px rgba(139, 92, 246, 0.22);
        }

        /* 徽章规范 */
        .badge-capsule {
            border-radius: 9999px;
            font-size: 0.75rem;
            padding: 0.2rem 0.65rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            backdrop-filter: blur(6px);
        }

        /* 导航线路节点选择器指示灯 */
        .ping-indicator {
            position: relative;
            display: inline-flex;
            height: 8px;
            width: 8px;
        }
        .ping-indicator span:first-child {
            animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
            position: absolute;
            display: inline-flex;
            height: 100%;
            width: 100%;
            border-radius: 9999px;
            background-color: var(--emerald-online);
            opacity: 0.75;
        }
        .ping-indicator span:last-child {
            position: relative;
            display: inline-flex;
            border-radius: 9999px;
            height: 8px;
            width: 8px;
            background-color: var(--emerald-online);
        }

        @keyframes ping {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0c0a14;
        }
        ::-webkit-scrollbar-thumb {
            background: #2b1f4a;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #8b5cf6;
        }

/* roulang page: category1 */
:root {
  --bg-base: #0c0a14;
  --bg-surface: #130e24;
  --bg-card: rgba(29, 21, 51, 0.72);
  --bg-card-hover: rgba(43, 31, 74, 0.88);
  --primary-purple: #8b5cf6;
  --neon-pink: #ec4899;
  --cyan-sky: #06b6d4;
  --amber-gold: #f59e0b;
  --emerald-online: #10b981;
  --text-main: #f8fafc;
  --text-sub: #cbd5e1;
  --text-muted: #94a3b8;
  --border-glow: rgba(139, 92, 246, 0.28);
  --border-highlight: rgba(236, 72, 153, 0.45);
}
body {
  background-color: var(--bg-base);
  color: var(--text-sub);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
}
.text-neon-gradient {
  background: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-brand-glow {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.btn-brand-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: rotate(30deg);
  transition: all 0.6s ease;
}
.btn-brand-glow:hover::after {
  left: 100%;
}
.btn-brand-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(236, 72, 153, 0.55);
}
.btn-glass-sub {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  color: #f8fafc;
  transition: all 0.25s ease;
}
.btn-glass-sub:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--primary-purple);
  color: #ffffff;
}
.vault-card {
  background: var(--bg-card);
  border-radius: 20px;
  border: 1px solid var(--border-glow);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(12px);
}
.vault-card:hover {
  transform: translateY(-6px);
  background: var(--bg-card-hover);
  border-color: var(--border-highlight);
  box-shadow: 0 16px 40px rgba(139, 92, 246, 0.22);
}
.badge-capsule {
  border-radius: 9999px;
  font-size: 0.75rem;
  padding: 0.2rem 0.65rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  backdrop-filter: blur(6px);
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* roulang page: category2 */
:root {
      --bg-base: #0c0a14;
      --bg-surface: #130e24;
      --bg-card: rgba(29, 21, 51, 0.72);
      --bg-card-hover: rgba(43, 31, 74, 0.88);
      --primary-purple: #8b5cf6;
      --neon-pink: #ec4899;
      --cyan-sky: #06b6d4;
      --amber-gold: #f59e0b;
      --emerald-online: #10b981;
      --text-main: #f8fafc;
      --text-sub: #cbd5e1;
      --text-muted: #94a3b8;
      --border-glow: rgba(139, 92, 246, 0.28);
      --border-highlight: rgba(236, 72, 153, 0.45);
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-sub);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .text-neon-gradient {
      background: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #38bdf8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-brand-glow {
      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
      box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .btn-brand-glow::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transform: rotate(30deg);
      transition: all 0.6s ease;
    }
    .btn-brand-glow:hover::after {
      left: 100%;
    }
    .btn-brand-glow:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(236, 72, 153, 0.55);
    }
    .btn-glass-sub {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      color: #f8fafc;
      transition: all 0.25s ease;
    }
    .btn-glass-sub:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: var(--primary-purple);
      color: #ffffff;
    }
    .vault-card {
      background: var(--bg-card);
      border-radius: 20px;
      border: 1px solid var(--border-glow);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
      transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
      backdrop-filter: blur(12px);
    }
    .vault-card:hover {
      transform: translateY(-6px);
      background: var(--bg-card-hover);
      border-color: var(--border-highlight);
      box-shadow: 0 16px 40px rgba(139, 92, 246, 0.22);
    }
    .badge-capsule {
      border-radius: 9999px;
      font-size: 0.75rem;
      padding: 0.2rem 0.65rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      backdrop-filter: blur(6px);
    }
    .filter-tag {
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .filter-tag.active {
      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 2px 10px rgba(236, 72, 153, 0.35);
    }

/* roulang page: category3 */
:root {
      --bg-base: #0c0a14;
      --bg-surface: #130e24;
      --bg-card: rgba(29, 21, 51, 0.72);
      --bg-card-hover: rgba(43, 31, 74, 0.88);
      --primary-purple: #8b5cf6;
      --neon-pink: #ec4899;
      --cyan-sky: #06b6d4;
      --amber-gold: #f59e0b;
      --emerald-online: #10b981;
      --text-main: #f8fafc;
      --text-sub: #cbd5e1;
      --text-muted: #94a3b8;
      --border-glow: rgba(139, 92, 246, 0.28);
      --border-highlight: rgba(236, 72, 153, 0.45);
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-sub);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .text-neon-gradient {
      background: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #38bdf8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-brand-glow {
      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
      box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .btn-brand-glow::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transform: rotate(30deg);
      transition: all 0.6s ease;
    }
    .btn-brand-glow:hover::after {
      left: 100%;
    }
    .btn-brand-glow:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(236, 72, 153, 0.55);
    }
    .btn-glass-sub {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      color: #f8fafc;
      transition: all 0.25s ease;
    }
    .btn-glass-sub:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: var(--primary-purple);
      color: #ffffff;
    }
    .vault-card {
      background: var(--bg-card);
      border-radius: 20px;
      border: 1px solid var(--border-glow);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
      transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
      backdrop-filter: blur(12px);
    }
    .vault-card:hover {
      transform: translateY(-6px);
      background: var(--bg-card-hover);
      border-color: var(--border-highlight);
      box-shadow: 0 16px 40px rgba(139, 92, 246, 0.22);
    }
    .badge-capsule {
      border-radius: 9999px;
      font-size: 0.75rem;
      padding: 0.2rem 0.65rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      backdrop-filter: blur(6px);
    }
    .node-track-line {
      background: linear-gradient(90deg, #8b5cf6, #ec4899, #06b6d4);
      height: 3px;
    }

/* roulang page: category4 */
:root {
            --bg-base: #0c0a14;
            --bg-surface: #130e24;
            --bg-card: rgba(29, 21, 51, 0.72);
            --bg-card-hover: rgba(43, 31, 74, 0.88);
            --primary-purple: #8b5cf6;
            --neon-pink: #ec4899;
            --cyan-sky: #06b6d4;
            --amber-gold: #f59e0b;
            --emerald-online: #10b981;
            --text-main: #f8fafc;
            --text-sub: #cbd5e1;
            --text-muted: #94a3b8;
            --border-glow: rgba(139, 92, 246, 0.28);
            --border-highlight: rgba(236, 72, 153, 0.45);
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-sub);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .text-neon-gradient {
            background: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #38bdf8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .btn-brand-glow {
            background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
            box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .btn-brand-glow::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: rotate(30deg);
            transition: all 0.6s ease;
        }
        .btn-brand-glow:hover::after {
            left: 100%;
        }
        .btn-brand-glow:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 28px rgba(236, 72, 153, 0.55);
        }
        .btn-glass-sub {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(8px);
            color: #f8fafc;
            transition: all 0.25s ease;
        }
        .btn-glass-sub:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: var(--primary-purple);
            color: #ffffff;
        }
        .vault-card {
            background: var(--bg-card);
            border-radius: 20px;
            border: 1px solid var(--border-glow);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
            transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
            backdrop-filter: blur(12px);
        }
        .vault-card:hover {
            transform: translateY(-6px);
            background: var(--bg-card-hover);
            border-color: var(--border-highlight);
            box-shadow: 0 16px 40px rgba(139, 92, 246, 0.22);
        }
        .badge-capsule {
            border-radius: 9999px;
            font-size: 0.75rem;
            padding: 0.2rem 0.65rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            backdrop-filter: blur(6px);
        }
        .filter-btn-active {
            background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
            color: #ffffff !important;
            font-weight: 600;
            border-color: transparent !important;
            box-shadow: 0 2px 10px rgba(236, 72, 153, 0.3);
        }

/* roulang page: category5 */
:root {
      --bg-base: #0c0a14;
      --bg-surface: #130e24;
      --bg-card: rgba(29, 21, 51, 0.72);
      --bg-card-hover: rgba(43, 31, 74, 0.88);
      --primary-purple: #8b5cf6;
      --neon-pink: #ec4899;
      --cyan-sky: #06b6d4;
      --amber-gold: #f59e0b;
      --emerald-online: #10b981;
      --text-main: #f8fafc;
      --text-sub: #cbd5e1;
      --text-muted: #94a3b8;
      --border-glow: rgba(139, 92, 246, 0.28);
      --border-highlight: rgba(236, 72, 153, 0.45);
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-sub);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .text-neon-gradient {
      background: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #38bdf8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .btn-brand-glow {
      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
      box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .btn-brand-glow::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transform: rotate(30deg);
      transition: all 0.6s ease;
    }
    .btn-brand-glow:hover::after {
      left: 100%;
    }
    .btn-brand-glow:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(236, 72, 153, 0.55);
    }
    .btn-glass-sub {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      color: #f8fafc;
      transition: all 0.25s ease;
    }
    .btn-glass-sub:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: var(--primary-purple);
      color: #ffffff;
    }
    .vault-card {
      background: var(--bg-card);
      border-radius: 20px;
      border: 1px solid var(--border-glow);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
      transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
      backdrop-filter: blur(12px);
    }
    .vault-card:hover {
      transform: translateY(-6px);
      background: var(--bg-card-hover);
      border-color: var(--border-highlight);
      box-shadow: 0 16px 40px rgba(139, 92, 246, 0.22);
    }
    .badge-capsule {
      border-radius: 9999px;
      font-size: 0.75rem;
      padding: 0.2rem 0.65rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      backdrop-filter: blur(6px);
    }
    .countdown-ring {
      background: conic-gradient(#ec4899 0% 72%, rgba(255,255,255,0.08) 72% 100%);
    }