/* roulang page: index */
:root {
            --bg-base: #0c0d0f;
            --bg-dark: #16181d;
            --bg-card: #1e2229;
            --amber-gold: #e5a950;
            --flame-glow: #ff4d2e;
            --text-primary: #f4f4f6;
            --text-secondary: #a8adb8;
            --text-muted: #646a78;
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-primary);
            font-family: 'Noto Sans SC', sans-serif;
            overflow-x: hidden;
            letter-spacing: -0.01em;
        }

        /* 杂志胶片噪点质感 */
        .film-noise {
            background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0);
            background-size: 24px 24px;
        }

        /* 边框发光与弥散阴影 */
        .cinema-glow-border {
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .cinema-glow-border:hover {
            border-color: rgba(229, 169, 80, 0.45);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.85), 0 0 15px -3px rgba(229, 169, 80, 0.15);
        }

        /* 胶片打孔穿透步进轴 */
        .film-strip-step::before {
            content: '';
            position: absolute;
            top: -12px;
            left: 0;
            right: 0;
            height: 6px;
            background-image: repeating-linear-gradient(90deg, #e5a950 0, #e5a950 8px, transparent 8px, transparent 16px);
            opacity: 0.25;
        }

        /* 侧边抽屉动画 */
        .drawer-overlay {
            transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
        }
        .drawer-content {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .drawer-open .drawer-overlay {
            opacity: 1;
            visibility: visible;
        }
        .drawer-open .drawer-content {
            transform: translateX(0);
        }

        /* FAQ 手风琴展开样式 */
        .faq-item[open] summary svg {
            transform: rotate(180deg);
            color: #e5a950;
        }

/* roulang page: category2 */
:root {
      --bg-base: #0c0d0f;
      --bg-dark: #16181d;
      --bg-card: #1e2229;
      --amber-gold: #e5a950;
      --flame-glow: #ff4d2e;
      --text-primary: #f4f4f6;
      --text-secondary: #a8adb8;
      --text-muted: #646a78;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: 'Noto Sans SC', sans-serif;
      overflow-x: hidden;
      letter-spacing: -0.01em;
    }
    .cinema-glow-border {
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .cinema-glow-border:hover {
      border-color: rgba(229, 169, 80, 0.45);
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.85), 0 0 15px -3px rgba(229, 169, 80, 0.15);
    }
    .drawer-overlay {
      transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
    }
    .drawer-content {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .drawer-open .drawer-overlay {
      opacity: 1;
      visibility: visible;
    }
    .drawer-open .drawer-content {
      transform: translateX(0);
    }
    .faq-item[open] summary svg {
      transform: rotate(180deg);
      color: #e5a950;
    }
    /* 胶片颗粒暗纹与细边线 */
    .film-grain {
      background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0);
      background-size: 24px 24px;
    }
    .mag-quote::before {
      content: "“";
      font-family: 'Syne', serif;
      font-size: 3.5rem;
      line-height: 0;
      vertical-align: -1.2rem;
      color: #e5a950;
      opacity: 0.35;
      margin-right: 0.25rem;
    }

/* roulang page: category1 */
:root {
      --bg-base: #0c0d0f;
      --bg-dark: #16181d;
      --bg-card: #1e2229;
      --amber-gold: #e5a950;
      --flame-glow: #ff4d2e;
      --text-primary: #f4f4f6;
      --text-secondary: #a8adb8;
      --text-muted: #646a78;
    }
    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: 'Noto Sans SC', sans-serif;
      overflow-x: hidden;
      letter-spacing: -0.01em;
    }
    .cinema-glow-border {
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .cinema-glow-border:hover {
      border-color: rgba(229, 169, 80, 0.45);
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.85), 0 0 15px -3px rgba(229, 169, 80, 0.15);
    }
    .drawer-overlay {
      transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
    }
    .drawer-content {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .drawer-open .drawer-overlay {
      opacity: 1;
      visibility: visible;
    }
    .drawer-open .drawer-content {
      transform: translateX(0);
    }
    .faq-item[open] summary svg {
      transform: rotate(180deg);
      color: #e5a950;
    }
    .filter-btn.active {
      background-color: #e5a950;
      color: #0c0d0f;
      border-color: #e5a950;
      font-weight: 700;
    }
    .aspect-16-9 {
      aspect-ratio: 16 / 9;
    }