/* roulang page: index */
:root {
            --bg-main: #0B0D14;
            --card-surface: #131722;
            --card-elevated: #1B2234;
            --text-heading: #F8FAFC;
            --text-body: #94A3B8;
            --text-muted: #64748B;
            --color-primary: #8B5CF6;
            --color-accent: #EC4899;
        }
        body {
            background-color: var(--bg-main);
            color: var(--text-body);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            overflow-x: hidden;
        }
        .text-glow {
            text-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
        }
        .border-glow {
            box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
        }
        .pill-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            background: rgba(88, 28, 135, 0.35);
            color: #D8B4FE;
            border: 1px solid rgba(168, 85, 247, 0.3);
            backdrop-filter: blur(4px);
        }
        .btn-brand {
            background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 50%, #F59E0B 100%);
            color: #FFFFFF;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-brand:hover {
            box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.5);
            transform: translateY(-2px) scale(1.02);
        }
        .btn-brand:active {
            transform: translateY(0) scale(0.98);
        }
        .card-cinematic {
            background: #131722;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1.5rem;
            transition: all 0.3s ease;
        }
        .card-cinematic:hover {
            border-color: rgba(139, 92, 246, 0.4);
            box-shadow: 0 20px 30px -10px rgba(59, 7, 100, 0.6);
            transform: translateY(-4px);
        }
        details summary::-webkit-details-marker {
            display:none;
        }

/* roulang page: category2 */
:root {
      --bg-main: #0B0D14;
      --card-surface: #131722;
      --card-elevated: #1B2234;
      --text-heading: #F8FAFC;
      --text-body: #94A3B8;
      --text-muted: #64748B;
      --color-primary: #8B5CF6;
      --color-accent: #EC4899;
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-body);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }
    .text-glow {
      text-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
    }
    .border-glow {
      box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
    }
    .pill-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background: rgba(88, 28, 135, 0.35);
      color: #D8B4FE;
      border: 1px solid rgba(168, 85, 247, 0.3);
      backdrop-filter: blur(4px);
    }
    .btn-brand {
      background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 50%, #F59E0B 100%);
      color: #FFFFFF;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-brand:hover {
      box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.5);
      transform: translateY(-2px) scale(1.02);
    }
    .btn-brand:active {
      transform: translateY(0) scale(0.98);
    }
    .card-cinematic {
      background: #131722;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 1.5rem;
      transition: all 0.3s ease;
    }
    .card-cinematic:hover {
      border-color: rgba(139, 92, 246, 0.4);
      box-shadow: 0 20px 30px -10px rgba(59, 7, 100, 0.6);
      transform: translateY(-4px);
    }
    .progress-circle {
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

/* roulang page: category1 */
:root {
      --bg-main: #0B0D14;
      --card-surface: #131722;
      --card-elevated: #1B2234;
      --text-heading: #F8FAFC;
      --text-body: #94A3B8;
      --text-muted: #64748B;
      --color-primary: #8B5CF6;
      --color-accent: #EC4899;
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-body);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }
    .text-glow {
      text-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
    }
    .border-glow {
      box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
    }
    .pill-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background: rgba(88, 28, 135, 0.35);
      color: #D8B4FE;
      border: 1px solid rgba(168, 85, 247, 0.3);
      backdrop-filter: blur(4px);
    }
    .btn-brand {
      background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 50%, #F59E0B 100%);
      color: #FFFFFF;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-brand:hover {
      box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.5);
      transform: translateY(-2px) scale(1.02);
    }
    .btn-brand:active {
      transform: translateY(0) scale(0.98);
    }
    .card-cinematic {
      background: #131722;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 1.5rem;
      transition: all 0.3s ease;
    }
    .card-cinematic:hover {
      border-color: rgba(139, 92, 246, 0.4);
      box-shadow: 0 20px 30px -10px rgba(59, 7, 100, 0.6);
      transform: translateY(-4px);
    }
    /* 筛选条件高亮 */
    .filter-item-active {
      background: rgba(139, 92, 246, 0.25);
      color: #F8FAFC;
      border: 1px solid rgba(168, 85, 247, 0.5);
      font-weight: 600;
    }

/* roulang page: category3 */
:root {
      --bg-main: #0B0D14;
      --card-surface: #131722;
      --card-elevated: #1B2234;
      --text-heading: #F8FAFC;
      --text-body: #94A3B8;
      --text-muted: #64748B;
      --color-primary: #8B5CF6;
      --color-accent: #EC4899;
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-body);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      overflow-x: hidden;
    }
    .text-glow {
      text-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
    }
    .border-glow {
      box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
    }
    .pill-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      background: rgba(88, 28, 135, 0.35);
      color: #D8B4FE;
      border: 1px solid rgba(168, 85, 247, 0.3);
      backdrop-filter: blur(4px);
    }
    .btn-brand {
      background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 50%, #F59E0B 100%);
      color: #FFFFFF;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-brand:hover {
      box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.5);
      transform: translateY(-2px) scale(1.02);
    }
    .btn-brand:active {
      transform: translateY(0) scale(0.98);
    }
    .card-cinematic {
      background: #131722;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 1.5rem;
      transition: all 0.3s ease;
    }
    .card-cinematic:hover {
      border-color: rgba(139, 92, 246, 0.4);
      box-shadow: 0 20px 30px -10px rgba(59, 7, 100, 0.6);
      transform: translateY(-4px);
    }

/* roulang page: category4 */
:root {
    --bg-main: #0B0D14;
    --card-surface: #131722;
    --card-elevated: #1B2234;
    --text-heading: #F8FAFC;
    --text-body: #94A3B8;
    --text-muted: #64748B;
    --color-primary: #8B5CF6;
    --color-accent: #EC4899;
  }
  body {
    background-color: var(--bg-main);
    color: var(--text-body);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    overflow-x: hidden;
  }
  .text-glow {
    text-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
  }
  .border-glow {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
  }
  .pill-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(88, 28, 135, 0.35);
    color: #D8B4FE;
    border: 1px solid rgba(168, 85, 247, 0.3);
    backdrop-filter: blur(4px);
  }
  .btn-brand {
    background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 50%, #F59E0B 100%);
    color: #FFFFFF;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .btn-brand:hover {
    box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.5);
    transform: translateY(-2px) scale(1.02);
  }
  .btn-brand:active {
    transform: translateY(0) scale(0.98);
  }
  .card-cinematic {
    background: #131722;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    transition: all 0.3s ease;
  }
  .card-cinematic:hover {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 20px 30px -10px rgba(59, 7, 100, 0.6);
    transform: translateY(-4px);
  }
  /* 自定义折叠手风琴面板 */
  details > summary {
    list-style: none;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }