/*
SolanaWP Analyzer Stylesheet
---------------------------------------------------------------------
All CSS specific to the Analyzer frame and its sections, including:
- Input section and check button
- Results display and cards
- Account validation and metrics
- Rug pull risk analysis
- Token distribution analysis
- Holders growth analysis
- Website & social accounts
- Octagonal scoring system
- Performance analysis
*/

/* === INPUT SECTION IMPROVEMENTS === */
.input-section {
    padding: 32px 40px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-container {
    display: flex;
    gap: 20px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
}

.address-input {
    flex: 1;
    padding: 18px 24px;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    background: #f9fafb;
    color: #374151;
    min-width: 300px;
}
.address-input::placeholder { color: #9ca3af; }

.address-input:focus {
    border-color: var(--solanawp-primary-accent-color);
    box-shadow: 0 0 0 4px var(--solanawp-primary-accent-color-rgba-01);
}

.check-btn {
    padding: 18px 36px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    border: none;
    background: linear-gradient(135deg, var(--solanawp-primary-accent-color) 0%, var(--solanawp-secondary-accent-color) 100%);
    box-shadow: 0 4px 16px var(--solanawp-primary-accent-color-rgba-03);
    border-color: var(--solanawp-primary-accent-color);
}
.check-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 24px var(--solanawp-primary-accent-color-rgba-04);
}
.check-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: translateY(0); }
.check-btn .icon { width: 20px; height: 20px; }

/* ========================================
   ENHANCED CHECK BUTTON COMPONENT STYLES
   Complete 3D gradient button with wave animation
   ======================================== */

/* Base 3D Button Foundation */
.check-button {
    /* Layout and sizing */
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    min-width: 220px;
    height: 56px;

    /* Flexbox for perfect content alignment */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    /* Position context for wave overlay */
    position: relative;
    overflow: hidden;

    /* Smooth transitions for all state changes */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography styling */
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    text-transform: none;
    letter-spacing: 0.3px;

    /* Custom gradient - cyan to purple progression */
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 25%, #8b5cf6 75%, #7c3aed 100%);

    /* Multi-layered 3D shadow system */
    box-shadow:
        0 10px 20px rgba(34, 211, 238, 0.25),  /* Outer cyan glow */
        0 6px 12px rgba(139, 92, 246, 0.15),    /* Purple depth shadow */
        0 3px 6px rgba(0, 0, 0, 0.1),           /* Basic elevation */
        inset 0 1px 0 rgba(255, 255, 255, 0.3), /* Top highlight */
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);      /* Bottom edge definition */

    /* Initial position - button appears raised */
    transform: translateY(0);
}

/* Hover State - Button lifts higher when user approaches */
.check-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow:
        0 15px 30px rgba(34, 211, 238, 0.3),    /* Enhanced cyan glow */
        0 8px 16px rgba(139, 92, 246, 0.2),     /* Deeper purple shadow */
        0 4px 8px rgba(0, 0, 0, 0.15),          /* Stronger elevation */
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Pressed State - Button sinks down to show physical feedback */
.check-button.pressed {
    transform: translateY(5px);
    box-shadow:
        0 2px 8px rgba(34, 211, 238, 0.2),      /* Minimal outer shadows */
        0 1px 4px rgba(139, 92, 246, 0.1),
        inset 0 4px 12px rgba(0, 0, 0, 0.25),   /* Deep inset shadows */
        inset 0 2px 4px rgba(0, 0, 0, 0.15),    /* Additional depth */
        inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Subtle highlight */
}

/* Loading State - Active processing with wave animation */
.check-button.loading {
    /* Remove pressed effect and return to stable position */
    transform: translateY(0);
    cursor: not-allowed;
}

/* Success State - Verification complete with brand colors */
.check-button.success {
    /* Brand's teal-cyan success gradient */
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 25%, #0891b2 75%, #0e7490 100%) !important;
    animation: success-pulse 0.6s ease-out;
    cursor: default;
}

/* Success pulse animation for satisfying completion feedback */
@keyframes success-pulse {
    0% { transform: scale(1) translateY(5px); }
    50% { transform: scale(1.05) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}

/* ========================================
   WAVE ANIMATION SYSTEM
   Sophisticated flowing gradient overlay
   ======================================== */

/* Wave overlay container - only visible during loading */
.check-button .wave-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

/* Custom wave gradient - smooth, slow-moving animation */
.check-button .custom-wave {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 25%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 100%
    );
    background-size: 300% 100%;
    /* Slow, calming 8-second cycle for confident processing feel */
    animation: custom-wave-flow 8s ease-in-out infinite;
    /* Start paused - only animate during loading */
    animation-play-state: paused;
}

/* Wave movement keyframes - horizontal flow across button */
@keyframes custom-wave-flow {
    0% { background-position: -300% 0; }
    50% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* Activate wave during loading state */
.check-button.loading .wave-overlay {
    opacity: 1;
}

.check-button.loading .custom-wave {
    animation-play-state: running;
}

/* Ensure wave stops completely in success state */
.check-button.success .wave-overlay {
    opacity: 0;
}

.check-button.success .custom-wave {
    animation-play-state: paused;
}

/* ========================================
   ICON AND CONTENT STYLING
   Visual hierarchy and balance
   ======================================== */

/* Search icon - doubled in size for better visual prominence */
.check-button .search-icon {
    width: 36px;
    height: 36px;
    fill: currentColor;
    flex-shrink: 0;
    /* Subtle shadow to integrate with 3D button styling */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* ========================================
   LOADING ANIMATION COMPONENTS
   Bouncing bars indicator
   ======================================== */

/* Container for bouncing bars loader */
.check-button .bouncing-bars {
    display: flex;
    gap: 3px;
    align-items: center;
}

/* Individual loading bars with staggered animation */
.check-button .bouncing-bars div {
    width: 4px;
    height: 18px;
    /* Gradient bars that match button text color */
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);
    border-radius: 2px;
    /* Bouncing animation with staggered timing */
    animation: bounce-bars-enhanced 1.4s ease-in-out infinite both;
    /* Subtle glow effect */
    box-shadow: 0 0 4px rgba(255,255,255,0.3);
}

/* Staggered animation delays for wave effect */
.check-button .bouncing-bars div:nth-child(1) { animation-delay: -0.32s; }
.check-button .bouncing-bars div:nth-child(2) { animation-delay: -0.16s; }
.check-button .bouncing-bars div:nth-child(3) { animation-delay: 0s; }

/* Bouncing animation with scaling and opacity changes */
@keyframes bounce-bars-enhanced {
    0%, 80%, 100% {
        transform: scaleY(0.4);
        opacity: 0.6;
    }
    40% {
        transform: scaleY(1.2);
        opacity: 1;
    }
}

/* ========================================
   SUCCESS STATE COMPONENTS
   Checkmark and completion styling
   ======================================== */

/* Animated checkmark for verification success */
.check-button .checkmark {
    width: 20px;
    height: 20px;
    position: relative;
    animation: checkmark-appear 0.6s ease-out;
}

/* Checkmark character with enhanced styling */
.check-button .checkmark::after {
    content: '✓';
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Checkmark appearance animation with rotation and scaling */
@keyframes checkmark-appear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.3) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Disabled state styling */
.check-button:disabled {
    cursor: not-allowed;
}

/* Button text content wrapper */
.check-button .button-text {
    /* Ensure text content is properly positioned */
    position: relative;
    z-index: 1;
}

/* === RESULTS SECTION IMPROVEMENTS === */
.results-section {
    padding: 32px 40px;
    padding-bottom: 24px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* === CARD STYLES === */
.card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    width: 100%;
    transition: all 0.3s ease;
}
.card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.card:last-child { margin-bottom: 0 !important; }
.card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
}
.card-title { font-size: 20px; font-weight: bold; color: #1f2937; margin: 0; }
.card-content { padding: 24px; line-height: 1.7; }
.card-content h4 { font-size: 18px; font-weight: 600; margin-top: 0; margin-bottom: 16px; color: #374151;}
.card-content p { margin-bottom: 1em; }
.card-content p:last-child { margin-bottom: 0; }

/* === ICON STYLES === */
.icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Specific card content styling */
.validation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.validation-item { display: flex; align-items: center; gap: 8px; padding: 12px; background: #f9fafb; border-radius: 8px; font-size: 0.95em; }
.validation-item strong { font-weight: 600; margin-right: 4px; }
.success-banner, .error-banner { border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; font-weight: 600; margin-top: 16px; }
.success-banner { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 1px solid #86efac; color: #166534; }
.error-banner { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 1px solid #f87171; color: #991b1b; }

.balance-holdings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 0; }
.balance-item h4, .holdings-item h4 { font-size: 18px !important; font-weight: 600 !important; margin-bottom: 12px !important; color: #374151 !important; }
.balance-data, .holdings-data { background: #f8fafc; padding: 16px; border-radius: 8px; }
.sol-balance-value { font-size: 24px; font-weight: bold; color: var(--solanawp-primary-accent-color); }
.sol-balance-usd { color: #6b7280; font-size: 16px; }
.token-holdings-item { display: flex; justify-content: space-between; margin-bottom: 8px; }
.token-holdings-item:last-child { margin-bottom: 0; }
.token-holdings-item span:last-child { font-weight: 600; }

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 24px; }
.metric-card { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 12px; padding: 20px; text-align: center; border: 1px solid #e5e7eb;}
.metric-value { font-size: 32px; font-weight: bold; margin-bottom: 8px; word-break: break-all; }
.metric-label { color: #6b7280; font-size: 14px; }
.recent-transactions-list .recent-transaction-item { background: #f9fafb; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
.recent-transactions-list .recent-transaction-item > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.recent-transactions-list .tx-type { font-weight: 600; }
.recent-transactions-list .tx-signature { font-size: 14px; color: #6b7280; word-break: break-all; }
.recent-transactions-list .tx-amount { font-weight: 600; text-align: right; flex-shrink: 0; }
.recent-transactions-list .tx-time { font-size: 14px; color: #6b7280; text-align: right; flex-shrink: 0; }

/* === UPDATED ACCOUNT GRID (REMOVED SECURITY ANALYSIS) === */
#accountAndSecurityOuterGrid.account-security-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Only one column now since security analysis is removed */
    gap: 24px;
    margin-bottom: 24px;
}
.account-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95em;
}
.account-detail-item:last-child {
    border-bottom: none;
}
.account-detail-item span:first-child {
    color: #6b7280;
    margin-right: 10px;
}
.account-detail-item span:last-child {
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}

/* =============================================================================
   ENHANCED RUG PULL RISK ANALYSIS DASHBOARD STYLES WITH ANIMATED LOADING
   Copycatting the design from Rug Pull Risk Analysis Dashboard.html
   ============================================================================= */

/* NEW: Animated Loading States */
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

.animated-loading {
    animation: flash 1.5s infinite;
    color: #3b82f6;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
}

.animated-loading::before {
    content: "⏳";
    animation: pulse 1s infinite;
}

/* Section Title Icons */
.section-title-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin: 30px 0 20px 0;
}

.section-title-with-icon .section-icon {
    font-size: 1.3em;
    opacity: 0.8;
}

/* Main Card Container Enhanced */
#rugPullRiskCard {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
}

#rugPullRiskCard .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e5e5;
}

#rugPullRiskCard .card-header .icon {
    font-size: 2rem;
    margin-right: 10px;
}

#rugPullRiskCard .card-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* Main Risk Metrics Grid (Top Row) */
/* UPDATED: Section A Container - Top tier (Risk Indicators longer) */
.section-a-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Risk Indicators longer */
    gap: 20px;
    margin-bottom: 20px;
}

/* FIXED: Section B Container - Bottom tier (Consistent widths) */
.section-b-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Mutable = Rugged Status width, Other Risks = Risk Score width */
    gap: 20px;
    margin-bottom: 20px;
}

/* NEW: Empty middle section */
.empty-middle-section {
    /* Intentionally empty as requested */
}

/* NEW: Colored Section Headers with Centered Titles */
.rugged-status-header {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #fecaca;
}

.risk-score-header {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #dbeafe;
}

.mutable-header {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #ede9fe;
}

.other-risks-header {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #dcfce7;
}

/* NEW: Section Content Areas with White Background */
.section-content {
    background: white;
    padding: 24px;
    text-align: center;
}

/* NEW: Center all section titles */
.section-a-container .section-header,
.section-b-container .section-header {
    text-align: center;
    justify-content: center;
}

.section-a-container .section-title,
.section-b-container .section-title {
    text-align: center;
    margin: 0;
}

.rug-metric-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rug-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rug-metric-value {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.rug-metric-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.rug-metric-sublabel {
    font-size: 0.8rem;
    color: #999;
}

/* Risk Level Styling */
.rug-metric-card.risk-high {
    background-color: #fee2e2;
    color: #dc2626;
}

.rug-metric-card.risk-high .rug-metric-value {
    color: #dc2626;
}

/* Explanations Grid */
.rug-explanations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.rug-explanation-box {
    padding: 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    text-align: center;
    transition: transform 0.2s ease;
}

.rug-explanation-box:hover {
    transform: translateY(-1px);
}

.rug-explanation-blue {
    background-color: #dbeafe;
    color: #1e40af;
}

.rug-explanation-red {
    background-color: #fee2e2;
    color: #dc2626;
}

.rug-explanation-yellow {
    background-color: #fef3c7;
    color: #d97706;
}

.rug-explanation-green {
    background-color: #dcfce7;
    color: #166534;
}

/* Token Distribution Analysis */
.rug-section-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin: 30px 0 20px 0;
}

.rug-distribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.rug-distribution-card {
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rug-distribution-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rug-distribution-value {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.rug-distribution-label {
    font-size: 0.9rem;
    color: #666;
}

/* Content Cards */
.rug-content-card {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rug-content-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rug-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

/* Holder Distribution */
.rug-holder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.rug-holder-item:last-child {
    border-bottom: none;
}

.rug-holder-info {
    display: flex;
    align-items: center;
}

.rug-holder-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
}

.rug-dot-red {
    background-color: #dc2626;
}

.rug-dot-yellow {
    background-color: #d97706;
}

.rug-dot-green {
    background-color: #10b981;
}

.rug-dist-label {
    font-size: 14px;
    color: #374151;
}

.rug-dist-percentage {
    font-size: 0.8em;
    color: #6b7280;
}

/* Risk Warning Box */
.rug-risk-warning {
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.rug-risk-warning h4 {
    color: #dc2626;
    font-weight: 600;
    margin-bottom: 8px;
}

.rug-risk-warning p {
    color: #7f1d1d;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.rug-risk-list {
    list-style: none;
    padding: 0;
}

.rug-risk-list li {
    color: #dc2626;
    font-size: 0.9rem;
    margin-bottom: 5px;
    padding-left: 20px;
    position: relative;
}

.rug-risk-list li:before {
    content: "⚠️";
    position: absolute;
    left: 0;
}

/* Token Items (Creator's Other Tokens) */
.rug-token-item {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.rug-token-item:hover {
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.rug-token-info h4 {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.rug-token-info p {
    font-size: 0.8rem;
    color: #666;
}

.rug-token-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.rug-token-stat {
    text-align: center;
}

.rug-token-stat-label {
    font-size: 0.7rem;
    color: #666;
    display: block;
}

.rug-token-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

/* Two Column Layout */
.rug-two-column,
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.left-column,
.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Info Boxes */
.rug-info-box {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.rug-info-box h5 {
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 5px;
}

.rug-info-box p {
    font-size: 0.8rem;
    color: #075985;
    margin-bottom: 8px;
}

.rug-warning-box {
    background-color: #fffbeb;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.rug-warning-box h5 {
    font-weight: 600;
    color: #d97706;
    margin-bottom: 5px;
}

.rug-warning-box p {
    font-size: 0.8rem;
    color: #92400e;
}

.rug-danger-box {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.rug-danger-box h5 {
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 5px;
}

.rug-danger-box p {
    font-size: 0.8rem;
    color: #7f1d1d;
}

/* Authority Items */
.rug-authority-item {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}

.rug-authority-label {
    font-weight: 600;
    color: #333;
}

.rug-status-locked {
    color: #16a34a;
    font-weight: 600;
}

.rug-status-unlocked {
    color: #dc2626;
    font-weight: 600;
}

.rug-status-neutral {
    color: #666;
}

/* Indicators List */
.rug-indicators-list {
    list-style: none;
    padding: 0;
}

.rug-indicators-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 6px;
    border-radius: 6px;
}

.rug-indicator-positive {
    background-color: #f0fdf4;
    border-left: 3px solid #16a34a;
}

.rug-indicator-negative {
    background-color: #fef2f2;
    border-left: 3px solid #dc2626;
}

.rug-indicator-icon {
    margin-right: 8px;
    font-size: 0.9rem;
}

.rug-indicator-text {
    flex: 1;
}

.rug-indicator-title {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 0.8rem;
}

.rug-indicator-positive .rug-indicator-title {
    color: #16a34a;
}

.rug-indicator-negative .rug-indicator-title {
    color: #dc2626;
}

.rug-indicator-description {
    font-size: 0.7rem;
    color: #666;
    line-height: 1.3;
}

/* Locker Information */
.rug-locker-item {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.rug-locker-item p {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.rug-locker-item strong {
    color: #333;
}

.rug-locker-item a {
    color: #2563eb;
    text-decoration: none;
}

.rug-locker-item a:hover {
    text-decoration: underline;
}

/* NEW: No Lockers Indicator - RED COLOR */
.no-lockers-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-weight: 600;
}

.no-lockers-indicator .icon {
    font-size: 18px;
}

/* NEW: No Risk Indicator - GREEN COLOR */
.no-risk-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #10b981;
    font-weight: 600;
}

.no-risk-indicator .icon {
    font-size: 18px;
}

/* NEW: Dedicated Risks Section Styling */
.risks-section {
    margin-bottom: 24px;
}

.risks-container {
    padding: 24px;
    max-height: 400px;
    overflow-y: auto;
}

.risks-container::-webkit-scrollbar {
    width: 6px;
}

.risks-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.risks-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.risks-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.risk-item {
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.risk-item:last-child {
    margin-bottom: 0;
}

/* Insider Network Information */
.rug-network-item {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 8px;
    margin: 15px 8px;
}

.rug-network-item p {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

/* Legacy Support for Existing IDs */
#rugOverallScore,
#rugRiskLevel,
#rugRisksLevel, /* NEW: Added for "Risks" subsection */
#ruggedStatus,
#ruggedDate,
#mutableStatus,
#totalHoldersCount,
#topHoldersCount,
#concentrationTop1,
#concentrationTop5,
#concentrationTop20,
#rugTokenDistribution,
#distributionRiskContainer,
#creatorTokensContainer,
#keyRiskIndicators,
#lockersContainer,
#insiderNetworksContainer,
#insidersDetectedStatus,
#rugCheckRisksContainer { /* NEW: Added for dedicated risks container */
    /* These IDs are used by JavaScript - keep compatible */
}

/* Risk Level Classes */
.risk-high {
    color: #ef4444 !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.risk-medium {
    color: #f59e0b !important;
    background: #fffbeb !important;
    border-color: #fed7aa !important;
}

.risk-low {
    color: #10b981 !important;
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

/* Loading States */
.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #6b7280;
    font-style: italic;
}

/* Animation for Enhanced Elements */
@keyframes rugFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rug-content-card,
.rug-metric-card {
    animation: rugFadeIn 0.3s ease-out;
}

/* Scrollbar Styling for Content Areas */
#keyRiskIndicators,
#creatorTokensContainer,
#lockersContainer,
#insiderNetworksContainer,
#rugCheckRisksContainer { /* NEW: Added rugCheckRisksContainer */
    max-height: 300px;
    overflow-y: auto;
}

#keyRiskIndicators::-webkit-scrollbar,
#creatorTokensContainer::-webkit-scrollbar,
#lockersContainer::-webkit-scrollbar,
#insiderNetworksContainer::-webkit-scrollbar,
#rugCheckRisksContainer::-webkit-scrollbar { /* NEW: Added rugCheckRisksContainer */
    width: 6px;
}

#keyRiskIndicators::-webkit-scrollbar-track,
#creatorTokensContainer::-webkit-scrollbar-track,
#lockersContainer::-webkit-scrollbar-track,
#insiderNetworksContainer::-webkit-scrollbar-track,
#rugCheckRisksContainer::-webkit-scrollbar-track { /* NEW: Added rugCheckRisksContainer */
    background: #f1f1f1;
    border-radius: 3px;
}

#keyRiskIndicators::-webkit-scrollbar-thumb,
#creatorTokensContainer::-webkit-scrollbar-thumb,
#lockersContainer::-webkit-scrollbar-thumb,
#insiderNetworksContainer::-webkit-scrollbar-thumb,
#rugCheckRisksContainer::-webkit-scrollbar-thumb { /* NEW: Added rugCheckRisksContainer */
    background: #c1c1c1;
    border-radius: 3px;
}

#keyRiskIndicators::-webkit-scrollbar-thumb:hover,
#creatorTokensContainer::-webkit-scrollbar-thumb:hover,
#lockersContainer::-webkit-scrollbar-thumb:hover,
#insiderNetworksContainer::-webkit-scrollbar-thumb:hover,
#rugCheckRisksContainer::-webkit-scrollbar-thumb:hover { /* NEW: Added rugCheckRisksContainer */
    background: #a8a8a8;
}

/* Enhanced Risk Overview Section */
.risk-overview-section {
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

.risk-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.risk-metric-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.risk-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.risk-metric-card.primary-score {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.risk-metric-card.risk-level {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.risk-metric-card.rugged-status {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.risk-metric-card.mutable-status {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.metric-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    flex-shrink: 0;
}

.metric-content {
    flex: 1;
}

.metric-range {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}

.metric-sublabel {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    font-style: italic;
}

.risk-level-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

/* Risk Explanations */
.risk-explanations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.explanation-card {
    background: white;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.explanation-card.score-explanation {
    border-left: 4px solid #3b82f6;
}

.explanation-card.rugged-explanation {
    border-left: 4px solid #ef4444;
}

.explanation-card.mutable-explanation {
    border-left: 4px solid #f59e0b;
}

.explanation-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.explanation-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
}

/* Main Analysis Grid */
.main-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 24px;
}

.analysis-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Analysis Sections */
.analysis-section,
.section-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.analysis-section:hover,
.section-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

/* Security Metrics */
.security-metrics {
    padding: 24px;
}

.security-metric {
    padding: 16px;
    margin-bottom: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.security-metric:last-child {
    margin-bottom: 0;
}

.security-metric:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.metric-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.metric-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.metric-icon-small {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

.metric-title {
    font-weight: 600;
    color: #374151;
    flex: 1;
}

.metric-status {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    background: #e5e7eb;
    color: #6b7280;
}

.metric-description {
    font-size: 14px;
    color: #6b7280;
    font-style: italic;
    line-height: 1.4;
}

.metric-percentage {
    font-size: 13px;
    color: #059669;
    font-weight: 500;
    margin-top: 4px;
}

/* Risk Indicators */
.risk-indicators-section .section-header {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.risk-indicators-container {
    padding: 24px;
    max-height: 400px;
    overflow-y: auto;
}

.risk-indicators-container::-webkit-scrollbar {
    width: 6px;
}

.risk-indicators-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.risk-indicators-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.risk-indicators-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Distribution Section */
.distribution-section .section-header {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.distribution-metrics {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.distribution-metric {
    background: #f8fafc;
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.distribution-metric:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.distribution-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
    font-weight: 500;
}

.distribution-value {
    font-size: 20px;
    font-weight: bold;
    color: #1f2937;
}

/* Holder Distribution */
.holder-distribution {
    padding: 0 24px 24px 24px;
}

.holder-distribution .distribution-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.holder-distribution .distribution-item:last-child {
    border-bottom: none;
}

.dist-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.dist-label {
    flex-grow: 1;
    font-size: 14px;
    color: #374151;
}

.dist-percentage {
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

/* Distribution Risk Assessment */
.distribution-risk-assessment,
.risk-assessment {
    margin: 0 24px 24px 24px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.risk-assessment-header,
.risk-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.risk-icon {
    font-size: 16px;
}

.risk-title {
    font-weight: 600;
    color: #374151;
}

.risk-level {
    font-weight: bold;
    color: #10b981;
}

.risk-explanation {
    font-size: 14px;
    color: #6b7280;
    font-style: italic;
    line-height: 1.4;
}

/* Creator Section */
.creator-section .section-header,
.creator-history-section .section-header {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
}

.creator-tokens-container,
.creator-history-container {
    padding: 24px;
    max-height: 300px;
    overflow-y: auto;
}

.creator-tokens-container::-webkit-scrollbar,
.creator-history-container::-webkit-scrollbar {
    width: 6px;
}

.creator-tokens-container::-webkit-scrollbar-track,
.creator-history-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.creator-tokens-container::-webkit-scrollbar-thumb,
.creator-history-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.creator-tokens-container::-webkit-scrollbar-thumb:hover,
.creator-history-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* =============================================================================
   NEW: STANDALONE TOKEN DISTRIBUTION ANALYSIS STYLES WITH ENHANCED FEATURES
   ============================================================================= */

/* Token Distribution Section Styles */
.token-distribution-section {
    margin-bottom: 32px;
    padding: 0;
}

/* UPDATED: Sub-section Title with Icons - SAME SIZE AS OTHER MAIN SECTION TITLES */
.token-distribution-section .section-title {
    font-size: 20px; /* Same as .card-title to maintain consistency */
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    padding: 0 24px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.token-distribution-section .section-title .section-icon {
    font-size: 18px; /* Slightly smaller than title text */
    opacity: 0.8;
}

/* =============================================================================
   UPDATED: TOKEN DISTRIBUTION UPDATES - SIDE-BY-SIDE LAYOUT FOR HOLDER ANALYSIS
   ============================================================================= */

/* NEW: Main Grid for Three Sub-sections Side by Side */
.growth-analysis-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 24px;
    margin: 24px;
    margin-bottom: 32px;
}

/* UPDATED: Holder Change Sub-Section - Now part of grid */
.holder-change-subsection {
    padding: 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #bae6fd;
    border-radius: 12px;
    margin: 0; /* Remove margin since it's in grid */
}

/* UPDATED: Holders Change Percentage Sub-Section - Now part of grid */
.holder-change-percentage-subsection {
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 2px solid #bbf7d0;
    border-radius: 12px;
    margin: 0; /* Remove margin since it's in grid */
}

/* UPDATED: New Holders by Acquisition Sub-Section - Now part of grid */
.new-holders-acquisition-subsection {
    padding: 20px;
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border: 2px solid #fed7aa;
    border-radius: 12px;
    margin: 0; /* Remove margin since it's in grid */
}

.new-holders-acquisition-subsection .subsection-title {
    color: #92400e;
}

/* Subsection Titles */
.subsection-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.subsection-icon {
    font-size: 18px;
}

/* Values Display */
.holder-change-value,
.holder-change-percentage-value {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* NEW: Grid for Acquisition Methods (Swap, Transfer, Airdrop) Side by Side */
.acquisition-methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 12px;
    margin-top: 16px;
}

/* UPDATED: Acquisition Method Cards - Now smaller for side-by-side layout */
.acquisition-method-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px; /* Reduced padding for smaller cards */
    text-align: center;
    margin-bottom: 0; /* Remove margin since it's in grid */
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.acquisition-method-card:hover {
    background: #f8fafc;
    border-color: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.15);
}

.acquisition-icon {
    font-size: 24px; /* Reduced size for smaller cards */
    margin-bottom: 8px;
    display: block;
}

.acquisition-name {
    font-size: 13px; /* Reduced size for smaller cards */
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.acquisition-count {
    font-size: 20px; /* Reduced size for smaller cards */
    font-weight: bold;
    color: #1f2937;
}

/* =============================================================================
   UPDATED: DYNAMIC TIME PERIODS - ENHANCED HOLDERS GROWTH ANALYSIS GRID
   ============================================================================= */

/* Main Holders Growth Grid - UPDATED for Dynamic Periods */
.holders-growth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    padding: 24px;
    justify-content: center; /* Center the grid items */
    align-items: stretch; /* Ensure all cards have same height */
}

/* NEW: Dynamic Periods Container - Special handling for dynamic content */
.dynamic-periods-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    padding: 24px;
    justify-content: center; /* Ensure dynamic periods are centered */
    align-items: stretch;
    transition: all 0.3s ease; /* Smooth transition when periods change */
}

/* Enhanced support for varying numbers of periods (2-7 cards) */
.dynamic-periods-container[data-periods="2"] {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    max-width: 400px;
    margin: 0 auto; /* Center the container when only 2 periods */
}

.dynamic-periods-container[data-periods="3"] {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    max-width: 500px;
    margin: 0 auto; /* Center the container when only 3 periods */
}

.dynamic-periods-container[data-periods="4"] {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.dynamic-periods-container[data-periods="5"] {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
}

.dynamic-periods-container[data-periods="6"] {
    grid-template-columns: repeat(6, minmax(100px, 1fr));
}

.dynamic-periods-container[data-periods="7"] {
    grid-template-columns: repeat(7, minmax(90px, 1fr));
}

/* Growth Metric Cards - ENHANCED for Dynamic Behavior */
.growth-metric-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: 140px; /* Ensure consistent height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: fadeInScale 0.4s ease-out; /* Animation when cards appear */
}

.growth-metric-card:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

/* NEW: Animation for dynamically appearing cards */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.growth-period {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: lowercase; /* No uppercase as requested */
    letter-spacing: 0.5px;
}

.growth-change {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #1f2937;
}

.growth-percentage {
    font-size: 12px;
    font-weight: 500;
}

/* NEW: Holders Status Text (Joined/Left) */
.holders-status-text {
    font-style: italic;
    font-size: 11px;
    margin-top: 4px;
    font-weight: 500;
}

.holders-joined {
    color: #10b981; /* Green for positive */
}

.holders-left {
    color: #ef4444; /* Red for negative */
}

/* NEW: Debug Information Container - Can be shown/hidden */
.dynamic-periods-debug {
    padding: 8px 24px;
    background: #f3f4f6;
    border-radius: 8px;
    margin: 0 24px 16px 24px;
    border: 1px solid #d1d5db;
    font-family: 'Courier New', monospace;
    color: #6b7280;
    transition: all 0.3s ease;
}

.dynamic-periods-debug:hover {
    background: #e5e7eb;
}

/* Enhanced Loading States for Dynamic Periods */
.dynamic-periods-container .loading-placeholder {
    grid-column: 1 / -1; /* Span across all columns */
    padding: 40px 20px;
    background: #f8fafc;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    color: #6b7280;
    font-style: italic;
    font-weight: 500;
    text-align: center;
    animation: loadingPulse 2s infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Holders Categories Grid */
.holders-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    padding: 24px;
}

.category-metric-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-metric-card:hover {
    background: #f8fafc;
    border-color: #10b981;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}

.category-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.category-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.category-count {
    font-size: 24px;
    font-weight: bold;
    color: #1f2937;
}

/* Distribution Chart Styles */
.distribution-chart {
    padding: 24px;
    background: #f9fafb;
    border-radius: 12px;
    margin: 0 24px 24px 24px;
    border: 1px solid #e5e7eb;
}

.distribution-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.distribution-item:last-child {
    border-bottom: none;
}

.distribution-item:hover {
    background: #f3f4f6;
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Main Risk Metrics (Top Row) - Legacy Support */
.main-risk-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Concentration Metrics (Token Distribution - Keep Alchemy) */
.concentration-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    animation: fadeIn 0.5s ease-in-out;
}

.concentration-metrics > div {
    background: white;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.concentration-metrics > div:hover {
    background: #f3f4f6;
    transform: translateY(-1px);
}

/* New Layout Grid (Two Column) */
.new-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

/* RugCheck API Components Styling */
#liquidityContainer,
#mintAuthorityContainer,
#freezeAuthorityContainer {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

#liquidityContainer:hover,
#mintAuthorityContainer:hover,
#freezeAuthorityContainer:hover {
    background: #f9fafb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Token Distribution (Alchemy API - Keep existing) */
#rugTokenDistribution .distribution-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

#rugTokenDistribution .distribution-item:last-child {
    border-bottom: none;
}

/* Distribution Risk Container */
#distributionRiskContainer {
    padding: 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

#distributionRiskContainer:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === WEBSITE & SOCIAL ACCOUNTS SECTION STYLES === */
.website-social-section {margin-bottom: 24px;}
.website-social-section:last-child {margin-bottom: 0;}

/* UPDATED: Added discord-info-grid and github-info-grid */
.web-info-grid, .telegram-info-grid, .twitter-info-grid, .discord-info-grid, .github-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 0;
}

/* UPDATED: Added discord-info-item and github-info-item */
.web-info-item, .telegram-info-item, .twitter-info-item, .discord-info-item, .github-info-item {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    min-width: 0; /* CRITICAL: Allows content to shrink */
    overflow: hidden; /* CRITICAL: Prevents overflow */
}

/* UPDATED: Added discord and github hover effects */
.web-info-item:hover, .telegram-info-item:hover, .twitter-info-item:hover, .discord-info-item:hover, .github-info-item:hover {
    background: #f3f4f6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* UPDATED: Added discord-info-label and github-info-label */
.web-info-label, .telegram-info-label, .twitter-info-label, .discord-info-label, .github-info-label {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
    font-weight: 500;
}

/* ENHANCED: Value containers with overflow protection */
.web-info-value, .telegram-info-value, .twitter-info-value, .discord-info-value, .github-info-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.4;

    /* CRITICAL: Prevent overflow and handle long URLs */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis;

    /* Ensure proper display */
    display: block;
    width: 100%;
}

/* =============================================================================
   NEW: CLICKABLE SOCIAL LINKS STYLING
   ============================================================================= */

/* Social Links - Enhanced Clickable Styling */
.web-info-value a,
.twitter-info-value a,
.telegram-info-value a,
.discord-info-value a,
.github-info-value a {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid transparent !important;
    display: inline-block !important;

    /* CRITICAL: Handle long URLs properly */
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}
.web-info-value a:hover,
.twitter-info-value a:hover,
.telegram-info-value a:hover,
.discord-info-value a:hover,
.github-info-value a:hover {
    color: #1d4ed8 !important;
    border-bottom-color: #3b82f6 !important;
    transform: translateY(-1px) !important;
    text-shadow: 0 1px 2px rgba(59, 130, 246, 0.1) !important;
}

/* Social Links - Active State */
.web-info-value a:active,
.twitter-info-value a:active,
.telegram-info-value a:active,
.discord-info-value a:active,
.github-info-value a:active {
    transform: translateY(0) !important;
    color: #1e40af !important;
}

/* Social Links - Focus State for Accessibility */
.web-info-value a:focus,
.twitter-info-value a:focus,
.telegram-info-value a:focus,
.discord-info-value a:focus,
.github-info-value a:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* =============================================================================
   BANNISOL ADVANCED OCTAGONAL SCORING SYSTEM STYLES
   Dashboard Gauge Style Implementation - UPDATED FOR UNIFIED SYSTEM
   ============================================================================= */

/* UPDATED: Token Quality Score Styles - WHITE BACKGROUND WITH GRADIENT SCORING */
.quality-score {
    text-align: center;
    margin-bottom: 50px;
    background: #ffffff; /* UPDATED: Changed to white background */
    color: #1a202c;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 2px solid #e2e8f0;
}

.quality-score h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #2d3748;
}

/* UPDATED: Quality Number with Gradient Color Based on Score */
.quality-number {
    font-size: 64px;
    font-weight: 800;
    margin-bottom: 15px;
    /* Default gradient - will be overridden by JavaScript based on score */
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Score-based gradient colors - applied dynamically by JavaScript */
.quality-number.score-0-10 {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); /* Red */
}

.quality-number.score-11-20 {
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%); /* Red-Orange */
}

.quality-number.score-21-30 {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); /* Orange */
}

.quality-number.score-31-40 {
    background: linear-gradient(135deg, #eab308 0%, #f59e0b 100%); /* Orange-Yellow */
}

.quality-number.score-41-50 {
    background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%); /* Yellow */
}

.quality-number.score-51-60 {
    background: linear-gradient(135deg, #84cc16 0%, #ca8a04 100%); /* Yellow-Green */
}

.quality-number.score-61-70 {
    background: linear-gradient(135deg, #65a30d 0%, #84cc16 100%); /* Light Green */
}

.quality-number.score-71-80 {
    background: linear-gradient(135deg, #16a34a 0%, #65a30d 100%); /* Green */
}

.quality-number.score-81-100 {
    background: linear-gradient(135deg, #059669 0%, #16a34a 100%); /* Dark Green */
}

.quality-label {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #4a5568;
}

.quality-description {
    font-size: 16px;
    line-height: 1.6;
    color: #2d3748;
    max-width: 800px;
    margin: 0 auto;
}

/* Circular Progress Grid Layout */
.gauges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.gauge-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    border: 2px solid #f1f5f9;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.gauge-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.gauge-header {
    margin-bottom: 20px;
}

.gauge-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.gauge-title {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

/* Circular Progress Styles */
.circular-progress {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 20px auto;
}

.circular-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: #f1f5f9;
    stroke-width: 8;
}

.progress-ring {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
}

.gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
}

.gauge-description {
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.4;
    color: #4a5568;
    text-align: left;
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
}

.gauge-what-measures {
    margin-bottom: 8px;
    font-weight: 600;
}

.gauge-score-meaning {
    font-style: italic;
}
.what-measures {
    margin-bottom: 10px;
}

.score-meaning {
    color: #2d3748;
}

/* 8 Individual Gauge Colors */
.pump-dump-risk-gauge {
    --gauge-color: #ef4444;
    --gauge-gradient: linear-gradient(90deg, #ef4444, #dc2626);
}
.exit-ability-gauge {
    --gauge-color: #3b82f6;
    --gauge-gradient: linear-gradient(90deg, #3b82f6, #2563eb);
}
.manipulation-monopoly-gauge {
    --gauge-color: #8b5cf6;
    --gauge-gradient: linear-gradient(90deg, #8b5cf6, #7c3aed);
}
.project-authenticity-gauge {
    --gauge-color: #f59e0b;
    --gauge-gradient: linear-gradient(90deg, #f59e0b, #d97706);
}
.short-term-suitability-gauge {
    --gauge-color: #eab308;
    --gauge-gradient: linear-gradient(90deg, #eab308, #ca8a04);
}
.long-term-suitability-gauge {
    --gauge-color: #10b981;
    --gauge-gradient: linear-gradient(90deg, #10b981, #059669);
}
.holder-growth-gauge {
    --gauge-color: #14b8a6;
    --gauge-gradient: linear-gradient(90deg, #14b8a6, #0d9488);
}
.volatility-gauge {
    --gauge-color: #f97316;
    --gauge-gradient: linear-gradient(90deg, #f97316, #ea580c);
}

/* =============================================================================
   VOLATILITY CONTEXT COMPONENT - ENHANCED GAUGE INFORMATION
   Add this section after the .volatility-gauge styles in main.css
   ============================================================================= */

/* Volatility Context Information Box */
.volatility-context-v1 {
    margin-top: 15px;
    padding: 16px;
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 10%, #fff7ed 100%);
    border: 2px solid #fed7aa;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.1);
    transition: all 0.3s ease;
}

.volatility-context-v1:hover {
    background: linear-gradient(135deg, #ffedd5 0%, #fdba74 10%, #ffedd5 100%);
    border-color: #fb923c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
}

/* Context Header with Icon */
.volatility-context-v1 .context-header {
    font-weight: 600;
    margin-bottom: 12px;
    color: #9a3412;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.volatility-context-v1 .context-header::before {
    content: "📊";
    font-size: 16px;
}

/* Individual Context Lines */
.volatility-context-v1 .context-line {
    margin: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

/* Status Colors for Context Values */
.volatility-context-v1 .within-expected {
    color: #059669;
    font-weight: 600;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #bbf7d0;
}

.volatility-context-v1 .outside-expected {
    color: #dc2626;
    font-weight: 600;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #fecaca;
}

/* Labels in Context Lines */
.volatility-context-v1 .context-line .context-label {
    color: #92400e;
    font-weight: 500;
    font-size: 12px;
}

.volatility-context-v1 .context-line .context-value {
    font-weight: 600;
    font-size: 12px;
}

/* =============================================================================
   SCORE CONTEXTS - COPY EXACT VOLATILITY STYLE FOR 7 NEW CONTEXTS
   (ADD AFTER EXISTING VOLATILITY CONTEXT STYLES)
   ============================================================================= */

/* Base Context Styling - Copy Exact Volatility Structure */
.pump-dump-risk-context-v1,
.exit-ability-context-v1,
.manipulation-monopoly-context-v1,
.project-authenticity-context-v1,
.short-term-suitability-context-v1,
.long-term-suitability-context-v1,
.holder-growth-context-v1 {
    margin-top: 15px;
    padding: 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Individual Context Background Colors (Match Gauge Colors) */
.pump-dump-risk-context-v1 {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 10%, #fef2f2 100%);
    border: 2px solid #fecaca;
}

.pump-dump-risk-context-v1:hover {
    background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 10%, #fee2e2 100%);
    border-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.exit-ability-context-v1 {
    background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 10%, #eff6ff 100%);
    border: 2px solid #bfdbfe;
}

.exit-ability-context-v1:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 10%, #dbeafe 100%);
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.manipulation-monopoly-context-v1 {
    background: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 10%, #f5f3ff 100%);
    border: 2px solid #ddd6fe;
}

.manipulation-monopoly-context-v1:hover {
    background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 10%, #ede9fe 100%);
    border-color: #8b5cf6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

.project-authenticity-context-v1 {
    background: linear-gradient(135deg, #fffbeb 0%, #fed7aa 10%, #fffbeb 100%);
    border: 2px solid #fed7aa;
}

.project-authenticity-context-v1:hover {
    background: linear-gradient(135deg, #fef3c7 0%, #fdba74 10%, #fef3c7 100%);
    border-color: #f59e0b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.short-term-suitability-context-v1 {
    background: linear-gradient(135deg, #fefce8 0%, #fde047 10%, #fefce8 100%);
    border: 2px solid #fde047;
}

.short-term-suitability-context-v1:hover {
    background: linear-gradient(135deg, #fef3c7 0%, #facc15 10%, #fef3c7 100%);
    border-color: #eab308;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.15);
}

.long-term-suitability-context-v1 {
    background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 10%, #f0fdf4 100%);
    border: 2px solid #bbf7d0;
}

.long-term-suitability-context-v1:hover {
    background: linear-gradient(135deg, #dcfce7 0%, #86efac 10%, #dcfce7 100%);
    border-color: #10b981;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.holder-growth-context-v1 {
    background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 10%, #ecfdf5 100%);
    border: 2px solid #a7f3d0;
}

.holder-growth-context-v1:hover {
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 10%, #d1fae5 100%);
    border-color: #14b8a6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.15);
}

/* Context Headers - Copy Exact Volatility Style */
.pump-dump-risk-context-v1 .context-header,
.exit-ability-context-v1 .context-header,
.manipulation-monopoly-context-v1 .context-header,
.project-authenticity-context-v1 .context-header,
.short-term-suitability-context-v1 .context-header,
.long-term-suitability-context-v1 .context-header,
.holder-growth-context-v1 .context-header {
    font-weight: 600;
    margin-bottom: 12px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    letter-spacing: 0.3px;
}

/* Context Lines - Copy Exact Volatility Style */
.pump-dump-risk-context-v1 .context-line,
.exit-ability-context-v1 .context-line,
.manipulation-monopoly-context-v1 .context-line,
.project-authenticity-context-v1 .context-line,
.short-term-suitability-context-v1 .context-line,
.long-term-suitability-context-v1 .context-line,
.holder-growth-context-v1 .context-line {
    margin: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Context Text - Copy Exact Volatility Style */
.pump-dump-risk-context-v1 span,
.exit-ability-context-v1 span,
.manipulation-monopoly-context-v1 span,
.project-authenticity-context-v1 span,
.short-term-suitability-context-v1 span,
.long-term-suitability-context-v1 span,
.holder-growth-context-v1 span {
    color: #374151;
    font-weight: 500;
    font-size: 12px;
}

.pump-dump-risk-context-v1 strong,
.exit-ability-context-v1 strong,
.manipulation-monopoly-context-v1 strong,
.project-authenticity-context-v1 strong,
.short-term-suitability-context-v1 strong,
.long-term-suitability-context-v1 strong,
.holder-growth-context-v1 strong {
    font-weight: 600;
    color: #1f2937;
}

/* Performance Analysis Styles */
.performance-analysis {
    margin-top: 50px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 30px;
    border: 2px solid #e2e8f0;
}

.performance-analysis h3 {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 25px;
    text-align: center;
}

.performance-distribution h4 {
    font-size: 16px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 15px;
}

.distribution-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.distribution-item {
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
}

.distribution-item.excellent { border-color: #10b981; }
.distribution-item.good { border-color: #3b82f6; }
.distribution-item.average { border-color: #f59e0b; }
.distribution-item.poor { border-color: #ef4444; }
.distribution-item.very-poor { border-color: #dc2626; }

.distribution-item .count {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
}

.distribution-item .label {
    font-size: 12px;
    font-weight: 500;
    color: #4a5568;
}

.analysis-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* CHANGED: 3 to 2 */
    gap: 25px;
}

.analysis-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e2e8f0;
}

.analysis-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 15px;
}

.analysis-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.analysis-section li {
    font-size: 13px;
    line-height: 1.4;
    color: #4a5568;
    margin-bottom: 8px;
    padding-left: 15px;
    position: relative;
}

.analysis-section li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--gauge-color, #3b82f6);
}

/* Enhanced Areas of Concern - No "Analysis pending" text */
.concerns li:empty,
.concerns li:contains("Analysis pending"),
.concerns li:contains("analysis pending") {
    display: none !important;
}

/* Ensure concerns show real risks */
.analysis-section.concerns {
    background: #fef2f2;
    border-color: #fecaca;
}

.analysis-section.concerns h4 {
    color: #dc2626;
}

.analysis-section.concerns li:before {
    content: "⚠️";
    color: #dc2626;
}

.strengths li:before { color: #10b981; }
.concerns li:before { color: #ef4444; }
.recommendations li:before { color: #3b82f6; }

/* =============================================================================
   NEW: INFORMATIONAL BANNERS - MATCHING UPDATE BANNER.JPG STYLE
   ============================================================================= */

/* Base Banner Styling - Following the green banner example from the image */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    margin: 24px;
    border-radius: 12px; /* Lightly rounded corners as requested */
    border: 1px solid;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.info-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-banner .banner-icon {
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.info-banner .banner-content {
    flex: 1;
}

.info-banner .banner-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 15px;
}

.info-banner .banner-text {
    font-size: 14px;
    line-height: 1.6;
}

/* Growth Analysis Banner - Blue/Info style */
.growth-analysis-info-banner {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.growth-analysis-info-banner .banner-title {
    color: #1d4ed8;
}

/* Holders Categories Banner - Green/Success style */
.holders-categories-info-banner {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.holders-categories-info-banner .banner-title {
    color: #15803d;
}

/* Top Holders Distribution Banner - Yellow/Warning style */
.top-holders-info-banner {
    background: #fffbeb;
    border-color: #fed7aa;
    color: #92400e;
}

.top-holders-info-banner .banner-title {
    color: #d97706;
}

/* Liquidity Analysis Banner - Light Red/Security theme */
.liquidity-analysis-info-banner {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.liquidity-analysis-info-banner .banner-title {
    color: #dc2626;
}

/* Lockers & Vesting Banner - Light Purple/Trust theme */
.lockers-vesting-info-banner {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6b21a8;
}

.lockers-vesting-info-banner .banner-title {
    color: #7c3aed;
}

/* Insider Networks Banner - Light Orange/Investigation theme */
.insider-networks-info-banner {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.insider-networks-info-banner .banner-title {
    color: #ea580c;
}

/* Creator History Banner - Light Cyan/Information theme */
.creator-history-info-banner {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #064e3b;
}

.creator-history-info-banner .banner-title {
    color: #059669;
}

/* Acquisition Methods Banner - Light Yellow/Growth theme */
.acquisition-methods-info-banner {
    background: #fefce8;
    border-color: #fde047;
    color: #713f12;
}

/* =============================================================================
   STANDARDIZED BANNERS - MISSING CSS FOR RUG PULL RISK ANALYSIS
   Copy the "Low Liquidity Lock" banner style but preserve distinctive colors
   ============================================================================= */

/* Base Standardized Banner - Same style as "Low Liquidity Lock" banner */
.standardized-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin: 16px 24px 24px 24px; /* Proper margins - NOT stuck to edges */
    border-radius: 12px; /* Same rounded corners */
    border: 2px solid; /* Same border thickness */
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Same shadow */
    transition: all 0.3s ease;
}

/* Banner Content Wrapper */
.banner-content-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Banner Icon */
.banner-content-wrapper .banner-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* Banner Text Content */
.banner-text-content {
    flex: 1;
    line-height: 1.4;
}

/* RED THEME - Rugged Status Banner */
.standardized-banner.rugged-banner {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.standardized-banner.rugged-banner .banner-icon {
    color: #dc2626;
}

/* BLUE THEME - Risk Score Banner */
.standardized-banner.score-banner {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.standardized-banner.score-banner .banner-icon {
    color: #2563eb;
}

/* YELLOW THEME - Mutable Banner */
.standardized-banner.mutable-banner {
    background: #fefce8;
    border-color: #fde047;
    color: #713f12;
}

.standardized-banner.mutable-banner .banner-icon {
    color: #ca8a04;
}

/* GREEN THEME - Other Risks Banner */
.standardized-banner.other-risks-banner {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.standardized-banner.other-risks-banner .banner-icon {
    color: #16a34a;
}

/* Hover Effects for All Standardized Banners */
.standardized-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   HOLDERS IN/OUT LAYOUT STYLES - STACKED VERTICALLY WITH HORIZONTAL GRIDS
   Added at the end of analyzer.css - No conflicts with existing styles
   ============================================================================= */

/* Individual subsection styling - Full width, stacked vertically */
.holders-in-subsection,
.holders-out-subsection {
    padding: 20px;
    border-radius: 12px;
    border: 2px solid;
    margin: 24px;
    margin-bottom: 24px;
}

/* Holders In - Green theme with white background */
.holders-in-subsection {
    background: white;
    border-color: #bbf7d0;
}

/* Holders Out - Red theme with white background */
.holders-out-subsection {
    background: white;
    border-color: #fecaca;
}

/* Subsection titles */
.holders-in-subsection .subsection-title,
.holders-out-subsection .subsection-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.holders-in-subsection .subsection-title {
    color: #166534;
}

.holders-out-subsection .subsection-title {
    color: #991b1b;
}

/* Subsection icons */
.holders-in-subsection .subsection-icon,
.holders-out-subsection .subsection-icon {
    font-size: 18px;
}

/* Horizontal grids for categories - Same as main categories grid */
.holders-in-grid,
.holders-out-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    padding: 0; /* Remove padding since subsection already has padding */
}

/* Enhanced card styling for Holders In/Out */
.holders-in-card,
.holders-out-card {
    transition: all 0.3s ease;
}

.holders-in-card:hover {
    background: #f0fdf4;
    border-color: #22c55e;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15);
}

.holders-out-card:hover {
    background: #fef2f2;
    border-color: #ef4444;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);
}

/* Category status text styling */
.category-status {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-top: 4px;
    font-style: italic;
}

/* =============================================================================
   TOP HOLDERS RANKING LIST STYLES - ENHANCED VISUAL APPEAL
   ============================================================================= */

/* Top holders list container */
.top-holders-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual top holder items */
.top-holder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.top-holder-item:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.top-holder-item:last-child {
    margin-bottom: 0;
}

/* Left side - Rank information */
.holder-rank-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Rank number styling - Made bigger and more appealing */
.holder-rank-number {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    font-weight: 800;
    font-size: 18px; /* Made bigger */
    padding: 8px 12px;
    border-radius: 12px;
    min-width: 44px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
    letter-spacing: 0.5px;
}

/* Rank label styling - Made more appealing */
.holder-rank-label {
    font-weight: 600;
    font-size: 15px; /* Slightly bigger */
    color: #1f2937;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Percentage value styling - Made bigger */
.holder-percentage {
    font-weight: 700;
    font-size: 20px; /* Made bigger */
    color: #059669;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #bbf7d0;
    min-width: 80px;
    text-align: center;
}

/* Alternative color schemes for different ranks */
.top-holder-item:nth-child(1) .holder-rank-number {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
}

.top-holder-item:nth-child(2) .holder-rank-number {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    box-shadow: 0 3px 8px rgba(107, 114, 128, 0.3);
}

.top-holder-item:nth-child(3) .holder-rank-number {
    background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
    box-shadow: 0 3px 8px rgba(146, 64, 14, 0.3);
}

/* Wallet address styling */
.holder-address {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #6b7280;
    background: #f8fafc;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    margin-left: 12px;
}

/* =============================================================================
   FIX: Insider Networks Layout Adjustments
   ============================================================================= */

/*
 * 1. This adds horizontal padding to the "Insiders Detected:" status line,
 * pushing the text away from the card's edges.
*/
.insider-status {
    padding-left: 24px;
    padding-right: 24px;
}

/*
 * 2. This adds padding to the main results container. Any content that appears
 * inside (like the green banner or a list of networks) will now be neatly
 * inset from the card's edges, solving the second part of your request.
*/
.insider-networks-container {
    padding: 16px 24px 24px 24px; /* Top, Right, Bottom, Left */
}

/*
 * 3. This ensures that when a "no risk" banner appears, it doesn't have
 * extra top margin, since the container now has padding.
*/
.insider-networks-container .no-risk-indicator {
    margin-top: 0;
}

/* =============================================================================
   FIX: Lockers & Vesting Layout Adjustments
   ============================================================================= */

/*
 * 1. This adds padding to the lockers results container. The "No Lockers"
 * banner (or a list of lockers) will now be neatly inset from the card's edges.
*/
.lockers-container {
    padding: 16px 24px 24px 24px; /* Top, Right, Bottom, Left */
}

/*
 * 2. This ensures the "No Lockers" banner doesn't have extra top margin
 * when it appears inside the newly padded container.
*/
.lockers-container .no-lockers-indicator {
    margin-top: 0;
}

/* =============================================================================
   HIDE UNWANTED UI ELEMENTS - ADMIN CONTROLS AND DELETE BUTTONS
   ============================================================================= */

/* Hide admin delete/configuration buttons in analyzer sections */
.insider-networks-container .admin-delete-btn,
.insider-networks-container .delete-btn,
.insider-networks-container .admin-configure-btn,
.insider-networks-container .close-btn,
.creator-history-container .admin-delete-btn,
.creator-history-container .delete-btn,
.creator-history-container .admin-configure-btn,
.creator-history-container .close-btn,
.section-card .admin-delete-btn,
.section-card .delete-btn,
.section-card .admin-configure-btn,
.section-card .close-btn,
.analysis-section .admin-delete-btn,
.analysis-section .delete-btn,
.analysis-section .admin-configure-btn,
.analysis-section .close-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide any floating admin controls positioned in top-right corners */
.card-header .admin-control,
.card-header .delete-control,
.card-header .close-control,
.section-header .admin-control,
.section-header .delete-control,
.section-header .close-control {
    display: none !important;
}

/* Hide admin controls positioned absolutely */
.card-header::after,
.section-header::after,
.card-header .admin-icon,
.section-header .admin-icon {
    display: none !important;
}

/* Target potential admin buttons by position */
.card-header > *:last-child[class*="admin"],
.card-header > *:last-child[class*="delete"],
.card-header > *:last-child[class*="close"],
.section-header > *:last-child[class*="admin"],
.section-header > *:last-child[class*="delete"],
.section-header > *:last-child[class*="close"] {
    display: none !important;
}

/* Hide any floating admin controls */
.admin-control,
.admin-panel-control,
.section-admin-control,
.card-admin-control {
    display: none !important;
}

/* Hide delete icons and buttons specifically */
.delete-icon,
.remove-icon,
.close-icon,
[class*="delete"]:not(.analysis-section):not(.section-card):not(.card):not(.container),
[class*="remove"]:not(.analysis-section):not(.section-card):not(.card):not(.container),
[class*="admin-control"] {
    display: none !important;
}

/* Target WordPress admin bar elements that might be bleeding through */
#wpadminbar,
.admin-bar-control,
.wp-admin-control {
    display: none !important;
}

/* Hide any absolutely positioned controls in the top-right */
.card-header {
    position: relative;
}

.card-header > *[style*="position: absolute"],
.section-header > *[style*="position: absolute"] {
    display: none !important;
}

/* Ensure no admin overlays appear */
.admin-overlay,
.admin-toolbar,
.section-toolbar {
    display: none !important;
}

/* =============================================================================
   HIDE UNWANTED SECTIONS - UPDATED DESIGN REQUIREMENTS
   ============================================================================= */

/* Hide Score Distribution section from Performance Analysis */
.performance-distribution,
.distribution-grid,
.score-distribution-section {
    display: none !important;
}

/* Hide Recommendations section from Performance Analysis */
.recommendations-section,
.analysis-section.recommendations {
    display: none !important;
}

/* Hide Final Results Card completely */
#finalResultsCard,
.final-results-card,
.final-scores-grid {
    display: none !important;
}

/* Hide strange colored number indicators from validation */
.validation-indicator,
.colored-number,
.validation-number {
    display: none !important;
}

/* Hide gauge needles and arrows */
.gauge-needle,
.gauge-arrow,
.gauge-pointer,
.needle-line {
    display: none !important;
}

/* =============================================================================
   RESPONSIVE: STACK RUG PULL RISK ANALYSIS SECTIONS ON MOBILE
   Ensures Risk Indicators, Rugged Status, Risk Score, Mutable, Other Risks
   appear one below another on small screens (instead of side-by-side)
   ============================================================================= */

/* Tablets and below */
@media (max-width: 768px) {
    /* Top and Bottom tier grids become single-column */
    .section-a-container,
    .section-b-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Any two-column layouts within Rug sections stack vertically */
    .rug-two-column,
    .two-column {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Slightly tighten paddings for compact mobile view */
    .section-content,
    .rug-info-box,
    .rug-warning-box,
    .rug-danger-box {
        padding: 16px;
    }

    .rug-metric-card {
        padding: 18px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .section-a-container,
    .section-b-container,
    .rug-two-column,
    .two-column {
        gap: 12px;
    }

    .section-content,
    .rug-info-box,
    .rug-warning-box,
    .rug-danger-box {
        padding: 12px;
    }

    .rug-metric-card {
        padding: 16px;
    }
}