/* roulang page: index */
:root {
      --bg-dark: #0a0815;
      --card-dark: #141126;
      --border-color: #242044;
      --brand-glow: rgba(124, 58, 237, 0.25);
    }
    body {
      background-color: var(--bg-dark);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .spade-gradient {
      background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    }
    .spade-gradient-hover:hover {
      background: linear-gradient(135deg, #6d28d9 0%, #db2777 100%);
    }
    .glass-card {
      background: rgba(20, 17, 38, 0.7);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border-color);
    }
    .glass-card:hover {
      border-color: #7c3aed;
      box-shadow: 0 10px 30px -10px var(--brand-glow);
    }
    .ticket-edge {
      position: relative;
      background: linear-gradient(135deg, #1f1b3c, #16132b);
      border: 1px dashed #7c3aed;
    }
    .ticket-edge::before, .ticket-edge::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      background-color: var(--bg-dark);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
    }
    .ticket-edge::before { left: -13px; }
    .ticket-edge::after { right: -13px; }
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #0a0815;
    }
    ::-webkit-scrollbar-thumb {
      background: #2a254e;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #4c3f8f;
    }