赛博朋克霓虹

STYLE: Cyberpunk Neon
TYPE: Futuristic sci-fi interface

MUST USE:
- Dark background: bg-[#0a0a0f] or bg-gray-950
- Neon glow shadows: shadow-[0_0_20px_rgba(0,255,255,0.5)]
- Text glow: style={{textShadow: '0 0 10px currentColor'}}
- Glowing borders: border border-cyan-400 shadow-[0_0_10px...]
- High saturation colors: cyan-400, fuchsia-500, yellow-400
- font-mono for tech text
- uppercase tracking-wider for labels

MUST AVOID:
- Light/white backgrounds
- Low saturation colors
- Regular shadows (shadow-md)
- Warm color schemes
- Large rounded corners (rounded-2xl+)
- Soft/friendly design language

COLOR RULES:
- Primary: Cyan (#00ffff)
- Accent: Magenta (#ff00ff)
- Background: Near-black (#0a0a0f)
- Text: White with glow
- Borders: Primary color with glow

SPECIAL EFFECTS:
- Scan line overlay for tech feel
- Pulsing elements with animate-pulse
- Glow intensifies on hover

Animation & Interaction Rules:
- Unstable Neon: 发光效果可带轻微脉冲与强弱波动，但不能持续高频闪烁到影响可读性。
- Glitch Press: `:active` 优先使用错位平移（如 `translate-x` + `-translate-y`）与颜色反转，避免常规按钮缩放反馈。
- CRT Scanline: 大面积卡片在 hover 时提升扫描线密度或可见度，强调终端正在扫描的状态变化。
- Fast & Raw: 常规交互响应建议 `duration-100` 到 `duration-150`；仅扫描扫光可放宽到 `duration-300` 以内。

/* Cyberpunk Neon Global Styles */
@layer base {
  body {
    @apply bg-[#0a0a0f] text-white antialiased;
    background-image:
      linear-gradient(transparent 50%, rgba(0, 255, 255, 0.02) 50%);
    background-size: 100% 4px;
  }

  h1, h2, h3 {
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
  }

  ::selection {
    @apply bg-cyan-400 text-black;
  }
}

@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
/* Cyberpunk Neon Design Tokens */
:root {
  --cyberpunk-neon-primary: #00ffff;
  --cyberpunk-neon-secondary: #0a0a0f;
  --cyberpunk-neon-accent: #ff00ff;
  --cyberpunk-neon-glow: rgba(0, 255, 255, 0.3);
}

.cyberpunk-neon-card {
  position: relative;
  overflow: hidden;
}

.cyberpunk-neon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), transparent);
  pointer-events: none;
}

.cyberpunk-neon-card:hover::before {
  opacity: 1;
}

.cyberpunk-neon-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(0, 255, 255, 0.08);
}

.cyberpunk-neon-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.cyberpunk-neon-animate-in {
  animation: cyberpunk-neon-fade-in 0.5s ease-out both;
}

.cyberpunk-neon-hover-lift { transition: transform 0.3s ease; }

.cyberpunk-neon-hover-lift:hover { transform: translateY(-2px); }

.cyberpunk-neon-focus { outline: 2px solid var(--cyberpunk-neon-primary, currentColor); outline-offset: 2px; }

{
  "border": {
    "width": "border",
    "color": "border-cyan-400/30",
    "radius": "rounded-lg",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_0_10px_rgba(0,255,255,0.3)]",
    "md": "shadow-[0_0_15px_rgba(0,255,255,0.4)]",
    "lg": "shadow-[0_0_25px_rgba(0,255,255,0.5)]",
    "none": "shadow-none",
    "hover": "shadow-[0_0_30px_rgba(0,255,255,0.6)]",
    "focus": "shadow-[0_0_20px_rgba(0,255,255,0.5)]",
    "colored": {
      "cyan": "shadow-[0_0_20px_rgba(0,255,255,0.5)]",
      "magenta": "shadow-[0_0_20px_rgba(255,0,255,0.5)]",
      "yellow": "shadow-[0_0_20px_rgba(255,255,0,0.5)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-95",
    "hoverScale": "hover:shadow-[0_0_30px_rgba(0,255,255,0.6)]"
  },
  "typography": {
    "heading": "font-bold",
    "body": "font-mono",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-8xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-16 md:py-24",
    "container": "px-4 md:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0a0a0f]",
      "secondary": "bg-gray-950",
      "accent": [
        "bg-cyan-400",
        "bg-fuchsia-500",
        "bg-yellow-400"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-cyan-400",
      "muted": "text-gray-400"
    },
    "button": {
      "primary": "bg-cyan-400 text-black",
      "secondary": "bg-transparent text-cyan-400 border border-cyan-400",
      "danger": "bg-red-500 text-white shadow-[0_0_15px_rgba(255,0,0,0.5)]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-white",
      "bg-gray-50",
      "bg-slate-50",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "text-gray-900",
      "rounded-2xl",
      "rounded-3xl"
    ],
    "patterns": [
      "^bg-white",
      "^bg-gray-[1-3]",
      "^bg-slate-[1-3]",
      "^shadow-(?!\\[)",
      "^rounded-[23]xl"
    ],
    "reasons": {
      "bg-white": "Cyberpunk uses dark backgrounds only",
      "shadow-md": "Use neon glow shadows: shadow-[0_0_20px_rgba(0,255,255,0.5)]",
      "rounded-2xl": "Keep corners subtle (rounded-lg max)"
    }
  },
  "required": {
    "button": [
      "px-6 py-3",
      "rounded-lg",
      "font-mono",
      "uppercase tracking-wider",
      "transition-all duration-300"
    ],
    "card": [
      "bg-gray-950",
      "border border-cyan-400/30",
      "rounded-lg"
    ],
    "input": [
      "bg-gray-950",
      "border border-cyan-400/30",
      "rounded-lg",
      "text-cyan-400",
      "font-mono",
      "focus:border-cyan-400",
      "focus:shadow-[0_0_15px_rgba(0,255,255,0.3)]"
    ]
  }
}