/* roulang page: index */
:root {
      --primary: #10B981;
      --primary-hover: #059669;
      --secondary: #06B6D4;
      --bg-page: #F8FAFC;
      --surface-dark: #0F172A;
      --text-main: #0F172A;
      --text-muted: #64748B;
      --border-subtle: #E2E8F0;
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
      --shadow-hover: 0 12px 30px rgba(16, 185, 129, 0.12);
    }
    
    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .radar-pulse {
      position: relative;
    }
    .radar-pulse::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 50%;
      background-color: rgba(16, 185, 129, 0.4);
      animation: pulse-ring 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }
    @keyframes pulse-ring {
      0% { transform: scale(0.95); opacity: 0.8; }
      50% { transform: scale(1.6); opacity: 0; }
      100% { transform: scale(1.6); opacity: 0; }
    }

    .reticle-box {
      border: 1px dashed rgba(6, 182, 212, 0.6);
      background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
    }

    .card-transition {
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .card-transition:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(16, 185, 129, 0.45);
    }