/* roulang page: index */
:root {
      --bg-main: #0a0b0e;
      --bg-card: #181a22;
      --bg-card-hover: #212430;
      --brand-primary: #ff2a5f;
      --brand-hover: #e01f50;
      --text-main: #f1f5f9;
      --text-sub: #94a3b8;
      --border-dark: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-scrollbar::-webkit-scrollbar {
      height: 4px;
      width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #2d3243;
      border-radius: 4px;
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 20%, rgba(255, 42, 95, 0.18) 0%, rgba(10, 11, 14, 0) 70%);
    }
    .card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s ease;
    }
    .card-border:hover {
      border-color: rgba(255, 42, 95, 0.4);
    }
    .text-shadow-sm {
      text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }

/* roulang page: category1 */
:root {
      --bg-main: #0a0b0e;
      --bg-card: #181a22;
      --bg-card-hover: #212430;
      --brand-primary: #ff2a5f;
      --brand-hover: #e01f50;
      --text-main: #f1f5f9;
      --text-sub: #94a3b8;
      --border-dark: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 15%, rgba(255, 42, 95, 0.16) 0%, rgba(10, 11, 14, 0) 70%);
    }
    .card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s ease;
    }
    .card-border:hover {
      border-color: rgba(255, 42, 95, 0.4);
    }
    .text-shadow-sm {
      text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }
    .filter-btn-active {
      background-color: var(--brand-primary);
      color: #ffffff;
      border-color: var(--brand-primary);
    }
    .scrollbar-none::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-none {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category2 */
:root {
      --bg-main: #0a0b0e;
      --bg-card: #181a22;
      --bg-card-hover: #212430;
      --brand-primary: #ff2a5f;
      --brand-hover: #e01f50;
      --text-main: #f1f5f9;
      --text-sub: #94a3b8;
      --border-dark: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 15%, rgba(255, 42, 95, 0.15) 0%, rgba(10, 11, 14, 0) 70%);
    }
    .card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s ease;
    }
    .card-border:hover {
      border-color: rgba(255, 42, 95, 0.4);
    }
    .scrollbar-none::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-none {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

/* roulang page: category3 */
:root {
      --bg-main: #0a0b0e;
      --bg-card: #181a22;
      --bg-card-hover: #212430;
      --brand-primary: #ff2a5f;
      --brand-hover: #e01f50;
      --text-main: #f1f5f9;
      --text-sub: #94a3b8;
      --border-dark: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 20%, rgba(255, 42, 95, 0.18) 0%, rgba(10, 11, 14, 0) 70%);
    }
    .card-border {
      border: 1px solid var(--border-dark);
      transition: all 0.3s ease;
    }
    .card-border:hover {
      border-color: rgba(255, 42, 95, 0.4);
    }
    .text-shadow-sm {
      text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
