ui changes

2025-11-05 11:57:23 +05:30 · 2025-11-05 11:57:23 +05:30 · 94b41532c7
commit 94b41532c7
parent c2fe1a3ca6
6 changed files with 193 additions and 201 deletions
--- a/SIMPLIFIED_FLOW.md
+++ b/SIMPLIFIED_FLOW.md
@ -1,8 +1,8 @@
-# ✅ SIMPLIFIED FLOW - Informational Keywords Only
+# SIMPLIFIED FLOW - Informational Keywords Only

-## 🎯 What Changed
+## What Changed

-### 1. **Fixed Domain Format** (Critical!)
+### 1. Fixed Domain Format (Critical)
 **Before (WRONG):**
 ```
 *|or|competitor1|+|or|competitor2|-|or|client
@ -13,38 +13,36 @@
 -|or|client|+|or|competitor1|+|or|competitor2
 ```

-### 2. **Removed Unnecessary Complexity**
- ❌ Removed "At Least One Competitor" tab
- ❌ Removed "All Competitors Have" tab
- ✅ **Just show: Informational Gap Keywords (Intent=1)**
+### 2. Removed Unnecessary Complexity
+- Removed "At Least One Competitor" tab
+- Removed "All Competitors Have" tab
+- **Just show: Informational Gap Keywords (Intent=1)**

-### 3. **Added phrase_this Validation**
- ✅ Checkbox enabled by default
- ✅ Each keyword hits: `https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In`
- ✅ Cost: 10 units per keyword
- ✅ Shows in Network tab
+### 3. Added phrase_this Validation
+- Checkbox enabled by default
+- Each keyword hits: `https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In`
+- Cost: 10 units per keyword
+- Shows in Network tab

-### 4. **Simplified Output**
- ✅ Domain Metrics (kept)
- ✅ Informational Gap Keywords only
- ✅ API Usage Report with phrase_this breakdown
- ❌ No complex tabs or multiple views
+### 4. Simplified Output
+- Domain Metrics (kept)
+- Informational Gap Keywords only
+- API Usage Report with phrase_this breakdown
+- No complex tabs or multiple views

 ---

-## 🔄 Complete Flow (Simplified)
+## Complete Flow (Simplified)

+**USER FILLS FORM**
+- Client: evendigit.com
+- Competitor 1: infidigit.com
+- Competitor 2: ignitevisibility.com
+- Display Limit: 100
+- Validate with phrase_this (checked)
+
+**STEP 1: domain_domains API Call**
 ```
-USER FILLS FORM
-  ├─ Client: evendigit.com
-  ├─ Competitor 1: infidigit.com
-  ├─ Competitor 2: ignitevisibility.com
-  ├─ Display Limit: 100
-  └─ ✅ Validate with phrase_this (checked)
-        ↓
-┌──────────────────────────────────────────────┐
-│ STEP 1: domain_domains API Call              │
-└──────────────────────────────────────────────┘
 GET /api/semrush/?type=domain_domains
  &domains=-|or|evendigit.com|+|or|infidigit.com|+|or|ignitevisibility.com
  &display_limit=100
@ -52,73 +50,73 @@ GET /api/semrush/?type=domain_domains

 Response: 68 keywords (all intents)
 Cost: 680 units
-        ↓
-┌──────────────────────────────────────────────┐
-│ STEP 2: phrase_this API Validation           │
-│ (EACH keyword validated)                     │
-└──────────────────────────────────────────────┘
+```
+
+**STEP 2: phrase_this API Validation (EACH keyword validated)**
+
 For EACH of the 68 keywords:

 1. GET /api/semrush/?type=phrase_this&phrase=seo+tips&export_columns=In
-   Response: Intent=1 → ✅ KEEP
+   Response: Intent=1 → KEEP

 2. GET /api/semrush/?type=phrase_this&phrase=buy+seo+tools&export_columns=In
-   Response: Intent=3 → ❌ REMOVE
+   Response: Intent=3 → REMOVE

 3. GET /api/semrush/?type=phrase_this&phrase=seo+guide&export_columns=In
-   Response: Intent=1 → ✅ KEEP
+   Response: Intent=1 → KEEP

 ... (65 more API calls)

+```
 Total phrase_this calls: 68
 Cost: 68 × 10 = 680 units
 Result: 46 keywords with Intent=1
-        ↓
-┌──────────────────────────────────────────────┐
-│ STEP 3: Fetch Domain Metrics                 │
-└──────────────────────────────────────────────┘
-Parallel calls for 3 domains:
-  - domain_ranks (3 calls × 10 = 30 units)
-  - backlinks_overview (3 calls × 10 = 30 units)
-  - backlinks_refdomains (3 calls × 100 = 300 units)
-
-Cost: 360 units
-        ↓
-┌──────────────────────────────────────────────┐
-│ STEP 4: Display Results                      │
-└──────────────────────────────────────────────┘
-📊 API Usage Report
-  ├─ Total Units: 1,720
-  ├─ Cost: $0.086
-  └─ phrase_this: 68 calls, 680 units
-
-🎯 Informational Gap Keywords: 46
-  ├─ Keywords competitors have, client doesn't
-  └─ All verified as Intent=1 (Informational)
-
-📍 Domain Metrics (3 domains)
-  ├─ Client: evendigit.com
-  │   ├─ Authority Score: 29
-  │   ├─ Organic Traffic: 73
-  │   └─ Organic Keywords: 641
-  ├─ Competitor 1: infidigit.com
-  └─ Competitor 2: ignitevisibility.com
 ```

+**STEP 3: Fetch Domain Metrics**
+
+Parallel calls for 3 domains:
+- domain_ranks (3 calls × 10 = 30 units)
+- backlinks_overview (3 calls × 10 = 30 units)
+- backlinks_refdomains (3 calls × 100 = 300 units)
+
+```
+Cost: 360 units
+```
+
+**STEP 4: Display Results**
+
+API Usage Report
+- Total Units: 1,720
+- Cost: $0.086
+- phrase_this: 68 calls, 680 units
+
+Informational Gap Keywords: 46
+- Keywords competitors have, client doesn't
+- All verified as Intent=1 (Informational)
+
+Domain Metrics (3 domains)
+- Client: evendigit.com
+  - Authority Score: 29
+  - Organic Traffic: 73
+  - Organic Keywords: 641
+- Competitor 1: infidigit.com
+- Competitor 2: ignitevisibility.com
+
 ---

-## 🧪 Console Output Example
+## Console Output Example

 When you run with `validateWithPhrasethis=true`, you'll see:

 ```bash
 ══════════════════════════════════════════════════════════
-🔍 PHRASE_THIS API VALIDATION - Intent Verification
+PHRASE_THIS API VALIDATION - Intent Verification
 ══════════════════════════════════════════════════════════
-📊 Keywords to validate: 68
-💰 Cost: 68 keywords × 10 units = 680 units
-💵 Estimated: $0.0340
-🔍 API: https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In
+Keywords to validate: 68
+Cost: 68 keywords × 10 units = 680 units
+Estimated: $0.0340
+API: https://api.semrush.com/?type=phrase_this&phrase=KEYWORD&export_columns=In
 ══════════════════════════════════════════════════════════

 [BATCH 1/7] Validating keywords 1-10...
@ -131,31 +129,31 @@ When you run with `validateWithPhrasethis=true`, you'll see:
   URL: /api/semrush/?type=phrase_this&phrase=seo+tips&database=us&export_columns=In&key=***
   Cost: 10 units
   Response: Intent = 1
-[RESULT] "seo tips" - Intent: Informational (1) ✅ INFORMATIONAL
+[RESULT] "seo tips" - Intent: Informational (1) [INFORMATIONAL]

-     ✅ "seo tips" → Intent=1 (Informational) - KEPT
-     ❌ "buy seo tools" → Intent=3 (Transactional) - FILTERED OUT
-     ✅ "seo guide" → Intent=1 (Informational) - KEPT
+     [KEPT] "seo tips" → Intent=1 (Informational)
+     [FILTERED] "buy seo tools" → Intent=3 (Transactional)
+     [KEPT] "seo guide" → Intent=1 (Informational)

-[BATCH 1] ✅ Complete: 7/10 keywords are Informational
+[BATCH 1] Complete: 7/10 keywords are Informational

 ... (batches 2-7)

 ══════════════════════════════════════════════════════════
-📊 VALIDATION COMPLETE
+VALIDATION COMPLETE
 ══════════════════════════════════════════════════════════
-📥 Keywords received: 68
-🔍 API calls made: 68
-✅ Keywords validated (Intent=1): 46
-❌ Keywords filtered out: 22
-💰 Total units consumed: 680 units
-💵 Total cost: $0.0340
+Keywords received: 68
+API calls made: 68
+Keywords validated (Intent=1): 46
+Keywords filtered out: 22
+Total units consumed: 680 units
+Total cost: $0.0340
 ══════════════════════════════════════════════════════════
 ```

 ---

-## 🌐 Network Tab - You'll See
+## Network Tab - You'll See

 ```
 Name                                          Status  Type   Size
@ -175,16 +173,16 @@ backlinks_overview?target=evendigit.com&...   200     xhr    245B

 ---

-## ✅ What You Get
+## What You Get

 1. **API Usage Report** - Shows total units, cost, and phrase_this breakdown
-2. **Informational Gap Keywords** - ONLY Intent=1 keywords (simplified!)
+2. **Informational Gap Keywords** - ONLY Intent=1 keywords (simplified)
 3. **Domain Metrics** - Authority Score, Traffic, Keywords, Backlinks
 4. **No unnecessary tabs** - Clean, single view

 ---

-## 🚀 Ready to Test!
+## Ready to Test

 1. **Refresh browser** (Cmd+Shift+R)
 2. **Fill form:**
@ -192,10 +190,10 @@ backlinks_overview?target=evendigit.com&...   200     xhr    245B
   - Competitor 1: `infidigit.com`
   - Competitor 2: `ignitevisibility.com`
   - Display Limit: `100`
-   - ✅ **Validate with phrase_this** (checked by default)
+   - **Validate with phrase_this** (checked by default)
 3. **Open Network tab**
 4. **Click "Run Unified Analysis"**
-5. **Watch phrase_this calls appear!** 🎉
+5. **Watch phrase_this calls appear**

-Each keyword will hit the phrase_this API and you'll see it in the Network tab!
+Each keyword will hit the phrase_this API and you'll see it in the Network tab.

--- a/src/App.css
+++ b/src/App.css
@ -1,18 +1,19 @@
 .app {
  min-height: 100vh;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  background: #f5f5f5;
  padding: 20px;
 }

 .app-header {
  text-align: center;
-  color: white;
+  color: #1a1a1a;
  margin-bottom: 40px;
  animation: fadeInDown 0.6s ease-out;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #ffffff;
  padding: 40px 20px;
  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+  border: 2px solid #1a1a1a;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }

 .app-header h1 {
@ -57,17 +58,17 @@
 }

 .mode-btn:hover:not(:disabled) {
-  border-color: #667eea;
-  color: #667eea;
+  border-color: #1a1a1a;
+  color: #1a1a1a;
  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.15);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }

 .mode-btn.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-color: #667eea;
+  background: #1a1a1a;
+  border-color: #1a1a1a;
  color: white;
-  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
 }

@ -79,7 +80,7 @@

 .mode-btn.active:hover {
  transform: translateY(-3px);
-  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
 }

 .progress-container {
@ -102,7 +103,7 @@

 .progress-fill {
  height: 100%;
-  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  background: #1a1a1a;
  border-radius: 4px;
  transition: width 0.3s ease;
 }
--- a/src/components/KeywordForm.css
+++ b/src/components/KeywordForm.css
@ -26,10 +26,10 @@

 .form-section h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
-  color: #333;
+  color: #1a1a1a;
  margin-bottom: 20px;
  padding-bottom: 10px;
-  border-bottom: 2px solid #667eea;
+  border-bottom: 2px solid #1a1a1a;
 }

 .form-section h3 {
@ -69,8 +69,8 @@
 .form-group input:focus,
 .form-group select:focus {
  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  border-color: #1a1a1a;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
 }

 .form-group input:disabled,
@ -89,9 +89,9 @@
 .submit-btn {
  width: 100%;
  padding: 16px 24px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #1a1a1a;
  color: white;
-  border: none;
+  border: 2px solid #1a1a1a;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
@ -106,7 +106,7 @@

 .submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
 }

 .submit-btn:active:not(:disabled) {
--- a/src/components/UnifiedAnalysis.css
+++ b/src/components/UnifiedAnalysis.css
@ -3,7 +3,7 @@
  margin: 0 auto;
  padding: 32px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #f5f5f5;
  min-height: 100vh;
 }

@ -25,10 +25,7 @@
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 800;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #1a1a1a;
 }

 .header-content p {
@ -50,15 +47,15 @@
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  border: none;
+  background: #1a1a1a;
+  border: 2px solid #1a1a1a;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
 }
@ -78,8 +75,8 @@

 .hookpilot-btn:hover:not(:disabled) {
  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
-  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  background: #000000;
 }

 .hookpilot-btn:hover:not(:disabled)::before {
@ -97,13 +94,13 @@
 }

 .hookpilot-btn.sending {
-  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  background: #4a4a4a;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .hookpilot-btn.success {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  background: #1a1a1a;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: successPulse 0.6s ease-out;
 }

@ -143,8 +140,8 @@
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: #1a1a1a;
+  border: 2px solid #1a1a1a;
  border-radius: 8px;
  color: white;
  font-weight: 500;
@ -153,8 +150,9 @@
 }

 .export-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: #000000;
  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .hookpilot-status {
@ -218,9 +216,9 @@
 }

 .tab-btn.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #1a1a1a;
  color: white;
-  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .tab-count {
@ -320,7 +318,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #1a1a1a;
  border-radius: 12px;
  color: white;
 }
@ -381,10 +379,7 @@
  margin: 0 0 32px 0;
  font-size: 28px;
  font-weight: 800;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 12px;
@ -410,9 +405,9 @@
 }

 .metric-card:hover {
-  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.25);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
-  border-color: rgba(102, 126, 234, 0.5);
+  border-color: #1a1a1a;
 }

 .metric-card:active {
@ -420,13 +415,13 @@
 }

 .metric-card.client-card {
-  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95) 0%, rgba(191, 219, 254, 0.95) 100%);
-  border: 2px solid rgba(59, 130, 246, 0.3);
+  background: #ffffff;
+  border: 2px solid #1a1a1a;
 }

 .metric-card.client-card:hover {
-  border-color: rgba(59, 130, 246, 0.6);
-  box-shadow: 0 20px 60px rgba(59, 130, 246, 0.3);
+  border-color: #000000;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 }

 .metric-card.competitor-card {
@ -434,8 +429,8 @@
 }

 .metric-card.competitor-card:hover {
-  border-color: rgba(139, 92, 246, 0.5);
-  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2);
+  border-color: #4a4a4a;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
 }

 /* Card Header */
@ -444,14 +439,14 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
-  border-bottom: 2px solid rgba(102, 126, 234, 0.1);
+  background: #f5f5f5;
+  border-bottom: 2px solid #e0e0e0;
  transition: background-color 0.2s ease;
 }

 .metric-card.client-card .card-header {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
-  border-bottom: 2px solid rgba(59, 130, 246, 0.2);
+  background: #e8e8e8;
+  border-bottom: 2px solid #1a1a1a;
 }

 .metric-card .card-header h4 {
@ -499,12 +494,12 @@
 }

 .client-badge {
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  background: #1a1a1a;
  color: white;
 }

 .competitor-badge {
-  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  background: #4a4a4a;
  color: white;
 }

@ -526,15 +521,15 @@
 }

 .metric-item:hover {
-  border-color: rgba(102, 126, 234, 0.3);
+  border-color: #1a1a1a;
  background: white;
 }

 .stage-item {
  margin-top: 12px;
  padding: 18px 20px;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-  border: 2px solid rgba(102, 126, 234, 0.2);
+  background: #f5f5f5;
+  border: 2px solid #d0d0d0;
 }

 .metric-values {
@ -570,10 +565,7 @@
 .metric-value {
  font-size: 24px;
  font-weight: 800;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #1a1a1a;
 }

 .stage-badge {
@ -675,10 +667,7 @@
  margin: 0;
  font-size: 26px;
  font-weight: 800;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #1a1a1a;
 }

 .keywords-controls {
@ -744,7 +733,7 @@
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
-  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+  background: #f5f5f5;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  transition: all 0.2s ease;
@ -793,7 +782,7 @@
 }

 .keywords-table th {
-  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+  background: #f5f5f5;
  padding: 16px 20px;
  text-align: left;
  font-weight: 600;
@ -1058,8 +1047,8 @@

 .items-per-page-select:focus {
  outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  border-color: #1a1a1a;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
 }

 .pagination-controls {
@ -1121,14 +1110,14 @@
 }

 .pagination-page-btn.active {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #1a1a1a;
  color: white;
-  border-color: #667eea;
-  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+  border-color: #1a1a1a;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .pagination-page-btn.active:hover {
-  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+  background: #000000;
  transform: translateY(-1px);
 }

@ -1265,8 +1254,8 @@
  justify-content: space-between;
  align-items: center;
  padding: 32px 40px;
-  border-bottom: 2px solid rgba(102, 126, 234, 0.15);
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-bottom: 2px solid #e0e0e0;
+  background: #1a1a1a;
  color: white;
 }

@ -1327,7 +1316,7 @@
  font-weight: 700;
  color: #1f2937;
  padding-bottom: 12px;
-  border-bottom: 2px solid rgba(102, 126, 234, 0.15);
+  border-bottom: 2px solid #e0e0e0;
 }

 .modal-table-wrapper {
@ -1354,7 +1343,7 @@
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 1px;
-  border-bottom: 2px solid rgba(102, 126, 234, 0.2);
+  border-bottom: 2px solid #e0e0e0;
 }

 .modal-table td {
@ -1379,11 +1368,11 @@

 /* Card header hover effect */
 .metric-card .card-header:hover {
-  background: rgba(102, 126, 234, 0.12);
+  background: #e8e8e8;
 }

 .metric-card.client-card .card-header:hover {
-  background: rgba(59, 130, 246, 0.2);
+  background: #d8d8d8;
 }

 /* Animations */
@ -1516,18 +1505,19 @@
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 600;
-  border: none;
+  border: 2px solid #1a1a1a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  background: #1a1a1a;
  color: white;
-  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .hookpilot-modal-btn:hover {
  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  background: #000000;
 }

 .hookpilot-modal-btn:active {
@ -1536,42 +1526,42 @@

 /* Success state styling */
 .hookpilot-modal-content.hookpilot-success .hookpilot-modal-header {
-  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
-  border-bottom: 2px solid #10b981;
+  background: #ffffff;
+  border-bottom: 2px solid #1a1a1a;
 }

 .hookpilot-modal-content.hookpilot-success .hookpilot-modal-header h3 {
-  color: #065f46;
+  color: #1a1a1a;
 }

 /* Error state styling */
 .hookpilot-modal-content.hookpilot-error .hookpilot-modal-header {
-  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
-  border-bottom: 2px solid #ef4444;
+  background: #ffffff;
+  border-bottom: 2px solid #1a1a1a;
 }

 .hookpilot-modal-content.hookpilot-error .hookpilot-modal-header h3 {
-  color: #991b1b;
+  color: #1a1a1a;
 }

 /* Warning state styling */
 .hookpilot-modal-content.hookpilot-warning .hookpilot-modal-header {
-  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
-  border-bottom: 2px solid #f59e0b;
+  background: #ffffff;
+  border-bottom: 2px solid #1a1a1a;
 }

 .hookpilot-modal-content.hookpilot-warning .hookpilot-modal-header h3 {
-  color: #92400e;
+  color: #1a1a1a;
 }

 /* Sending state styling */
 .hookpilot-modal-content.hookpilot-sending .hookpilot-modal-header {
-  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-  border-bottom: 2px solid #3b82f6;
+  background: #f5f5f5;
+  border-bottom: 2px solid #1a1a1a;
 }

 .hookpilot-modal-content.hookpilot-sending .hookpilot-modal-header h3 {
-  color: #1e40af;
+  color: #1a1a1a;
 }

 /* Responsive adjustments */
--- a/src/components/UnifiedAnalysis.jsx
+++ b/src/components/UnifiedAnalysis.jsx
@ -284,12 +284,13 @@ function UnifiedAnalysis({ analysisData }) {
      {/* API Usage Report */}
      {apiUsage && (
        <div style={{
-          background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+          background: '#1a1a1a',
          borderRadius: '12px',
          padding: '24px',
          marginBottom: '32px',
          color: 'white',
-          boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
+          boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+          border: '2px solid #1a1a1a'
        }}>
          <h3 style={{ margin: '0 0 16px 0', fontSize: '20px', fontWeight: '700' }}>
            📊 API Usage & Cost Report
@ -308,8 +309,9 @@ function UnifiedAnalysis({ analysisData }) {
            <div style={{ 
              marginTop: '16px', 
              padding: '12px', 
-              background: 'rgba(255,255,255,0.15)', 
-              borderRadius: '8px' 
+              background: 'rgba(255,255,255,0.2)', 
+              borderRadius: '8px',
+              border: '1px solid rgba(255,255,255,0.3)'
            }}>
              <strong>🔍 phrase_this Validation:</strong> {apiUsage.breakdown.phrase_this.calls || 0} API calls, {apiUsage.breakdown.phrase_this.units?.toLocaleString() || 0} units consumed
            </div>
@ -346,17 +348,17 @@ function UnifiedAnalysis({ analysisData }) {
          <div className="warning-message" style={{
            padding: '16px 20px',
            marginBottom: '24px',
-            backgroundColor: '#fef3c7',
-            border: '1px solid #fbbf24',
+            backgroundColor: '#f5f5f5',
+            border: '2px solid #1a1a1a',
            borderRadius: '8px',
            display: 'flex',
            alignItems: 'center',
            gap: '12px'
          }}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-4a1 1 0 100 2 1 1 0 000-2z" fill="#f59e0b"/>
+              <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-4a1 1 0 100 2 1 1 0 000-2z" fill="#1a1a1a"/>
            </svg>
-            <span style={{ color: '#92400e', fontWeight: '500' }}>
+            <span style={{ color: '#1a1a1a', fontWeight: '500' }}>
              No keyword opportunities found. All competitors may have similar keyword profiles to your client.
            </span>
          </div>
@ -365,12 +367,13 @@ function UnifiedAnalysis({ analysisData }) {
        {/* Simplified Header - Just Informational Keywords */}
        {hasKeywordOpportunities && (
          <div style={{ 
-            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
+            background: '#1a1a1a', 
            padding: '20px 24px', 
            borderRadius: '12px',
            color: 'white',
            marginBottom: '20px',
-            boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
+            boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+            border: '2px solid #1a1a1a'
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
              <div>
@ -785,7 +788,7 @@ function UnifiedAnalysis({ analysisData }) {

              {hookpilotModal.status === 'sending' && (
                <p className="hookpilot-subtext">
-                  You will be notified once the operation completes or if any issues occur.
+                  Sending to Hookpilot... You will get an email once completed or if any issues occur.
                </p>
              )}

--- a/src/index.css
+++ b/src/index.css
@ -10,7 +10,7 @@ body {
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #f5f5f5;
  min-height: 100vh;
  padding: 20px;
 }