## ADDED Requirements

### Requirement: Monospace typography
The application SHALL use monospace fonts throughout the entire interface.

#### Scenario: Primary font family
- **WHEN** CSS font-family is applied
- **THEN** system uses font stack: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace

#### Scenario: Font loading
- **WHEN** application loads
- **THEN** system loads JetBrains Mono font from Google Fonts or local files with weights: 400, 500, 700

#### Scenario: All text elements
- **WHEN** rendering any text (buttons, labels, inputs, tooltips, headings)
- **THEN** all text uses monospace font family without exception

#### Scenario: Number formatting
- **WHEN** displaying numbers (prices, timestamps, counts)
- **THEN** uses tabular-nums CSS property for aligned columns

### Requirement: Matrix-style color scheme
The application SHALL use a dark background with neon green (#00ff41) accent color scheme.

#### Scenario: Background colors
- **WHEN** rendering main layout
- **THEN** page background is #0a0e0a (near black), sidebar background is #0d110d, and chart background is #000000

#### Scenario: Primary accent color
- **WHEN** highlighting interactive elements, active states, or success messages
- **THEN** uses #00ff41 (matrix green) as the primary accent color

#### Scenario: Secondary accent colors
- **WHEN** rendering labels or status indicators
- **THEN** uses #ff0040 (neon red) for break_down/destructive, #00ff41 (neon green) for break_up/success, #00d4ff (neon cyan) for informational, #ffff00 (neon yellow) for warnings

#### Scenario: Text colors
- **WHEN** rendering text
- **THEN** primary text is #00ff41, secondary text is #00cc33 (dimmer green), and disabled text is #003311 (very dim green)

#### Scenario: Border colors
- **WHEN** rendering borders
- **THEN** uses #00ff41 with 1px solid for active elements, #003311 for inactive borders

### Requirement: Neon glow effects
The application SHALL apply glow effects to active and interactive elements.

#### Scenario: Button hover glow
- **WHEN** user hovers over any button
- **THEN** button shows box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff4180

#### Scenario: Active tool glow
- **WHEN** a tool is active (selected)
- **THEN** button shows pulsing glow animation with box-shadow: 0 0 15px #00ff41, 0 0 30px #00ff4180

#### Scenario: Selected element glow
- **WHEN** a line or label is selected
- **THEN** element shows glow effect with filter: drop-shadow(0 0 8px #00ff41)

#### Scenario: Input focus glow
- **WHEN** user focuses on text input or search field
- **THEN** input shows border glow: box-shadow: 0 0 8px #00ff41

#### Scenario: Cursor circle glow
- **WHEN** drawing line with cursor circle visible
- **THEN** cursor circle has stroke glow with filter: drop-shadow(0 0 4px currentColor)

### Requirement: ASCII-style borders
The application SHALL use terminal-inspired border styling with corner characters.

#### Scenario: Container borders
- **WHEN** rendering bordered containers (Toolbox, label list sections)
- **THEN** uses 1px solid borders with #00ff41 color

#### Scenario: Border corners with pseudo-elements
- **WHEN** rendering section headers or important containers
- **THEN** uses CSS ::before and ::after pseudo-elements to display ASCII corner characters: ┌ ┐ └ ┘

#### Scenario: Separator lines
- **WHEN** rendering section separators
- **THEN** uses border-top: 1px solid #003311 with optional ASCII characters (─) via pseudo-elements

#### Scenario: Card-style containers
- **WHEN** rendering label list entries or modal dialogs
- **THEN** containers have 1px solid border with subtle inset shadow for depth

### Requirement: Terminal-like feedback messages
The application SHALL display command-style feedback for user actions.

#### Scenario: Success message format
- **WHEN** user completes an action successfully (delete, create, export)
- **THEN** displays message in format: `> SUCCESS: <action> completed [<count> items]` in green text

#### Scenario: Error message format
- **WHEN** an error occurs
- **THEN** displays message in format: `> ERROR: <description> [code: <error_code>]` in red text

#### Scenario: Info message format
- **WHEN** displaying informational message
- **THEN** displays message in format: `> INFO: <message>` in cyan text

#### Scenario: Message container styling
- **WHEN** displaying any feedback message
- **THEN** container has monospace font, left-aligned text, subtle border, and auto-dismiss after 4 seconds

#### Scenario: Message animation
- **WHEN** feedback message appears
- **THEN** slides in from top with fade-in animation (0.3s ease-out)

### Requirement: Minimalist icon treatment
The application SHALL use simplified, outline-style icons or ASCII alternatives.

#### Scenario: Lucide icon styling
- **WHEN** rendering Lucide React icons
- **THEN** icons use stroke-width: 1.5, size: 20px, and color matches text color (#00ff41)

#### Scenario: Icon hover effect
- **WHEN** user hovers over icon button
- **THEN** icon glows with filter: drop-shadow(0 0 4px currentColor)

#### Scenario: ASCII alternative icons (optional)
- **WHEN** rendering simple actions (delete, expand, collapse)
- **THEN** optionally uses ASCII characters: [×] for delete, [▼] for expand, [▲] for collapse, [>] for actions

#### Scenario: Icon color consistency
- **WHEN** icon is in active/selected state
- **THEN** icon color is #00ff41
- **WHEN** icon is in disabled state
- **THEN** icon color is #003311

### Requirement: High contrast for readability
The application SHALL maintain WCAG AA contrast ratios for all text.

#### Scenario: Primary text contrast
- **WHEN** displaying primary text (#00ff41) on dark background (#0a0e0a)
- **THEN** contrast ratio is at least 4.5:1 (WCAG AA standard)

#### Scenario: Secondary text contrast
- **WHEN** displaying secondary text (#00cc33) on dark background
- **THEN** contrast ratio is at least 4.5:1

#### Scenario: Button text contrast
- **WHEN** button is in any state (default, hover, active, disabled)
- **THEN** text maintains minimum 4.5:1 contrast with background

#### Scenario: Chart element visibility
- **WHEN** rendering lines and markers on chart
- **THEN** all annotations have sufficient contrast against black background and candles

### Requirement: Simplified button styling
The application SHALL use minimal, flat button design with terminal aesthetic.

#### Scenario: Default button appearance
- **WHEN** rendering buttons in default state
- **THEN** buttons have transparent background, 1px solid #00ff41 border, #00ff41 text, 4px padding, and no rounded corners (border-radius: 0)

#### Scenario: Hover button appearance
- **WHEN** user hovers over button
- **THEN** background changes to #00ff4110 (10% opacity), border glows, and text remains #00ff41

#### Scenario: Active button appearance
- **WHEN** button is active/pressed
- **THEN** background is #00ff4120 (20% opacity), border is 2px solid, and includes pulsing glow animation

#### Scenario: Disabled button appearance
- **WHEN** button is disabled
- **THEN** background is transparent, border is #003311, text is #003311, and no hover effects

#### Scenario: Destructive button styling
- **WHEN** button represents destructive action (delete)
- **THEN** uses #ff0040 (neon red) for border and text instead of green, with matching red glow on hover

### Requirement: Cyber-retro aesthetic elements
The application SHALL include subtle design elements that enhance the hacker theme.

#### Scenario: Scanline effect (optional)
- **WHEN** rendering main container
- **THEN** applies subtle CSS repeating-linear-gradient overlay simulating CRT scanlines with 2px spacing at 5% opacity

#### Scenario: Noise texture (optional)
- **WHEN** rendering background
- **THEN** applies subtle noise texture using CSS filter or background-image at 3% opacity for grain effect

#### Scenario: Typewriter animation for messages
- **WHEN** displaying new feedback message
- **THEN** text appears with brief letter-by-letter typing animation (0.02s per character, max 0.5s total)

#### Scenario: Flicker animation on focus
- **WHEN** user focuses on input field
- **THEN** border shows brief flicker animation (0.1s) simulating electrical surge

#### Scenario: ASCII art branding (optional)
- **WHEN** application loads or in header
- **THEN** displays application name in ASCII art style using monospace font

### Requirement: Responsive dark theme
The application SHALL maintain theme consistency across all components and states.

#### Scenario: Modal dialogs
- **WHEN** displaying confirmation dialogs
- **THEN** modal has dark background (#0d110d), neon green border, monospace font, and terminal-style title (e.g., "> CONFIRM ACTION")

#### Scenario: Input fields
- **WHEN** rendering text inputs or search fields
- **THEN** inputs have transparent background, #00ff41 border, #00ff41 text, #00ff4120 placeholder, and cursor color #00ff41

#### Scenario: Dropdown menus
- **WHEN** displaying filter or select dropdowns
- **THEN** dropdown has dark background (#0d110d), neon green border, #00ff41 option text, hover state with #00ff4120 background

#### Scenario: Scrollbars
- **WHEN** content requires scrolling
- **THEN** custom scrollbar with #003311 track, #00ff41 thumb, and 8px width

#### Scenario: Tooltips
- **WHEN** displaying tooltips on hover
- **THEN** tooltip has dark background (#0d110d), 1px #00ff41 border, monospace font, and terminal-style text

### Requirement: Animation performance
The application SHALL use performant CSS animations that don't impact chart rendering.

#### Scenario: GPU acceleration
- **WHEN** applying animations (glow, pulse, fade)
- **THEN** uses CSS transform and opacity properties with will-change hints for GPU acceleration

#### Scenario: Animation duration
- **WHEN** defining animations
- **THEN** all animations complete within 0.5s, with most hover effects at 0.2s

#### Scenario: Reduced motion support
- **WHEN** user has prefers-reduced-motion enabled
- **THEN** system disables glow animations, typewriter effects, and pulsing, keeping only instant transitions

#### Scenario: Chart performance
- **WHEN** theme is active and chart is rendering
- **THEN** SVG overlay and chart rendering maintains 60fps without jank from theme effects

### Requirement: Tailwind CSS configuration
The Tailwind config SHALL be updated to support hacker theme tokens.

#### Scenario: Custom colors in tailwind.config
- **WHEN** tailwind.config.js is parsed
- **THEN** defines custom colors: matrix: '#00ff41', matrixDim: '#00cc33', matrixDark: '#003311', neonRed: '#ff0040', neonCyan: '#00d4ff', neonYellow: '#ffff00', terminal: '#0a0e0a', terminalLight: '#0d110d'

#### Scenario: Custom font families
- **WHEN** tailwind.config.js is parsed
- **THEN** defines fontFamily: { mono: ['JetBrains Mono', 'Fira Code', 'Courier New', 'monospace'] }

#### Scenario: Custom animations
- **WHEN** tailwind.config.js is parsed
- **THEN** defines keyframes for 'glow-pulse', 'flicker', 'scanline-move' and corresponding animation utilities

#### Scenario: Custom shadows
- **WHEN** tailwind.config.js is parsed
- **THEN** defines boxShadow: { 'glow-sm': '0 0 8px #00ff41', 'glow': '0 0 15px #00ff41, 0 0 30px #00ff4180', 'glow-lg': '0 0 20px #00ff41, 0 0 40px #00ff4180' }

### Requirement: globals.css updates
The globals.css file SHALL define base styles and CSS variables for the hacker theme.

#### Scenario: CSS custom properties
- **WHEN** globals.css is loaded
- **THEN** defines CSS variables: --color-matrix, --color-matrix-dim, --color-matrix-dark, --color-neon-red, --color-neon-cyan, --color-terminal, --font-mono

#### Scenario: Base body styles
- **WHEN** page loads
- **THEN** body element has background: --color-terminal, color: --color-matrix, font-family: --font-mono, and -webkit-font-smoothing: antialiased

#### Scenario: Selection styling
- **WHEN** user selects text
- **THEN** selection background is #00ff4140 (40% opacity) and text is #00ff41

#### Scenario: Scrollbar styling
- **WHEN** globals.css is loaded
- **THEN** defines custom scrollbar styles using ::-webkit-scrollbar pseudo-elements with theme colors