/* roulang page: index */
:root {
        --color-bg-base: #0B0E14;
        --color-bg-sub: #131722;
        --color-primary: #7C3AED;
        --color-accent: #F59E0B;
        --color-cyan: #06B6D4;
        --color-text-main: #F8FAFC;
        --color-text-muted: #94A3B8;
        --color-border-glow: rgba(124, 58, 237, 0.35);
      }
      body {
        background-color: var(--color-bg-base);
        color: var(--color-text-main);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
        line-height: 1.8;
        overflow-x: hidden;
      }
      .glass-panel {
        background: rgba(19, 23, 34, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(148, 163, 184, 0.12);
      }
      .glass-panel:hover {
        border-color: rgba(245, 158, 11, 0.45);
        box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.3);
      }
      .glow-border {
        border: 1px solid rgba(245, 158, 11, 0.3);
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
      }
      .text-gradient-gold {
        background: linear-gradient(135deg, #FFFBEB 0%, #F59E0B 50%, #D97706 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .text-gradient-arcane {
        background: linear-gradient(135deg, #DDD6FE 0%, #A78BFA 50%, #7C3AED 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }