/* roulang page: index */
:root {
            --bg-deep: #0B0F17;
            --bg-card: #0F141C;
            --border-line: #1E293B;
            --accent-cyan: #0EA5E9;
            --accent-green: #10B981;
            --accent-amber: #F59E0B;
            --text-main: #F8FAFC;
            --text-muted: #94A3B8;
        }
        html { scroll-behavior: smooth; }
        body {
            background-color: #0F141C;
            color: #F8FAFC;
            font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            overflow-x: hidden;
        }
        .code-preview-scroll::-webkit-scrollbar {
            height: 6px;
            width: 6px;
        }
        .code-preview-scroll::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 3px;
        }
        .nav-link {
            position: relative;
            transition: color 0.25s ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0%;
            height: 2px;
            background-color: var(--accent-cyan);
            transition: width 0.25s ease;
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        .glass-card {
            background: rgba(15, 20, 28, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .gold-glow-card {
            border: 1px solid rgba(245, 158, 11, 0.25);
            box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.12);
        }

/* roulang page: category2 */
:root {
      --bg-deep: #0B0F17;
      --bg-card: #0F141C;
      --border-line: #1E293B;
      --accent-cyan: #0EA5E9;
      --accent-green: #10B981;
      --accent-amber: #F59E0B;
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
    }
    html { scroll-behavior: smooth; }
    body {
      background-color: #0F141C;
      color: #F8FAFC;
      font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
    }
    .nav-link {
      position: relative;
      transition: color 0.25s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0%;
      height: 2px;
      background-color: var(--accent-cyan);
      transition: width 0.25s ease;
    }
    .nav-link:hover::after, .nav-link.active::after {
      width: 100%;
    }
    .glass-card {
      background: rgba(15, 20, 28, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .gold-glow-card {
      border: 1px solid rgba(245, 158, 11, 0.25);
      box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.12);
    }
    /* 手风琴折叠平滑 */
    details summary::-webkit-details-marker { display: none; }
    details[open] summary .faq-icon { transform: rotate(180deg); }

/* roulang page: category1 */
:root {
      --bg-deep: #0B0F17;
      --bg-card: #0F141C;
      --border-line: #1E293B;
      --accent-cyan: #0EA5E9;
      --accent-green: #10B981;
      --accent-amber: #F59E0B;
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
    }
    html { scroll-behavior: smooth; }
    body {
      background-color: #0F141C;
      color: #F8FAFC;
      font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
    }
    .nav-link {
      position: relative;
      transition: color 0.25s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0%;
      height: 2px;
      background-color: var(--accent-cyan);
      transition: width 0.25s ease;
    }
    .nav-link:hover::after, .nav-link.active::after {
      width: 100%;
    }
    .glass-card {
      background: rgba(15, 20, 28, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .gold-glow-card {
      border: 1px solid rgba(245, 158, 11, 0.25);
      box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.12);
    }
    .chip-filter-btn.active {
      background-color: #0EA5E9;
      color: #FFFFFF;
      border-color: #0EA5E9;
    }
    details[open] summary svg {
      transform: rotate(180deg);
    }

/* roulang page: category4 */
:root {
      --bg-deep: #0B0F17;
      --bg-card: #0F141C;
      --border-line: #1E293B;
      --accent-cyan: #0EA5E9;
      --accent-green: #10B981;
      --accent-amber: #F59E0B;
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
    }
    html { scroll-behavior: smooth; }
    body {
      background-color: #0F141C;
      color: #F8FAFC;
      font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
    }
    .nav-link {
      position: relative;
      transition: color 0.25s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0%;
      height: 2px;
      background-color: var(--accent-cyan);
      transition: width 0.25s ease;
    }
    .nav-link:hover::after, .nav-link.active::after {
      width: 100%;
    }
    .glass-card {
      background: rgba(15, 20, 28, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .gold-glow-card {
      border: 1px solid rgba(245, 158, 11, 0.25);
      box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.12);
    }
    .amber-badge {
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
      color: #FBBF24;
    }
    .cyan-badge {
      background: rgba(14, 165, 233, 0.12);
      border: 1px solid rgba(14, 165, 233, 0.3);
      color: #38BDF8;
    }
    .green-badge {
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.3);
      color: #34D399;
    }
    details[open] summary svg {
      transform: rotate(180deg);
    }
    .roadmap-line {
      background: linear-gradient(90deg, #0EA5E9 0%, #10B981 50%, #F59E0B 100%);
    }

/* roulang page: category3 */
:root {
      --bg-deep: #0B0F17;
      --bg-card: #0F141C;
      --border-line: #1E293B;
      --accent-cyan: #0EA5E9;
      --accent-green: #10B981;
      --accent-amber: #F59E0B;
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
    }
    html { scroll-behavior: smooth; }
    body {
      background-color: #0F141C;
      color: #F8FAFC;
      font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
    }
    .nav-link {
      position: relative;
      transition: color 0.25s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0%;
      height: 2px;
      background-color: var(--accent-cyan);
      transition: width 0.25s ease;
    }
    .nav-link:hover::after, .nav-link.active::after {
      width: 100%;
    }
    .glass-card {
      background: rgba(15, 20, 28, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .cinema-backdrop {
      position: relative;
      background-size: cover;
      background-position: center;
    }
    .cinema-backdrop::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(11,15,23,0.82) 0%, rgba(15,20,28,0.95) 75%, #0F141C 100%);
      pointer-events: none;
    }
    .filter-pill.active {
      background-color: #0EA5E9;
      color: #FFFFFF;
      border-color: #0EA5E9;
      box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
    }
    details summary::-webkit-details-marker {
      display: none;
    }