.cost-view {
    padding: 24px;
    
    .cost-view-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        
        h3 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .cost-view-total {
            display: flex;
            align-items: baseline;
            gap: 8px;
            
            .label {
                font-size: 14px;
                color: rgba(255, 255, 255, 0.6);
            }
            
            .value {
                font-size: 24px;
                font-weight: 600;
                color: #34d399;
            }
        }
    }
    
    .cost-view-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
        
        .stat {
            background: rgba(255, 255, 255, 0.05);
            padding: 16px;
            border-radius: 8px;
            text-align: center;
            
            .stat-label {
                display: block;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.6);
                margin-bottom: 4px;
            }
            
            .stat-value {
                display: block;
                font-size: 20px;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.9);
            }
        }
    }
    
    .cost-view-models {
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .model-cost {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 16px;
            transition: all 0.2s ease;
            
            &:hover {
                background: rgba(255, 255, 255, 0.05);
                border-color: rgba(255, 255, 255, 0.15);
            }
            
            .model-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                
                .model-name {
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 0.9);
                }
                
                .model-total {
                    font-size: 14px;
                    font-weight: 600;
                    color: #60a5fa;
                }
            }
            
            .model-progress {
                height: 4px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 2px;
                overflow: hidden;
                margin-bottom: 8px;
                
                .model-progress-bar {
                    height: 100%;
                    background: linear-gradient(90deg, #60a5fa 0%, #34d399 100%);
                    border-radius: 2px;
                    transition: width 0.3s ease;
                }
            }
            
            .model-details {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
                
                .detail {
                    font-size: 12px;
                    color: rgba(255, 255, 255, 0.6);
                    
                    &.cached {
                        color: #fbbf24;
                    }
                }
            }
        }
    }
    
    .cost-view-empty {
        text-align: center;
        padding: 48px 24px;
        
        p {
            margin: 0;
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
        }
    }
}