.index-page {
    margin-top: 80px;
    background: radial-gradient(circle at 20% 20%, rgba(var(--mud-palette-primary-rgb), 0.08), transparent 32%),
                radial-gradient(circle at 80% 0%, rgba(var(--mud-palette-secondary-rgb), 0.08), transparent 34%);
    padding-bottom: 48px;
}

.index-hero {
    background: linear-gradient(120deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: white;
}

.index-metric-tile {
    background-color: rgba(255, 255, 255, 0.1);
}

.index-muted {
    opacity: 0.85;
}

.index-search-card {
    background-color: var(--mud-palette-surface);
}

.landing-hero {
    background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.1) 0%, rgba(var(--mud-palette-secondary-rgb), 0.08) 100%);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.16);
    border-radius: 18px;
    padding: 28px 18px;
    margin: 0 0px;
    max-width: 100%;
    box-shadow: 0 18px 35px -20px rgba(var(--mud-palette-primary-rgb), 0.6);
}

.hero-content {
    max-width: 640px;
}

.hero-actions {
    gap: 12px;
}

.hero-actions .mud-button {
    min-width: 180px;
}

.hero-metrics {
    gap: 12px;
}

.hero-metrics .metric-card {
    background: linear-gradient(180deg, rgba(var(--mud-palette-surface-rgb), 1) 0%, rgba(var(--mud-palette-primary-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.14);
    border-radius: 12px;
    padding: 16px 18px;
}

.hero-sidecard {
    padding: 22px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(var(--mud-palette-surface-rgb), 1) 0%, rgba(var(--mud-palette-secondary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.12);
    box-shadow: 0 12px 24px -18px rgba(var(--mud-palette-secondary-rgb), 0.7);
}

.hero-sidecard .mud-chip {
    font-weight: 600;
}

.filter-panel {
    margin-top: 28px;
    padding: 20px 18px;
    border-radius: 14px;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.12);
    background: rgba(var(--mud-palette-surface-rgb), 0.96);
    box-shadow: 0 14px 34px -28px rgba(var(--mud-palette-primary-rgb), 0.8);
}

.tag-chipset .mud-chip {
    margin: 4px;
    transition: all 140ms ease;
}

.tag-chipset .mud-chip.mud-chip-outlined {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.32);
    color: var(--mud-palette-primary);
}

.tag-chipset .mud-chip.mud-chip-selected,
.tag-chipset .mud-chip.mud-chip-filled {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    color: white;
    box-shadow: 0 8px 18px -12px rgba(var(--mud-palette-primary-rgb), 0.9);
    border-color: transparent;
}

.tag-chipset .mud-chip:hover {
    transform: translateY(-1px);
}

.product-grid {
    margin-top: 16px;
    margin-bottom: 64px;
}

.product-card {
    border-radius: 14px;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.12);
    background: linear-gradient(180deg, rgba(var(--mud-palette-surface-rgb), 1) 0%, rgba(var(--mud-palette-primary-rgb), 0.04) 100%);
    box-shadow: 0 12px 24px -18px rgba(var(--mud-palette-primary-rgb), 0.8);
}

.product-card .mud-card-header {
    padding-bottom: 0;
}

.product-card .mud-chip {
    font-weight: 600;
    background: rgba(var(--mud-palette-info-rgb), 0.1);
    border-color: rgba(var(--mud-palette-info-rgb), 0.35);
    color: var(--mud-palette-info);
}

.product-card .mud-card-actions {
    padding: 0 16px 16px;
    justify-content: space-between;
    gap: 12px;
}

.product-meta {
    gap: 12px;
}

.empty-state {
    padding: 36px;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed rgba(var(--mud-palette-primary-rgb), 0.32);
    background: linear-gradient(145deg, rgba(var(--mud-palette-primary-rgb), 0.06), rgba(var(--mud-palette-secondary-rgb), 0.04));
}

.hero-metrics .metric-label,
.product-meta .index-muted {
    letter-spacing: 0.02em;
}

.trend-chip {
    font-weight: 700;
    color: #2b2b2b;
}

.trend-chip.rank-1 {
    background: linear-gradient(135deg, #ffd700 0%, #ffb400 100%);
    color: #3d2b00;
}

.trend-chip.rank-2 {
    background: linear-gradient(135deg, #e0e0e0 0%, #bfbfbf 100%);
    color: #2f2f2f;
}

.trend-chip.rank-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #b06f26 100%);
    color: #2f1c00;
}

@media (max-width: 960px) {
    .landing-hero {
        padding: 24px 18px;
    }

    .hero-actions .mud-button {
        width: 100%;
    }

    .filter-panel {
        padding: 16px;
    }
}

.version-text {
    color: var(--mud-palette-info);
    font-weight: 700;
}