/* ==========================================
   General Styles - BLACK APP WITH PURPLE ACCENTS
========================================== */
body {
    font-family: 'Inter', sans-serif;
    background: #000000; /* Pure black main background */
    color: #d1d5db; /* Light gray text - no baby blue */
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: #6b46c1; /* Darker purple links */
}

a:hover {
    color: #7c3aed; /* Medium purple hover */
}

/* ==========================================
   Button Styles
========================================== */
button {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

button:hover {
    filter: brightness(1.1);
}

/* ==========================================
   Title Styling - H1 PURPLE
========================================== */
.text-transparent {
    background: linear-gradient(to right, #6b46c1, #7c3aed) !important; /* Purple gradient */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ==========================================
   Section Backgrounds - SLIGHTLY DIFFERENT BLACK
========================================== */
.cyber-gradient {
    background: linear-gradient(45deg, #111111, #1a1a1a); /* Slightly lighter black sections */
}

/* Input fields */
.cyber-input {
    background: rgba(17, 17, 17, 0.9); /* Slightly lighter black inputs */
    border: 1px solid rgba(107, 70, 193, 0.4); /* Purple border */
    backdrop-filter: blur(4px);
    color: #d1d5db; /* Light gray text */
    box-shadow: 0 0 10px rgba(107, 70, 193, 0.2); /* Purple glow */
}

.cyber-input:focus {
    border-color: rgba(107, 70, 193, 0.6) !important;
    box-shadow: 0 0 15px rgba(107, 70, 193, 0.4) !important;
}

.cyber-input::placeholder {
    color: rgba(107, 70, 193, 0.6) !important; /* Purple placeholder */
}

/* Button updates - PURPLE */
.cyber-button {
    background: linear-gradient(90deg, #6b46c1, #7c3aed); /* Purple gradient */
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(107, 70, 193, 0.3); /* Purple glow */
}

.cyber-button:hover {
    box-shadow: 0 0 25px #6b46c1, 0 0 40px rgba(107, 70, 193, 0.4);
    transform: translateY(-2px);
}

/* Tabs */
.cyber-tab {
    background: rgba(17, 17, 17, 0.9); /* Slightly lighter black tabs */
    border: 1px solid rgba(107, 70, 193, 0.3); /* Purple border */
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(107, 70, 193, 0.1);
}

.cyber-tab.active {
    background: linear-gradient(90deg, #6b46c1, #7c3aed); /* Purple when active */
    border-color: transparent;
    box-shadow: 0 0 20px rgba(107, 70, 193, 0.4);
}

/* Neon borders */
.neon-border {
    box-shadow: 0 0 5px #6b46c1, 0 0 10px rgba(107, 70, 193, 0.3); /* Reduced glow */
}

/* ==========================================
   Text Colors - FIX BABY BLUE
========================================== */
.text-blue-100 {
    color: #d1d5db !important; /* Light gray instead of baby blue */
}

.text-blue-300 {
    color: #d1d5db !important; /* Light gray instead of baby blue */
}

.text-blue-400 {
    color: #7c3aed !important; /* Purple */
}

.text-purple-300 {
    color: #8b5cf6 !important; /* Light purple */
}

.cyber-text {
    color: #d1d5db !important; /* Light gray */
    font-size: 1.1rem;
    font-weight: 600;
}

/* ==========================================
   Section Cards
========================================== */
.bg-slate-900\/50,
.bg-slate-800\/50,
.bg-slate-800\/30,
.bg-slate-800\/70,
.bg-slate-900 {
    background: rgba(17, 17, 17, 0.8) !important; /* Slightly lighter black sections */
}

.bg-slate-900\/30 {
    background: rgba(17, 17, 17, 0.6) !important;
}

/* Border colors */
.border-blue-500,
.border-blue-500\/30,
.border-blue-500\/20 {
    border-color: rgba(107, 70, 193, 0.4) !important; /* Purple borders */
}

/* ==========================================
   Progress Bars - PURPLE SHADES
========================================== */
.size-chart {
    display: flex;
    height: 1rem;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #111111; /* Match section background */
}

.size-segment {
    height: 100%;
    transition: width 0.3s ease-in-out;
}

/* ==========================================
   Progress Bars - MATCH HTML COLORS
========================================== */
.size-html { background: #60A5FA; } /* blue-400 - match HTML */
.size-css { background: #34D399; } /* green-400 - match CSS */
.size-js { background: #F59E0B; } /* amber-400 - match JavaScript */
.size-images { background: #EC4899; } /* pink-400 - match Images */
.size-other { background: #8B5CF6; } /* purple-400 - match Other */

/* Also make progress bars match */
.progress-html,
[class*="html"] .h-2 > div { background: #60A5FA !important; }

.progress-css,
[class*="css"] .h-2 > div { background: #34D399 !important; }

.progress-js,
[class*="js"] .h-2 > div { background: #F59E0B !important; }

.progress-images,
[class*="images"] .h-2 > div { background: #EC4899 !important; }

.progress-other,
[class*="other"] .h-2 > div { background: #8B5CF6 !important; }


/* ==========================================
   Social Profile Coverage Bar
========================================== */
.h-2.bg-slate-700 {
    background: rgba(17, 17, 17, 0.8) !important; /* Dark background for progress track */
}

.h-full.bg-gradient-to-r {
    background: linear-gradient(90deg, #6b46c1, #7c3aed, #8b5cf6) !important; /* Purple gradient */
    box-shadow: 0 0 8px rgba(107, 70, 193, 0.4) !important;
}

/* ==========================================
   Analyze Button Progress Bar
========================================== */
#progressBarContainer {
    background: transparent !important; /* Clear background so purple shows */
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    border: 1px solid rgba(107, 70, 193, 0.3) !important; /* Subtle border */
}

#progressBar {
    background: linear-gradient(90deg, #6b46c1, #7c3aed, #8b5cf6) !important; /* Purple gradient */
    height: 100% !important;
    transition: width 0.3s ease-in-out !important;
    box-shadow: 0 0 10px rgba(107, 70, 193, 0.5) !important;
}

#progressBarContainer.show {
    display: block !important; /* Override hidden class */
}

/* ==========================================
   Analyze Button
========================================== */
#urlForm button[type="submit"] {
    background: linear-gradient(135deg, #3b1a5c, #4c1d95, #5b21b6) !important; /* Dark purple */
    border: 1px solid rgba(59, 26, 92, 0.6) !important;
    color: #ffffff !important;
    box-shadow: none !important; /* No glow */
    transition: all 0.3s ease !important;
}

#urlForm button[type="submit"]:hover {
    background: linear-gradient(135deg, #4c1d95, #5b21b6, #6b46c1) !important; /* Lighter on hover */
    box-shadow: none !important; /* No glow on hover */
    transform: none !important; /* No movement */
}

#urlForm button[type="submit"]:disabled {
    color: #c084fc !important; /* Purple text when analyzing */
}

/* ==========================================
   URL Section
========================================== */
#urlAnalysisForm,
.bg-slate-900\/50.p-8.rounded-2xl.neon-border {
    background: #000000 !important; /* Pure black section background */
    box-shadow: none !important;
    border: 1px solid rgba(107, 70, 193, 0.3) !important;
}

#urlAnalysisForm .cyber-input {
    background: rgba(17, 17, 17, 0.9) !important; /* Keep inputs darker than section */
}

/* ==========================================
   Tagline - REDUCED GLOW
========================================== */
.text-center .text-lg {
    background: rgba(17, 17, 17, 0.8) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(107, 70, 193, 0.3) !important; /* Lighter border */
    display: inline-block !important;
    
    /* Much less glow */
    box-shadow: 
        0 0 5px rgba(107, 70, 193, 0.3),
        0 0 10px rgba(107, 70, 193, 0.1) !important;
    
    color: #8b5cf6 !important;
    text-shadow: none !important;
}

/* ==========================================
   H2 Container Glow - REDUCED
========================================== */
h2 {
    background: rgba(17, 17, 17, 0.0) !important;
    padding: 1rem 2rem !important;
    border-radius: 0.5rem !important;
    border: 2px solid rgba(107, 70, 193, 0.4) !important;
    
    
    /* Reduced glow */
    box-shadow: 
        0 0 10px rgba(107, 70, 193, 0.2),
        0 0 20px rgba(107, 70, 193, 0.1) !important;
    
    color: #d1d5db !important;
    text-shadow: none !important;
    margin: 1rem 0 !important;
}

/* ==========================================
   SERP Preview
========================================== */
.preview-section {
    background: rgba(17, 17, 17, 0.95);
    border-radius: 8px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 0 20px rgba(107, 70, 193, 0.2); /* Reduced glow */
    border: 2px solid rgba(107, 70, 193, 0.4); 
    margin-bottom: 40px;
}

/* Social media preview text - keep readable */
.preview-section .bg-white {
    background: rgba(240, 240, 240, 0.95) !important;
    color: #1a1a1a !important;
}

.preview-section .text-\[17px\],
.preview-section .text-\[16px\],
.preview-section .font-bold {
    color: #1a1a1a !important;
    font-weight: bold !important;
}

.preview-section .text-\[14px\],
.preview-section .text-\[13px\] {
    color: #4a4a4a !important;
}

/* ==========================================
   Results Sections
========================================== */
#results .bg-slate-800\/50,
#results .bg-slate-900\/50,
#results .bg-slate-800\/30 {
    background: rgba(17, 17, 17, 0.8) !important;
    border: 1px solid rgba(107, 70, 193, 0.3) !important;
    margin-bottom: 1.5rem !important;
}

#results h3,
#results h4 {
    color: #8b5cf6 !important; /* Purple headings */
    border-bottom: 1px solid rgba(107, 70, 193, 0.2) !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
}

#results > div {
    margin-bottom: 1.5rem !important;
    border-radius: 0.5rem !important;
}

.grid.grid-cols-4 > div {
    background: rgba(17, 17, 17, 0.9) !important;
    border: 1px solid rgba(107, 70, 193, 0.3) !important;
}

/* ==========================================
   FAQ Section
========================================== */
.faq-item {
    margin-bottom: 10px;
    padding: 10px;
    background-color: rgba(17, 17, 17, 0.9);
    border: 1px solid rgba(107, 70, 193, 0.5);
    border-radius: 8px;
}

.faq-question {
    font-weight: bold;
    color: #8b5cf6;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.faq-answer {
    color: #d1d5db;
    padding-top: 8px;
    padding-left: 20px;
}

/* ==========================================
   Footer - CLEAN & SIMPLE
========================================== */
footer {
    background: #000000 !important; /* Jet black */
    border: 2px solid rgba(107, 70, 193, 0.3) !important;
    border-radius: 8px 8px 0 0 !important; /* Rounded top corners */
    padding: 1.5rem !important;
    box-shadow: 0 0 3px rgba(107, 70, 193, 0.05) !important; /* Tiny subtle glow */
}

footer * {
    background: transparent !important;
    color: #d1d5db !important; /* Light gray text */
}

footer p {
    padding: 0.5rem 0 !important;
}

/* ==========================================
   Scrollbars
========================================== */
::-webkit-scrollbar {
    width: 12px !important;
}

::-webkit-scrollbar-track {
    background: #000000 !important; /* Black track */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6b46c1, #7c3aed) !important; /* Purple gradient */
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(107, 70, 193, 0.4) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7c3aed, #8b5cf6) !important;
    box-shadow: 0 0 15px rgba(107, 70, 193, 0.6) !important;
}

/* Firefox scrollbar */
html {
    scrollbar-color: #6b46c1 #000000 !important;
}

/* ==========================================
   Scroll to Top Button
========================================== */
#scrollToTop {
    background: rgba(17, 17, 17, 0.9) !important;
    border: 1px solid #6b46c1 !important;
    color: #d1d5db !important;
    box-shadow: 0 0 15px rgba(107, 70, 193, 0.3) !important;
}

#scrollToTop:hover {
    background: rgba(107, 70, 193, 0.2) !important;
    box-shadow: 0 0 25px rgba(107, 70, 193, 0.5) !important;
}

/* ==========================================
   Override Tailwind Classes - Keep Main App Black
========================================== */
html, body, .container, .mx-auto, .min-h-screen {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
}

/* Keep sections with slight difference */
.bg-slate-900\/50,
.bg-slate-800\/50,
.bg-slate-800\/30,
.bg-slate-800\/70,
.bg-slate-900 {
    background: rgba(17, 17, 17, 0.4) !important;
}

/* ==========================================
   SERP Preview - Custom Theme Colors
========================================== */
.preview-section {
    background: #000000 !important; /* Match your dark theme */
    border: 2px solid rgba(107, 70, 193, 0.4) !important;
}

/* SERP Preview Title - Green like "Optimal" status */
.preview-section .text-xl.text-gray-100,
.preview-section .text-\[17px\] {
    color: #22c55e !important; /* Green like success states */
    font-weight: bold !important;
}

/* SERP Preview URL - Purple theme */
.preview-section .text-sm.text-blue-300,
.preview-section .text-\[13px\] {
    color: #8b5cf6 !important; /* Purple like your theme */
}

/* SERP Preview Description - Light grey for readability */
.preview-section .text-sm.text-gray-400,
.preview-section .text-\[14px\] {
    color: #d1d5db !important; /* Light grey */
}

/* Override any white backgrounds in SERP preview */
.preview-section .bg-white {
    background: #000000 !important; /* Dark background */
}


/* ==========================================
   Content Analysis Cards - Jet Black
========================================== */
.bg-blue-600\/20 {
    background: #000000 !important; /* Jet black */
    border: 1px solid rgba(107, 70, 193, 0.4) !important; /* Purple border */
    margin-bottom: 40px !important; /* 40px bottom margin */
}

.border-blue-400\/40 {
    border-color: rgba(107, 70, 193, 0.4) !important; /* Purple border */
}

/* ==========================================
   Readability Score Cards - Jet Black
========================================== */
.bg-blue-500\/10 {
    background: #000000 !important; /* Jet black */
    border: 1px solid rgba(107, 70, 193, 0.4) !important; /* Purple border */
}

.border-blue-500\/20 {
    border-color: rgba(107, 70, 193, 0.4) !important; /* Purple border */
}

/* ==========================================
   Fix Grey Headings in Results
========================================== */
#results h1,
#results h2, 
#results h3,
#results h4,
#results h5 {
    color: #8b5cf6 !important; /* Purple headings */
}

/* Also target any blue-300 text classes */
#results .text-blue-300 {
    color: #8b5cf6 !important; /* Purple instead of grey */
}

/* ==========================================
   Readability Details Sections - Fix Colors
========================================== */

/* Total counts section (words, sentences, syllables) */
.bg-slate-900\/30 {
    background: #000000 !important; /* Jet black */
    border: 1px solid rgba(107, 70, 193, 0.4) !important; /* Purple border */
}

/* Fix grey text in readability details */
.text-gray-400 {
    color: #d1d5db !important; /* Light grey instead of dark grey */
}

.text-blue-200 {
    color: #8b5cf6 !important; /* Purple instead of light blue */
}

.text-lg.text-blue-200 {
    color: #d1d5db !important; /* Light grey for numbers */
}

/* Reading time section */
.bg-slate-900\/30.rounded {
    background: #000000 !important; /* Jet black */
}

/* Suggestions section */
.bg-blue-500\/10.border.border-blue-500\/20 {
    background: #000000 !important; /* Jet black */
    border: 1px solid rgba(107, 70, 193, 0.4) !important; /* Purple border */
}

.text-blue-200 {
    color: #d1d5db !important; /* Light grey for suggestion text */
}

/* ==========================================
   Readability Text Color Hierarchy
========================================== */

/* Labels - Purple like headings */
.text-sm.text-gray-400 {
    color: #8b5cf6 !important; /* Purple for labels */
}

/* Numbers - Light grey for readability */
.text-lg.text-blue-200,
.text-2xl.font-bold.text-blue-200 {
    color: #d1d5db !important; /* Light grey for numbers */
}

/* Suggestion bullets - Light grey */
.text-sm.text-blue-200 {
    color: #d1d5db !important; /* Light grey for suggestion text */
}

/* ==========================================
   Readability Suggestions - Warning Style
========================================== */

/* Replace bullet with warning triangle and style suggestions */
.text-sm.text-blue-200.mb-1 {
    color: #d1d5db !important; /* Light grey for full text */
}

/* Make the action words purple */
.text-sm.text-blue-200.mb-1::before {
    content: "⚠️ "; /* Warning triangle instead of bullet */
    margin-right: 0.5rem;
}

/* ==========================================
   Keyword Cloud Section - Jet Black Only
========================================== */

/* Target the specific keyword cloud container */
#keywordCloud {
    background: #000000 !important; /* Jet black */
    padding: 1.5rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 2rem !important;
}

/* Keep the main section header as is, only change the cloud area */
.bg-slate-800\/50:has(#keywordCloud) {
    background: rgba(17, 17, 17, 0.4) !important; /* Keep original section background */
}

/* ==========================================
   Key Phrases Section - Purple Text
========================================== */

/* Make "Phrases appearing ≥3 times" purple like "Click keywords to explore usage" */
.text-blue-300\/60 {
    color: #8b5cf6 !important; /* Purple like other helper text */
}