/* roulang page: index */
:root {
      --bg-dark: #0a080d;
      --bg-card: #120f18;
      --gold-main: #d4af37;
      --gold-light: #f6c860;
      --purple-accent: #8b5cf6;
      --crimson-accent: #e11d48;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .gold-gradient-text {
      background: linear-gradient(135deg, #fceb92 0%, #d4af37 50%, #aa820a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .gold-border-glow {
      border: 1px solid rgba(212, 175, 55, 0.25);
      box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gold-border-glow:hover {
      border-color: rgba(212, 175, 55, 0.6);
      box-shadow: 0 0 25px rgba(212, 175, 55, 0.22);
      transform: translateY(-3px);
    }
    .btn-gold-primary {
      background: linear-gradient(135deg, #f6c860 0%, #d4af37 60%, #b8860b 100%);
      color: #0b090e;
      font-weight: 700;
      box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
      transition: all 0.25s ease-in-out;
    }
    .btn-gold-primary:hover {
      box-shadow: 0 6px 25px rgba(246, 200, 96, 0.5);
      transform: scale(1.02);
    }
    .nav-blur {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(10, 8, 13, 0.88);
      border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    }
    .hero-perspective {
      perspective: 1200px;
    }

/* roulang page: category1 */
:root {
      --bg-dark: #0a080d;
      --bg-card: #120f18;
      --gold-main: #d4af37;
      --gold-light: #f6c860;
      --purple-accent: #8b5cf6;
      --crimson-accent: #e11d48;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .gold-gradient-text {
      background: linear-gradient(135deg, #f6c860 0%, #d4af37 60%, #b8860b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .gold-border-glow {
      border: 1px solid rgba(212, 175, 55, 0.25);
      box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gold-border-glow:hover {
      border-color: rgba(212, 175, 55, 0.6);
      box-shadow: 0 0 25px rgba(212, 175, 55, 0.22);
      transform: translateY(-3px);
    }
    .btn-gold-primary {
      background: linear-gradient(135deg, #f6c860 0%, #d4af37 60%, #b8860b 100%);
      color: #0b090e;
      font-weight: 700;
      box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
      transition: all 0.25s ease-in-out;
    }
    .btn-gold-primary:hover {
      box-shadow: 0 6px 25px rgba(246, 200, 96, 0.5);
      transform: scale(1.02);
    }
    .nav-blur {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(10, 8, 13, 0.88);
      border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    }

/* roulang page: article */
:root {
      --bg-dark: #0a080d;
      --bg-card: #120f18;
      --gold-main: #d4af37;
      --gold-light: #f6c860;
      --purple-accent: #8b5cf6;
      --crimson-accent: #e11d48;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .gold-gradient-text {
      background: linear-gradient(135deg, #f6c860 0%, #d4af37 50%, #fef08a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .gold-border-glow {
      border: 1px solid rgba(212, 175, 55, 0.25);
      box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gold-border-glow:hover {
      border-color: rgba(212, 175, 55, 0.6);
      box-shadow: 0 0 25px rgba(212, 175, 55, 0.22);
      transform: translateY(-3px);
    }
    .btn-gold-primary {
      background: linear-gradient(135deg, #f6c860 0%, #d4af37 60%, #b8860b 100%);
      color: #0b090e;
      font-weight: 700;
      box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
      transition: all 0.25s ease-in-out;
    }
    .btn-gold-primary:hover {
      box-shadow: 0 6px 25px rgba(246, 200, 96, 0.5);
      transform: scale(1.02);
    }
    .nav-blur {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(10, 8, 13, 0.88);
      border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    }
    .article-prose {
      color: #cbd5e1;
      font-size: 1.0625rem;
      line-height: 1.95;
      letter-spacing: 0.015em;
    }
    .article-prose p {
      margin-bottom: 1.75rem;
    }
    .article-prose h2 {
      color: #f8fafc;
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2.5rem;
      margin-bottom: 1.25rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid rgba(212, 175, 55, 0.2);
      display: flex;
      align-items: center;
    }
    .article-prose h2::before {
      content: '◆';
      color: var(--gold-light);
      font-size: 0.85rem;
      margin-right: 0.6rem;
    }
    .article-prose h3 {
      color: #f1f5f9;
      font-size: 1.25rem;
      font-weight: 600;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }
    .article-prose blockquote {
      background: rgba(18, 15, 24, 0.85);
      border-left: 4px solid var(--gold-main);
      padding: 1.25rem 1.5rem;
      margin: 2rem 0;
      border-radius: 0 0.5rem 0.5rem 0;
      color: #e2e8f0;
      font-style: italic;
    }
    .article-prose ul, .article-prose ol {
      margin: 1.5rem 0;
      padding-left: 1.5rem;
    }
    .article-prose li {
      margin-bottom: 0.6rem;
    }
    .article-prose ul li {
      list-style-type: square;
    }
    .article-prose strong {
      color: #f6c860;
      font-weight: 600;
    }