/* roulang page: index */
:root {
      --color-primary: #ff5722;
      --color-secondary: #ff7a00;
      --color-navy: #0a192f;
      --color-teal: #00c9a7;
      --color-bg-light: #f8fafc;
      --color-text-main: #0f172a;
      --color-text-muted: #64748b;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--color-bg-light);
      color: var(--color-text-main);
      overflow-x: hidden;
    }
    .custom-gradient-btn {
      background: linear-gradient(135deg, #ff7a00 0%, #ff5722 100%);
      transition: all 0.25s ease-in-out;
    }
    .custom-gradient-btn:hover {
      box-shadow: 0 10px 25px -5px rgba(255, 87, 34, 0.4);
      transform: translateY(-1px);
    }
    .glass-card {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.25rem 0.875rem;
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 600;
      background-color: #fff7ed;
      color: #ea580c;
      border: 1px solid rgba(255, 122, 0, 0.25);
    }
    .pulse-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #ff5722;
      box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7);
      animation: pulse-ring 2s infinite;
    }
    @keyframes pulse-ring {
      0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7); }
      70% { box-shadow: 0 0 0 8px rgba(255, 87, 34, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0); }
    }