/* roulang page: index */
:root {
      --bg-main: #0B0F17;
      --bg-alt: #111827;
      --card-bg: #1F2937;
      --primary: #10B981;
      --accent: #06B6D4;
      --text-main: #F9FAFB;
      --text-muted: #9CA3AF;
      --border-color: #374151;
    }
    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;
    }
    .text-glow {
      text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
    .neon-border {
      border: 1px solid rgba(16, 185, 129, 0.3);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
    }
    .neon-border:hover {
      border-color: rgba(16, 185, 129, 0.7);
      box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);
    }
    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    .animate-marquee {
      display: inline-flex;
      white-space: nowrap;
      animation: marquee 35s linear infinite;
    }
    .animate-marquee:hover {
      animation-play-state: paused;
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(11, 15, 23, 0.6) 0%, rgba(11, 15, 23, 0.95) 80%, #0B0F17 100%);
    }

/* roulang page: article */
:root {
      --bg-main: #0B0F17;
      --bg-alt: #111827;
      --card-bg: #1F2937;
      --primary: #10B981;
      --accent: #06B6D4;
      --text-main: #F9FAFB;
      --text-muted: #9CA3AF;
      --border-color: #374151;
    }
    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;
    }
    .text-glow {
      text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
    .neon-border {
      border: 1px solid rgba(16, 185, 129, 0.3);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
    }
    .neon-border:hover {
      border-color: rgba(16, 185, 129, 0.7);
      box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(11, 15, 23, 0.6) 0%, rgba(11, 15, 23, 0.95) 80%, #0B0F17 100%);
    }
    .article-body h2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: #F9FAFB;
      margin-top: 2rem;
      margin-bottom: 1rem;
      padding-left: 0.75rem;
      border-left: 4px solid var(--primary);
    }
    .article-body h3 {
      font-size: 1.25rem;
      font-weight: 600;
      color: #E5E7EB;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }
    .article-body p {
      font-size: 1.0625rem;
      line-height: 1.85;
      color: #D1D5DB;
      margin-bottom: 1.25rem;
    }
    .article-body ul, .article-body ol {
      margin-bottom: 1.25rem;
      padding-left: 1.5rem;
      color: #D1D5DB;
    }
    .article-body li {
      margin-bottom: 0.5rem;
      line-height: 1.7;
    }
    .article-body blockquote {
      border-left: 4px solid var(--accent);
      background-color: rgba(31, 41, 55, 0.6);
      padding: 1rem 1.25rem;
      margin: 1.5rem 0;
      border-radius: 0 0.5rem 0.5rem 0;
      color: #9CA3AF;
      font-style: italic;
    }
    .article-body img {
      max-width: 100%;
      height: auto;
      border-radius: 0.75rem;
      border: 1px solid #374151;
      margin: 1.5rem 0;
    }

/* roulang page: category1 */
:root {
      --bg-main: #0B0F17;
      --bg-alt: #111827;
      --card-bg: #1F2937;
      --primary: #10B981;
      --accent: #06B6D4;
      --text-main: #F9FAFB;
      --text-muted: #9CA3AF;
      --border-color: #374151;
    }
    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;
    }
    .text-glow {
      text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
    .neon-border {
      border: 1px solid rgba(16, 185, 129, 0.3);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
    }
    .neon-border:hover {
      border-color: rgba(16, 185, 129, 0.7);
      box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(11, 15, 23, 0.7) 0%, rgba(11, 15, 23, 0.96) 85%, #0B0F17 100%);
    }
    .filter-btn.active {
      background-color: #10B981;
      color: #0B0F17;
      font-weight: 600;
    }