* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: #1a1f35;
    --bg-card-hover: #222844;
    --border-color: #2d3548;
    --border-glow: #10b981;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --success-border: rgba(16, 185, 129, 0.3);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --warning: #f59e0b;
    --info: #3b82f6;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Animated Stars Background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 200px white, 200px 100px white, 300px 300px white,
        400px 150px white, 500px 250px white, 600px 100px white,
        700px 300px white, 800px 200px white, 900px 150px white,
        1000px 250px white, 1100px 100px white, 1200px 300px white,
        150px 350px white, 250px 450px white, 350px 150px white,
        450px 350px white, 550px 450px white, 650px 250px white,
        750px 350px white, 850px 150px white, 950px 450px white,
        50px 500px white, 150px 600px white, 250px 550px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    box-shadow: 
        120px 220px white, 220px 120px white, 320px 320px white,
        420px 170px white, 520px 270px white, 620px 120px white,
        720px 320px white, 820px 220px white, 920px 170px white,
        1020px 270px white, 1120px 120px white, 1220px 320px white;
    animation: twinkle 4s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeInDown 0.6s ease-out;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Success Banner */
.success-banner {
    background: linear-gradient(135deg, var(--success-bg), rgba(16, 185, 129, 0.05));
    border: 2px solid var(--success-border);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    display: none;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
    animation: slideInDown 0.5s ease-out, pulse 2s infinite;
}

.success-banner.show {
    display: flex;
}

.success-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: bounce 1s infinite;
}

.success-content h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--success);
}

.success-content p {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.success-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-glow);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.blocked-count {
    color: var(--success);
}

.visible-count {
    color: var(--danger);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #059669);
    border-radius: 4px;
    transition: width 0.5s ease;
    width: 0%;
}

.stat-value span {
    font-size: 1.25rem;
}

/* Filter Section */
.filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

.filter-chips {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.chip:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-glow);
    transform: translateY(-1px);
}

.chip.active {
    background: linear-gradient(135deg, var(--success), #059669);
    border-color: var(--success);
    color: white;
}

.chip-icon {
    font-size: 1rem;
}

.reset-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.reset-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-glow);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Ad Grid */
.ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.ad-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: fadeInUp 0.6s ease-out both;
}

.ad-container:nth-child(1) { animation-delay: 0.1s; }
.ad-container:nth-child(2) { animation-delay: 0.15s; }
.ad-container:nth-child(3) { animation-delay: 0.2s; }
.ad-container:nth-child(4) { animation-delay: 0.25s; }
.ad-container:nth-child(5) { animation-delay: 0.3s; }
.ad-container:nth-child(6) { animation-delay: 0.35s; }

.ad-container:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15);
}

.ad-container.blocked {
    border-color: var(--success);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.ad-container.visible {
    border-color: var(--danger);
}

.ad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
}

.platform-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-weight: 500;
}

.status-badge.blocked {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.status-badge.visible {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge.detecting {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
    border: 1px solid rgba(59, 130, 246, 0.3);
    animation: pulse 2s infinite;
}

.ad-slot {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    padding: 1rem;
}

.blocked-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 150, 105, 0.1));
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.ad-container.blocked .blocked-overlay {
    display: flex;
    animation: fadeIn 0.5s ease-out;
}

.blocked-icon {
    color: var(--success);
    animation: scaleIn 0.5s ease-out;
}

.blocked-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.blocked-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.ad-footer {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--border-color);
}

.ad-name {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Footer */
.footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
}

.footer p {
    margin-bottom: 0.5rem;
}

.footer-note {
    font-size: 0.875rem;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .ad-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-section {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-chips {
        justify-content: center;
    }

    .success-banner {
        flex-direction: column;
        text-align: center;
    }

    .logo {
        font-size: 1.5rem;
    }
}

/* Hide actual ad content when visible */
.ad-container.visible .adsbygoogle,
.ad-container.visible .fb-ad,
.ad-container.visible .OUTBRAIN,
.ad-container.visible [data-ad-type] {
    display: none !important;
}

.ad-container.visible .ad-slot::after {
    content: '📢 Advertisement Loading...';
    color: var(--text-muted);
    font-size: 0.875rem;
}