chore: initialize project repository with core extension files

- Add .gitignore to exclude node_modules, dist, logs, and system files
- Add comprehensive project documentation including README, deployment guide, and development setup
- Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management
- Add .kiro steering documents for product, structure, styling, and tech guidelines
- Add VSCode settings configuration for consistent development environment
- Add manifest.json and babel/vite configuration for extension build setup
- Add complete source code implementation including AppWrite integration, storage managers, UI components, and services
- Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules
- Add test HTML files for integration testing and validation
- Add coverage reports and build validation scripts
- Add AppWrite setup and repair documentation for database schema management
- Add migration guides and responsive accessibility implementation documentation
- Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization

.kiro/steering/styling.md

@@ -0,0 +1,100 @@
+# Styling Guidelines for Amazon Extension
+
+## Critical: CSS Override Strategy for Amazon Pages
+
+When styling UI elements that will be injected into Amazon pages, **CSS files alone are NOT sufficient**. Amazon's stylesheets have high specificity and load after extension styles, overriding even `!important` rules.
+
+### The Problem
+- Amazon's CSS has higher specificity than extension CSS
+- Amazon's stylesheets load after extension styles
+- Even `!important` rules in CSS files can be overridden
+- CSS variables defined in `:root` may not work on Amazon pages
+
+### The Solution: Inline Styles via JavaScript
+
+For critical visual styles (backgrounds, colors, borders, etc.), apply them directly via JavaScript using `element.style`:
+
+```javascript
+// ✅ CORRECT - Cannot be overridden by Amazon CSS
+Object.assign(element.style, {
+  background: '#0a0a0a',
+  color: '#ffffff',
+  padding: '2rem',
+  borderRadius: '24px'
+});
+
+// ❌ WRONG - Will be overridden by Amazon CSS
+// Relying only on CSS classes
+element.className = 'my-styled-element';
+```
+
+### CSS Specificity Hierarchy (highest to lowest)
+1. **Inline styles via JavaScript** (`element.style.property`) - HIGHEST
+2. Inline styles in HTML (`style="..."`)
+3. `!important` in CSS
+4. ID selectors
+5. Class selectors
+6. Element selectors
+
+### Implementation Pattern
+
+Create helper methods in Manager classes:
+
+```javascript
+_applyInlineStyles(element) {
+  Object.assign(element.style, {
+    background: 'rgba(255, 255, 255, 0.05)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    borderRadius: '24px',
+    // ... more styles
+  });
+}
+```
+
+### When to Use Inline Styles
+- Container backgrounds and colors
+- Text colors and fonts
+- Borders and border-radius
+- Padding and margins
+- Any visual style that must be guaranteed
+
+### When CSS Files Are Still Useful
+- Animations and keyframes
+- Pseudo-elements (::before, ::after)
+- Media queries for responsive design
+- Hover states (combine with JS event listeners)
+- Complex selectors
+
+### Example: Hover Effects with JavaScript
+
+```javascript
+element.addEventListener('mouseenter', () => {
+  element.style.transform = 'translateY(-6px)';
+  element.style.boxShadow = '0 12px 48px rgba(0, 0, 0, 0.45)';
+});
+
+element.addEventListener('mouseleave', () => {
+  element.style.transform = 'none';
+  element.style.boxShadow = 'none';
+});
+```
+
+## Design System Colors (for inline styles)
+
+```javascript
+const colors = {
+  bgDark: '#0a0a0a',
+  bgCard: 'rgba(255, 255, 255, 0.05)',
+  bgCardHover: 'rgba(255, 255, 255, 0.08)',
+  textPrimary: '#ffffff',
+  textSecondary: '#e0e0e0',
+  textMuted: '#a0a0a0',
+  primary: '#ff9900',
+  primaryGradient: 'linear-gradient(135deg, #ff9900 0%, #ff7700 100%)',
+  border: 'rgba(255, 255, 255, 0.1)',
+  borderHover: 'rgba(255, 255, 255, 0.2)',
+  success: '#28a745',
+  error: '#dc3545',
+  link: '#74c0fc'
+};
+```