Sci-Fi HUD

# Visual style: Sci-Fi HUD

A holographic display interface inspired by starship cockpits and tactical command centers. Deep space backgrounds, cyan glowing borders, translucent glass panels, and radar sweep animations create an immersive experience of operating high-tech equipment.

## Philosophy
Sci-Fi HUD style draws from futuristic tech interfaces in movies and games, where "information IS the interface."

Design principles:
- Deep space background: extremely deep blue-gray backgrounds simulate a space command room
- Glowing geometry: all elements use cyan/teal glowing borders to create a holographic projection feel
- Information density: layering and modularization maintain readability of large amounts of real-time data
- Real-time dynamics: radar sweeps, data stream scrolling, and status pulses convey a "system running" feeling
- Translucent materials: panels use glassmorphism effects with backdrop blur

## Do
- Use deep space backgrounds bg-[#020617] or bg-slate-950
- Panels use translucent bg-slate-900/85 backdrop-blur-xl
- Borders use glow effects border-cyan-500/30 shadow-[0_0_20px_rgba(6,182,212,0.5)]
- Text uses cool tones text-[#E5F2FF] or text-slate-300
- Use font-mono uppercase tracking-wider for a tech feel
- Corner decorations use L-shaped borders border-t-2 border-l-2
- Status indicators use glowing pulse animations
- Progress bars use gradient fills with glow sweep effects
- On interaction, corner brackets perform lock displacement (contract/expand) for Tactical Lock feel
- Scanlines on hover increase contrast or shift, simulating data overload
- Active state uses bright inner glow feedback for holographic click rather than gravity sink

## Don't
- Do not use light/white backgrounds
- Do not use warm tones (orange, pink, etc. -- warm colors only for warning states)
- Do not use regular shadows shadow-md (must use glow shadows)
- Do not use serif fonts
- Do not use cute/rounded design language
- Do not use large border-radius rounded-2xl+
- Do not let panel interactions only deepen regular shadows (lacks system activation feel)
- Do not let status lights remain static (HUD requires continuous pulse or flicker)

## Rules for the AI
STYLE: Sci-Fi HUD
TYPE: Futuristic command center interface

MUST USE:
- Deep space background: bg-[#020617] or bg-slate-950
- Semi-transparent panels: bg-slate-900/85 backdrop-blur-xl
- Cyan glow borders: border-cyan-500/30 shadow-[0_0_20px_rgba(6,182,212,0.5)]
- L-shaped corner decorations on important panels
- font-mono uppercase tracking-wider for labels
- Status indicators with pulse animation
- Scanline overlays for tech atmosphere
- Progress bars with gradient fill and glow

MUST AVOID:
- Light/white backgrounds
- Warm color schemes (except for warning/danger status)
- Regular shadows (shadow-md, shadow-lg)
- Serif fonts
- Cute/rounded design language
- Large border-radius (rounded-2xl+)

Animation & Interaction Rules:
- Tactical Lock: On hover, L-shaped corner brackets perform short lock displacement (duration-150).
- Data Overload: On hover, increase scanline visibility and glow intensity to simulate data overload.
- Holographic Pierce: Active state prioritizes bright inner glow feedback over gravity-style sinking.
- Terminal Blinking: Status lights and key indicators maintain pulse or flicker to sustain system-online feel.